week02 02 interactivity - UX-UI-Design-Lab/DesignAesthetics3 GitHub Wiki

agenda:

  1. drawing lines with variables
  2. adding interactivity to the pattern
  3. activity: op(-tical illusion) art
  4. review of assignment01, adjectives
  5. Q&A and troubleshooting

drawing lines with variables

Let's start with one line.

  • Then, repeat the line in a regular interval.

  • You will decide the size of the interval (ex. 10px) and add up the increase to the original point.

  • To make it easy, let's make variables for the point coordinates. (ex. positionX, counterI, intervalG)

Then, try FOR.

adding interactivity to the pattern

  1. Let's change the initial value of the starting point with mouse position (mouseX or mouseY).
  2. Let's change the thickness of the line (strokeWeight) - then, experiment to change the thickness by mouse position
  3. Let's change the color of the line (stroke) - then, experiment with mouse position

maybe helpful to use noFill() or noStroke, and test by commenting background()

optional: responsive window size using windowHeight, windowWidth, and windowResized();

https://p5js.org/reference/#/p5/windowResized

  • draw the canvas at the center of the full screen window

optional: understanding arc (and radian system)

https://p5js.org/reference/#/p5/arc

radian system

form Textbook - Make: Getting started with p5.js by McCarthy, Reas & Fry, p.24

activity: op(-tical illusion) art

https://www.tate.org.uk/art/art-terms/o/op-art

  1. draw one unit shape - repeat the shape by subtle changes
  2. make a color changes when repeating (gradation)
  3. make the change interactive to the mouse position
  • line(s)
  • triangle

review of assignment01, adjectives

  1. Think of one adjective you would name for your assignment01.
  2. You will be asked to show your assignment01 without any words (about 5sec) - and we will guess three adjectives that can explain your work in the survey form.
  3. reveal how similar or different the collected adjectives would be like.

(note: this is called Impression Test, one of UX research methods)

If we have time we may try transform (translate, rotate, scale).

⚠️ **GitHub.com Fallback** ⚠️