Project-03-Dynamic-Drawing-Veronica

sketch

/*
Veronica Wang
Section B
yiruiw@andrew.cmu.edu
Project-03
*/

var r1 = 100; //size of ellipse 1
var r2 = 80; //size of ellipse 2
var r3 = 120; //size of ellipse 3
var locX = 200; //rotation center of ellipses
var locY = 250; //rotation center of ellipses
var angle = 1; //first angle of rotation
var angle2 = 1; //second angle of rotation
var angle3 = 1; //third angle of rotation
var angle4 = 1; //fourth angle of rotation
var on = true; //background color


function setup() {
    createCanvas(640, 480);
}

function draw() {
//change background between black and white    
    if (on == true) {
        background(255);
      } else {
        background(0);
      }

    noStroke();
    //red ellipse
    fill(255, 0, 0, 150);
    ellipse(320, 100, mouseX, mouseX);
    //blue ellipse
    fill(0, 0, 255, 150);
    ellipse(locX,locY, mouseX, mouseX);
    //green ellipse
    fill(0, 255, 0, 150);
    ellipse(400, 450, mouseX, mouseX);

    //magenta ellipse
    push();
    translate(locX, locY);
    rotate(radians(angle));
    noStroke();
    fill(255, 0, 255, 150);
    ellipse(mouseX / 8 + 0.5 , mouseY / 8 + 1, r1 + mouseY / 2, r1 + mouseY / 2);
    pop();
    angle = angle + 1;

    //cyan ellipse
    push();
    translate(locX + 10, locY);    
    noStroke();
    fill(0, 255, 255, 150);
    rotate(radians(angle));
    ellipse(mouseX / 2 + 0.5 , mouseY / 2 + 1, r2 + mouseY / 1.5, r2 + mouseY / 1.5);
    pop();
    angle2 = angle2 + 2;

    //yellow ellipse
    push();
    translate(locX + 50, locY);    
    noStroke();
    fill(255, 255, 0, 150);
    rotate(radians(angle));
    ellipse(mouseX / 5 + 0.5 , mouseY / 6 + 1, r3 + mouseY / 3, r3 + mouseY / 3);
    pop();
    angle3 = angle3 + 0.5;

    //white line
    push();
    translate(locX, locY + 50);    
    noStroke();
    fill(255, 255, 255, 150);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(mouseX / 5 + 0.5 , mouseY / 6 + 1, 10, 1000);
    pop();
    angle3 = angle3 + 0.5;

    //black line
    push();
    translate(100, 100);    
    noStroke();
    fill(0, 0, 0, 150);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(mouseX / 2 + 0.5 , mouseY / 2 + 1, 20, 1000);
    pop();
    angle4 = angle4 - 1;

    //white line apprears at mouse click
    if (mouseIsPressed) {
        if (mouseButton == LEFT) {
            stroke(255);
            strokeWeight(30);
        } else {
            stroke(0);
        }
        line(0, 200, width, 50);
    }
}

//change background between black and white
function mousePressed() {
  if (on == true) {
    on = false;
  } else {
    on = true;
  }
}

In this project I explored different color models and the relationship between colors. I played around with ellipses of colors red, green, blue, cyan, magenta, and yellow, as well as the overlaps of these colors. The background also changes from white to black.