Blog: Comp Media

ITPG-GT 2233-002

Tutor: Luisa

WEEK 3

In general this week, you should work with rule-based animation, motion, and interaction.

Part I: 

Try making a rollover, button, or slider from scratch.

Work 1 title: Expand & Rotate

 

Preview picture:

week3 2.jpg

Work link - 

https://www.openprocessing.org/sketch/968930

There in the frame you can see a red circle and a red square on the two side.

Please try to drag the circle to the center of the frame.

Then move it away.

Then please drag the square to the center.

Then please have a try, to move both the circle and the square to the center of the picture.

(p5 editor link: https://editor.p5js.org/RisottoDa/sketches/vQ1oAXOef)

Part II: 

Tie the above two together and have an interface element control the visual design or behavior of other elements in your sketch.

Work 2 title: Practice week3

 

Preview picture:

week3.jpg

Work link - 

https://www.openprocessing.org/sketch/970126

So combined with Tracey's work, this is what we've achieved. There is still a circle, which is purple and ever-changing, that when dragging to the center will still cause the big geometric layers to expand; however now the rotation function is triggered by moving the user's mouse.

Tracey has also changed the color to make it richer in terms of aesthetics

(p5 editor link: https://editor.p5js.org/RisottoDa/sketches/Em1Cn4kZ7)