**UPDATE** I updated the program so the loading time is not as long.
Move your mouse to control the paddles. Click to alter the paint’s path.

For my second ICM assignment, I was paired with Hugo to make an animated sketch. We started with implementing the classic Pong.

With Pong, the challenge for us was figuring out at what distance the ball should bounce from the paddles. We calculated the longest possible distance from the center of the ball to the center of the paddle if the ball should bounce from it, and used that value to determine whether the ball was close enough to the paddle. The issue then was to make sure that the ball actually touches the paddle when it bounces. Since the paddle is always on the same x-axis, the ball’s axis is always the same when it’s touching the paddle. So we added a check for that on top of the check for longest distance.

Then Hugo and I split up to create separate versions of the Pong game. I decided to turn the ball into a paint brush and create abstract strokes with the game. My inspiration was Rafael Rozendaal’s interactive gradience shapes.

To draw a gradience with the ball, I saved color values into a 2D array. Then drew an ellipse with the stored color value every time the ball moved. The ellipses connected into a stoke. Below are some variations of the strokes I made with the game.

Takeaways:

• When designing an interactive program I should really think about where and how it would be displayed and how would the participant encounter it. In this instance, I made the window way too long for the WP blog display. Also the game starts immediately after it loads, without giving the player a prompt.
• For animated or interactive visual display type of work, it’s not very interesting when element values (e.g. the colors) are hard coded in. It would be better if the value is changing or has some randomness to it.
• Coding for over 5 hours without a break is a very bad idea.
• Don’t draw any elaborate elements in setup(), or the program will take forever to load.
• If the program takes forever to load, distract the participant with something.

Questions:

• The programs takes some time to load. How to make it faster?
• How can I draw an ellipse over the trail of another ellipse? (how can I still show the ball in a different color over the stroke?)

This is my first assignment for ICM.

I first started playing around with shapes in for loops. These are a few of the patterns that I created.

 

The red triangles reminded me of the flags in the game Minesweeper, so I turned them into flags, like this.

Then added abstracted explosions with yellow triangles and lines.

***** code *****

void setup() {
size (700, 600);
background(255);
}

void draw() {
fill(255, 0, 0, 150);
//noStroke();
smooth();

for (int y = 30; y < height-30; y += 15) {
for (int x = 35; x < width-35; x += 13) {

/*fill(0-y);
noStroke();
triangle(x+11, y, x+6.5, y+8, x+15.5, y+8);
//fill(255, y-150, x-y, 150);*/

// flags
fill(255, 0, 0);
noStroke();
triangle(x-1, y, x+8, y-4, x+8, y+4);

stroke(0);
strokeWeight(1);
line(x+7, y+4, x+7, y+6);
line(x+2, y+7, x+7, y+7);
strokeWeight(2);
line(x+1, y+9, x+9, y+9);

stroke(y+50, y+50, y+50);
line(x-1, y, 300, 240);
}
}

//stroke(80);
rect(278, 238, 44, 44);
fill(150);

//bomb
fill(0);
noStroke();
ellipse(300, 260, 20, 20);

fill(255);
noStroke();
ellipse(296, 256, 5, 5);

//top
stroke(0);
strokeWeight(2);
line(300, 249, 300, 245);

//bottom
line(300, 271, 300, 275);

//left
line(289, 260, 285, 260);

//right
line(311, 260, 315, 260);

strokeWeight(2);
//top left
line(289, 248, 293, 252);

//top right
line(311, 248, 308, 251);

//bottom left
line(288, 272, 291, 269);

//bottom right
line(311, 272, 308, 269);

}