Category: Uncategorized

String Art Geometry

I wanted to use string art and math to create a geometric pattern. The more I was able to understand the math, the easier the designs were to make.

Strings and GeometryDownload
//used to rotate the center shapes
var angle = 0

function setup() {
    createCanvas(300, 400);
    background(0);
}

function draw() {
    background(0);
    //creates the 45 degree rotated blue/green square
    push();
    //draws square in the center of canvas
    translate(width / 2, height / 2);
    //rotates square with mouse click clockwise
    rotate(radians(45 + angle));
    //for loop creates the square / lines that appear to curve
    for (var i = 0; i <= 25; i++) {
        stroke(110, 215, 255);
        line(100, -100 + 8 * i, 100 - 8 * i, 100)
        stroke(110, 255, 224);
        line(100 - 8 * i, 100, -100, 100 - 8 * i);
        stroke(110, 255, 177);
        line(-100, 100 - 8 * i, -100 + 8 * i, -100);
        stroke(110, 255, 144);
        line(-100 + 8 * i, -100, 100, -100 + 8 * i)
    }
    pop();
    //creates the 22.5 degree rotated blue/green square
    push();
    translate(width / 2, height / 2);
    //rotates square with mouse click counterclockwise
    rotate(radians(-45/2 - angle));
    //creates the square and lines that appear to curbe
    for (var i = 0; i <= 25; i++) {
        stroke(110, 215, 255);
        line(100, -100 + 8 * i, 100 - 8 * i, 100)
        stroke(110, 255, 224);
        line(100 - 8 * i, 100, -100, 100 - 8 * i);
        stroke(110, 255, 177);
        line(-100, 100 - 8 * i, -100 + 8 * i, -100);
        stroke(110, 255, 144);
        line(-100 + 8 * i, -100, 100, -100 + 8 * i)
    }
    pop();
    //creates the purple/pink square
    push();
    translate(width / 2, height / 2);
    //rotates counterclockwise
    rotate(radians(-angle));
    //loop creates the square and the grid lines
    for (var i = 0; i <= 25; i++) {
        stroke(255, 106, 213);
        line(100, -100 + 8 * i, 100 - 8 * i, 100)
        stroke(199, 116, 232);
        line(100 - 8 * i, 100, -100, 100 - 8 * i);
        stroke(173, 140, 255);
        line(-100, 100 - 8 * i, -100 + 8 * i, -100);
        stroke(135, 149, 232);
        line(-100 + 8 * i, -100, 100, -100 + 8 * i)
    }
    pop();
    //creates the purple/pink square starting at a 22.5 degree angle
    push();
    translate(width / 2, height / 2);
    //rotate clockwise
    rotate(radians(angle + 45 / 2));
    //loops creates the square and grid lines
    for (var i = 0; i <= 25; i++) {
        stroke(255, 106, 213);
        line(100, -100 + 8 * i, 100 - 8 * i, 100)
        stroke(199, 116, 232);
        line(100 - 8 * i, 100, -100, 100 - 8 * i);
        stroke(173, 140, 255);
        line(-100, 100 - 8 * i, -100 + 8 * i, -100);
        stroke(135, 149, 232);
        line(-100 + 8 * i, -100, 100, -100 + 8 * i)
    }
    pop();
    //creates one center triangle
    push();
    translate(width / 2, height/ 2);
    //rotates counterclockwise
    rotate(radians(-angle));
    //loop creates the actual triangle and lines
    for (var i = 0; i <=10; i++) {
        stroke(0, 255, 255);
        line(-50 + 5 * i , 40 - 10 * i, 5 * i, -60 + 10 * i);
        line(5 * i, -60 + 10 * i, 50 - 10 * i, 40);
        line(50 - 10 * i, 40, -50 + 5 * i, 40 - 10 * i)
    }
    pop();
    //creates other center triangle rotated 180 degrees
    push();
    translate(width / 2, height/ 2);
    //rotates clockwise and initially rotated 180 degrees
    rotate(radians(180 + angle));
    //creates the triangle and line art
    for (var i = 0; i <=10; i++) {
        stroke(0, 255, 255);
        line(-50 + 5 * i , 40 - 10 * i, 5 * i, -60 + 10 * i);
        line(5 * i, -60 + 10 * i, 50 - 10 * i, 40);
        line(50 - 10 * i, 40, -50 + 5 * i, 40 - 10 * i)
    }
    pop();
    //creates the bordering "curves"
    for (var i = 0; i <= 25; i++) {
        stroke(134, 4, 163);
        line(300, 200 + 8 * i, 300 - 6 * i, 400);
        line(150 - 6 * i, 400, 0, 400 - 8 * i);
        line(0, 200 - 8 * i, 6 * i, 0);
        line(150 + 6 * i, 0, 300, 8 * i);
        line(6 * i, 100 - 6 * i, 150 + 6 * i, -50 + 6 * i);
        line(0, 200 - 8 * i, 12 * i, 0);
        line(300, 200 - 8 * i, 300 - 12 * i, 0);
    }
    //rotates center shapes while mouse is pressed
    if (mouseIsPressed) {
        angle += 2

    }

}

Project-04: String Art

sketch

function setup() {
	createCanvas(400, 300);
 }

// ufo light variables 
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;
var angle = 0;

function draw() {
	background(20, 0, 50, 50); // opacity at 50 for shadow effect on ufo

	// trees 2 (same pattern as above)
	stroke(55, 126, 28) // dark green
	var tree2total = 8;
	var tree2x1 = 0;
	var tree2y1 = 150;
	var tree2numLines = 30;
	var tree2dx1;
	var tree2dy1;
	var tree2dx2;
	var tree2dy2;
	for(var i = 0; i <= tree2total; i += 1) {
		line(tree2x1, height, tree2x1 + 25, tree2y1);
		line(tree2x1 + 25, tree2y1, tree2x1, height);
		tree2x1 += 50;
		tree2dx1 = 25/tree2numLines;
		tree2dy1 = 150/tree2numLines;
		tree2dx2 = -25/tree2numLines;
		tree2dy2 = -150/tree2numLines;
		
		var tree2linesx1 = tree2x1 - 50;
		var tree2linesy1 = height;
		var tree2linesx2 = tree2x1 - 25;
		var tree2linesy2 = tree2y1;
		
		for(var j = 0; j <= tree2numLines; j += 1) {
			line(tree2linesx1, tree2linesy1, tree2linesx2, tree2linesy2); 
			line(tree2linesx1 - 25, tree2linesy2, tree2linesx2 - 25, tree2linesy1); //fill tree w lines from both sides
			tree2linesx1 += tree2dx1;
		    tree2linesy1 += tree2dy1;
		    tree2linesx2 -= tree2dx2;
		    tree2linesy2 -= tree2dy2;
		}
	}
	
	// trees 1
	stroke(116, 198, 55) // green
	var treetotal = 8; // number of iterations of trees
	var treex1 = -20; // starting tree line location
	var treey1 = 170;
	var treenumLines = 20;
	var treedx1;
	var treedy1;
	var treedx2;
	var treedy2;
	for(var i = 0; i <= treetotal; i += 1) { // iterating through trees 
		line(treex1, height, treex1 + 25, treey1); // starting lines
		line(treex1 + 25, treey1, treex1, height);
		treex1 += 50; // next tree x location
		treedx1 = 25/treenumLines;
		treedy1 = 130/treenumLines;
		treedx2 = -25/treenumLines;
		treedy2 = -130/treenumLines;

		var treelinesx1 = treex1 - 50; // lines to fill trees
		var treelinesy1 = height;
		var treelinesx2 = treex1 - 25;
		var treelinesy2 = treey1;
		
		for(var j = 0; j <= treenumLines; j += 1) { // iterating through fill lines
			line(treelinesx1, treelinesy1, treelinesx2, treelinesy2); 
			line(treelinesx1 - 25, treelinesy2, treelinesx2 - 25, treelinesy1); //fill tree w lines from both sides
			treelinesx1 += treedx1;
		    treelinesy1 += treedy1;
		    treelinesx2 -= treedx2;
		    treelinesy2 -= treedy2;
		}
	}

	//stars
	randomSeed(104); //prevents completely random stars each iteration
	var stars = 100; // stars to be drawn
	for( var i = 0; i <= stars; i += 1) { //iterating to draw each star 
		fill(255);
		noStroke();
		circle(random(400), random(300), random(4)) //random size and placement of stars in sky 
	}

	// spinning abducted snowman
	push();
	translate(mouseX, 220); // to spin around center of snowman
	rotate(radians(angle));
	fill(255);
	noStroke();
	ellipse(0, -10, 10, 10); // top
	pop();
	push();
	translate(mouseX, 220);
	rotate(radians(angle));
	fill(255);
	noStroke();
	ellipseMode(CENTER);
	ellipse(0, 0, 15, 15); // middle
	pop();
	push();
	translate(mouseX, 220);
	rotate(radians(angle));
	fill(255);
	noStroke();
	ellipse(0, 10, 18, 18); // bottom
	pop();
	angle += 2; // to spin slowly

	// ufo light (same pattern as trees but no iterations)
	stroke(249, 224, 45, 50); // opacity is lighter (like light)
	line(mouseX, 50, mouseX -50, height); // depends on mouseX position
	line(mouseX + 50, height, mouseX, 50);
 	dx1 = -50/numLines;
	dy1 = (height - 50)/numLines;
	dx2 = -50/numLines;
	dy2 = (50 - height)/numLines;
	//ufo light lines 
	var x1 = mouseX;
	var y1 = 50;
	var x2 = mouseX + 50;
	var y2 = height;
	for( var i = 0; i <= numLines; i += 1) {
		line(x1, y1, x2, y2);
		line(x1 - 50, y2, x2 - 50, y1);
		x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
	}

	//ufo
	fill(220, 226, 248);
	ellipse(mouseX, 60, 100, 30);
	ellipse(mouseX, 50, 50, 40);
	fill(249, 45, 218);
	circle(mouseX, 30, 10);
}

For this project, I thought a spotlight can be aesthetically shown using string art. To make it more interesting and fun, I decided to make the spotlight come down from a UFO abducting a snowman that can move by the x position of the mouse. I also thought pine trees can be drawn using string art so I made a forest of them using for loops.

LO-04: Sound Art

One piece I found particularly interesting was Keiko Uenishi’s LandFilles. It is a structure made out of recyclables, with an “instrument” made out of used plastic bottles that Uenishi moves to interact with the piece. An algorithm (she doesn’t describe it) then interprets her movements as though the bottles were a tube or resonance chamber to create sound, while a separate person uses video cameras, lights, and monitors to change the environment of the instrument. It’s a great example of how to find uses for anything, and I find the concept of natural resonance extremely interesting. It was fascinating to see how to algorithm read Uenishi’s movements with the structure of bottles to create these hollow, airy sounds. It also had an interesting range and tone, between a lower brass instrument such as a french horn, and the upper limits of a flute, while also incorporating piano-like sound as well. The program involved most likely follows something such as a set of sensors throughout the bottles, or a mapping program which follows their movement, then models a chamber for sound that is then played through speakers. It presents Uenishi’s personal views of the environment as conservation-focused, as the entire structure is built from recycled materials, and the sounds coming from the instrument aren’t your typical beautiful notes. It produces eerie, unsettling pitches that I can only see as a commentary on our treatment of the environment.

http://soundleak.org/works/landfilles

A small section of the audiovisual performance

String Art-Butterfly

My process for this project was to find a beautiful thing to create with strings, a butterfly seems natural to me, as they are pretty and delicate.

sketchDownload
var dx1;
var dy1;
var dx2;
var dy2;
var ex1;
var ex2;
var ey1;
var ey2;
var numLines = 30;
var count=0;

function setup() {
    createCanvas(400, 300);
    background(255,157,172);
    dx1 = (150-100)/numLines;    //body variables
    dy1 = (50-25)/numLines;
    dx2 = (200-150)/numLines;
    dy2 = (250-275)/numLines;
    ex1 = (75-5)/numLines;    //wing variables
    ey1 = (25-125)/numLines;
    ex2 = (325-395)/numLines;
    ey2 = (225-125)/numLines;
    fx1 = (125-115)/numLines;    //smaller wing variables
    fy1 = (125-80)/numLines;
    fx2 = (125-115)/numLines;
    fy2 = (125-170)/numLines;

}

function mousePressed() {
  if(count==0){
  count=1
  push();
  stroke(255);
  for (var i = 2; i < 400; i+=4){
    line(0, height-i, i, 0)
    line(i, 300, 400, height-i);
  }
  pop();
  push();    //butterflies body upper left bottom right
  stroke(83,129,132);
  line(150, 25, 200, 50);
  line(200, 275, 250, 250);
  line(200, 50, 250, 25);
  line(200, 275, 150, 250);
  var x1 = 150;
  var y1 = 25;
  var x2 = 250;
  var y2 = 250;
  for (var i = 0; i <= numLines; i += 1) {
    line(x1, y1, x2, y2);
    x1 += dx1;
    y1 += dy1;
    x2 -= dx2;
    y2 -= dy2;
  }
  pop();
  push();
  stroke(83,129,132);    //butterflies body upper right bottom left
  var x1 = 250;
  var y1 = 25;
  var x2 = 150;
  var y2 = 250;
  for (var i = 0; i <= numLines; i += 1) {
    line(x1, y1, x2, y2);
    x1 -= dx1;
    y1 += dy1;
    x2 += dx2;
    y2 -= dy2;
  }
  pop();
  push();
  stroke(118,26,125);    //left purple stream
  var x1 = 75;
  var y1 = 25;
  var x2 = 75;
  var y2 = 225;
  for (var i = 0; i <= numLines; i += 1) {
    line(x1, y1, x2, y2);
    x1 -= ex1;
    y1 -= ey1;
    x2 -= ex2;
    y2 += ey2;
  }
  pop();
  push();
  stroke(118,26,125);    //right purple stream
  var x1 = 325;
  var y1 = 225;
  var x2 = 325;
  var y2 = 25;
  for (var i = 0; i <= numLines; i += 1) {
    line(x1, y1, x2, y2);
    x1 -= ex1;
    y1 -= ey1;
    x2 -= ex2;
    y2 += ey2;
  }
  pop();
  push();
  stroke(247,247,187);    //small yellow wings
  line(125,125,115,80);
  line(125,125,115,170);
  line(275,125,285,80);
  line(275,125,285,170);
  var x1 = 115;
  var y1 = 80;
  var x2 = 285;
  var y2 = 170;
  for (var i = 0; i <= numLines; i += 1) {
    line(x1, y1, x2, y2);
    x1 += fx1;
    y1 += fy1;
    x2 -= fx2;
    y2 += fy2;
  }
  var x1 = 115;
  var y1 = 170;
  var x2 = 285;
  var y2 = 80;
  for (var i = 0; i <= numLines; i += 1) {
    line(x1, y1, x2, y2);
    x1 += fx1;
    y1 -= fy1;
    x2 -= fx2;
    y2 -= fy2;
  }
  pop();
  push();
  stroke(4,194,226);    //upper left bottom right wing
  line(5,125,75,25);
  line(395,125,325,25);
  line(5,125,75,225);
  line(395,125,325,225);
  var x1 = 75;
  var y1 = 25;
  var x2 = 325;
  var y2 = 225;
  for (var i = 0; i <= numLines; i += 1) {
    line(x1, y1, x2, y2);
    x1 -= ex1;
    y1 -= ey1;
    x2 -= ex2;
    y2 -= ey2;
  }
  pop();
  push();
  stroke(4,194,226);    //lower left upper right wing
  var x1 = 5;
  var y1 = 125;
  var x2 = 395;
  var y2 = 125;
  for (var i = 0; i <= numLines; i += 1) {
    line(x1, y1, x2, y2);
    x1 += ex1;
    y1 -= ey1;
    x2 += ex2;
    y2 -= ey2;
  }
  pop();
  noLoop();
} else if(count==1){
  count=0;
  push();
  stroke(255,255,0);
  for (var i = 2; i < 400; i+=4){
    line(0, height-i, i, 0)
    line(i, 300, 400, height-i);
  }
  pop();
  push();    //butterflies body upper left bottom right
  stroke(255,165,0);
  line(150, 25, 200, 50);
  line(200, 275, 250, 250);
  line(200, 50, 250, 25);
  line(200, 275, 150, 250);
  var x1 = 150;
  var y1 = 25;
  var x2 = 250;
  var y2 = 250;
  for (var i = 0; i <= numLines; i += 1) {
    line(x1, y1, x2, y2);
    x1 += dx1;
    y1 += dy1;
    x2 -= dx2;
    y2 -= dy2;
  }
  pop();
  push();
  stroke(255,165,0);    //butterflies body upper right bottom left
  var x1 = 250;
  var y1 = 25;
  var x2 = 150;
  var y2 = 250;
  for (var i = 0; i <= numLines; i += 1) {
    line(x1, y1, x2, y2);
    x1 -= dx1;
    y1 += dy1;
    x2 += dx2;
    y2 -= dy2;
  }
  pop();
  push();
  stroke(0,255,165);    //left green stream
  var x1 = 75;
  var y1 = 25;
  var x2 = 75;
  var y2 = 225;
  for (var i = 0; i <= numLines; i += 1) {
    line(x1, y1, x2, y2);
    x1 -= ex1;
    y1 -= ey1;
    x2 -= ex2;
    y2 += ey2;
  }
  pop();
  push();
  stroke(0,255,165);    //right green stream
  var x1 = 325;
  var y1 = 225;
  var x2 = 325;
  var y2 = 25;
  for (var i = 0; i <= numLines; i += 1) {
    line(x1, y1, x2, y2);
    x1 -= ex1;
    y1 -= ey1;
    x2 -= ex2;
    y2 += ey2;
  }
  pop();
  push();
  stroke(255,0,90);    //small pink wings
  line(125,125,115,80);
  line(125,125,115,170);
  line(275,125,285,80);
  line(275,125,285,170);
  var x1 = 115;
  var y1 = 80;
  var x2 = 285;
  var y2 = 170;
  for (var i = 0; i <= numLines; i += 1) {
    line(x1, y1, x2, y2);
    x1 += fx1;
    y1 += fy1;
    x2 -= fx2;
    y2 += fy2;
  }
  var x1 = 115;
  var y1 = 170;
  var x2 = 285;
  var y2 = 80;
  for (var i = 0; i <= numLines; i += 1) {
    line(x1, y1, x2, y2);
    x1 += fx1;
    y1 -= fy1;
    x2 -= fx2;
    y2 -= fy2;
  }
  pop();
  push();
  stroke(255,0,218);    //upper left bottom right wing
  line(5,125,75,25);
  line(395,125,325,25);
  line(5,125,75,225);
  line(395,125,325,225);
  var x1 = 75;
  var y1 = 25;
  var x2 = 325;
  var y2 = 225;
  for (var i = 0; i <= numLines; i += 1) {
    line(x1, y1, x2, y2);
    x1 -= ex1;
    y1 -= ey1;
    x2 -= ex2;
    y2 -= ey2;
  }
  pop();
  push();
  stroke(255,0,218);    //lower left upper right wing
  var x1 = 5;
  var y1 = 125;
  var x2 = 395;
  var y2 = 125;
  for (var i = 0; i <= numLines; i += 1) {
    line(x1, y1, x2, y2);
    x1 += ex1;
    y1 -= ey1;
    x2 += ex2;
    y2 -= ey2;
  }
  pop();
  noLoop();
}
}

Project-04: String Art

stringartjessa
var dx1;
var dy1;
var dx2;
var dy2;
var count = 50;

function setup() {
    createCanvas(400, 400);
    background(0);
    dx1 = (400-200)/count;
    dy1 = (0-200)/count;
    dx2 = (400-400)/count;
    dy2 = (400-400)/count;
    rectMode(CENTER);
}

function draw() {
	
	//divide the canvas into quadrants
	fill(255, 255, 255, 25);	//set fill to transparent white
	rect(300,0,width/2, height);	//draw square in top right
	rect(0,300,width, height/2);	//draw square in bottom left

	push();
	push();
	push();
	
	translate(-200,0)	//move the origin to the left
	//shape 1
	stroke('cyan')
	var x1 = 200;
    var y1 = 200;
    var x2 = 400;
    var y2 = 200;

    for (var i = 0; i <= count; i += 1) {
       line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    noLoop();
    }

    pop()	//return origin position
    //shape 2
    stroke('white')
    da1 = (200-0)/count;
    db1 = (200-0)/count;
    da2 = (400-0)/count;
    db2 = (200-400)/count;

    var a1 = 0;
    var b1 = 0;
    var a2 = 400;
    var b2 = 400;

    for (var i = 0; i <= count; i += 1) {
       line(a1, b1, a2, b2);
        a1 += da1;
        b1 += db1;
        a2 += da2;
        b2 += db2;
    noLoop();
    }
    
    push();	//save current canvas properties
    rotate(radians(45));	//rotate canvas 45 degrees
    
    //shape 3
    stroke('magenta')
    dc1 = (0-400)/count;
    dd1 = (0-0)/count;
    dc2 = (0-200)/count;
    dd2 = (400-200)/count;

    var c1 = 400;
    var d1 = 0;
    var c2 = 200;
    var d2 = 200;

    for (var i = 0; i <= count; i += 1) {
       line(c1, d1, c2, d2);
        c1 += dc1;
        d1 += dd1;
        c2 += dc2;
        d2 += dd2;
    noLoop();
}

	pop();	//restore canvas properties before drawing shape 3
	rotate(radians(-20))	//rotate canvas 20 degrees counterclockwise
	translate(-78,58)	//move canvas to the left and down so top point of shape 4 meets center of canvas

	//shape 4
	stroke('cyan')

	de1 = (200-400)/count;
    df1 = (200-400)/count;
    de2 = (0-200)/count;
    df2 = (400-200)/count;

    var e1 = 400;
    var f1 = 400;
    var e2 = 200;
    var f2 = 200;

    for (var i = 0; i <= count; i += 1) {
       line(e1, f1, e2, f2);
        e1 += de1;
        f1 += df1;
        e2 += de2;
        f2 += df2;
    noLoop();
}
	pop();	//reset canvas properties to before shape 3 was drawn
	
	//shape 5
	stroke('magenta');
	dg1 = (200-400)/count;
    dh1 = (0-0)/count;
    dg2 = (200-400)/count;
    dh2 = (400-100)/count;

    var g1 = 400;
    var h1 = 0;
    var g2 = 400;
    var h2 = 200;

    for (var i = 0; i <= count; i += 1) {
       line(g1, h1, g2, h2);
        g1 += dg1;
        h1 += dh1;
        g2 += dg2;
        h2 += dh2;
    noLoop();
}
	translate(-15,135)	//move canvas to the left and down
	rotate(radians(-44))	//rotate canvas 44 degrees counterclockwise

	//shape 6
	stroke('white')
	dj1 = (400-200)/count;
    dk1 = (200-0)/count;
    dj2 = (200-400)/count;
    dk2 = (400-200)/count;

    var j1 = 200;
    var k1 = 0;
    var j2 = 400;
    var k2 = 200;

    for (var i = 0; i <= count; i += 1) {
       line(j1, k1, j2, k2);
        j1 += dj1;
        k1 += dk1;
        j2 += dj2;
        k2 += dk2;
	}
	noLoop();
}

It took me a while to figure out how to manipulate the loops to make the shapes I wanted, so I made some general sketches to guide the composition and the guide lines. Ultimately, I had to transform the canvas and make slight modifications throughout the code to get the visual effect I wanted, but this would have been impossible to do without loops.

A sketch laying out the composition for the string art piece I made

Project – String Art

My String Art project is heavily inspired by the installation art of the Japanese artist Chiharu Shiota. The String Art assignment reminded me of her intricate installations of spaces and objects clad in an intricate weaving of thread. My process began with me drawing the setting, a dingy gallery space with an ominous void. Afterwards, I decided to make the drawing interactive and have the string art appear after the user clicks into the void.

sketchDownload
// String Art
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
var dx5;
var dy5;
var numLines = 200;
var glowSize = 0;
function setup() {
    createCanvas(400, 300);
    background(0);
    text("p5.js vers 0.9.0 test.", 10, 15);
    
  
}

function draw() {
	var voidX = width/2 - 40;
	var voidY = height/2 - 40;
	background(0);
	fill(220);
	stroke(220);
	rect(0,0,width,height); // room wall
	stroke(255,0,0);
	fill(0);
	circle(voidX, voidY, 125); //sinister void
	noStroke();
	fill(255,0,0,20);
	circle(voidX, voidY, 140 + glowSize); //glow around void
	fill(100);
	rect(0, height/2 + 70, width, height); //room floor
	//wall lights
	fill(255,255,0,70);
	circle(50,0,30);
	circle(120,0,30);
	circle(190,0,30);
	circle(260,0,30);
	circle(330,0,30);
	fill(255,255,0,100);
	circle(50,0,40);
	circle(120,0,40);
	circle(190,0,40);
	circle(260,0,40);
	circle(330,0,40);
	//reflection on floor
	fill(255,255,0,20);
	ellipse(190,height/2 + 90,300,10);
	fill(255,255,0,45);
	ellipse(190,height/2 + 90,200,5);
	//if user clicks in void eye and string art appears
	if (mouseIsPressed & abs(mouseX - voidX) <= 62.5 && abs(mouseY -voidY)<=62.5){
		//eye
		fill(255);
		noStroke();
		circle(voidX,voidY,60);
		fill(255,0,0);
		circle(voidX,voidY,20);
		fill(0);
		circle(voidX,voidY,10);
		//string art
		noFill();
		strokeWeight(.1);
		stroke(255,0,0);
		line(width, 0, 0, 10);
		line(10,0,width,30);
		line(40,height,100,0);
		line(300,0,350,height);
		line(230,0,200,height);
		dx1 = -width/numLines;
		dy1 = 10/numLines
		dx2 = (width-10)/numLines;
		dy2 = -height/numLines;
		dx3 = 60/numLines;
		dy3 = -height/numLines;
		dx4 = 50/numLines;
		dy4 = height/numLines;
		dx5 = -30/numLines;
		dy5 = height/numLines;
		var x1 = width;
		var y1 = 0;
		var x2 = 10;
		var y2 = 0;
		var x3 = 40;
		var y3 = height;
		var x4 = 300;
		var y4 = 0;
		var x5 = 230;
		var y5 = 0;
		for(var drawLine = 0; drawLine <= numLines; drawLine += 1){
			line(x1,y1,x2,y2);
			line(x1,y1,x3,y3);
			line(x1,y1,x4,y4);
			line(x1,y1,x5,y5);
			line(x2,y2,x3,y3);
			line(x2,y2,x4,y4);
			line(x2,y2,x5,y5);
			line(x3,y3,x4,y4);
			line(x3,y3,x5,y5);
			line(x4,y4,x5,y5);
			x1 += dx1;
			x2 += dx2;
			x3 += dx3;
			y1 += dy1;
			y2 += dy2;
			y3 += dy3;
			x4 += dx4;
			y4 += dy4;
			x5 += dx5;
			y5 += dy5;
		}

	}
	if(glowSize == 60){
		glowSize = 0;
	} else {
		glowSize += 1;
	}
}
A Chiharu Shiota installation that helped inspire my work

Shark Eggs

This piece came about from taking one component, the “V” shaped lines that guide the curved net, and putting combining them. It started with rotating them and putting 3 next to each other in alternating order, and then naturally mirroring that vertically, and connecting the sides together to create a strange shape that reminded me of an egg sac that had been opened. Naturally, I wanted to fit something inside the space, and create a distance as if one is passing through this hole to the other side. This idea naturally led to the development of the outside walls, to give a sense that the viewer is currently passing through one of these shapes.

Eamonn Burke Shark Eggs

var numLines = 40;

function setup() {
    createCanvas(600,600);
    background(200);
push();
    translate(100,100);     //translate object 100 x, 100 y
stroke(255)
strokeWeight(3)         //white guide lines 
    line(100,100,300,100);      //top horizontal
    line(100,300,300,300);      //bottom horizontal
    line(200,0,200,100);        //top vertical
    line(200,400,200,300);      //bottom vertical
    line(100,200,51,200);       //left horizontal
    line(300,200,349,200);      //right horizontal
    line(100,100,100,300);      //left vertical
    line(300,100,300,300);      //right vertical
         //
stroke(0)
strokeWeight(2)     //lines for middle sac
    line(200,0,100,200);        //top middle (1)
    line(300,200,200,0);        //top middle (2)
    line(200,400,100,200);      //bottom middle (3)
    line(300,200,200,400);      //bottom middle (4)
    line(300,200,200,0);        //top right (5)
    line(400,0,300,200);        //top right (6)
    line(100,200,200,0);        //top left (7)
    line(0,0,100,200);          //top left (8)
    line(300,200,200,400);      //bottom right (9)
    line(400,400,300,200);      //bottom right (10)
    line(100,200,200,400);      //bottom left (11)
    line(0,400,100,200);        //bottom left (12)  
    line(300,200,400,0);        //right side (13)
    line(400,400,300,200);      //right side (14)
    line(100,200,0,0);          //left side (15)
    line(0,400,100,200);        //left side (16)
strokeWeight(1.5)       //lines for furthest sac
    line(200,175,200,225);      //vertical sac line   
    line(175,200,225,200);      //horizontal sac line
    line(200,200,145,130);      //top (19)
    line(255,130,200,200);      //top (20)
    line(200,200,145,130);      //left side (21)
    line(145,270,200,200);      //left side (22)
    line(200,200,255,130);      //right side (23)
    line(255,270,200,200);      //right side (24)
    line(200,200,145,270);      //bottom (25)
    line(255,270,200,200);      //bottom (26) 


strokeWeight(2)
    
pop();
translate(-150,-300)
strokeWeight(5)     //lines for closest sac
    line(450,0,100,600);        //top middle (27)
    line(800,600,450,0);        //top middle (28)
    line(450,1200,100,600);     //bottom middle(29)
    line(800,600,450,1200);     //bottom middle(30)
    line(800,600,450,0);        //top right (31)
    line(1150,0,800,600);       //top right (32)
    line(100,600,-250,0);       //top left (33)
    line(450,0,100,600);        //top left (34)
    line(800,600,450,1200);     //bottom right (35)
    line(1150,1200,800,600);    //bottom right (36)
    line(100,600,-250,1200);    //bottom left (37)
    line(450,1200,100,600);     //bottom left (38)
    strokeWeight(1)
      
                                //spaces between lines
    dx1 = (100-200)/numLines;
    dy1 = (200-0)/numLines;
    dx2 = (200-300)/numLines;
    dy2 = (0-200)/numLines;
    dx3 = (100-200)/numLines;
    dy3 = (200-400)/numLines;
    dx4 = (200-300)/numLines;
    dy4 = (400-200)/numLines;
    dx5 = (200-300)/numLines;
    dy5 = (0-200)/numLines;
    dx6 = (300-400)/numLines;
    dy6 = (200-0)/numLines;
    dx7 = (200-100)/numLines;
    dy7 = (0-200)/numLines;
    dx8 = (100-0)/numLines;
    dy8 = (200-0)/numLines;
    dx9 = (200-300)/numLines;
    dy9 = (400-200)/numLines;
    dx10 = (300-400)/numLines;
    dy10 = (200-400)/numLines;
    dx11 = (200-100)/numLines;
    dy11 = (400-200)/numLines;
    dx12 = (100-0)/numLines;
    dy12 = (200-400)/numLines;
    dx13 = (400-300)/numLines;
    dy13 = (0-200)/numLines;
    dx14 = (300-400)/numLines;
    dy14 = (200-400)/numLines;
    dx15 = (0-100)/numLines;
    dy15 = (0-200)/numLines;
    dx16 = (100-0)/numLines;
    dy16 = (200-400)/numLines;
    dx17 = (100-100)/numLines;
    dy17 = (300-100)/numLines;
    dx18 = (300-300)/numLines;
    dy18 = (300-100)/numLines;
    dx19 = (145-200)/numLines;
    dy19 = (130-200)/numLines;
    dx20 = (200-255)/numLines;
    dy20 = (200-130)/numLines;
    dx21 = (145-200)/numLines;
    dy21 = (130-200)/numLines;
    dx22 = (200-145)/numLines;
    dy22 = (200-270)/numLines;
    dx23 = (255-200)/numLines;
    dy23 = (130-200)/numLines;
    dx24 = (200-255)/numLines;
    dy24 = (200-270)/numLines;
    dx25 = (145-200)/numLines;
    dy25 = (270-200)/numLines;
    dx26 = (200-255)/numLines;
    dy26 = (200-270)/numLines;
    dx27 = (100-450)/numLines;
    dy27 = (600-0)/numLines;
    dx28 = (450-800)/numLines;
    dy28 = (0-600)/numLines;
    dx29 = (100-450)/numLines;
    dy29 = (600-1200)/numLines;
    dx30 = (450-800)/numLines;
    dy30 = (1200-600)/numLines;
    dx31 = (450-800)/numLines;
    dy31 = (0-600)/numLines;
    dx32 = (800-1150)/numLines;
    dy32 = (600-0)/numLines;
    dx33 = ((-250)-100)/numLines;
    dy33 = (0-600)/numLines;
    dx34 = (100-450)/numLines;
    dy34 = (600-0)/numLines;
    dx35 = (450-800)/numLines;
    dy35 = (1200-600)/numLines;
    dx36 = (800-1150)/numLines;
    dy36 = (600-1200)/numLines;
    dx37 = ((-250)-100)/numLines;
    dy37 = (1200-600)/numLines;
    dx38 = (100-450)/numLines;
    dy38 = (600-1200)/numLines;
   
}

function draw() {
translate(100,100);
    var x1 = 200;       //first x and y values of each line
    var y1 = 0;
    var x2 = 300;
    var y2 = 200;
    var x3 = 200;
    var y3 = 400;
    var x4 = 300;
    var y4 = 200;
    var x5 = 300;
    var y5 = 200;
    var x6 = 400;
    var y6 = 0;
    var x7 = 100;
    var y7 = 200;
    var x8 = 0;
    var y8 = 0;
    var x9 = 300;
    var y9 = 200;
    var x10 = 400;
    var y10 = 400;
    var x11 = 100;
    var y11 = 200;
    var x12 = 0;
    var y12 = 400;
    var x13 = 300;
    var y13 = 200;
    var x14 = 400;
    var y14 = 400;
    var x15 = 100;
    var y15 = 200;
    var x16 = 0;
    var y16 = 400;
    var x17 = 100;
    var y17 = 100;
    var x18 = 300;
    var y18 = 100;
    var x19 = 200;
    var y19 = 200;
    var x20 = 255;
    var y20 = 130;
    var x21 = 200;
    var y21 = 200;
    var x22 = 145;
    var y22 = 270;
    var x23 = 200;
    var y23 = 200;
    var x24 = 255;
    var y24 = 270;
    var x25 = 200;
    var y25 = 200;
    var x26 = 255;
    var y26 = 270;
pop();
    var x27 = 450;
    var y27 = 0;
    var x28 = 800;
    var y28 = 600;
    var x29 = 450;
    var y29 = 1200;
    var x30 = 800;
    var y30 = 600;
    var x31 = 800;
    var y31 = 600;
    var x32 = 1150;
    var y32 = 0;
    var x33 = 100;
    var y33 = 600;
    var x34 = 450;
    var y34 = 0;
    var x35 = 800;
    var y35 = 600;
    var x36 = 1150;
    var y36 = 1200;
    var x37 = 100;
    var y37 = 600;
    var x38 = 450;
    var y38 = 1200;
    var x39 = -100;
    var y39 = -100;
    var x40 = 600;
    var y40 = -100;


    for (var i = 0; i <= numLines; i += 1) {        //when variable i is less than the variable
                                                    //numLines, run this loop
stroke(255,50);     //opaque white
       line(x17,y17,x18,y18);       //"screen"
            x17 += dx17         //add spacing to current x and repeat
            y17 += dy17     //add spacing to current y and repeat
            x18 += dx18
            y18 += dy18

stroke(50)      //medium dark gray
        line(x1, y1, x2, y2);       //top middle flap
            x1 += dx1;
            y1 += dy1;
            x2 += dx2;
            y2 += dy2;

        line(x3,y3,x4,y4);      //bottom middle flap
            x3 += dx3;
            y3 += dy3;
            x4 += dx4;
            y4 += dy4;

        line(x5,y5,x6,y6);      //top right flap
            x5 += dx5;
            y5 += dy5;
            x6 += dx6;
            y6 += dy6;

        line(x7,y7,x8,y8);      //top left flap
            x7 += dx7;
            y7 += dy7;
            x8 += dx8;
            y8 += dy8;

        line(x9,y9,x10,y10);        //bottom left flap
            x9 += dx9;
            y9 += dy9;
            x10 += dx10;
            y10 += dy10;

        line(x11,y11,x12,y12);      //bottom right flap
            x11 += dx11;
            y11 += dy11;
            x12 += dx12;
            y12 += dy12;

        line(x13,y13,x14,y14);      //right side flap
            x13 += dx13
            y13 += dy13
            x14 += dx14
            y14 += dy14

        line(x15,y15,x16,y16);      //left side flap
            x15 += dx15
            y15 += dy15
            x16 += dx16
            y16 += dy16
stroke(100);        //light gray            //flaps for furthest sac
         line(x19,y19,x20,y20);     //top flap
            x19 += dx19
            y19 += dy19
            x20 += dx20
            y20 += dy20

         line(x21,y21,x22,y22);     //left side flap
            x21 += dx19
            y21 += dy19
            x22 += dx22
            y22 += dy22

        line(x23,y23,x24,y24);      //right side flap
            x23 += dx23
            y23 += dy23
            x24 += dx24
            y24 += dy24

        line(x25,y25,x26,y26);      //bottom flap
            x25 += dx25
            y25 += dy25
            x26 += dx26
            y26 += dy26


stroke(0)       //black         //flaps for closest sac
        push();
        strokeWeight(2);
        translate(-250,-400);
          line(x27,y27,x28,y28);        //top flap
            x27 += dx27
            y27 += dy27
            x28 += dx28
            y28 += dy28

        line(x29,y29,x30,y30);      //bottom flap
            x29 += dx29
            y29 += dy29
            x30 += dx30
            y30 += dy30

        line(x31,y31,x32,y32);      //top right flap
            x31 += dx31
            y31 += dy31
            x32 += dx32
            y32 += dy32 

        line(x33,y33,x34,y34);      //top left flap
            x33 += dx33
            y33 += dy33
            x34 += dx34
            y34 += dy34 

        line(x35,y35,x36,y36);      //bottom right slap
            x35 += dx35
            y35 += dy35
            x36 += dx36
            y36 += dy36

        line(x37,y37,x38,y38);      //bottom left flap
            x37 += dx37
            y37 += dy37
            x38 += dx38
            y38 += dy38

        pop();
   
       
    }

    noLoop();
}

Project – Dynamic Drawing

My process was starting with a sketch and then systematically testing and working out the individual controls for each circle.

sketchDownload

//4 parameters: shade of circles/text, size of circles, position of circles, which message appears
function setup() {
    createCanvas(600, 450);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(255,0,0); 
	var grayscale = max(min(mouseX,255),0); //as mouse moves right circles become lighter
	var size1 = max(min(mouseY,227),70); //increases size as mouse moves down. Min diameter is 70, max diameter is 227
	var size2 = 297 - size1; //opposite of size 1, makes the middle circle have the opposite diameter of the other two
	var yShift = constrain(mouseY,0,height/3); //as mouse moves down circles move down
	var yShift1 = -yShift; //two circles move opposite direction of center circle
	//mouse makes different messages appear
	if(yShift == height/3){  //when the middle circle is at its lowest position the message "Et hoco modo nihil" appears
		textSize(45);
		fill(abs(255-grayscale));
		textAlign(LEFT);
		text('Et hoc',50,400);
		textAlign(CENTER);
		text('modo',width/2,50);
		textAlign(RIGHT);
		text('nihil',550,400);
	}
	if(yShift == 0){  //when the middle circle is at its highest position the message "In Quarta Parametri" appears
		textSize(45);
		fill(abs(255-grayscale));
		textAlign(LEFT);
		text('In',50,50);
		textAlign(CENTER);
		text('Quarta', width/2, 400);
		textAlign(RIGHT);
		text('Parametri',550,50);
	}
	if(height/3 + yShift + 30 == height/2){ //When all three circles are aligned the message "Quid est amor? Infantem et non cocuerunt mihi" appears
		textSize(45);
		textAlign(LEFT);
		fill(grayscale);
		text('Quid est amor?',50,50);
		textSize(30);
		textAlign(RIGHT);
		fill(abs(255-grayscale));
		text('Infantem et non nocuerunt mihi.',550,400);

	}
	noStroke();
	fill(grayscale); 
    circle(width/5,(height*2)/3 + yShift1 + 10,size1);
    circle((width*4)/5,(height*2)/3 + yShift1 + 10,size1);
    fill(abs(255-grayscale)); //this circle experiences the opposite color of the other two
    circle(width/2,height/3 + yShift + 30,size2);

	
}

Project 03: Dynamic Drawing

sketch

var angle = 0;
function setup() {
    createCanvas(600, 450);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
    background(max(mouseX/2, mouseY/2), 200, 255);
    noStroke();

    //little fish bottom left swimming in circles
    push();
    translate(350, 60);
    rotate(radians(-angle));
    fill(190, 88, 77);
    ellipse(0, 0, 100, 45);
    triangle(0, 0, 60, -30, 60, 30);
    //little fish top right swimming in circles
    pop();
    push();
    translate(60, 350);
    rotate(radians(angle));
    fill(190, 88, 77);
    ellipse(0, 0, 100, 45);
    triangle(0, 0, 60, -30, 60, 30);
    pop();
    angle += 2; 

    //little fish swimming through the ripples
    fill(190, 88, 77);
    ellipse(mouseX, mouseY, 100, 55);
    triangle(mouseX, mouseY, mouseX-60, mouseY-30, mouseX-60, mouseY+30);

    //water ripples
    //restrict mouseX to 0-450
    var mX = max(min(mouseX, 700), 0);
    //sizing of circles based on mouseX
    var size1 = mouseX;
    var size2 = mX/2;
    var size3 = mX/3;
    var size4 = mX/4;
    var size5 = mX/5;
    //first water drop
    fill(50, 0, mouseX/2, 100);
    ellipse(20, height/2, size1);
    ellipse(20, height/2, size2);
    ellipse(20, height/2, size3);
    ellipse(20, height/2, size4);
    ellipse(20, height/2, size5);
    push();
    //second water drop
    translate(150, 0);
    if (mouseX >= width/3) {
        //delays time of expansion with mouse
        var offset = -30;
        //circle
        fill(50, 50, mouseX/2, 80);
        ellipse(20, height/2, size1+offset);
        ellipse(20, height/2, size2+offset);
        ellipse(20, height/2, size3+offset);
        ellipse(20, height/2, size4+offset);
        ellipse(20, height/2, size5+offset);
    }
    //third water drop
    pop();
    push();
    translate(300, 0);
    if (mouseX >= width/2) {
        //delays time of expansion with mouse
        var offset = -60;
        //circles
        fill(50, 100, mouseX/2, 60);
        ellipse(20, height/2, size1+offset);
        ellipse(20, height/2, size2+offset);
        ellipse(20, height/2, size3+offset);
        ellipse(20, height/2, size4+offset);
        ellipse(20, height/2, size5+offset);
    }
    //fourth water drop
    pop();
    push();
    translate(400, 0);
    if (mouseX >= width/2+100) {
        //delays time of expansion with mouse
        var offset = -80;
        //circles
        fill(50, 150, mouseX/2, 40);
        ellipse(20, height/2, size1+offset);
        ellipse(20, height/2, size2+offset);
        ellipse(20, height/2, size3+offset);
        ellipse(20, height/2, size4+offset);
        ellipse(20, height/2, size5+offset);
    }   
    //fifth water drop
    pop();
    push();
    translate(500, 0);
    if (mouseX >= width/2+150) {
        //delays time of expansion with mouse
        var offset = -80;
        //circles
        fill(50, 200, mouseX/2, 40);
        ellipse(20, height/2, size1+offset);
        ellipse(20, height/2, size2+offset);
        ellipse(20, height/2, size3+offset);
        ellipse(20, height/2, size4+offset);
        ellipse(20, height/2, size5+offset);
    }   



}

This is my pond with swimming and rotating fish, I started with the idea of visualizing water droplets from rain, then thought it would be cool to add the motion of a fish swimming in it.

Project 03 – Dynamic Drawing

sketch
var squares = [];

function setup() {
    createCanvas(600, 450);
    for (var x = -280; x < 1000; x += 40) {
    	for (var y = -320; y < 1000; y += 40) {
    		squares.push(new Rect(x, y, 20, 20));
    	}
    }

}

function draw() {
    translate(300, 225);
	background(56, 63, 81);
	for (var y = 0; y < squares.length; y++) {
		squares[y].show();
	}
}


var Rect = class {
    constructor(pX, pY, w, h) {
        this.pX = pX;
        this.pY = pY;
        this.w = w;
        this.h = h;
    }

    show() {
        rectMode(CENTER);
        noStroke();
        var scale = Math.pow(mouseX - this.pX - 300, 2) + Math.pow(mouseY - this.pY - 225, 2);
        scale = min(40*225/scale, 1);
        fill(200*scale, 120/scale, 150*scale);
        rotate(scale/100);
        rect(this.pX, this.pY, this.w * scale, this.h * scale);
    }
}