Sophie Chen – Project 03 – Dynamic Drawing

sketch

var barR = 255;
var barG = 255;
var barB = 255;
var eX = 510;
var eY = 435;
var TVon = 1;
var ellipseA = 5;
var r = 200;
var g = 200;
var b = 200;
var limit = 150;


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

function draw() {
	background(0, 0, 0, 70);
	// when TV is on, fill TV screen with dark blue & planet content
	if (TVon === 1) {
		fill(0, 0, 150, 70);
		noStroke();
		rectMode(CENTER);
		rect(width / 2, height / 2, width, height);

    	// planet size, varied by moving mouseX (move left = smaller, move right = larger)
    	push();
    	stroke(0, g, b);
   		strokeWeight(mouseX / 3);
    	fill(0, g, 255, 60);
    	ellipse(CENTER);
    	ellipse(width / 2, height / 2, limit, limit);
    	pop();

    	// core, smaller than planet by 1/3, also varied by moving mouseX
    	push();
    	noStroke(); 
    	stroke(0, g, 255, 70);
    	strokeWeight(limit);
    	fill(r, g, 255, 60);
    	ellipse(CENTER);
    	ellipse(width / 2, height / 2, limit / 3, limit / 3); // this ellipse will be smaller than the planet
    	pop();

   		// ring
    	push();
    	stroke(255, 100, b, 95);
    	strokeWeight(15);
    	noFill();
    	ellipse(CENTER);
    	ellipse(width / 2, height / 2, mouseY + 300, mouseX / 2);
    	pop();

    	// particles (sizes vary by sliding mouse)

    	//particle
    	fill(255, 255, b); 
    	noStroke();
    	push();
    	translate(width / 2, height / 2);
    	rotate(radians(mouseX));
    	ellipse(width / 10, height / 10, ellipseA, ellipseA);
    	pop();

    	// particle1
    	fill(g, r, b); 
    	noStroke();
    	push();
    	translate(mouseX, mouseX);
    	ellipse(width / 2, height / 2, mouseX / 3, mouseX / 3);
    	pop();

    	// particle2
    	fill(r, g, 255); 
    	noStroke();
    	push();
    	translate(mouseY, mouseY);
    	ellipseMode(CENTER);
    	ellipse(width / 2, height / 2, mouseX / 3, mouseX / 3); 
    	pop();

    	// particle3
    	fill(r, 255, 205); 
   		noStroke();
    	push();
    	translate(mouseX * 2, mouseY);
    	rotate(50);
    	ellipseMode(CENTER);
   		ellipse(width / 2, height / 2, mouseX / 10, mouseX / 10); 
    	pop();

    	// particle4
    	fill(255, g, 205); 
    	noStroke();
   		push();
    	translate(mouseX / 5, mouseY);
    	rotate(50);
    	ellipseMode(CENTER);
    	ellipse(width / 2, height / 2, mouseX / 7, mouseX / 7);
    	pop();

    	// particle5
    	fill(255, 235, b); 
    	noStroke();
    	push();
    	translate(mouseX / 5, mouseY);
    	rotate(100);
    	ellipseMode(CENTER);
    	ellipse(width / 2, height / 2, mouseX / 5, mouseX / 5);
    	pop();

    	//static bars that are triggered when mouse gets near on/off button
		fill(0, barG, 255, mouseY - 150); // opacity of static increases as mouse gets closer to the bottom frame
		noStroke();
		rectMode(CENTER);
		var center = height / 2
		rect(width / 2, center, width, mouseY);

		fill(0, barG, 0, mouseY - 150);
		noStroke();
		rectMode(CENTER);
		rect(width / 2, center - 60, width, mouseY / 3);

		fill(255, 0, barB, mouseY - 150);
		noStroke();
		rectMode(CENTER);
		rect(width / 2, center - 110, width, mouseY / 3)

		fill(barR, 0, 0, mouseY - 150);
		noStroke();
		rectMode(CENTER);
		rect(width / 2, center + 40, width, mouseY / 3);

		fill(0, 0, barB, mouseY - 150);
		noStroke();
		rectMode(CENTER);
		rect(width / 2, center + 80, width, mouseY / 3); 


		// constant top TV border
		fill(0, 0, 0)
		noStroke();
		rectMode(CENTER);
		rect(width / 2, 30, width, 60);

		// constant bottom TV border
		fill(0, 0, 0)
		noStroke();
		rectMode(CENTER);
		rect(width / 2, 440, width, 80);

	}
		// on/off button
		fill(225, 0, 0);
		noStroke();
		ellipse(eX, eY, 40, 40);
	// static bar variables
	barR = mouseY 
	barG = mouseY
	barB = mouseY

	// planet variables
	ellipseA = mouseX / 3
	r = mouseY - 100 
	g = mouseX - 150
	b = mouseY - 100
	limit = constrain(mouseX, 100, 150) // limit the size of planet
}

// turning TV on/off
function mouseClicked(){
	if (dist(mouseX, mouseY, eX, eY) <= 20) { // when mouse is clicking within radius of button, turn TV on/off
		TVon = -TVon;
    }	
}

I found keeping everything organized to be the hardest part of this project, I had a hard time finding a starting point but once I had a good base it was a lot more manageable. I wanted to recreate turning an old TV on/off and the static that goes with it, which worked nicely with the dynamic aspect of this project.