︎



Documentation 03

// Pattern Generating


video 3.1 step 1: setting up 1 column of random falling down rows

I started with building this two columns of  repetivie random rows falling down effect, drawing direct inspiration from Ryoji Ikeda’s work Data Matrix. I did this by building up what we have done in the worksheet. But I changed the columns to rows while using the rowNumber a random number so it would fall down randomly with an animation. I did it with two rolls repeating,  but I then later noticed that I can write this as a function and call it in the draw loop. This is what I did next:

video 3.2a step 2: write this as a function and called it in the draw loop using random again

video 3.2a step 2: write this as a function and called it in the draw loop using
fixed values
Then
Then I noticed that I could actually call the function in a for loop so there will be multiple columns going on. I also want the effect that they are not happening all at the same time but in an animated sequence. So I make the xColumns variable animated in relation with time. Here is what I came up with next.

Now I get a random “pattern” that is not fixed using a lot of repetition. Yet I feel this is too simple and wanted to add more fixed pattern that is recognizable as the background. I started with the idea of having some concentric ellipses filling up the screen. Initially, I want all of the ellipses at the same ratio aligned at the top, then I decided to make them aligned in the middle instead to make it look more organized.
fig 3.1 trying to create ellipses aligned with each other according to their tops
since the code looked too messy I decided to write this individually on a new page first and copy paste it to the mother codes. I literally spent a lot of time trying to figure out the algorithm for ellipses aligned on top and I felt so dumb, for this should be a question a primary school student could stop at an instance.
fig 3.2 made concentric ellipses instead to make it look more organized
After making the concentric ellipses, I started with animating it with more repetitions. Here is what I got by calling this new function in draw loop using random arguments for its diameter.
video 3.3 creating concentric ellipses
I copy pasted the codes to the previous code and started to adjust them further. Yet it didn’t look very good so instead of only having the concentric ellipses in the middle, I wanted them to be in a grid. So here is what I got:
fig 3.3a grid of concentric circles
I then, in order to make more variations in the concentric circles to make more repetitive patterns, tested with animating their diameters. Yet I noticed that at some point, they would not align to the center of the screen:

I am not satisfied with the color and the pattern alignment, so I used the % function to let the background change color while the concentric ellipses change pattern every half a second. Here is the final outcome:



//Questions
1. My pattern goes slower and slower when it is running, why is that happening? Is it because I set too many random and animations for the loop for the browser to load? I can also hear my computer’s fan being really loud when running it. Is this a hardware problem or a software one?