Week 3: MouseX MouseY + Rollover + Winter Translator Digital Sketches
Updated: Dec 10, 2020
Task 1 : Making A Box Move With The Mouse
This is the same structure as Week 2_Task 1 but now the box moves with the mouse.
// week 3 task 1
void setup() {
size(600, 400);
}
void draw() {
background(255);
stroke(0, 0, 255);
strokeWeight(2);
fill(255, 0, 0);
rectMode(CENTER);
rect(mouseX, mouseY, 250, 150);
line(0, 0, mouseX-125, mouseY-75);
line(600,400, mouseX+125, mouseY+75);
line(0,400, mouseX-125, mouseY+75);
line(600,0, mouseX+125, mouseY-75);
}
Task 2 : Figure That Moves With Mouse
Same concept except we had to create a figure using shapes and keep all the shapes together while the figure moved with the mouse.
//Week 3 Task 2
void setup() {
size(400, 400);
}
void draw() {
background(255);
//body
stroke(0);
fill(255, 0, 0);
strokeWeight(2);
rectMode(CENTER);
rect(mouseX, mouseY, 40, 100);
//head
fill(255, 0, 0);
ellipse(mouseX, mouseY-height/5.65, 40, 40);
//arms
line(mouseX-75, mouseY-95, mouseX-20, mouseY-50);
line(mouseX+75, mouseY+95, mouseX+20, mouseY+50);
line(mouseX-75, mouseY+95, mouseX-20, mouseY+50);
line(mouseX+75, mouseY-95, mouseX+20, mouseY-50);
}
Assignment 1 : Rollover
My first attempt at working with rollovers.
//Week 3 Assignment: Rollover
void setup() {
size(600, 400);
}
void draw() {
background(0);
stroke(255);
strokeWeight(3);
line(150, 0, 150, 400);
line(300, 0, 300, 400);
line(450, 0, 450, 400);
//First Bar (orange)
noStroke();
fill(# fc4b03);
if (mouseX<150 && mouseX>0) {
rect(0, 0, 150, 400);
}
//Second Bar (white)
noStroke();
fill(255);
if (mouseX>150 && mouseX<300) {
rect(150, 0, 150, 400);
}
//Third Bar (purple)
noStroke();
fill(# 8221D8);
if (mouseX>300 && mouseX<450) {
rect(300, 0, 150, 400);
}
//Fourth Bar (grey)
noStroke();
fill(# 666467);
if(mouseX>450 && mouseX<600){
rect(450,0,150,400);
}
}
Assignment 2 : Design for Translator
I had to create a design for a simple translator that I would later create in Processing. Here are my photoshop sketches of a winter translator.