Category: SectionA

Project-04-String-Art

sketchDownload
//Isabel Xu
//Project 04
var numLines = 50;
var LineEndX = 200
var LineEndY = 390

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

function draw() {
  
  var LineEndX = constrain(mouseX,50,350);
  var LineEndY = constrain(mouseY,50,250);
  
  //the two lines of the movable cape
  background(136,136,195);
  stroke(255);
  line(110, 80, LineEndX, LineEndY);
  line(200, 50, 50, 240);
  dx1 = (LineEndX-110)/numLines;
  dy1 = (LineEndY-80)/numLines;
  dx2 = (50-200)/numLines;
  dy2 = (240-50)/numLines;
  
  //the two lines of headpiece
  line(290, 80, LineEndX, LineEndY);
  line(200, 50, 350, 240);
  hx3 = (LineEndX-290)/numLines;
  hy3 = (LineEndY-80)/numLines;
  hx4 = (350-200)/numLines;
  hy4 = (240-50)/numLines;

  
    var x1 = 110;
    var y1 = 80;
    var x2 = 200;
    var y2 = 50;
    var x3 = 290
    var y3 = 80
    var x4= 200
    var y4 = 50
    
    //human figure body 
    noStroke();
    fill(159,160,195);
    rect(140,65,120,400,50,50,45,45);
  
    //generate the strings between lines
    for (var i = 0; i <= numLines; i += 1) {
        stroke(random(255),200,random(255));
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
      
        line(x3, y3, x4, y4);
        x3 += hx3;
        y3 += hy3;
        x4 += hx4;
        y4 += hy4;
      
    }
    for (var i = 0; i <= numLines; i++){
	    strokeWeight(0.75); 
        stroke(220,220,random(255));
        line(mouseX, i * 2+30, 220 - i, 80);  
    }
  
  noStroke();
  fill(159,160,215);
  ellipse(200,40,60,60);//head
  noStroke();
  fill(191,154,143);
  ellipse(175,50,18,14);
  ellipse(225,50,18,14);//blush
  
  
    
  

}

The idea of this project is having an adjustable wearable cape that is made with interactive e-textile. Mouse location updates the shape of the cape.

Project 4: String Art

sketchDownload
// Susie Kim
// Section A

function setup() {
    createCanvas(300, 400);
    background(235, 215, 192);
}

function draw() {
	background(235, 215, 192);
	for (var i = 0; i <= 100; i+= 5) {

		// back mountain range lines
		strokeWeight(1);
		stroke(173, 178, 185);
		line(0, 100 + i*2, i*5, 120 + i*4); // left set
		line(300, 120 + i, i*3, 200 + i*3); // right set

		// water lines
		stroke(81, 99, 174);
		line(300, 220 + i*4, i*3, 220 + i*4);

		// water lines darker
		strokeWeight(0.5);
		stroke(27, 50, 148);
		line(300, 265 + i*5, i*4, 265 + i*5);

        // black forefront lines
		stroke(0);
		strokeWeight(1);
		line(0, 260 + i*2, i*9, 280 + i*4); // left set
		strokeWeight(1.5);
		line(300, 330 + i*2, i*0.1, 360 + i*3); // darker right set

        // sun reflection
		stroke(255, 133, 71);
		strokeWeight(1);
		noFill();
		ellipse(100, 100 + i*2, 60-i, 60-i);

		// birbs
		stroke(50);
		strokeWeight(0.5);
		ellipse(200+i*2, 100 - i*3, 30-i, 30-i);
		ellipse(200+i*2, 40 - i*4, 20-i, 20-i);

	}
}

For this week’s project, I tried to take the painting pictured below and convert it into an abstract string art design. I had a lot of fun playing with the shapes both lines and ellipses could create!

Project 04: String Art

project-04-stringArt 
/*
Lauren Kenny
lkenny
Section A

This is a program that creates an abstract string art piece.
*/

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

function draw() {
    background(0);
    strokeWeight(.2);
    //yellow center
    for(let i=1; i<50; i+=.5) {
        stroke(220, 220, 0);
        line(width/2+10*i, height/2, width/2, 10*i);
    }
    //red center
    for(let i=1; i<50; i+=.5) {
        stroke(220, 0, 0);
        line(width/2-10*i, height/2, width/2, 10*i);
    }
    //blue center
    for(let i=1; i<50; i+=.5) {
        stroke(0, 0, 220);
        line(width/2-10*i, height/2, width/2, height-10*i);
    }
    //green center
    for(let i=1; i<50; i+=.5) {
        stroke(0, 220, 0);
        line(width/2+10*i, height/2, width/2, height-10*i);
    }
    //yellow outside
    for(let i=1; i<50; i+=.5) {
        stroke(220, 220, 0);
        line(10*i, height, 0, (height/2)+(10*i));
    }
    //red outside
    for(let i=1; i<50; i+=.5) {
        stroke(220, 0, 0);
        line(width-10*i, height, width, (height/2)+(10*i));
    }
    //blue outside
    for(let i=1; i<50; i+=.5) {
        stroke(0, 0, 220);
        line(width-10*i, 0, width, (height/2)-(10*i));
    }
    //green outside
    for(let i=1; i<50; i+=.5) {
        stroke(0, 220, 0);
        line(10*i, 0, 0, (height/2)-(10*i));
    }
}

For this project, I wanted to experiment with the illusion of curved lines through looped string art. I focused on repeating shapes and simple colors to create a geometric piece.

Looking Outwards-04

The SoundShirt

The SoundShirt is a project created by CuteCircuit, a company co-founded by Francesca Rosella and Ryan Genz. This company was founded on the desire to use technology to amplify haptic senses and interactions. In 2002, they made the HugShirt which is a shirt with sensors that recreate the sensation of touch. 14 years later in 2016, they branched off this concept to develop the SoundShirt. The SoundShirt contains even more sensors that connect to different sound frequencies and instruments to deliver a specialized haptic experience designed to allow people who cannot hear to experience music. The shirt is designed to work in different music scenarios including live orchestras, concerts, raves, listening to music on your phone, and even playing video games. The shirt is able to adapt to the different scenarios to provide an experience that allows you to feel the music in the most authentic way possible.

I first learned about this shirt when I saw it in the Access+Ability show at the CMOA in 2019. I instantly fell in love with the project the first time I saw it. I admire the focus on accessibly and utilization of technology and computation to transform sound for a community heavily left behind. Although different than what we might be doing in this class, the similarities are clearly evident. While we might be taking sound and finding a way to convert the experience to something visual, this project takes that same idea and theory of computation to translate sound into something tactile. In both scenarios we are using computation to visualize senses in different ways which I find beautiful. While I believe this project is currently only available for select testing and presentations, I hope it finds a way into the public market because I think it is something really important for people who are deaf to have the chance to experience.

Project-04-String Art

sketchDownload
 /*
Nicholas Wong
Section A
*/


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

    background(0)

}
 
function draw() 
{
    background(0)
    stroke(255)

    //Circle around image (follows mouse slightly)
    for (var i = 0; i <=300; i += 10) 
    {
        stroke(60)
        strokeWeight(0.5)
        line(width - i, 0.1*mouseY, width+(0.1*mouseX), height - i*2);
        line(i, height + (0.1*mouseY), -30+0.1*mouseX, i*2);
        line(width - i, height + (0.1*mouseY), width+(0.1*mouseX), i*2);
        line(i, 0.1*mouseY, -30+0.1*mouseX - 1, height - i*2);
    }

    //Double For-loop for X and Y grid coordinates
    for (let x=0;x<=width;x+=25) {
        //Columns
        push();
        stroke(255)
        strokeWeight(0.1)
        line(x,0,x,height)
        pop();

        for(let y=0;y <=height;y+=25){
            //Center point
            push();
            stroke(255)
            strokeWeight(0.05)
            line(mouseX,mouseY,x,y);

            //Rows
            push();
            stroke(50)
            strokeWeight(0.1)
            line(0,y,width,y)
            pop();

            //Right
            push();
            stroke(70,0,0)
            strokeWeight(0.15)
            line(0,mouseY,width,y)
            pop();

            //Left
            push();
            stroke(0,70,70)
            strokeWeight(0.15)
            line(width, mouseY, 0, y)
            pop();

            //Bottom
            push();
            stroke(50,50,0)
            strokeWeight(0.15)
            line(mouseX, height, x, 0)
            pop();

            //Top
            push();
            stroke(70,0,80)
            strokeWeight(0.15)
            line(mouseX, 0, x, height)
            pop();               
        }
    }


    
}

Looking Outwards 4: Audio-driven digital art

It is known that simple algorithms can generate complex visual art. Audio-driven digital art, a form of audiovisual art, is similar to generative art in that an algorithm is still responsible for generating the art, however the algorithm only converts audio input into a visual output. Sound visualization techniques are nothing new; they have been used for music videos, desktop backgrounds, and screen savers for quite some time already. Common sound visualization techniques like waveform visualization are used to add visual flare to an app or a music video, or even something as simple as a volume indicator.

Only recently has sound visualization become prevalent in art and design. Audiovisual art allows for the synthesis of both physical sensations to create fully immersive, unique experiences. Nanotak Studio’s Daydream is a mesmerizing example of audiovisual art being utilized to create a unique spatial experience. The installation consists of two series of glass panels that have images projected onto them from behind. The resulting effect creates the illusion of one being in a larger space, with the echoing sounds making the whole experience more immersive. The pushing and pulling of the projected abstract shapes and spaces coincide with the humming and soothing sounds, creating the sensation of being detached from reality. The choreography of sound and light with the use of algorithms is able to create art that provides an experience unlike any other.

Project-04

sketch
var x1 = 0
var x2 = 0
var y1 = 0
var y2 = 300

var dx3;
var dy3;
var dx4;
var dy4;
numLines = 80;

var dx5;
var dy5;
var dx6;
var dy6;


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

function draw() {
	background(66, 245, 236);

	stroke(255); //white background lines
	for (var p = 0; p <= 400; p += 10) {
		line(p, 0, 1.5*p, 300);
		line(1.5*p, 0, p, 300);
	}
    
    stroke(245, 66, 173); //top left pink lines
    for (x1 = 0; x1 <= 400; x1 +=10) {
    	line(x1, y1, x2, y2);
        y2 -= 10;
    }

    push();
    translate(400, 0); //top right pink lines
    rotate(radians(180));
    for (x1 = 0; x1 <= 400; x1 += 5) {
    	line(x1, y1, x2, y2-200);
    	y2 += 5
    }
    pop();
    
    stroke(0, 150, 0); //green triangle
    line(330, 100, 100, 300);
    line(330, 100, 320, 300);
    dx3 = (100-330)/numLines;
    dy3 = (300-100)/numLines;
    dx4 = (320-330)/numLines;
    dy4 = (300-100)/numLines;

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

    stroke (255, 0, 255); //purple triangle
    line(60, 100, 275, 300);
    line(60, 100, 70, 300);
    dx5 = (275-60)/numLines;
    dy5 = (300-100)/numLines;
    dx6 = (70-60)/numLines;
    dy6 = (300-100)/numLines;

    var x5 = 60;
    var y5 = 100;
    var x6 = 60;
    var y6 = 100;
    for (var j = 0; j <= numLines; j+=1) {
    	line(x5, y5, x6, y6);
    	x5 += dx5;
    	y5 += dy5;
    	x6 += dx6;
    	y6 += dy6;
    }

  
    noLoop();
    

}

I had a color scheme in mind when I started, then I tried messing around with different shapes and line spacing, and this is what I came up with.

PROJECT-04 (string art)

sketch
// SEAN CHEN
// 15-104 A

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

function draw() {
    var colX = map(mouseX, 0, width, 0, 250);
    var colY = map(mouseY, 0, height, 0, 250);
    // map mouse pos to color range val
    var bgCol = color(colX, colY, 125); // background color
    var cirCol = color(colY, colY, 125); // variable obj color
    background(bgCol);

    push(); // center diamond backround blob
    noStroke();
    fill(cirCol);
    beginShape();
    curveVertex(mouseX/2, mouseY);
    curveVertex(mouseX, mouseY/2);
    curveVertex(mouseX+(width-mouseX)/2, mouseY);
    curveVertex(mouseX, mouseY+(height-mouseY)/2);
    curveVertex(mouseX/2, mouseY);
    curveVertex(mouseX, mouseY/2);
    curveVertex(mouseX+(width-mouseX)/2, mouseY);
    endShape();
    pop();

    for (var i = 0; i < 25; i ++) { // border + diamond line art
        // border
        let x1 = map (i, 0, 25, mouseX, width); // mid to right vals (x)
        let y1 = map (i, 0, 25, 0, mouseY); // top to mid vals (y)
        let x2 = map (i, 0, 25, 0, mouseX); // left to mid vals (x)
        let y2 = map (i, 0, 25, mouseY, height); // mid to bottom vals (y)

        // center diamond
        let x1s = map (i, 0, 25, mouseX/2, mouseX);
        // half from leftside to mouse
        let y1s = map (i, 0, 25, mouseY, mouseY+(height-mouseY)/2);
        // half from bottomside to mouse
        let x2s = map (i, 0, 25, 0, mouseX/2);
        // left to half of mouse
        let y2s = map (i, 0, 25, mouseY/2, mouseY);
        // half from topside to mouse
        let x3s = map (i, 0, 25, mouseX, mouseX+(width-mouseX)/2);
        // half from rightside to mouse
        let y3s = map (i, 0, 25, mouseY+(height-mouseY)/2, mouseY);
        // half from left to mouse
        
        // border
        line (x1, 0, width, y1); // top right
        line (width, y2, width-x2, height); // bottom right
        line (0, y2, x2, height); // bottom left
        line (width-x1, 0, 0, y1); // top left

        // diamond
        line (x1s, mouseY, mouseX, y1s); // top left
        line (mouseX, y2s, mouseX-x2s, mouseY); // top right
        line (mouseX, y2s, x3s, mouseY); // bottom right
        line (mouseX, y3s, x3s, mouseY); // bottom left
        line (mouseX, mouseY, mouseX+(width-mouseX)/2, mouseY)
        // xtra line from cent to right
    }
}

LO-04 (sound art)

The Weather Thingy created by Adrien Kaeser is an instrument modifier that is controlled through variables generated by the weather. It is a simple idea that can be manipulated in a highly flexible way. I find this to be extremely compelling due to the fact that it can actually be seen as a way to translate a feeling or ambiance into musical composition. The ability to transform external feelings into parameters that affect the outcome of one’s creative works, which offers a kind of push and pull dichotomy between creator and the created. Kaeser uses a series of arduino modules and weather sensors and codes the whole project with arduino, C++, and MIDI. Although the code isn’t demonstrated, I assume each weather input (wind, direction, rain, sun) controls/limits the sound that the original instrument can create to result in the total output. What’s pretty clever is that he also added a range modifier which allows for this project to be utilized in calm (amplify) or violent (limit) situations.

https://www.ecal.ch/en/3843/studies/bachelor/media-interaction-design/presentation/weather-thingy

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.