Project 3 – Dynamic Drawing

This project was designed to produce the numbers “104” if the user puts their mouse in the right location. The red moving square grows bigger and more red the farther you get from the correct point. I was inspired by the spinning motion of many other peer projects as well as some of the examples given. The change I wanted to make was to try and make it a game in which the user has to rotate back and forth until they can find the hidden message. I was also inspired by Prof. Cortina in using “104” as the hidden Easter egg like he has in past examples/ labs.

sketch

var xvel = +7			//sets velocity for red square			//bgoeke
var x = 0
var y = 0
var r = 225
function setup() {
    createCanvas(600, 450);
    background(220);
}

function draw() {
	background(150, 150, 0);
	push();
	translate(300, 225);
	rotate(radians(mouseX));						//rotates according to position of mouse
	fill(255, 255, 0);
	rect(0, 0, mouseX, mouseY);						//rectangle that makes #1
	pop();
	push();
	translate(425, 300);
	rotate(radians(mouseX));
	fill(0, 255, 255);
	ellipse(0, 0, 50 + mouseX, 50 + mouseY);			//ellipse that makes #0
	pop();
	push();
	translate(550, 225);
	rotate(radians(mouseX + 40));
	fill(0, 255, 255);
	rect(0, 0, mouseX, 100);						//rectangle that makes top left line of #4
	rotate(radians(mouseX - 40));
	fill(0, 255, 255);
	rect(0, 0, mouseX, 300);						//rectangle that makes vertical line of #4
	pop();
	push();
	translate(490, 300);
	rotate(radians(0));
	fill(255, 255, 0);
	rect(mouseX, 0, 100 - mouseX, 225 - mouseY);		//rectangle that makes horizontal line of #4
	pop();
	fill(mouseX - 255, 0, 0);
	rect(x, y, mouseX, mouseY - 225);					//red rectangle that covers screen when mouse is in wrong direction
	x += xvel;
	if(x>600-(r/2)) {    //makes rect not go past 600
      xvel =-xvel
    };
     if(x<0){    //makes rect not go past 0
      xvel =-xvel
	};
}