• Rob George

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.




< Return to Coding Page

6 views0 comments