In last week’s Processing class, we covered Conditional Statements and creating user interface elements such as buttons and rollovers. I tried to take Dan Shiffman’s simple animation of a square moving around the edge of a window and decrease it inwards. Not surprisingly, I wasn’t able to figure it out on my own but luckily Dan showed me how! Creating this new animation required changing the conditional statements so the distance of my traveling square decreased inward from the edge as the animation runs (instead of the square simply looping along the edge of the window).
If I was a better programmer, this would be a video
I would love to create a sketch where each inward square begins to draw at the same time, if that makes any sense. Like nesting Russian Matryoska dolls! I also like the idea of having a bunch of animated squares drawing on the screen in a grid at the same time. I imagine each square would animate in a different direction in different colors. I aim to make people go cross-eyed!
I also tried to mess around with creating a fade where each side of my animated square/line faded in brightness from left to right, and up to down. I figure it probably requires that I map the brightness values to the x,y position of my moving square. Although for the life of me, I couldn’t wrap my mind around the mapping function and where it would go in my code.
I really like Processing and I have a lot of ideas about sketches I would like to play with and create. Unfortunately, while I excel at abstract thinking, my logical reasoning skills are pretty elementary. Yay.
Source code:
//Define the starting location of our square
int x = 0;
int y = 0;
//Define the speed of our square
int speed = 10;
//Define the state of our square: top, right, bottom, left
int state = 0;
int distance = 0;
/*Would like to take constantly changing variable of location – map the RGB
values to x, y values so that it fades bright to dark.
float x1 = map(x,0,width,0,255);
float y1 = map(y,0,height, 0,255);
Not sure if above code is right, and where it would go (in my conditional
statements or elsewhere? */
//Open window at size 400, 400
void setup() {
size(500,500);
smooth();
background(41, 41, 46);
}
void draw() {
stroke(0, 206, 209, 60);
fill(49, 36, 102, 10);
rect(x,y,30,30);
//If the state is 0, move to the right
if (state == 0) {
x = x + speed;
//If while the state is 0, reaches the right side of the window
// change the state to 1
if (x > width-distance-30) {
x =width-distance-30;
state = 1;
}
//When at state 1, move down
} else if ( state == 1) {
y = y + speed;
//When reach the edge of the y window, change the state to 2
if (y > height-distance-30) {
y = height-distance-30;
state=2;
}
//When the state is 2, move left
} else if (state == 2) {
x = x – speed;
//If while left, reach edge of window, change the state to 3
if (x < distance) {
x = distance;
state = 3;
}
//When reach 0 at state of 3, change back to 0 and repeat loop
} else if (state == 3) {
y = y – speed;
if (y < distance+30) {
distance = distance + 30;
state = 0;
}
}
}
