Interactive Drawing

     Yesterday I completed my second mini-project utilizing the P5 library and OpenProcessing. This project focuses on interaction with the sketch using the various functions we learned from chapter 5 of Getting Started with p5.js such as, mouse input, and applying decision structures around it. We also utilize variables and the hex color space for the first time, so we can have stronger manipulation on our sketches. 

 

A link to the sketch can be found here. The color pallet that I used is here. You can also see my code embedded below:

//Intitiliazes the variables used for easing and drawing the line 
let x = 0;
let y = 0;
let px = 0;
let py = 0;
let easing = 0.20
//initialize the value of the diameter of the circles
let diameter = 100;
//Intitiliazes the variables for the location of the circles 
let column_1 = 200;
let column_2 = 400;
let column_3 = 600;
let column_4 = 800;

//Intializez the colors used in the sketch in hex value
let color_blue ="#ff0000"
let color_red = "#0000ff"

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);

}

function draw() {
	
  //Variables used for easing 
	let target_x = mouseX;
	let target_y = mouseY;
	
	//Colors the circles blue
	fill(color_blue);
	//Draws the blue circles in each column:
	ellipse(column_1, 150, diameter, diameter);
	ellipse(column_1, 350, diameter, diameter);
	ellipse(column_1, 550, diameter, diameter);
	ellipse(column_1, 750, diameter, diameter);

	ellipse(column_2, 150, diameter, diameter);
	ellipse(column_2, 350, diameter, diameter);
	ellipse(column_2, 550, diameter, diameter);
	ellipse(column_2, 750, diameter, diameter);
	
	//Colors the circles red
	fill(color_red);
	//Draws the red circles in each column:
	ellipse(column_3, 150, diameter, diameter);
	ellipse(column_3, 350, diameter, diameter);
	ellipse(column_3, 550, diameter, diameter);
	ellipse(column_3, 750, diameter, diameter);
	
	ellipse(column_4, 150, diameter, diameter);
	ellipse(column_4, 350, diameter, diameter);
	ellipse(column_4, 550, diameter, diameter);
	ellipse(column_4, 750, diameter, diameter);


	//Draws the line if any mouse button is pressed
	if (mouseIsPressed) {
		//Implementing easing for the line drawn by the mouse
		x += (target_x - x) * easing;
		y += (target_y - y) * easing;
		//changes the stroke weight based on the velocity of the mouse pointer 
		strokeWeight(dist(pmouseX, pmouseY, mouseX, mouseY))
		//Draws the line between the previous mouse pos
		line(x, y, px, py)
		
		py = y;
		px = x;
	
	
	}
	//If statment that changes the background color to red (1/2) 
	//if the mouse pointer is in the left-half of the window (2/2)
	if (mouseX < width / 2) { background(255, 0, 0, 10) stroke(color_red); fill(color_blue); //else if statment that changes the background color to blue (1/2) //if the mouse pointer is in the right-half of the window (2/2) } else if (mouseX > width / 2) {
		background(0, 0, 255, 10)
		stroke(color_blue);
	  fill(color_red);
		


	}


}

 

     The sketch that I created is an array of red and blue circles that gets revealed by changing the background (from red to blue and vice versa) through moving the mouse pointer to the left-half or right half of the screen. When clicking while dragging the mouse pointer, a line is drawn between the previous frame and the current frame of the mouse pointer’s position. I also colored it red and blue contrasting with the current background. The stroke weight of the line as well as the of the circles change and are tied to the velocity of the mouse pointer using the dist() function: this created a mesmerizing effect, and increased the interactability of my sketch. However, a slight epilepsy warning when dragging (while clicking the mouse) too fast as the circles’ stroke start to mimic flashing red and blue lights. 

   

 

 

 

 

     The magic that makes the concept behind the sketch come to life is how the background “eases” into the other color. That is done by setting the opacity or alpha of the background function to 10. I discovered this way of blending different backgrounds in last Thursday’s class when following Professor Moon during a lecture with a sketch opened up. I played with the alpha while implementing the professor’s example on changing the background based on where the mouse pointer was. The results of that tinkering was satisfying. I hope I can stumble more on to cool things like that has the potential to add a unique flair to my sketch.