14 Sep Trippy Geometric Boat
Last week I did my first p5 sketch, which is a nice geometric boat sitting quietly against a black background.
And this week’s mission is to make it move, make it random, and make it interactive. The goal is to include:
- One element controlled by the mouse.
- One element that changes over time, independently of the mouse.
- One element that is different every time you run the sketch.
Below is what I came up with:
Fancy, isn’t it? In my case, the element controlled by mouse is the shiny moon; the boat moves overtime, independently of the mouse; and the element that’s different every time you run the sketch is the frame rate of the animation.
The frame rate is set to be a random number between 10 and 120.
I did run into a couple problems and questions along the process:
At first I tried to do object oriented programming like I do with processing, so that I can just group all the triangles of the boat into one object, program its functions and simply call the functions to the boat in “draw”. I looked up this example on p5’s website and tried to follow along. I gave up after half an hour because I was really confused by how the code was set up, the keyword”this”. And I don’t even know what “Jitter” is. I decided to do more research/learning before I try something at an advanced level like this.
One way I can think of to simplify the process is to move the background color function back to “setup”. This way I can put something like “waves.x2=waves.x2+100” to draw a bunch of identical waves in a row. I cannot really use that in this sketch because I have to animate the boat without leaving traces across screen.
This is what it would look like if I do that (and the background turns to white for reasons unknown).
I ended up doing it the old fashioned way, coding every bezier one by one. Hopefully I can find a better solution in the future.