Victoria Reiter-Project 03-Dynamic Drawing

``````/*Victoria Reiter
Section B
vreiter@andrew.cmu.edu
Project-03
*/

// establishes global variables
// states amount of increase for angular rotation
var increment = 5;
// states angle of rotation
var angle = 0;
// states sizes of rectangles
var sizeA = 25;
var sizeB = 75;
// states center points of rectangles
var rect1X;
var rect2X;
var rect3X;
// states colors
var colorA = 255;
var colorB = 0;
var colorYellow = 'rgb(255, 251, 155)';
var colorBlue = 'rgb(181, 243, 255)';
var colorGreen = 'rgb(201, 255, 165)';

function setup() {
// creates canvas dimensions
createCanvas(640, 480);
// defines positions of central points
// for the drawing of rectangles
rect1X = width / 6;
rect2X = width / 2;
rect3X = (5 * width) / 6;
}

function draw() {
// sets background color to be pink
// and a little opaque
background('rgba(255,187,203,0.05)');
// left most rectangle rotation
push();
translate(rect1X, height - mouseY);
// draws rectangle from center point
rectMode(CENTER);
// sets visual aspects of rectangle
strokeWeight(4);
stroke(colorA);
fill(colorB);
rect(0, 0, sizeA, sizeA);
pop();
angle = angle + increment;
// center rect rotation
push();
translate(rect2X, mouseY);
// draws center rect
rectMode(CENTER);
strokeWeight(10);
stroke(colorB);
fill(colorA);
rect(0, 0, sizeB, sizeB);
pop();
angle = angle - increment;
// rightmost rect rotation
push();
translate(rect3X, height - mouseY);
// draws right most rect
rectMode(CENTER);
strokeWeight(4);
stroke(colorA);
fill(colorB);
rect(0, 0, sizeA, sizeA);
pop();
angle = angle + increment;

// if mouse is located on bottom half of canvas
// then rectangles change size and direction of rotation
if (mouseY > height / 2) {
sizeA = 75;
sizeB = 25;
increment = 5;
}
// if mouse is located on top half of canvas
// then rectangles change size and direction of rotation
if (mouseY < height / 2) {
sizeA = 25;
sizeB = 75;
increment = -5;
}
// defines visual characteristics for when mouse is
// in upper left section of canvas
if ((mouseX < width / 3) & (mouseY < height / 2)) {
colorA = colorYellow;
colorB = 0;
}
// defines visual characteristics for when mouse is
// in bottom left section of canvas
if ((mouseX < width / 3) & (mouseY > height / 2)) {
colorA = 0;
colorB = colorYellow;
}
// defines visual characteristics for when mouse is
// in upper middle section of canvas
if ((mouseX > width / 3) & (mouseX < (2 * width) / 3) && (mouseY < height / 2)) {
colorA = 0;
colorB = colorBlue;
}
// defines visual characteristics for when mouse is
// in bottom middle section of canvas
if ((mouseX > width / 3) & (mouseX < (2 * width) / 3) && (mouseY > height / 2)) {
colorA = colorBlue;
colorB = 0;
}
// defines visual characteristics for when mouse is
// in upper right section of canvas
if ((mouseX > (2 * width) / 3) & (mouseY < height / 2)) {
colorA = colorGreen;
colorB = 0;
}
// defines visual characteristics for when mouse is
// in bottom right section of canvas
if ((mouseX > (2 * width) / 3) & (mouseY > height / 2)) {
colorA = 0;
colorB = colorGreen;
}
// defines visual characteristics for when mouse is
// on the left section of the canvas
if (mouseX < width / 3) {
fill('rgb(187, 4, 131)');
textAlign(CENTER);
textSize(25);
textFont('Georgia');
textStyle(BOLD);
text("YOU", rect1X, mouseY);
}   else {
noStroke();
}
// defines visual characteristics for when mouse is
// on the middle section of the canvas
if ((mouseX > width / 3) & (mouseX < (5 * width) / 6)) {
fill('rgb(187, 4, 131)');
textAlign(CENTER);
textSize(25);
textFont('Georgia');
textStyle(BOLD);
text("ARE", rect2X, height - mouseY);
}   else {
noStroke();
}
// defines visual characteristics for when mouse is
// on the right section of the canvas
if (mouseX > (5 * width) / 6) {
fill('rgb(187, 4, 131)');
textAlign(CENTER);
textSize(25);
textFont('Georgia');
textStyle(BOLD);
text("BEAUTIFUL", rect3X, mouseY);
}   else {
noStroke();
}
}``````

Here is the design I made! As the mouse moves from left to right, the colors of the rectangles, as well as their outline, changes, and different words appear depending on where the mouse is located. Two squares move in opposite direction of the y-value of the mouse, and one moves along with the mouse’s y-value, and opposite for the words. As the mouse moves from top to bottom of the screen, the squares also change size and direction of rotation. Also, the background is not completely opaque, allowing you to see the outlines of the shapes as they move, which I think creates a kind of soothing echo-effect that adds to the aesthetics of the graphic.

Ultimately, the factors that change are: position, size, color, and angle.

I think it is a pretty little interactive image with a good message that can cheer you up if you’re ever feeling gloomy. :’)