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.

Another problem I ran into is the way I drew the waves. You can see how labor intensive it is from the portion of my code below:

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.

No Comments

Post A Comment