Month: September 2020

Project 04-String Art

I was inspired by Chiharu Shiota’s art installation called In Silence. I played around with having the lines in front or behind the piano and chair as the installation is 3D.

graanak-04
//Graana Khan 
// Section B

var dx1; 
var dy1;
var dx2;
var dy2;
var numLines = 30;

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

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

	//background floor 
	noStroke();
	fill(49, 49, 49);
	beginShape();
	vertex(0, 152);
	vertex(370, 136);
	vertex(400, 150);
	vertex(400, 300);
	vertex(0, 300);
	endShape();

	//string art
	dx1 = (0)/numLines;
	dy1 = (150)/numLines;
	dx2 = (400)/numLines;
	dy2 = (0)/numLines;

	var x1 = 0;
	var x2 = 400;
	var y1 = 0;
	var y2 = 400;
	

	for (var i = 0; i <= numLines; i += 1){
		stroke(0);
		strokeWeight(0.25);
		line(x1, y1, x2, y2);
		line(x1, y1+100, x2-50, y2-200);
		line(x1, y1, x2-200, y2-300);


		x1 += dx1;
		x2 += dx2;
		y1 += dy1;
		y2 += dy2;
	}

	for(var i = 0; i <= numLines; i +=1){
		strokeWeight(0.25);
		line(x2, y1, x1, y2-200);
		line(x1, y2, x2, y1);

		x1 -= dx1;
		x2 -= dx2;
		y1 -= dy1;
		y2 -= dy2;

	}

	//chair seat
	noStroke();
	fill(33);
	beginShape();
	vertex(155, 192);
	vertex(174, 181);
	vertex(193, 186);
	vertex(174, 196);
	endShape();

	//chair back
	fill(22);
	push();
	translate(151, 162);
	rotate(radians(-7));
	rect(0, 0, 3, 33);
	rect(17, 3, 3, 33);
	pop();

	push();
	translate(151, 162);
	rotate(radians(7));
	rect(1, 3, 20, 2);
	pop();
    
    //chair base and legs
	fill(22);
	beginShape();
	vertex(156, 192);
	vertex(174, 195);
	vertex(193, 186);
	vertex(193, 191);
	vertex(174, 200);
	vertex(156, 197);
	endShape();
	rect(155, 194, 3, 26);
	rect(172, 198, 3, 28);
	rect(190, 190, 3, 23);

	//piano 
	beginShape();
	vertex(188, 173);
	vertex(183, 155);
	vertex(172, 153);
	vertex(171, 145);
	vertex(179, 142);
	vertex(177, 131);
	vertex(226, 113);
	vertex(236, 113);
	vertex(253, 115);
	vertex(260, 116);
	vertex(260, 121);
	vertex(253, 125);
	vertex(255, 128);
	vertex(267, 133);
	vertex(267, 153);
	vertex(258, 164);
	vertex(255, 189);
	vertex(252, 189);
	vertex(249, 170);
	vertex(191, 157);
	vertex(191, 174);
	endShape();

	fill(231);
	beginShape();
	vertex(178, 148);
	vertex(185, 143);
	vertex(250, 155);
	vertex(245, 161);
	endShape();
   
}
Chiharu Shiota’s In Silence. 2011.

Project 04 – String Art

In making this I was inspired by the motion artist / music producer Dedouze.

sketch
//First line art
var dx1;
var dy1;
var dx2;
var dy2;

//Second line art
var dx3;
var dy3;
var dx4;
var dy4;

//Third line art
var dx5;
var dy5;
var dx6;
var dy6;

//Fourth line art
var dx8;
var dy8;
var dx9;
var dy9;

var numLines = 50;
var numLines2 = 20;
var numLines3 = 60;
var numLines4 = 40;
function setup() {
    createCanvas(400, 300);
    background(100, 105, 200);

    //First line art placement
    line(0, 0, 0, 300);
    line(0, 300, 350, 300);

    //Second line art placement
    line(0, 300, 150 ,300);
    line(400, 300, 400, 240);

    //Third line art placement
    line(0, 300, 400, 300);
    line(400, 300, 400, -100);

    //Fourth line art placement
    line(-50, 0, 0, 400);
    line(450, 40, 400, -400);

    //First line art deltas
    dx1 = (0 - 0)/numLines;
    dy1 = (300 - 0)/numLines;
    dx2 = (350 - 0)/numLines;
    dy2 = (300 - 300)/numLines;

    //Second line art deltas
    dx3 = (150 - 0)/numLines2;
    dy3 = (300 - 300)/numLines2;
    dx4 = (400 - 400)/numLines2;
    dy4 = (240 - 300)/numLines2;

    //Third line art deltas
    dx5 = (400 - 0)/numLines3;
    dy5 = (300 - 300)/numLines3;
    dx6 = (400 - 400)/numLines3;
    dy6 = (-100 - 300)/numLines3;

    //Fourth line art deltas
    dx7 = (0 - -50)/numLines4;
    dy7 = (400 - 0)/numLines4;
    dx8 = (400 - 450)/numLines4;
    dy8 = (-400 - 40)/numLines4;

}

function draw() {
    var x1 = 0;
    var y1 = 0;
    var x2 = 0;
    var y2 = 300;

    var x3 = 0;
    var y3 = 300;
    var x4 = 400;
    var y4 = 300;

    var x5 = 0;
    var y5 = 300;
    var x6 = 400;
    var y6 = 300;

    var x7 = -50;
    var y7 = 0;
    var x8 = 450;
    var y8 = 400;


    stroke(245, 255, 184);
    for (var i = 0; i <= numLines4; i += 1) {
        line(x7, y7, x8, y8);
        x7 += dx7;
        y7 += dy7;
        x8 += dx8;
        y8 += dy8;
    }

    stroke(254, 189, 255);
    for (var i = 0; i <= numLines3; i += 1) {
        line(x5, y5, x6, y6);
        x5 += dx5;
        y5 += dy5;
        x6 += dx6;
        y6 += dy6;
    }
    stroke(191, 255, 251);
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    for (var i = 0; i <= numLines2; i += 1) {
        line(x3, y3, x4, y4);
        x3 += dx3;
        y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }
    noLoop();
}

Project 04 – String Art

string art string art string art string art string art string art s-

stringartstringart
//Iris Yip
//15104 Section D

var numLines = 300;

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

function draw(){
    background(0);
    var x1 = -9;
    var y1 = -9;
    var x2 = width;
    var y2 = height;

    for(var i = 0; i <= numLines; i += 1) {     
        stroke(i,mouseX,300);
        line(mouseX-50, y1*i, x2*i, y2*i);
        line(x1*i,mouseY,x2*i,y2*i);     
        
        stroke(200,i,300);
        line(x2,0,mouseX,mouseY)
        line(0,0,mouseX,mouseY)
        
        stroke(255,mouseX,mouseY) //conglomerate of lines to the left
        line(x1*i,x2/2+100,mouseX,mouseY)
        line(x1*i,x1/2-100,mouseX,mouseY)
        
        stroke(mouseX,100,mouseY) //height/2 thing
        line(i*100,y2/2-300,mouseX,mouseY)
        line(i*3,y2/2,mouseX,mouseY)
    }
}

this was fun

LO – Sound Art

“Weather Thingy”, the invention by Adrien Kaeser uses real-time climate data to produce sound. The two main components are a weather station mounted on a tripod microphone, and a custom-built controller connected to the weather station. The controller will use variations on the weather, and the user’s input, to constrain or amplify values to produce different sounds on Kaeser’s keyboard. I am interested as to how this technology/application can be taken further. It would be interesting to see how this could be used long-term and produce music based on weekly or yearly weather.

LO-Sound Art

Iris Yip iyip
15-104 Section D
LO-04

A project with an interesting application of sound art is Prélude in ACGT – Sonification of personal (DNA) data by Pierry Jacquillard. The project uses DNA (chromosomes 1-22, XY) and converts it to artificial sound, successfully creating music. His intention was to create an intersection between nature’s “core structure” (DNA) and “artificial, man-made (CODE)”, exploring different interpretations of the idea of one’s personal “data” and deconstruct it to understand the way that these different processes translate into one another.

He created five different interfaces for the intention of simplifying and breaking down the conversion process. I was personally drawn to this project because I was fascinated with the way that it took a natural processes like the structure of our DNA and chromosomes and translated it into sound through the similarities between our biology and the way we’ve intentionally structured and built our coding languages. The way that the artist structured the conversion between our DNA and the four types of molecular bases (ACGT) with code shows a good grasp of both the biological and technological processes involved. The “rationale” (or discussion) behind the piece and how information is retrieved, understood, and maintained in different ways also produced a fascinating conversation about the nature of individuality and the creation of life itself.

Project 4 – String Art

I had a lot of fun changing the colors and locations of the lines based on mouse movement. It was also cool to see the strings and colors overlap and interact together.

Maggie String Art
//Maggie Ma
//Section D

var dx1;
var dy1;
var dx2;
var dy2;
var numLines =100;

function setup() {
    createCanvas(400, 500);
    background(200);
    line(0, 0, 0, 400);
    line(0, 400, 0, 500);
    dx1 = (0)/numLines;
    dy1 = (500-0)/numLines;
    dx2 = (400-0)/numLines;
    dy2 = (500-500)/numLines;
}

function draw() {
	background(mouseX,mouseY,100); //colorful background changes w/ mouse
	strokeWeight(.75);

    var x1 = 0;
    var y1 = 0;
    var x2 = 400;
    var y2 = 400;
    for (var i = 0; i <= numLines; i += 1) {

    	stroke(0,0,255) //bottom left lines (blue)
        line(x1, y1, x2+mouseX, y2);

        stroke(255,0,0); //top right lines (red)
        line(x1+400+mouseX, y1+500, x2-400, y2-400);

        stroke(0,255,0); //top left green lines
        line(x1,y1, x2-400+mouseX, mouseY);

        stroke(mouseY); //moving lines black to white
        line(width/2*(i/20), height/2*(i/20), mouseX*20, mouseY*20);
        line(mouseX,400,i*5,mouseY);
        line(i*5, mouseY, mouseX, 500);
        line(mouseX,i*5, 400, mouseY);

        stroke(mouseX,100,mouseY); //moving lines colorful
        line(0,i*5, mouseX, 0);
        line(0,mouseY, 0, i*10);
     	line(mouseX, i*5, 0, 500);


        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

}

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

    }

}

LO 4 – Sound Art

Images of Ikeda’s Test Pattern sound and light display.

Test Pattern 100m Version

Ryoji Ikeda (2013)

The piece of sound art that I chose to study this week is Ryoji Ikeda’s Test Pattern 100m Version. Ikeda is known for using datasets to create visceral and overwhelming displays of sound and light. The Test Pattern series uses a real-time programming system that converts data such as text, photos, movies, and sounds in barcode patterns of binary 0s and 1s. The purpose of the project is to “examine the relationship between critical points of device performance and the threshold of human perception” (Ryoji Ikeda) by visually displaying intense flickering panels of black and white (which correspond with the barcode patterns) that synchronise perfectly with the audio. The velocity of the moving images is extremely fast, to the point that it’s almost epileptic; viewers stand on the huge flashing screen in a dark room and are enveloped by sound and light.   

LO 04 – Music and Art

Art Title: Expressions
Artists: Kenichi Yoneda and Yu Miyashita

The art piece is a video compilation that ties art to music. The art itself sometimes appears like a physical painting and others as a computer generated piece. This is the most admirable part in my opinion as it combines so many forms of art and can even generate realistic painting using rendering. There were many maps drawn to create the realistic rendering which shows the extensive work put into the piece. The artistic sensibilities are manifested in mocking traditional art styles using more modern techniques. The algorithms used to create the art were most likely very complicated not only to just make the pictures and designs, but the animations as well. Additionally, I am unsure if the music was created to match the animations of if the motion was based upon the music. In either case, the logistics of matching the two art forms was probably extremely difficult and tiresome. The beauty of the art is using so many different techniques and mediums to give the final result.

link: https://www.creativeapplications.net/sound/expressions-paint-and-pixel-matiere-at-micro-scale/

Expressions – Paint and pixel matière at micro-scale

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.