Category: Uncategorized

While working on this project, I had a lot of trouble figuring out what the boundaries and positions of my shapes would be and which actions should they do. With a couple of restarts, I finally decided what my art would look like and I am very happy with the result. It took me a little bit but I got it done!

sketch

//Seth Henry

//Section B 10:30 Tuesday

//sehenry@andrew.cmu.edu

//Assignment- Dynamic Drawing





var cirDiam = 200
var sqLength = 200
var B = 100
var sizeR = 60
var sizeE =60



function setup() {
    createCanvas(640, 480);
    
    text("p5.js vers 0.5.2 test.", 10, 15);
}

function draw() {
	colR = map(mouseX, 0, width, 0, 100); //sliding left and right will change background from black to blue
	colG = map(mouseX, 0, width, 20, 150);
	colB = map(mouseX, 0, width, 10, 200);
	background(colR, colG, colB);


	if (mouseX > width/2) { //if mouse is on the right half of the screen, an ellipse will apear
		fill(B);
		ellipse(width/2, height/2, cirDiam, cirDiam);
	} 

	if (mouseX < width/2){ //if mouse is on the left half of the screen, a rect will appear
	fill(B); 
	rectMode(CENTER);
	rect(width/2, height/2, sqLength, sqLength);
	}


push(); //small circle spinning clockwise
	fill(random(0,255));
	rotate(millis()/1000);
	ellipse(160, 360, sizeE, sizeE);
	pop(); 

	push(); //small circle spinning counterclockwise
	fill(random(0,255));
	rotate(-millis()/1000);
	ellipse(480, 360, sizeE, sizeE);
	pop();
	  

	var oppositeX = width-mouseX //Similar to old project (Allows circles and rectangles to be placed opposite of one another)
	var oppositeY = height -mouseY
 
    fill(255); //opposite X rectangle
    rect(mouseX, height/2, sizeR, sizeR);
 
    fill(0); //opposite X ellipse
    ellipse(oppositeX, height/2, sizeE, sizeE);

    
    fill(255); //opposite Y rectangle
   	rect(width/2, mouseY, sizeR, sizeR);
	

    fill(0); //opposite Y ellipse
    ellipse(width/2, oppositeY, sizeE, sizeE);

    textAlign(CENTER); //allows my name to follow the mouse and grow or shrink depending on placement
    textStyle(BOLD);
    textSize(mouseY-mouseX);
    text("SethHenry", mouseX, mouseY);


    push(); //rotates the rectangle found in the middle
    fill(B);
    translate(width/2, height/2);
    rotate(radians((mouseX/2)%180));
    rect(0,0, 50, 50);
    pop();

}

function mousePressed() { //if mouse is pressed...
	if (dist(mouseX, mouseY, width/2, height/2) < 100 ) {
		B=random(0,255); //the color of the non spinning circles and the rectangles will change color
		sizeR=random(10,100); // the size of the opposite rectangle will change size
		sizeE=random(10,100); // the size of the opposite ellipse will change color


		
	}

}

sketch

//Garrett Rauck
//Section C
//grauck@andrew.cmu.edu
//Project-03

/////////////////////////////
//GLOBAL VARS
/////////////////////////////
//colors
var positive, negative, hold;
// triangles
var triangle1LegLength, triangle1P1X, triangle1P1Y, triangle1P2X, triangle1P2Y,
    triangle1P3X, triangle1P3Y;
// lines
var linesPerQuadrant, lineSpacingX, lineSpacingY, x1, y1, x2, y2;

/////////////////////////////
//HELPER FNS
/////////////////////////////
function mousePressed() {
	hold = positive;
	positive = negative;
	negative = hold;
}

/////////////////////////////
//RUN!
/////////////////////////////
function setup() {
	//canvas setup
    createCanvas(640, 480);
    textFont("Courier New");
    textAlign(CENTER);

    //init vars
    positive = 255;
    negative = 0;
    linesPerQuadrant = 10;
    lineSpacingX = (width/2)/linesPerQuadrant;
    lineSpacingY = (height/2)/linesPerQuadrant;
}

function draw() {
	//clear drawing
	background(negative);

	// draw triangles
	fill(positive);
	triangle1LegLength = height-mouseY;
	triangle1P1X = mouseX;
	triangle1P1Y = height-triangle1LegLength;
	triangle1P2X = mouseX - triangle1LegLength;
	triangle1P2Y = height;
	triangle1P3X = mouseX + triangle1LegLength;
	triangle1P3Y = height;
	triangle(triangle1P1X, triangle1P1Y,
		     triangle1P2X, triangle1P2Y,
		     triangle1P3X, triangle1P3Y);
	triangle2LegLength = mouseY;
	triangle2P1X = mouseX;
	triangle2P1Y = triangle2LegLength;
	triangle2P2X = mouseX - triangle2LegLength;
	triangle2P2Y = 0;
	triangle2P3X = mouseX + triangle2LegLength;
	triangle2P3Y = 0;
	triangle(triangle2P1X, triangle2P1Y,
		     triangle2P2X, triangle2P2Y,
		     triangle2P3X, triangle2P3Y);

	stroke(positive);
	//vary stroke weight based on mouse distance from center
	strokeWeight(dist(mouseX,mouseY,width/2,height/2)/height);
	// draw lines
	for (var i = 0; i < linesPerQuadrant + 1; i++) {
		x1 = width/2;
		y1 = height/2 - i*lineSpacingY;
		x2 = width/2 - (mouseX/lineSpacingX/2-i)*lineSpacingX;
		y2 = height/2;
		line(x1,y1,x2,y2); //quadrant 1
		line(x1,y1,width-x2,y2); //quadrant 2
		line(x1,height-y1,x2,height-y2); //quadrant 3
		line(x1,height-y1,width-x2,y2); //quadrant 4
	};

	// text
	fill(negative);
	push(); //isolate transformations for upper text
		translate(mouseX, mouseY-height/2);
	    rotate((mouseX/width)*TWO_PI);
	    text("click to invert", 0, 0);
	pop();
	push(); //isolate transformations for lower text
		translate(mouseX, mouseY+height/2);
	    rotate((mouseX/width)*TWO_PI);
	    text("click to invert", 0, 0);
	pop();
}

After viewing some examples of dynamic drawings online, I decided that I wanted to use strictly black and white artwork and use the geometry to create dynamism in the drawing. I did a did some scratch-work in my sketchbook to try to figure out some of the math behind the geometry I wanted to create; however, to be honest, I was not able to get the “string art” to transition exactly as I wanted it to. After spending a good chunk of time trying to figure it out, I decided to just roll with it. Cheers.

 *Move Mouse Horizontally*

sketch

//Grace Cha
//Section C
//heajinc@andrew.cmu.edu
//Project-03-Dynamic Drawing

var modifier = 50;
var miniCircle = 80;

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

function draw() {

  //BACKGROUND CHANGING 
	var colorR = map(mouseX, 0, width, 145, 0);
    var colorG = map(mouseX, 0, width, 211, 0);
    var colorB = map(mouseX, 0, width, 246, 0);
    background(colorR, colorG, colorB); 
    noStroke();


// MINI UNMOVING CIRCLES
    stroke("#14BC98");
    strokeWeight(5);
    ellipse(miniCircle, height/2, 10,10); // FARTHEST LEFT CIRCLE
    ellipse(7 * miniCircle, height/2, 10,10); // FARTHEST RIGHT CIRCLE
    ellipse(width/2,3 * height/4, 10,10);  //BOTTOM CIRCLE
    ellipse(width/2, height/4, 10,10); 


    fill(60, 120, 140);


//CIRCLE GROWTHS
// BOTTOM RIGHT CIRCLE GROWTH
    ellipse(3 * width/4, 3 * height/4, modifier, modifier);
    
    // BOTTOM LEFT CIRCLE GROWTH
    ellipse(width/4, 3 * height/4, modifier, modifier);

    // TOP RIGHT CIRCLE GROWTH
    ellipse(3 * width/4, height/4, modifier, modifier);

    // TOP LEFT CIRCLE GROWTH
    ellipse(width/4, height/4, modifier, modifier);

    // BOTTOM RIGHT CIRCLE GROWTH
    ellipse(3 * width/4, 3 * height/4, modifier, modifier);

    // CENTER CIRCLE GROWTH
    ellipse(width/2, height/2, modifier, modifier);

    if (mouseX >= width/2) {
    modifier = modifier + .5; //GROWTH
    } else{
    modifier = modifier - .5; //DECREASING
    }
    if (modifier <0){
      modifier = (-1) * modifier; // RESTRICT FROM GOING NEGATIVE
    }
    if (modifier > 100){
    modifier = modifier - .5;
    }

// CENTER CHUNK
	push();
	translate(width/2, height/2);
	rotate(-mouseX,10);
	fill(0,196,172);
	noStroke();
	quad(30, 300, 86, 20, 69, 63, 30, 90)
    noFill();
    stroke("#FDFEFD");
    stroke("#74E19F");
    strokeWeight(10);
    arc(50, 55, 50, 50, PI+QUARTER_PI, TWO_PI); 
	  pop();

// CENTER "X" SHAPED POLYGON
   push();
   translate(width/2, height/2);
   rotate(mouseX/70,10); //MAKES IT MOVE A LITTLE SLOWER
   fill("#358290");
   stroke("#FDFEFD");
   strokeWeight(5);
   quad(30, 100, 86, 20, 80, 63, 30, 90)
   pop();

//  CENTER ARCS 
    push();
    translate(width/2, height/2);
    rotate(mouseX/20,60); //ROTATION IS SLOWER
    stroke("#FDFEFD");
    strokeWeight(5);
    noFill();
    ellipse(0,0,10,10); //CENTER CIRCLE
    noFill();
    //ellipse(0,0, 120,120); //BIG CIRCLE
    arc(50, 55, 50, 50, PI+QUARTER_PI, TWO_PI);
    pop();

// TOP LEFT CHUNK
    push();
    var fillR = map(mouseX, 0, width,205, 185); // SHAPE COLOR CHANGES
    var fillG = map(mouseX, 0, width, 255, 245);
    var fillB = map(mouseX, 0, width, 246, 0);
    fill(fillR, fillG, fillB);
	translate(width/4, height/4);
	rotate(-mouseX/30,10);
    stroke("#14BC98");
    strokeWeight(5);
    quad(38, 31, 86, 20, 69, 63, 30, 76)
    quad(20, 31, 10, 10, 20, 40, 20, 76)
    ellipse(0,0,10,10); //CENTER CIRCLE
    noFill();
    ellipse(0,0, 120,120); //BIG CIRCLE
    pop();

//BOTTOM RIGHT CHUNK
    push();
    var fillR = map(mouseX, 0, width,205, 185); // SHAPE COLOR CHANGES
    var fillG = map(mouseX, 0, width, 255, 245);
    var fillB = map(mouseX, 0, width, 246, 0);
    fill(fillR, fillG, fillB);
    translate( 3 *width/4, 3* height/4);
    rotate(mouseX/30,10);
    stroke("#14BC98");
    strokeWeight(5);
    quad(38, 31, 86, 20, 69, 63, 30, 76)
    quad(20, 31, 10, 10, 20, 40, 20, 76)
    ellipse(0,0,10,10); //CENTER CIRCLE
    noFill();
    ellipse(0,0, 120,120); //BIG CIRCLE
    pop();

// Top RIGHT CHUNK
    push();
	translate(3 * width/4, height/4);
	rotate(-mouseX/1,10);
	stroke("#FDFEFD");
	strokeWeight(5);
    quad(38, 31, 86, 20, 69, 63, 30, 76)
    quad(20, 31, 10, 10, 20, 40, 20, 76)
    ellipse(0,0,10,10);//CENTER CIRCLE
    pop(); 

//  BOTTOM LEFT CHUNK
    push();
    translate( width/4, 3 * height/4);
	rotate(mouseX/1,10);
	stroke("#FDFEFD");
	strokeWeight(5);
    quad(38, 31, 86, 20, 69, 63, 30, 76)
    quad(20, 31, 10, 10, 20, 40, 20, 76)
    ellipse(0,0,10,10);//CENTER CIRCLE
    pop();
  
}

This project was inspired by hurricane movements.  Back at home (Texas), it is hurricane season so I thought I would like to replicate the spinning movements that are shown on the news. This project consisted of mostly trial and error and switching small aspects across the board.  I played around with different speeds, colors, size, and direction of movements.