Jumping into p5.js

After muddling my way through learning Processing River the past few weeks I have started working with p5.js. Most of the same concepts transfer over to p5.js and I feel a bit more comfortable writing Javascript than Java.

Here are a few things I messed around with last night. I started working out a vertical wave pattern on a grid and then messed with scale, rotation, and transitions to get some interesting results.

More messing around with gradients in Processing

I started playing around again with different ways to make a gradient in Processing other than a linear gradient. I started with this shape and by duplicating the shape. By adjusting the position with translate I can get gradients like below. These are pretty fun to run and see what slight tweaks in the number of duplicates and where the shape starts with on the canvas will give. The gradient itself comes from setting the alpha value in HSBA colors.

Playing with lines drawn on a grid

For the last day, I was trying to figure out a way to make a packing algorithm in Processing (seriously, if anyone has any ideas I’d like to hear them). As that was an abject failure at this point I worked on a sketch using a grid with lines that draw in random cardinal directions from the starting x and y. There starts to be some really interesting layering happening when I cranked the iteration up, varied the stroke weight and made the grid more condensed.

 

Gradients are hard in Processing

This took a while. Yesterday while watching the E3 2021 live stream I tried to work through how to create a gradient in Processing, specifically how I could apply it to an ellipse. I found a few ways to create them while searching but I wanted to try and see if I could work it out myself.

In order to get this to work, I had to draw 1px rectangles from the top to the bottom of the ellipse. I had already worked out a bit of the work in a previous sketch to get arcs of an ellipse and plot points on them. Using lerpColor I could tween between two colors at each pixel to get the gradient. From the top left arc, I found the mirror point on the top right arc and drew a rectangle from those two points, then continued down the arc to the middle. Then the same was done from the bottom left arc to the right.

Fair warning I’m still a bit new at Java programming and I’m sure there could be some improvements. If you have any suggestions on how I could improve this method I’m all ears.