Opposites
As someone new to coding, I didn’t want to dig too deeply into the meaning of the word “opposite” for this assignment, instead focused on how many things I could do within the code to demonstrate it. I chose “black and white” for my topic, I had a concept in my head of a canvas divided into black and white, and a circle whose movements would be the “opposite” of that black and white canvas.
I sketched this out a bit along with some “actions” I wanted to incorporate:
As you move the circle, towards the black side of the canvas, it becomes white, and vice versa.
If you “click” the mouse, then everything black switches to white, and everything white switches to black. Every time you click, this will occur.
One other thing I wanted to do, that I didn’t manage to figure out, is s subset action of #1.
I wanted the circle, as it moved left or right, to be dynamic as it changed from white to black or black to white, so if 3/4 of the circle was in the black background, then 3/4 of the circle would be white. I only managed to make a white circle appear in black, and a 1/2 and 1/2 using arcs.
I also wanted the black and white values to be responsive as it changed sized. I imagined having a press and hold function could increase the size of the circle but maintain the rules of white against black and black against white.
This is what I ended up with. Please see the p5.js editor link for a breakdown of code.