Dynamic Drawing

I call this drawing the “Rainbow Eraser.” As you move the cursor from left to right, a black rectangle covers the rainbow. As you move back from right to left, the black rectangle is erased.

 

sketchindex

//Arula Ratnakar
//aratnaka
//Section C 
//Dynamic Drawing: Rainbow Eraser

var redX = 0;
var orangeX = 100; //beginning of the orange rectangle
var yellowX = 200;
var greenX = 300;
var blueX = 400;
var purpleX = 500;
var purpleY = 600;
var colorMain = 0; //variable used to create the main white rectangle at the end


function setup() {
    createCanvas(600, 600);
 } 

function draw() {
	noStroke ();
	background (0);
	fill (255, colorMain, colorMain);//fills first rectangle with red (for now)
	rect (redX ,0, orangeX, 600);
	fill ('orange');
	rect (orangeX,0, orangeX, 600);
	fill ('yellow');
	rect (yellowX, 0, orangeX, 600);
	fill ('green');
	rect (greenX, 0, orangeX, 600);
	fill ('blue');
	rect (blueX, 0, orangeX, 600);
	fill ('purple');
	rect (purpleX, 0, orangeX, 600);

	
	if (mouseX < 600) {
		redX = mouseX; //attaches mouseX to the leftmost edge of the red rectangle
	}

	if (mouseX > yellowX) {
		orangeX = mouseX;
	}

	if (mouseX > greenX){
		yellowX = mouseX;
	}

	if (mouseX > blueX){
		greenX = mouseX;
	}

	if (mouseX > purpleX){
		blueX = mouseX;
	}

	if (mouseX > 600) {
		purpleX = mouseX;//as you drag the mouse from left to right, the black background shows through, "erasing" the rainbow
	}

	if (mouseX > 600){
		colorMain = 255; // when you start to drag the mouse back from right to left, the white will "erase" the black box
	}
	

}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>p5.js vers 0.5.2, Edit index.html to Change This Title</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>

    <!-- Uncomment the lines below to include extra p5 libraries, or 
         use template-all or template-all-min:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.js"></script>
    -->

    <script src="sketch.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>

Leave a Reply