Encoding Process:
Create a black canvas
the size of the canvas resizes with the size of the window of the browser
Draw a circle in the center of the canvas
add a thick stroke weight to the outline of the circle
make it white
make the fill color of the circle black, same as the canvas
add one to the x-coordinate of the circle every frame
once the x-coordinate gets larger than 75% of the canvas's width, the addition turns into subtraction
create another boyundary at 25% of the canvas's width where the negative sign will flip back to positive
Create a variable called "sWidth", make it 1, make sure this is outside of draw or setup
Create a black canvas
the size of the canvas resizes with the size of the window of the browser
Draw a circle in the center of the canvas
add a starting thick stroke weight to the outline of the circle
make it white
tie "sWidth" to a sin function with a .001 angle, so that it has a smooth oscillation
use as the stroke width
Create a black canvas that resizes with the window size
Draw a circle with no fill and a thick white outline
Animate the circle so that it rotates around the center of the canvas
Arrange it so that the contrail from the animation does not get drawn over each time in the drawe loop, creating a grey path around the circle's travel
Create a black canvas that resizes with the window size
Draw a circle with white fill and a no outline
Animate the circle so that it rotates around the center of the canvas
Arrange it so that the contrail from the animation does not get drawn over each time in the drawe loop, creating a grey path around the circle's travel
Throbber Encode
I want to make a throbber animation inspired by the style of the ones I just encoded (mainly just the use of black circles on a white background and the use of sin) and this one. The motion I’d like it to have is that it is moving vertically using a sine-wave like movement. I’d like to add a second and maybe a third circle to their action. I have never used sin within p5, and I really do like the smooth movement it allows animations to have. Frankly, I have been using ChatGPT to explain sin within p5 to me, but I am not using it to create the sketches.
Initialize a variable called Angle to use with sin later - this will animate it
Create a white canvas
lock it to the window size
globally declare black fill and no outline
draw two circles
use sin to drive the y-value of the first circle, and lock the x value to the center of the canvas
do the inverse with the second circle
make both of their dimater's the sin value
pick an amplitude that doesnt maek the animation look too slow or too crazy.
Debrief
This was really challenging for me because I was feeling SUPER rusty with p5. I am already not a very confident programmer (why I took this class), but after not interacting with it for the entirety of winter break, this wasn’t easy. I knew I wanted something simple, and mainly thought about how much I hate seeing a throbber when I am actually trying to do something on the web. I wanted to make something that gives you no sense of progress, feels repetitive, yet is pleasant to look at.
Frankly, I got stuck starting the sketch. I think I mentioned this in the survey, but I have a ton of trouble just starting out a p5 sketch, even though I make sure I have a clear goal I am trying to achieve. Referencing the sketches I just encoded really helped me get started; I do realize my throbber was supposed to be independent of those, but I needed to start somewhere.
I’d love to explore more in-depth work with using sinewaves and other stuff similar to that. I have never used it before, and I find the movement very appealing. Also I was interested in some of my modified versions of the circle sketches in which a 3D illusion is made… curious about other ways to make that effect.