Now, this is a story all ’bout how,

I got really bored one day and that day happened to be the day for the final project.

So I decided to revisit p5, and in particular this sketch called “The_Hoop” where I made a torus spin on the x and y axes based upon the mouse position:


I wanted to create a series of hoops that all rotated based upon the mouse X and Y position, but p5 is as buggy as APL is chicken scratch interesting. So I moved to the good old standby of Processing 3.

Interesting Fact: Processing does not natively support the torus(); function, and i’m too lazy to make one even though it would probably take 15 lines of code. So, i decided planes, or as Processing likes to call them, rect(); (angles is not required allowed).

I defined my variables and set my stage:

int y = 100;
int x = 100;
int xtic = 0;
int ytic = 0;

void setup() {
size(500,500, P3D);

Then, I created a double while loop to create y columns of planes x times, and their position will be determined by the xtic and ytic countdown variables:

void draw(){
xtic = 0;
while(xtic < 250){
ytic = 0;
while(ytic < 250){
l = random(255);
m = random(255);
n = random(255);
y = y – (abs(250 – mouseX))/50;
x = x – (abs(250 – mouseY))/50;
ytic += 100;
ytic += 100;
xtic += 100;
}                                                                                                                                                                     }

So I put it all together and OH MY GOD WHAT IS THAT it didn’t quite work as I expected it to. Just take my word for it. Don’t click the link.

What am I kidding telling you not to click it just makes you want to click it. So Click it. I dare you.

SO, moving on, I made the double while loop not cancerous streamlined the while loop by creating a function boxCreation( int x int y) and used xtic and ytic as the variables in x and y:

void boxCreation()
//r = random(0,255);
//g = random(0,255);
//b = random(0,255);
x = x – (abs(((width/2)+30) – mouseY));
y = y – (abs(((height/2)+30) – mouseX));

This way, our code is more readable and the draw function doesn’t look like the source code for this page:

void draw(){
while(xtic < width){
while(ytic < height){
ytic += 30;
xtic += 30;

void varSet is defined as this because i needed more functions because it looked cooler than

So, when put all together, it looks like this.

Not too bad, but there are some problems with this visualization. It determined the rotation of every rectangle via the center of the screen’s distance to the mouse position, and not each individual rectangle’s distance from the mouse position.

Leave a Reply

Your email address will not be published. Required fields are marked *