Kimberlyn Cho- Project03

I was inspired by the static of a TV to create my dynamic drawing. I took into consideration the size of the static, rotation of the dials, position of the slider, degree of static, and colors to make my drawing dynamic in accordance to the position of the mouse.

ycho2-03

/* Kimberlyn Cho
Section C
ycho2@andrew.cmu.edu
Assignment-03 */

/* directions:
move vertically = vary length of static controlled by the slide
move horizontally = vary color and level of static controlled by the dials */

var screenW = 360
var screenH = 300
var rectW = 10
var rectH = 20
var angle = 0

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

function draw() {
    background(256, mouseX, mouseY);
    rectMode(CENTER);

    //antenna
    stroke("pink");
    strokeWeight(5);
    line(320, 95, 370, 10);
    line(320, 95, 250, 5);
    strokeWeight(0);
    fill("white");
    ellipse(320, 95, 100, 50);

    //tv
    fill("pink");
    rect(320, 280, 500, 380, 50);
    fill("white");
    rect(290, 280, 380, 320, 30);

    //tv controls
    ellipse(525, 175, 50, 50);
    ellipse(525, 250, 50, 50);
    fill("pink"); 
    //rotating dials
    push();
    translate(525, 175);
    rotate(radians((angle + 20) + mouseX / 2));
    rect(0, 0, 40, 10);
    pop();
    push();
    translate(525, 250);
    rotate(radians(-angle + mouseX / 2));
    rect(0, 0, 40, 10);
    pop();
    //slider
    fill("white");
    rect(525, 360, 6, 136);
    var slider = constrain(mouseY, 292, 428);
    rect(525, slider, 25, 25);

    //tv screen
    fill("black");
    rect(290, 280, screenW, screenH);
    
    //to imitate static
    var color = random(0, 255);
    //to constrain static heights within screen
    var length = constrain(mouseY, 130, 430);
    var staticH = height - length;

    //static
    fill(200);
    translate(110, 130);
    fill(color, mouseX, color);
    rect(screenW * 0.02, screenH / 2, rectW, staticH * .3);
    rect(screenW * 0.06, screenH / 2, rectW, staticH * .8);   
    rect(screenW * 0.10, screenH / 2, rectW, staticH * .6);
    rect(screenW * 0.14, screenH / 2, rectW, staticH * .4);
    rect(screenW * 0.18, screenH / 2, rectW, staticH * .7);
    rect(screenW * 0.22, screenH / 2, rectW, staticH * .3);
    rect(screenW * 0.26, screenH / 2, rectW, staticH * .5);
    rect(screenW * 0.30, screenH / 2, rectW, staticH * .8);
    rect(screenW * 0.34, screenH / 2, rectW, staticH * .4);
    rect(screenW * 0.38, screenH / 2, rectW, staticH * .3);
    rect(screenW * 0.42, screenH / 2, rectW, staticH * .6);
    rect(screenW * 0.46, screenH / 2, rectW, staticH * .7);
    rect(screenW * 0.50, screenH / 2, rectW, staticH * .8);
    rect(screenW * 0.54, screenH / 2, rectW, staticH * .5);
    rect(screenW * 0.58, screenH / 2, rectW, staticH * .7);
    rect(screenW * 0.62, screenH / 2, rectW, staticH * .6);
    rect(screenW * 0.66, screenH / 2, rectW, staticH * .4);
    rect(screenW * 0.70, screenH / 2, rectW, staticH * .4);
    rect(screenW * 0.74, screenH / 2, rectW, staticH * .2);
    rect(screenW * 0.78, screenH / 2, rectW, staticH * .3);
    rect(screenW * 0.82, screenH / 2, rectW, staticH * .5);
    rect(screenW * 0.86, screenH / 2, rectW, staticH * .7);
    rect(screenW * 0.90, screenH / 2, rectW, staticH * .6);
    rect(screenW * 0.94, screenH / 2, rectW, staticH * .8);
    rect(screenW * 0.98, screenH / 2, rectW, staticH * .4);

}