week03 02 generative - UX-UI-Design-Lab/DesignAesthetics3 GitHub Wiki

agenda:

  1. animation
  2. (transform, optional)
  3. map
  4. activity: (simple classic) generative art
  5. review assignment02
  6. Q&A and troubleshooting

animation

We will play around the random function without noLoop() - which will show as if the drawing is moving/ animated.

Using variables will make the animation predictable/controllable.

Experiment with background(), either off or semitransparent --- then it will create a fadeout effect.

transform

(this can be interesting but may need to think with math)

We will explore how to control the drawing context - translate, rotate, scale, ... Important thing to remember is to check where is the origin of the transform. Sometimes may not be intuitive, so might be helpful to translate the origin to center or mouse cursor.

map()

map function is useful when you need to convert the scales. For example, geo-location data (longitude) for U.S.A. can be quite confusing. But if you must map the mainland of U.S.A. as the west end to 0 and the east end to 100 (so 100%), it is super handy to find the coordinate in that 0-100 scale. (California would be around 0 - 5, Cincinnati may be approximately 55?).

We will try map the mouse position onto the canvas size.

activity

You will generate a simple generative art (rule based art)

review: assignment02

We will review the assignment02. Suppose that your work is a CD cover design, what kind of music would fit? Pick one song/music and play to your classmates (about 1-2min).