Workshop Contents

  1. Warm up （will be covered in slides, feel free to rewatch)

    • Introduction

    • Set up

  2. Basic shapes and motions （will be covered in slides, feel free to rewatch)

    • Basic shapes functions: rect, ellipse, triangle

    • fill, stroke, strokeWeight;

    • Basic motions: random();

    • Task 1: getting familiar with shapes functions and random() (feel free to do it or you can jump to the next

  3. Functions of basic Interactivity （will be covered in slides, feel free to rewatch the detailed walkthrough)

    • rotate

    • mouse position, frameCount

    • for-loop to create patterns or repetitive patterns.

    • More detailed codes file

  4. Creating Your Own Poster with the start files :

    1. version with comment,

    2. More patterns done by for-loop & rotate(frameCount)

    3. version without comment(in case your eyes are tired of looking at comments)

    4. save your sketches and put them in Figma

To start your posters:

You don’t have to write anything new (you can if you want to) but instead:

  1. Tweak/change the parameters: size, location, speed,

  2. Change shapes (rect to ellipse, to triangle, to line etc) and be CREATIVE!!

  3. Change colors, outline stroke

If you are not sure about any functions, check the documentation⬇️：

p5js.org/reference/ or Google is always your friend.

  1. Warm up（5min ～ 8min）

Visit: https://editor.p5js.org/ 

  1. Create an account (you can created with your google account)

  2. Change background(220); to background(0);

  3. Change createCanvas(400,400); to change createCanvas(windowWidth,windowHeight);

  4. Click “run” (the play button on top-left);

  5. Resize your browser window, you will find the canvas is not resizing while you are dragging

  6. Copy and paste:

     function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

At the end of your sketch 

7. Click “run” and resize your browser 

Note:

  • background(220) is exactly same as background(220,220,220); which means each values (RGB) is set to 220.

2. Basic Shapes and Motions

Visit: https://editor.p5js.org/liao.xiaohan/sketches/vgTBE-7BA

  1. Go to File > Duplicate

  2. Click “run” (the play button on top-left);

  3. Please take a look at this code walkthrough videos while keep the program running.

 

Task 1: Messing with shapes (8min ~ 15min)

Now, you have basic ideas of drawing shapes in p5.js. We can start to get messy with these functions.

1.Go to https://editor.p5js.org/liao.xiaohan/sketches/ZP8kgqcMp

2.Files > Duplicate (and then you just fork this file under your sketch folder)

3.Change the text to your sketch name

4.Fill each shapes with different color by adjust RGB value in fill(…)

5.Outline each shapes with different color adjust RGB value in stroke(…)

6.Change the thickness by adjust strokeWeight(…)

7.Change the shape’s location

8.Change the size of shapes

9.Using random() to apply “flickering effect” to one of shapes

 

3. Functions of basic Interactivity

These coding files introduce more about rotate and for-loop. If you are interested to learn more about for-loop and rotate you can:

1. Go to https://editor.p5js.org/liao.xiaohan/sketches/-n3x4ikz7

2. File > duplicate

3. Make sure “Auto-refresh” is checked”

4. Watch the walkthrough tutorial video ⬇️

For-loop details:

*If you are wondering about how for-loops works, you can check this sketch

 

4.Creating Your Own Poster with the start files

  1. version with comment,

  2. More patterns done by for-loop & rotate(frameCount)

  3. version without comment(in case your eyes are tired of looking at comments)

  4. save your sketches and put them in Figma

To start with:

You don’t have to write anything new (you can if you want to) but instead:

  1. Tweak/change the parameters: size, location, speed,

  2. Change shapes (rect to ellipse, to triangle, to line etc) and be CREATIVE!!

  3. Change colors, outline stroke

Tips….

  1. “Syntax error” is very common. Usually it is due to “typo”. Do not panic and check the console and refer to the line number to correct

  2. “Comment out” is a good way to check the functionalities of your code. You can comment out the lines you think is buggy and test if your assumption is right.

  3. Embrace “errors”, “accidents”. Happy accidents is the key to make generative design.

  4. Start with baby-step. Modularize your work by separating one big task to small tasks.

  5. Asking Google.

  6. Experimenting and reading Documentations

  7. Name your variable correctly.

  8. Recreate by looking at others’ code to LEARN but remember to credit if your are using others’ resources.

 

References