Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/*Title: My Setup

By: Alex Olechnowicz

Date Submitted: September 20, 2017

Description: The image is a combination of a few different features that can be played with.
The Sun will follow your mouse left or right and as it enters the clouds (moves right), the
landscape darkens. The window shade follows the mouse up and down and the window starts to be covered
(alpha is lowered). The string also moves up and down with the mouse. The picture has three people and ballon
in it and they represent the Red, Green, Blue, and Alpha spots of the R,G,B colour system. The figure on the
left is red, the one in the middle is green, and the one on the right is blue, leaving the balloon to be alpha.
As the mouse is moved across the screen, the colour/opacity is changed. The top left is the brightest spot
(full), the top right and bottom left are the middle spots (half full), and the bottom right is the darkest
spot (zero). The charactors change from bright to dark when the mouse moves from top left to bottom right.
When the mouse is clicked, the background darkens and the monitor and computer are highlighted to show that
there is an error on the computer.*/

void setup(){
size(400,400); //Size of the window
}


void draw(){ //Everything encased here is refeshed
rectMode(CORNER); //All rectangles are drawn from the top left corner
ellipseMode(CENTER); //All circles are drawn from the center
frameRate(30); //Everything is refeshed 30 times per second
background(210,180,140); //Background colour is set to tan
  
  
//Desk drawn//
fill(139,69,19);
rect(0,260,399,139);


//Monitor drawn//
fill(0,0,255);
stroke(0);
strokeWeight(15);
rect(80,220,120,100);

//Used to colour 3D parts
noStroke();
fill(20);
quad(65,205,65,320,73,327,73,213);
quad(65,205,200,205,207,213,73,213);

//Used to colour borders of 3D parts
stroke(0);
strokeWeight(1);
line(65,205,65,320);
line(65,205,200,205);
line(65,205,73,213);
line(65,320,73,327);
line(200,205,207,213);


//Monitor Stand drawn//
fill(0);
stroke(0);
strokeWeight(1);
rect(120,320,40,20); //Top part
rect(100,340,80,20); //Bottom part

//Used to colour 3D parts
noStroke();
fill(20);
quad(95,335,95,355,100,360,100,340);
quad(95,335,100,340,120,340,117,335);
quad(117,335,117,328,120,328,120,340);
quad(160,335,175,335,180,340,160,340);

//Used to colour borders of 3D parts
stroke(0);
line(95,335,95,355);
line(95,335,100,340);
line(95,355,100,360);
line(95,335,117,335);
line(175,335,180,340);
line(160,335,175,335);
line(117,320,117,335);
line(117,335,120,340);


//Computer drawn//
//Used to colour 3D parts
fill(150);
noStroke();
quad(250,210,310,210,320,220,250,220);
quad(250,210,250,330,260,340,260,220);

//Used to colour borders of 3D parts
stroke(0);
strokeWeight(3);
line(250,210,310,210);
line(250,210,250,330);
line(250,210,260,220);
line(310,210,320,220);
line(250,330,260,340);

//Bar on computer
strokeWeight(5);
line(262,270,251,259);
strokeWeight(3);
rect(260,220,60,120);
strokeWeight(5);
line(262,268,318,268);
strokeWeight(1);
//Power button
ellipseMode(CORNER); //Circle changed to be drawn from top left corner
fill(0,0,255);
ellipse(280,300,20,20);
ellipseMode(CENTER); //Circle drawing changed back to center


//Picture drawn//
fill(255);
stroke(0);
strokeWeight(10);
rect(60,40,80,100);

//Red stick figure
strokeWeight(3);
stroke(255-(mouseX+mouseY)/3,0,0); //Colour darkens when mouse moved down and to the right
line(80,80,80,100);
line(80,80,70,90);
line(80,80,90,90);
line(80,100,90,120);
line(80,100,70,120);
ellipse(80,71,15,15);

//Blue stick Figure
stroke(0,255-(mouseX+mouseY)/3,0); //Colour darkens when mouse moved down and to the right
line(100,80,100,100);
line(100,80,110,90);
line(100,80,90,90);
line(100,100,90,120);
line(100,100,110,120);
ellipse(100,71,15,15);

//Green stick figure
stroke(0,0,255-(mouseX+mouseY)/3); //Colour darkens when mouse moved down and to the right
line(120,95,120,110);
line(120,95,110,90);
line(120,95,130,100);
line(120,110,110,120);
line(120,110,130,120);
ellipse(121,89,13,13);

//Ballon
strokeWeight(1);
stroke(0);
line(130,110,130,72);
fill(255,0,0,255-(mouseX+mouseY)/3); //Opacity decreased when mouse moves down and to the right
ellipse(130,65,8,15);


//Window drawn//
//Sky
strokeWeight(1);
stroke(0);
fill(0,175-mouseX/10,175-mouseX/10); //Sky darkens as mouse is moved right
rect(240,40,120,50);

//Ground
fill(44-mouseX/20, 176-mouseX/20, 55-mouseX/20); //Ground darkens as mouse is moved right
rect(240,90,120,70);

//Background clouds (Sun moves over them)
fill(193-mouseX/20,190-mouseX/20,186-mouseX/20); //Clouds darken as mouse is moved right
ellipse(327,55,40,20);
ellipse(298,64,50,21);

//Sun
fill(255,255,0);
ellipse(255+mouseX/4.3,60,20,20); //Sun moves in the window space based on the X coordinate of the mouse

//Forground clouds (Sun moves behind them)
fill(193-mouseX/20,190-mouseX/20,186-mouseX/20); //Clouds darken as mouse is moved right
ellipse(340,59,40,26);
ellipse(306,52,44,15);

//Tree trunk
fill(83-mouseX/20, 49-mouseX/20, 24-mouseX/20); //Tree trunk darkens as mouse is moved right
rect(320,100,20,40);

//Tree leaves
fill(0,255-mouseX/20,0); //Tree leaves darken as mouse is moved right
ellipse(315,95,25,20);
ellipse(345,95,25,20);
ellipse(330,90,30,25);

//Blinds
fill(0,0,0,(mouseY)/1.5); //Blind decsends when mouse is moved down (window alpha decreases)
//Blind rack
strokeWeight(3); 
rect(240,40,120,120);
strokeWeight(2);
//Window lines
line(300,40,300,160);
line(240,100,360,100);

//String for blinds
fill(0);
strokeWeight(1);
rect(235,32,133,10);
line(365,42,365,mouseY+35); //Pulls down blinds (string moves down when mouse moves down)
}


//Handles mouse press//
//stroke(0) (black lines) had become stroke(255) (white lines) to make the images pop
//Only lasts 1/3 of a second
void mousePressed(){
frameRate(3); //Only three frames are drawn in a second
background(0);

//Redrawn Computer//
fill(150);
noStroke();
quad(250,210,310,210,320,220,250,220);
quad(250,210,250,330,260,340,260,220);

stroke(255);
strokeWeight(3);
line(250,210,310,210);
line(250,210,250,330);
line(250,210,260,220);
line(310,210,320,220);
line(250,330,260,340);

strokeWeight(5);
line(262,270,251,259);
strokeWeight(3);
rect(260,220,60,120);
strokeWeight(5);
line(262,268,318,268);
strokeWeight(1);
ellipseMode(CORNER);
fill(255,0,0); //Power button becomes red (was blue)
ellipse(280,300,20,20);
ellipseMode(CENTER);


//Redraw Monitor Stand//
fill(0);
stroke(255);
strokeWeight(1);
rect(120,320,40,20);
rect(100,340,80,20);

noStroke();
fill(20);
quad(95,335,95,355,100,360,100,340);
quad(95,335,100,340,120,340,117,335);
quad(117,335,117,328,120,328,120,340);
quad(160,335,175,335,180,340,160,340);

stroke(255);
line(95,335,95,355);
line(95,335,100,340);
line(95,355,100,360);
line(95,335,117,335);
line(175,335,180,340);
line(160,335,175,335);
line(117,320,117,335);
line(117,335,120,340);


//Redrawn Monitor//
fill(0,0,255);

stroke(255);
strokeWeight(15);
rect(80,220,120,100);

noStroke();
fill(20);
quad(65,205,65,320,73,327,73,213);
quad(65,205,200,205,207,213,73,213);

stroke(255);
strokeWeight(1);
line(65,205,65,320);
line(65,205,200,205);
line(65,205,73,213);
line(65,320,73,327);
line(200,205,207,213);


//ERROR Symbol//
//Symbol is drawn on the monitor
strokeWeight(3);
stroke(255);
noFill();

//Triangle Part
triangle(140,250,160,290,120,290);

//! Part
line(140,262,140,278);
fill(255);
ellipse(140,284,2,2);

//Debug (resets stroke() and strokeWeight())
stroke(0);
strokeWeight(1);
}
//END//