September 2020 – Page 10 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Project 04 String Art

For this project I drew an eye using string art. I attempted to include face shadows by “cross-hatching” with the string art.

stringart Download

//skin lines
var dx1;
var dy1;
var dx2;
var dy2;
var numLines1 = 75
var dx3;
var dy3;
var dx4;
var dy4;
//eyebrow lines
var ba1;
var bb1;
var ba2;
var bb2;
var numLines2 = 20


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

function draw() {
	background(255);
	//background "skin" (x,y) coordinates
	stroke(172, 134, 120); // left-bottom
	dx1 = (0-0)/numLines1;
	dy1 = (300 - 0)/numLines1;
	dx2 = (400 - 0) / numLines1;
	dy2 = (300 - 300) / numLines1;
	var x1 = 0;
	var y1 = 0;
	var x2 = 0;
	var y2 = 300;
	for(var i = 0; i <= numLines1; i+= 1){
		line(x1,y1,x2,y2);
		x1 += dx1;
		y1 += dy1;
		x2 += dx2;
		x2 += dy2;
	}
	//right to bottom
	dx3 = (400 - 400) / numLines1;
	dy3 = (300 - 0) / numLines1;
	var x3 = 400
	var y3 = 0
	for(var i = 0; i <= numLines1; i += 1){
		line(x3, y3, x2, y2);
		x2 -=dx2
		y2 -= dy2
		x3 += dx3
		y3 += dy3
	}
	//top to left
	dx4 = (400 - 0) / numLines1;
	dy4 = (0 - 0) / numLines1;
	var x4 = 400
	var y4 = 0
	for(var i = 0; i <= numLines1; i += 1){
		line(x1, y1, x4, y4);
		x1 += dx1
		y1 += dy1
		x4 -= dx4
		y4 -= dy4
	}
	//top to right
	push();
	translate((width/3)*2, 0)
	scale(0.33);
	for(var i = 0; i <= numLines1; i += 1){
		line(x3, y3, x4, y4);
		x3 += dx3
		y3 += dy3
		x4 += dx4
		y4 += dy4
	}
	pop();

	//start eyebrow lines (a,b) coordinates
	stroke (52, 41,41);
	//line(20, 175, 50, 225); reference lines
	//line(350, 10, 370, 20);
	ba1 = (50 - 20)/ numLines2;
	bb1 = (225 - 175) / numLines2;
	ba2 = (370-350) / numLines2;
	bb2 = (20 -10) / numLines2;
	var a1 =20
	var b1 = 175
	var a2 = 350
	var b2 = 10
	for(var i = 0; i <= numLines2; i += 1){
		line(a2, b2, a1, b1);
		a1 += ba1
		b1 += bb1
		a2 -= ba2
		b2 -= bb2
	}
	push();
	//start pupil, bigger square (c,d) coordinates
	stroke(102, 108, 95);
	noFill();
	var sc1; 
	var sd1;
	var sc2;
	var sd2;
	var sc3;
	var sd3;
	var sc4;
	var sd4;
	var numlinesS = 25
	sc1 = (150-150) / numlinesS;
	sd1 = (190-265) / numlinesS;
	sc2 = (225 -150) / numlinesS;
	sd2 = (190- 190) / numlinesS;
	var c1 = 150
	var d1 = 265
	var c2 = 150
	var d2 = 190
	for (var i = 0; i <= numlinesS; i += 1){ //top left
		line(c1, d1, c2, d2);
		c1 += sc1
		d1 += sd1
		c2 += sc2
		d2 += sd2
	}
	sc3 = (225-225) / numlinesS;
	sd3 = (190- 265)/ numlinesS;
	var c2 = 225
	var d2 = 190
	var c3 = 225
	var d3 = 265
	for(var i = 0; i <= numlinesS; i += 1){ //top left
		line(c2, d2, c3, d3);
		c2 -= sc2
		d2 -= sd2
		c3 += sc3
		d3 += sd3
	}
	sc4 = (150 -225)/ numlinesS;
	sd4 = (265- 265) / numlinesS;
	var c4 = 225
	var d4 = 265
	for(var i = 0; i <= numlinesS; i += 1){ //top left
		line(c3, d3, c4, d4);
		c3 -= sc3
		d3 -= sd3
		c4 += sc4
		d4 += sd4
	}
	for(var i = 0; i <= numlinesS; i += 1){ //top left
		line(c4, d4, c1, d1);
		c4 -= sc4
		d4 -= sd4
		c1 -= sc1
		d1 -= sd1
	}
	//smaller square
	scale(.5);
	translate(185, 225);
    stroke(0);
	noFill();
	for (var i = 0; i <= numlinesS; i += 1){ //top left
		line(c1, d1, c2, d2);
		c1 += sc1
		d1 += sd1
		c2 += sc2
		d2 += sd2
	}
	sc3 = (225-225) / numlinesS;
	sd3 = (190- 265)/ numlinesS;
	var c2 = 225
	var d2 = 190
	var c3 = 225
	var d3 = 265
	for(var i = 0; i <= numlinesS; i += 1){ //top left
		line(c2, d2, c3, d3);
		c2 -= sc2
		d2 -= sd2
		c3 += sc3
		d3 += sd3
	}
	sc4 = (150 -225)/ numlinesS;
	sd4 = (265- 265) / numlinesS;
	var c4 = 225
	var d4 = 265
	for(var i = 0; i <= numlinesS; i += 1){ //top left
		line(c3, d3, c4, d4);
		c3 -= sc3
		d3 -= sd3
		c4 += sc4
		d4 += sd4
	}
	for(var i = 0; i <= numlinesS; i += 1){ //top left
		line(c4, d4, c1, d1);
		c4 -= sc4
		d4 -= sd4
		c1 -= sc1
		d1 -= sd1
	}
	pop();
	// details
	translate(25, 20);
	stroke(172, 134, 120); //skin color
	var shade1;
	var shadf1;
	var shade2;
	var shadf2;
    shade1 = (50 - 20)/ numLines2;
	shadf1 = (225 - 200) / numLines2;
	shade2 = (370-300) / numLines2;
	shadf2 = (20 -10) / numLines2;
	var e1 =20
	var f1 = 200
	var e2 = 300
	var f2 = 10
	for(var i = 0; i <= numLines2; i += 1){
		line(e1, f1, e2, f2);
		e1 += shade1
		f1 += shadf1
		e2 += shade2
		f2 += shadf2
	}
	

    noLoop()
}

Weather Thingy is a real time climate sound controller created by Adrien Kaesar at ECAL.
The creation consists of two main parts, the weather station and the custom built sounds controller.
The device is designed to control and modify the settings of musical instruments using real time climate-related events.
I was drawn to this project because the thought of connecting music and weather had never occured to tme before. I think this project is incredibly interesting as it allows the audience to experience weather as a sound.
I highly recommend watching the video for the project as the creator goes on to describe how each of the three weather measuring components contribute to the sound of the instrument.

String Art

sketch

//Jasmin Kim
//Section D

var numLines = 70;


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

function draw(){
    background(0);
    var x1 = -10;
    var y1 = -10;
    var x2 = width;
    var y2 = height;
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);

    for(var i = 0; i <= numLines; i += 1) {     
        stroke(i,150,100);
        line(mouseX, y1*i, x2*i, y2*i);         //right top green line
        stroke(200,i,90);
        line(x1*i,mouseY,x2*i,y2*i);            //left bottom red line
        stroke(i,i,190);
        line(mouseX*i,mouseY*i,width,height);   //blue line going over red and green

    }
    for(var i=0; i<= width; i+=30){
        stroke(255,255,0);                      //yellow curve
        line(mouseX, i, i, height - mouseY)
        line(mouseX, i, i, width - mouseX)
        stroke(255);                            //white curve
        line(width-i,y,x,height-i);     


    }
}

While I was processing this coding, I tried to display contrasting lines depending on each other’s position. I also thought about how the lines will move when my mouse moves towards the left or right.

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 04 Line Art

The line art examples reminded me of space and warp patterns we would see in movies, so I decided to try to capture a sense of movement similar to a spaceship warp.

sketch

var dx1;
var dy1;
var dx2;
var dy2;
var tunnelW = 20;
var tunnelH = 20 ;
var xwall ;
var ywall;
var conNumLines = 20;
var numLines;
var x = 0;
var rb = 0;
var gb = 0;
var bb = 0;

function setup() {
    createCanvas(400, 400);
    background(200);
}
function draw(){
    var r = (random(0,255));
    var g = (random(0,255));

    numLines = random(15);
    xwall = max(dist(mouseX,0,0,0),dist(mouseX,0,width,0));
    ywall = max(dist(0,mouseY,0,0),dist(0,mouseY,0,height));
    //setupbackground
    background(rb,gb,bb);
    rb += random(0,1);
    gb += random(0,2);
    bb += random(0,2);
    if (rb>255 || gb>255 || bb>255){
        rb=0;
        gb=0;
        bb=0;
    }
    //setup end oof tunnel 
    rectMode(CENTER);
    noFill();
    push();
    translate(mouseX,mouseY);
    rect(0,0,tunnelW+x,tunnelH+x);
    x+=3;
    if ((tunnelW+x)> xwall || (tunnelH+x)> ywall) {
        x=0;
    }
    pop();
    fill(255);
    rect(mouseX,mouseY,2*tunnelW,2*tunnelH);
    
    //inner lines
    //top line
    line(mouseX-tunnelW,mouseY-tunnelH,mouseX+tunnelW,mouseY-tunnelH);
    //bottom line
    line(mouseX-tunnelW,mouseY+tunnelH,mouseX+tunnelW,mouseY+tunnelH);
    //left line
    line(mouseX-tunnelW,mouseY-tunnelH,mouseX-tunnelW,mouseY+tunnelH);
    //right line
    line(mouseX+tunnelW,mouseY-tunnelH,mouseX+tunnelW,mouseY+tunnelH);
    
    //outer lines 
    //top line
    line(0,0,width,0);
    //bottom line
    line(0,height,width,height);
    //left lin 
    line(0,0,0,height);
    //right lin
    line(width,0,width,height);

    //perspective line
    //top 
    dx1 = ((mouseX+tunnelW)-(mouseX-tunnelW))/numLines;
    dy1 = ((mouseY-tunnelH)-(mouseY-tunnelH))/numLines;
    dx2 = (width-0)/numLines;
    dy2 = (0-0)/numLines;
    stroke(r,g,0);
    strokeWeight(random(0.5,2));
    var topx1 = mouseX-tunnelW;
    var topy1 = mouseY-tunnelH;
    var topx2 = 0;
    var topy2 = 0;
    for (var i = 0; i <= numLines; i += 1) {
        line(topx1, topy1, topx2, topy2);
        topx1 += dx1;
        topy1 += dy1;
        topx2 += dx2;
        topy2 += dy2;
    }   
    //bottom 
    dx1 = ((mouseX+tunnelW)-(mouseX-tunnelW))/numLines;
    dy1 = ((mouseY+tunnelH)-(mouseY+tunnelH))/numLines;
    dx2 = (width-0)/numLines;
    dy2 = (height-height)/numLines;
    stroke(r,g,0);
    strokeWeight(random(0.5,2));
    var bottomx1 = mouseX-tunnelW;
    var bottomy1 = mouseY+tunnelH;
    var bottomx2 = 0;
    var bottomy2 = height;
    for (var i = 0; i <= numLines; i += 1) {
        line(bottomx1, bottomy1, bottomx2, bottomy2);
        bottomx1 += dx1;
        bottomy1 += dy1;
        bottomx2 += dx2;
        bottomy2 += dy2;
    }   
    //left 
    dx1 = ((mouseX-tunnelW)-(mouseX-tunnelW))/numLines;
    dy1 = ((mouseY+tunnelH)-(mouseY-tunnelH))/numLines;
    dx2 = (0-0)/numLines;
    dy2 = (height-0)/numLines;
    stroke(r,g,0);
    strokeWeight(random(0.5,2));
    var leftx1 = mouseX-tunnelW;
    var lefty1 = mouseY-tunnelH;
    var leftx2 = 0;
    var lefty2 = 0;
    for (var i = 0; i <= numLines; i += 1) {
        line(leftx1, lefty1, leftx2, lefty2);
        leftx1 += dx1;
        lefty1 += dy1;
        leftx2 += dx2;
        lefty2 += dy2;
    }   
    //right 
    dx1 = ((mouseX+tunnelW)-(mouseX+tunnelW))/numLines;
    dy1 = ((mouseY+tunnelH)-(mouseY-tunnelH))/numLines;
    dx2 = (width-width)/numLines;
    dy2 = (height-0)/numLines;
    stroke(r,g,0);
    strokeWeight(random(0.5,2));
    var rightx1 = mouseX+tunnelW;
    var righty1 = mouseY-tunnelH;
    var rightx2 = width;
    var righty2 = 0;
    for (var i = 0; i <= numLines; i += 1) {
        line(rightx1, righty1, rightx2, righty2);
        rightx1 += dx1;
        righty1 += dy1;
        rightx2 += dx2;
        righty2 += dy2;
    }   
    stroke(255);
    //side 1 
    dx1 = (width-0)/conNumLines;
    dy1 = (0-0)/conNumLines;
    dx2 = (0-0)/conNumLines;
    dy2 = (height-0)/conNumLines;
    strokeWeight(1);
    var sidex1 = 0;
    var sidey1 = 0;
    var sidex2 = 0;
    var sidey2 = height;
    for (var i = 0; i <= conNumLines; i += 1) {
        line(sidex1, sidey1, sidex2, sidey2);
        sidex1 += dx1;
        sidey1 += dy1;
        sidex2 -= dx2;
        sidey2 -= dy2;
    }
    //side 2
    dx1 = (width-0)/conNumLines;
    dy1 = (0-0)/conNumLines;
    dx2 = (width-width)/conNumLines;
    dy2 = (height-0)/conNumLines;
    strokeWeight(1);
    var sidex1 = 0;
    var sidey1 = 0;
    var sidex2 = width;
    var sidey2 = 0;
    for (var i = 0; i <= conNumLines; i += 1) {
        line(sidex1, sidey1, sidex2, sidey2);
        sidex1 += dx1;
        sidey1 += dy1;
        sidex2 += dx2;
        sidey2 += dy2;
    }
    //side 3
    dx1 = (width-width)/conNumLines;
    dy1 = (height-0)/conNumLines;
    dx2 = (width-0)/conNumLines;
    dy2 = (height-height)/conNumLines;
    strokeWeight(1);
    var sidex1 = width;
    var sidey1 = height;
    var sidex2 = 0;
    var sidey2 = height;
    for (var i = 0; i <= conNumLines; i += 1) {
        line(sidex1, sidey1, sidex2, sidey2);
        sidex1 -= dx1;
        sidey1 -= dy1;
        sidex2 += dx2;
        sidey2 += dy2;
    }
    //side 4
    dx1 = (width-0)/conNumLines;
    dy1 = (height-height)/conNumLines;
    dx2 = (0-0)/conNumLines;
    dy2 = (height-0)/conNumLines;
    strokeWeight(1);
    var sidex1 = width;
    var sidey1 = height;
    var sidex2 = 0;
    var sidey2 = height;
    for (var i = 0; i <= conNumLines; i += 1) {
        line(sidex1, sidey1, sidex2, sidey2);
        sidex1 -= dx1;
        sidey1 -= dy1;
        sidex2 += dx2;
        sidey2 -= dy2;
    }
}

Looking Outwards 04: Sound Art

I am captivated by Christian Marclay’s collaboration with Snapchat, a series of works entitled: Snap: Sound Stories. Marclay uses publicly available Snapchat videos as a source of found videos for different interactive sound art pieces. In one, he composes a musical piece by sampling from hundreds of millions of Snapchat videos analyzed by an algorithm which detects if the frequency of the video would be a sound recognizable to the human ear.

A video detailing Christian’s Marclay’s collaboration with Snapchat, Sound Stories

In another, Marclay creates a mobile from iPhones which respond via a pitch recognition algorithm which monitors and learns the viewer’s speaking voice. Another piece incorporates collections of videos which each represent a note on a piano; the viewer can sit at the piano and play music through Snapchat videos.

Christian Marclay, The Organ (detail), 2018

Link

Looking Outwards 04: Sound Art

The project that I chose to focus on was the Synth Play by Yuri Suzuki in collaboration with Raven, a Chinese tech company focused on developing operating systems using AI and new interactions. I chose this project because like all of Suzuki’s other works, it captured my attention by how he is able to make something as complex as music creating technology into something even a small child can use. I love the accessibility of understanding and interacting with his work since it lets everyone enjoy his installations, not just those with more knowledge in a specific area. The algorithms used to generate the work is similar to how a regular synthesizer works to create or modify music. However, by applying sensors to the inflatables, it makes the experience interactive. Suzuki’s artistic sensibilities manifest in the final outcome of this project since, like his previous works, he chose to focus on creating music and easy accessibility.

Project-04 String Art

string art

var angle = 0;

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

function draw() {
   background(89, 190, 209);

  var waveLx1 = 0;
  var waveLx2 = 0;
  var waveLy = height/40;

  var dy1 = height/40;
  var dx1 = width/30;
  var dx2 = height/150;
  var i = 0;

  stroke(43, 58, 140);
  line(0, 300, 101, 55);    //for second wave
  stroke(27, 85, 145);
  line(125, 300, 200, 105);    //for third wave

  //first wave
  for (i = 0; i < 400; i += 1) {
    stroke(37, 36, 94);
    line(waveLx1, 300, waveLx2, waveLy);
    // x moves in opposite directions
    waveLx1 += dx1;
    waveLx2 -= dx2;
    waveLy += dy1;    // increase y value
  }

  push();

  //second wave
  translate(100, 50);

  waveLx1 = 0;
  waveLx2 = 0;
  waveLy = height/40;
  dy1 = height/40;
  dx1 = width/10;
  dx2 = height/100;
  i = 0;

  for (i = 0; i < 400; i += 1) {
    stroke(43, 58, 140);
    line(waveLx1, 300, waveLx2, waveLy);
    // x moves in opposite directions
    waveLx1 += dx1;
    waveLx2 -= dx2;
    waveLy += dy1;    // increase y value
  }

  pop();

  push();

  //third wave
  translate(200, 100);

  waveLx1 = 0;
  waveLx2 = 0;
  waveLy = height/40;
  dy1 = height/40;
  dx1 = width/5;
  dx2 = height/100;
  i = 0;

  for (i = 0; i < 400; i += 1) {
    stroke(27, 85, 145);
    line(waveLx1, 300, waveLx2, waveLy);
    // x moves in opposite directions
    waveLx1 += dx1;
    waveLx2 -= dx2;
    waveLy += dy1;    // increase y value
  }

  pop();

  push();

  //rotating sun 
  translate(335, 70);
  noStroke();
  fill(240, 180, 87);
  ellipse(0, 0, 40, 40);

   for (var i = 0 ; i <360; i+=10) {
    rotate(radians(angle));
    stroke(240, 180, 87);
    strokeWeight(2);
    line(0, 0, 50, 0);
    line(0, 0, 50*cos(radians(i)), 50*sin(radians(i)));
    angle = angle + 1;
  }

  pop();

  //clouds
  noStroke();
  ellipse(265, 100, 35, 35);
  ellipse(245, 105, 25, 25);
  ellipse(285, 105, 25, 25);

  ellipse(345, 135, 35, 35);
  ellipse(360, 140, 35, 35);
  ellipse(375, 140, 25, 25);
  ellipse(330, 140, 25, 25);

  
}

I was inspired by the string art image of a beach below. I drew out the basic shapes on illustrator which helped determine the points of the initial lines. The most challenging part was figuring out how to keep the sun rotating.

Project04: String Art

sketch

/*
Bon Bhakdibhumi
bbhakdib
Section D
*/
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
var dx5;
var dy5;
var dx6;
var dy6;
var dx7;
var dy7;
var dx8;
var dy8;
var numLines = 15;

function setup() {
  createCanvas(400, 300);
  text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
  background(255);
   
  var backLines = 20;
  // green and yellow green rays
  strokeWeight(2.5);
  stroke(39, 183, 121);
  line(-24, 171, 30, -2); // green reference line
  stroke(158, 191, 67);
  line(31, -13, 277, 36); // yellow reference line
  
  var dx15 = (30+24)/backLines;
  var dy15 = (-2-171)/backLines;
  var dx16 = (277-31)/backLines;
  var dy16 = (36+13)/backLines;
  var x15 = -24;
  var y15 = 171;
  var x16 = 31;
  var y16 = -13;
  for (var i = 0; i <= backLines; i ++) {
    strokeWeight(0.7);
    // if statement for equal amout of green and yellow green rays
    if (i < backLines/2) {
    stroke(39, 183, 121);
    } else {
      stroke(158, 191, 67);
    }
    line(x15, y15, x16, y16);
    x15 += dx15;
    y15 += dy15;
    x16 += dx16;
    y16 += dy16;
  }
  // lines that make up the octagon
  strokeWeight(3);
  stroke(0, 144, 85);
  line(25, 90, 101, 15); // green line
  
  stroke(241, 233 , 2);
  line(108, 12, 220, 12); // yellow line
  
  stroke(246, 137, 31);
  line(224, 13, 303, 92); // orange line 
  
  stroke(237, 28 ,36);
  line(306, 100, 306, 212); // red line
  
  stroke(122, 53, 148);
  line( 304, 216, 224, 295,); // purple line
  
  stroke(73, 78, 161);
  line(220, 296, 107, 296); // indigo line
  
  stroke(0, 114, 185);
  line(102, 292, 22, 213); // blue line 
  
  stroke(0, 153, 192);
  line(22, 205, 22, 92); // blue green
  
  // delta x & y for all the lines that make up the octagon
  dx1 = (101-25)/numLines;
  dy1 = (15-90)/numLines;
  dx2 = (220-108)/numLines;
  dy2 = (12-12)/numLines;
  dx3 = (303-224)/numLines;
  dy3 = (92-13)/numLines;
  dx4 = (306-306)/numLines;
  dy4 = (212-100)/numLines;
  dx5 = (224-304)/numLines;
  dy5 = (295-216)/numLines;
  dx6 = (107-220)/numLines;
  dy6 = (296-296)/numLines;
  dx7 = (22-102)/numLines;
  dy7 = (213-292)/numLines;
  dx8 = (22-22)/numLines;
  dy8 = (92-205)/numLines;
  
  // x & y coordinates for all the lines that make up the octagon
  var x1 = 25;
  var y1 = 90;
  var x2 = 108;
  var y2 = 12;
  var x3 = 224;
  var y3 = 13;
  var x4 = 306;
  var y4 = 100;
  var x5 = 304;
  var y5 = 216;
  var x6 = 220;
  var y6 = 296;
  var x7 = 102;
  var y7 = 292;
  var x8 = 22;
  var y8 = 205;
  
  // lines that make up the outer layer of the octagon
  strokeWeight(1);
  for (var i = 0; i <= numLines; i ++) {
    // green
    stroke(0, 144, 85);
    line(x1,y1, x2, y2);
    x1 += dx1;
    y1 += dy1;
    x2 += dx2;
    y2 += dy2;
  }
   
  x2 = 108;
  y2 = 12;
  for (var i = 0; i <= numLines; i ++) {
  // yellow
    stroke(241, 233 , 2);
    line(x2, y2, x3, y3);
    x2 += dx2;
    y2 += dy2;
    x3 += dx3;
    y3 += dy3;
   }
  
  x3 = 224;
  y3 = 13;
  for (var i = 0; i <= numLines; i ++) {
    // orange
    stroke(246, 137, 31);
    line(x3, y3, x4, y4);
    x3 += dx3;
    y3 += dy3;
    x4 += dx4;
    y4 += dy4;
  }
  
  x4 = 306;
  y4 = 100;
  for (var i = 0; i <= numLines; i ++) {
    // red
    stroke(237, 28 ,36);
    line(x4, y4, x5, y5);
    x4 += dx4;
    y4 += dy4;
    x5 += dx5;
    y5 += dy5;
  }
  
  x5 = 304;
  y5 = 216;
  for (var i = 0; i <= numLines; i ++) {
    // purple
    stroke(122, 53, 148);
    line(x5, y5, x6, y6);
    x5 += dx5;
    y5 += dy5;
    x6 += dx6;
    y6 += dy6;
  }
  
  x6 = 220;
  y6 = 296;
  for (var i = 0; i <= numLines; i ++) {
    // indigo
    stroke(73, 78, 161);
    line(x6, y6, x7, y7);
    x6 += dx6;
    y6 += dy6;
    x7 += dx7;
    y7 += dy7;
  }
  
  x7 = 102;
  y7 = 292;
  for (var i = 0; i <= numLines; i ++) {
    // blue
    stroke(0, 114, 185);
    line(x7, y7, x8, y8);
    x7 += dx7;
    y7 += dy7;
    x8 += dx8;
    y8 += dy8;
  }
  
  // Lines that make up the inner layer of the octagon
  x1 = 25;
  y1 = 90;
  x5 = 304;
  y5 = 216;
  for (var i = 0; i <= numLines; i ++) {
    // green
    strokeWeight(1);
    stroke(0, 144, 85);
    line(x1, y1, x5, y5);
    x1 += dx1;
    y1 += dy1;
    x5 += dx5;
    y5 += dy5;
  }
 
  x2 = 108;
  y2 = 12;
  x6 = 220;
  y6 = 296;
  for (var i = 0; i <= numLines; i ++) {
    // yellow
    strokeWeight(2);
    stroke(241, 233 , 2);
    line(x2, y2, x6, y6);
    x2 += dx2;
    y2 += dy2;
    x6 += dx6;
    y6 += dy6;
  }
 
  x3 = 224;
  y3 = 13;
  x7 = 102;
  y7 = 292;
  for (var i = 0; i <= numLines; i ++) {
    //red
    strokeWeight(1);
    stroke(237, 28 ,36);
    line(x3, y3, x7, y7);
    x3 += dx3;
    y3 += dy3;
    x7 += dx7;
    y7 += dy7;
  }
 
  x4 = 306;
  y4 = 100;
  x8 = 22;
  y8 = 205;
  for (var i = 0; i <= numLines; i ++) {
    // blue
    stroke(0, 114, 185);
    line(x4, y4, x8, y8);
    x4 += dx4;
    y4 += dy4;
    x8 += dx8;
    y8 += dy8;
  }
  
  // rays coming out of the octagon
  var frontLines = 25;
  
  // yellow and orange rays
  push();
  translate (-30, 0);
  strokeWeight(2.5);
  stroke(255, 199, 9);
  line(202, -25, 450, 100); // yellow
  stroke(241, 90, 34);
  line(450, 120, 198, 340); //orange
  var dx9 = (450-202)/frontLines;
  var dy9 = (100+25)/frontLines;
  var dx10 = (198-404)/frontLines;
  var dy10 = (340-149)/frontLines;
  var x9 = 202;
  var y9 = -25;
  var x10 = 450;
  var y10 = 120;
  for (var i = 0; i <= frontLines; i ++) {
    strokeWeight(0.7);
    if (i < numLines/2) {
    stroke(255, 199, 9);
    } else {
      stroke(241, 90, 34);
    }
    line(x9, y9, x10, y10);
    x9 += dx9;
    y9 += dy9;
    x10 += dx10;
    y10 += dy10;
  }
  pop();
  
  //dark blue and light blue rays
  push();
  rotate(radians(-2));
  strokeWeight(2.5);
  stroke(49, 192, 211); 
  line(17, 88, -16, 258); // dark blue
  stroke(82, 92, 193);
  line(-25, 287, 255, 308); // light blue
  var dx11 = (-16-17)/frontLines;
  var dy11 = (258-88)/frontLines;
  var dx12 = (255+25)/frontLines;
  var dy12 = (308-287)/frontLines;
  var x11 = 17;
  var y11 = 88;
  var x12 = -25;
  var y12 = 287;
  for (var i = 0; i <= frontLines; i ++) {
    strokeWeight(0.7);
    if (i < numLines/2) {
    stroke(49, 192, 211);
    } else {
      stroke(82, 92, 193);
    }
    line(x11, y11, x12, y12);
    x11 += dx11;
    y11 += dy11;
    x12 += dx12;
    y12 += dy12;
  }
  pop();
  
  // red violet and purple rays
  push();
  translate(-65, 210);
  rotate(radians(-50));
  strokeWeight(2.5);
  stroke(210, 18, 131);
  line(326, 196, 249, 346); // red violet
  stroke(115, 54, 232);
  line(314, 348, 76, 276); // purple
  var dx13 = (249-326)/frontLines;
  var dy13 = (346-196)/frontLines;
  var dx14 = (76-314)/frontLines;
  var dy14 = (276-348)/frontLines;
  var x13 = 326;
  var y13 = 196;
  var x14 = 314;
  var y14 = 348;
  for (var i = 0; i <= frontLines; i ++) {
    strokeWeight(0.7);
    if (i < numLines/2) {
    stroke(210, 18, 131);
    } else {
      stroke(115, 54, 232);
    }
    line(x13, y13, x14, y14);
    x13 += dx13;
    y13 += dy13;
    x14 += dx14;
    y14 += dy14;
  }
  pop();
  noLoop();
}

For this project, I reinterpreted Itten’s color wheel. I created the main octagon out of primary and secondary colors. I then added in the rest of the string drawings to show the various outcomes of mixing different colors together.

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.

sketch Download

// 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;
	}
}

Month: September 2020

Project 04 String Art

LO 04 -Weather Thingy

String Art

Project-04: String Art

Project 04 Line Art

Looking Outwards 04: Sound Art

Looking Outwards 04: Sound Art

Project-04 String Art

Project04: String Art

Project – String Art