week 3

The assignment for this week was to work with rule-based animation, motion, and interaction with the option to work in the assigned pairs. The goal was to make a rollover, button, or slider from scratch and create an algorithmic design with simple parameter. Then to tie the two together and have an interface element control the visual design or behavior of other elements in the sketch.

I worked with my classmate Wippy who suggested that we’ll make a tribute to Daft Punk video Technologic.

I thought that it could be challenging enough for us and so we started working together.

Daft-Punk-Technologic

Our process started with making a rectangle with words changing on top of it once you presses a button below, that first was just a blue ellipse.

Screen shot 2015-09-23 at 23.56.26

a few hours later we were stuck not understanding why the ‘mousePressed’ function was working around the whole canvas, and not just inside the button (ellipse) as the ‘if’ statement we defined. Fast forward about an hour later we figured out that there was an extra ‘var’ in the ‘draw’ function for var:  d = dist
(width / 2, 0.75 * windowHeight, mouseX, mouseY);

That messed up our button..

Then we tried to make the rectangle look more like the TV screen as on the original video, but we couldn’t make it feel similar enough just by rounding the corner of the rectangle so I suggested to get a screen shot from the video and use that picture as our TV screen. We stamped it a bit on photoshop to clear the original letters, and learned how to upload an image into p5.

At that point, we decided that we want to make the sketch open in any window as the window size, so we had to recalculate the sizes we defined and match it relatively to the window hight and window width.

Eventually after we made the button work, we wanted to make it look a little nicer and add some lines to it, and take the opportunity to use ‘for’ loop, so we used it as below, and added angleMode (DEGREES), which should be in the ‘setup’ function.

Screen shot 2015-09-24 at 00.00.05

Also we wanted the song to play while you can interact with the button.

Eventually our sketch looks like this, presses enough times so you can get to the end of it!!


var presses = 0;
var song;
var d;
var y;
var x;
var y1;
var y2;

function preload() {
img = loadImage(“assets/dp.jpg”)
song = loadSound(‘assets/dp.mp3’)
}

function setup() {
createCanvas(windowWidth, windowHeight);
angleMode(DEGREES);
textSize(100);
textAlign(CENTER);
textStyle(BOLD);
textFont(“ARIAL NARROW”);
song.play();

}

function draw() {
background(0);
image(img, 0.125 * windowWidth, 0, 0.75 * windowWidth, 0.66 * windowHeight);
x = windowWidth / 2;
y1 = windowHeight / 2;
y2 = windowHeight / 2;
y = 0.416 * windowHeight;
d = dist(width / 2, 0.75 * windowHeight, mouseX, mouseY);
// strokeWeight (2);
fill(50);
ellipse(width / 2, 0.75 * windowHeight, 50, 50)
var angle = 30;
var lineLength = 24;

push();
noFill();
stroke(150);
translate(width / 2, 0.75 * windowHeight);
for (var i = 0; i < 360 / angle; i++) {
rotate(angle);
line(0, 0, lineLength, 0);
}
pop();

strokeWeight(2);
stroke(150);
fill(100);
ellipse(width / 2, 0.75 * windowHeight, 30, 30);

if (d < 15) {
fill(180);
ellipse(width / 2, 0.75 * windowHeight, 30, 30);
}
noStroke();
fill(0, 70);
if (presses == 1) {
text(“BUY”, width / 2, y);
} else if (presses == 2) {
text(“USE”, width / 2, y);
} else if (presses == 3) {
text(“BREAK”, width / 2, y);
} else if (presses == 4) {
text(“FIX”, width / 2, y);
} else if (presses == 5) {
text(“TRASH”, width / 2, y);
} else if (presses == 6) {
text(“CHANGE”, width / 2, y);
} else if (presses == 7) {
text(“MAIL”, width / 2, y);
} else if (presses == 8) {
text(“UPGRADE”, width / 2, y);
} else if (presses == 9) {
text(“CHARGE”, width / 2, y);
} else if (presses == 10) {
text(“POINT”, width / 2, y);
} else if (presses == 11) {
text(“ZOOM”, width / 2, y);
} else if (presses == 12) {
text(“PRESS”, width / 2, y);
} else if (presses == 13) {
text(“SNAP”, width / 2, y);
} else if (presses == 14) {
text(“WORK”, width / 2, y);
} else if (presses == 15) {
text(“QUICK”, width / 2, y);
} else if (presses == 16) {
text(“ERASE”, width / 2, y);
} else if (presses == 17) {
text(“WRITE”, width / 2, y);
} else if (presses == 18) {
text(“CUT”, width / 2, y);
} else if (presses == 19) {
text(“PASTE”, width / 2, y);
} else if (presses == 20) {
text(“SAVE”, width / 2, y);
} else if (presses == 21) {
text(“LOAD”, width / 2, y);
} else if (presses == 22) {
text(“CHECK”, width / 2, y);
} else if (presses == 23) {
text(“QUICK”, width / 2, y);
} else if (presses == 24) {
text(“REWRITE”, width / 2, y);
} else if (presses == 25) {
text(“PLUG”, width / 2, y);
} else if (presses == 26) {
text(“PLAY”, width / 2, y);
} else if (presses == 27) {
text(“BURN”, width / 2, y);
} else if (presses == 28) {
text(“RIP”, width / 2, y);
} else if (presses == 29) {
text(“DRAG”, width / 2, y);
} else if (presses == 30) {
text(“DROP”, width / 2, y);
} else if (presses == 31) {
text(“ZIP”, width / 2, y);
} else if (presses == 32) {
text(“UNZIP”, width / 2, y);
} else if (presses == 32) {
text(“LOCK”, width / 2, y);
} else if (presses == 34) {
text(“UNLOCK”, width / 2, y);
} else if (presses == 35) {
text(“FILL”, width / 2, y);
} else if (presses == 36) {
text(“CURL”, width / 2, y);
} else if (presses == 37) {
text(“FIND”, width / 2, y);
} else if (presses == 38) {
text(“VIEW”, width / 2, y);
} else if (presses == 39) {
text(“CODE”, width / 2, y);
} else if (presses == 40) {
text(“JAM”, width / 2, y);
} else if (presses == 41) {
text(“UNLOCK”, width / 2, y);
} else if (presses == 42) {
text(“SURF”, width / 2, y);
} else if (presses == 43) {
text(“POSE”, width / 2, y);
} else if (presses == 44) {
text(“CLICK”, width / 2, y);
} else if (presses == 45) {
text(“CROSS”, width / 2, y);
} else if (presses == 46) {
text(“CRACK”, width / 2, y);
} else if (presses == 47) {
text(“TWITCH”, width / 2, y);
} else if (presses == 48) {
text(“UPDATE”, width / 2, y);
} else if (presses == 49) {
text(“NAME”, width / 2, y);
} else if (presses == 50) {
text(“READ”, width / 2, y);
} else if (presses == 51) {
text(“TUNE”, width / 2, y);
} else if (presses == 52) {
text(“PRINT”, width / 2, y);
} else if (presses == 53) {
text(“SCAN”, width / 2, y);
} else if (presses == 54) {
text(“SEND”, width / 2, y);
} else if (presses == 55) {
text(“FAX”, width / 2, y);
} else if (presses == 56) {
text(“RENAME”, width / 2, y);
} else if (presses == 57) {
text(“TOUCH”, width / 2, y);
} else if (presses == 58) {
text(“BRING”, width / 2, y);
} else if (presses == 59) {
text(“PAY”, width / 2, y);
} else if (presses == 60) {
text(“WATCH”, width / 2, y);
} else if (presses == 61) {
text(“TURN”, width / 2, y);
} else if (presses == 62) {
text(“LEAVE”, width / 2, y);
} else if (presses == 63) {
text(“STOP”, width / 2, y);
} else if (presses == 64) {
text(“FORMAT”, width / 2, y);
} else if (presses >= 65) {
background(random(255), random(255), random(255));
fill(255);
textSize(120);
text(‘TECHNOLOGIC’, x, y1);
y1 = y1 + 2
text(‘TECHNOLOGIC’, x, y2);
y2 = y2 – 2

}
}

function mousePressed() {
if (d < 15) {
presses = presses + 1;
}

}