02 OPPOSITES
ICM WEEK2



GO TO:
OPPOSITE
P5.JS SKETCH



For week 2’s creative assignment OPPOSITES, I chose to visualize the antonyms of “life” and “death”, or “lively” and “faded”. I created this sketch where when you click on the screen, various colored flowers grow from where you clicked.



PROCESS

My intial thought for the project was to create something where the more you clicked, the messier it gets. I didn’t think of the logistics or context for this idea, but I decided to move forward with the clicking method.



I started with playing around with the mousePressed function where I change the fill color of a shape by clicking anywhere on the screen.



I also played around with the mouseReleased function, where the changed color immediately changes back after mouse is not being clicked.



I wanted to see if there is a way where I could draw a new shape everytime I clicked. Initially I drew all the shapes  in the draw function, and it was not working untill I put them under the mousePressed function. That makes sense...But I’ve never not have something in the draw function, which is why I thought it was too weird to try.




Once I figured out how to draw new shapes each time I clicked, I immediately thought of the process of growth, and that led me to wanting to create something in the shape of flowers.

We’ve only learned how to draw one shape at a time so far. In order to draw multiple shapes at the same time as a single pattern, I looked up how to do it and it let me to the for loop. I watched a few tutorials on how to create multiple shapes at once, but most of them created shapes along a straight line, instead of a circle like how I wanted my flowers to be. I used the rotate function that was briefly introduced at the end of last class, and used PI to rotate them.



One thing I learned from tutorials this week was how to create different fill colors based on the canvas location. From what I understood it translated the canvas to the RGB map and used the coorinates as RGB values? But need to make sure!




I then used some shapes to create a flower pot and a few dead leafs to give context to the sketch.



And finally after a few clicks, I had a blooming pot of flowers!

SOLVED PROBLEMS

  • Draw multiple shapes at once using for loops
  • Rotate shapes using PI
  • mousePressed and mouseRelease functions
  • translate function to change location of the flowers


THINGS TO IMPROVE

  • How to make the flowers appear in front of the pot and stem? - or can the content in the mousePressed function appear in front of content in the draw function?


INDEX  NEXT
JESSIEZHAI