serinal – project 03 (section C)

sketch

//Serina Liu
//Section C
//serinal@andrew.cmu.edu
//Project-03

var sizex = 320;
var sizey = 240;
var R = 0;
var G = 0;
var B = 0;
var circle = 320;
var dir = 1; 
var speed = 10;
 
function setup() {
  createCanvas(640, 480);
  background (25);

}

function draw() {

    if (mouseX < width*0.44) {
        background (255, 228, 225);
    } else if (mouseX > width*0.6) {
        background (224, 255, 255);
    } else {
        background (255, 215, 0);
    }
    //changing the background color in three different intervals 
    R = 0;
    G = 0;
    B = 0;

    if (mouseX < width*0.44) {
        sizex= 190;
        sizey= 250;
        R= 256;
    } else if (mouseX > width*0.6) {
        sizex= 700;
        sizey= 900;
        B= 256;
    } else {
        sizex=400;
        sizey=470;
        G= 256;
    }
    //size of rectangle changing in three different intervals
    //color of rectangle also changing in three different intervals

    noStroke();
    fill(256, 256, 256);
    ellipseMode (CENTER);
    ellipse (320, 230, circle ,circle);
    //ellipse

    circle += dir*speed;
    if (circle > 550) {
        dir = -dir;
        circle =550;
    } else if (circle < 0) {
        dir = -dir;
        circle = 0;
    }
    //ellipse moving outward and inward

    var rectangle=(width-mouseX);
    fill (R, G, B);
    rectMode (CENTER);
    rect (rectangle, mouseY, sizex/8, sizey/30);
    //mirrors the rectangle in the opposite direction 

    fill(R, G, B);
    rectMode(CENTER);
    rect(mouseX, mouseY, sizex/8, sizey/30);
    //moving rectangle with mouse

}

It is hard to work on motion heavy ones because they tend to give me a headache after looking at them for too long, but I had fun with this one. I think the more practice that I am getting is definitely helping me. I was inspired by a lot of the motion graphics that you see nowadays, with the pastel color backgrounds, whites and then a loud pop of color. I wanted to just focus on the rectangle mainly changing things, but included the ellipse zoom in and out for some added visual simulation.