Month: September 2019

Julia Nishizaki – Looking Outwards – 04

The project I chose to look at is called Soft Sound, created by EJTECH (Esteban de la Torre and Judit Eszter Kárpáti). Soft Sound combines sound with fabric in order to play with textiles as an audio-emitting surface, and to create multi-sensory interactions. For example, not only can the fabric project sound, but the vibrations caused by the sound interact with the textile, causing it to throb and move. Soft Sound creates “soft” speakers by applying laser or vinyl cut copper and silver coils onto fabric, and running alternating current through the coils.

An example of EJTECH’s Soft Sound technology in use – the coils project sound, vibrating the fabric

I found this project interesting and inspiring, as not only does this project turn sound into a more tangible artefact, since you can feel the sound’s vibrations through the fabric, but it’s also done in a very open-ended manner, allowing for the technology to be applied to a variety of different uses, from e-textiles for wearable technology, to more traditional applications at home and everyday.

Looking Outwards – 04

A rather unconventional way of generating sound digitally I have seen many times throughout the past through years is actually the composition of music through the use of a level creation engine in the game Super Mario Maker released in 2015. After many programmers discovered how certain objects functioned, they learned to manipulate them to create music. A specific item that can be placed in a level called a note block makes a different sound when each different object type in the game makes contact with it, and as the screen follows the main character, the blocks are generated, making music. Based on where vertically the block is placed, the pitch will change, and the tone is based on what is placed above it. This has been used to create compositions up to a minute long.

https://www.youtube.com/watch?v=j20wi8-Wlq4

Rachel Shin – Project 04 – String Art

reshin-string art

//Rachel Shin
//reshin
//15-104 Section B
// Project - 04 String Art

var shift = 10; // changing the lines position from one another (increments)
var a = 0;
var b = 0;
var c = 0;
var d = 0;
var e = 0;

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

function draw() {


// left middle to right middle: orange curves that cover canvas based on mouseX and e value
for (var e = 0; e < width; e+= shift){
	strokeWeight(0.5);
	stroke(245, 202, 147);
	line(mouseX, 300-e, e-100, e*0.5);
}


//bottom left to top right: pink rays
for (var c = 0; c < width; c += shift){
	strokeWeight(0.5);
	stroke(84, 77, 84);
	line(0, c-10, width, c*0.5);
}

let leftBound = 100;
let rightBound = 300;
let bound1 = constrain(mouseX, leftBound, rightBound);

//top middle to bottom middle: white rays to form off white rectangle with mouseX movement
for (var d = 0; d < height; d += shift){
	strokeWeight(0.5);
	stroke(225);
	line(bound1, mouseY, height/2, d*0.5);
}

//right top of canvas: green curves
 for (var a = 0; a < height; a += shift){
 	strokeWeight(0.5);
 	stroke(168, 201, 157);
 	line(a, 0, width, a*0.5);
 }

//top left of canvas: blue rays
for (var b = 0; b < width; b += shift){
	strokeWeight(0.5);
	stroke(157, 174, 201);
	line(0, 0, height, b*0.5);
	
}}

For this project, I wanted to implement a variety of strings that would, while visually very different, would produce a cohesive visual. I first arranged the code by creating a light green web-like string art at the top right corner and brought the rest of the art counter-clockwise. I then chose to push the off-white string art to the back to bring more attention to the colored lines. I also wanted to employ mouseX and mouseY and constrain to experiment more. I found it very interesting to layer strings on top of each other to create more dimensional art.

Project 4 – String Art


sketch

var x1;
var x2;
var y1;
var y2;
var x1ss;
var y1ss;
var x3;
var x4;
var y3;
var y4;
var y2ss;
var x5;
var y5;

function setup() {
  createCanvas(300, 400);
  background (0);
  x1 = 0;
  y1 = 0;
  x1ss = 10;
  y1ss = 50;
  x2 = x1 + x1ss;
  y2 = y1 + y1ss;
  x3 = 0;
  y3 = 400;
  x1ss = 10;
  y1ss = 50;
  x4 = x1 + x1ss;
  y4 = y1 + y1ss;
}
function draw() {
  noFill();
  stroke(255);
  strokeWeight(1);
  line(x1, y1, x2, y2);
  x1ss = x1ss * 1.35;
  y1ss = y1ss * 1.3;
  x2 = x1 + x1ss;
  y2 = y1 + y1ss;
  y2ss = -y1ss;

  stroke("red");
  strokeWeight(1);
  line(x3, y3, x4, y4);
  x4 = x3 + x1ss;
  y4 = y3 + y2ss;

  stroke("pink");
  strokeWeight(1);
  line(x2 - x1, y2 - y1, y2- y1, x2 - x1);

  stroke("grey")
  line(300 - x2, 400 - x2, x4 / 3, y4 / 3);
}

Shannon Ha – Project 04 – String Art

sketch

//Shannon Ha
//Section D
//sha2@andrew.cmu.edu
//Project 04 String Art

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

function draw(){
  background(175,0,0);
  stroke('black')
  for (var i = 0; i < width; i+=20) {
    stroke(mouseX, mouseY, 210); //upper left corner arc
    line(mouseX-i,0,0,i+20);
    stroke(28,50,158);
    line(mouseX+i,0,0,i-20);
    stroke(255, 227, mouseX-10);//lower right corner arc
    line(mouseX-i,300,400,i-20);

}
  for (var i = 0; i < 500; i+=30) {
    push();
    translate(width/2, height/2);
    rotate(180);
    stroke(93,28,158);
    line(5,5, mouseX/2, i+1); //purple lines in the back
    rotate(90);
    line(5,5, mouseX/2, i+1);

    pop();
  }


    ellipseMode(CENTER); //the moving pupil of the eye
    noFill();
    ellipse(mouseX-200, height/2 ,100,100);
    strokeWeight(2);


  }

For this project I explored how the lines met to form arcs and curves through iteration and ultimately decided it would be fun to make the string art so that it looks like an eye!

Austin Garcia – Project 4 – Section C

sketch

/*		Austin Garcia
		Section C
		aegarcia@andrew.cmu.edu
		Project - 04
*/

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

}

function draw() {
    background(0);

// purple background
    stroke(80, 40, 200);
    for (var x1 = 0; x1 <= height; x1 += 10) {
      for (var y1 = 0; y1 < width; y1 += 4) {
        line(x1, y1, 3 * width, 2 * height)
      }
    }
// white 'god rays'
    stroke(255, 255, 255);
    for (var x2 = 2; x2 <= height; x2 += 100) {
      for (var y2 = 0; y2 < width; y2 += 100) {
        line(x2, y2, 0, 0)
      }
    }
// green wings bot
    stroke(30, 300, 55);
    for (var x3 = 0; x3 < width / 20; x3 += 60) {
      for (var y3 = 0; y3 <= 200; y3 += 4) {
        line(x3, y3, width, height)
      }
    }

    stroke(30, 300, 55);
    for (var x4 = 0; x4 < width / 20; x4 += 60) {
      for (var y4 = 0; y4 <= 200; y4 += 4) {
        line(x4, y4, width / 1.5, height / 1.5)
      }
    }

    stroke(30, 300, 55);
    for (var x5 = 0; x5 < width / 20; x5 += 60) {
      for (var y5 = 0; y5 <= 200; y5 += 4) {
        line(x5, y5, width / 2, height / 2)
      }
    }

    stroke(30, 300, 55);
    for (var x6 = 0; x6 < width / 20; x6 += 60) {
      for (var y6 = 0; y6 <= 200; y6 += 4) {
        line(x6, y6, width / 4, height / 4)
      }
    }

// green wings top
    stroke(30, 300, 55);
    for (var x7 = 0; x7 < width / 20; x7 += 60) {
      for (var y7 = 0; y7 <= 200; y7 += 4) {
        line(y7, x7, width, height)
      }
    }

    stroke(30, 300, 55);
    for (var x8 = 0; x8 < width / 20; x8 += 60) {
      for (var y8 = 0; y8 <= 200; y8 += 4) {
        line(y8, x8, width / 1.5, height / 1.5)
      }
    }

    stroke(30, 300, 55);
    for (var x9 = 0; x9 < width / 20; x9 += 60) {
      for (var y9 = 0; y9 <= 200; y9 += 4) {
        line(y9, x9, width / 2, height / 2)
      }
    }

    stroke(30, 300, 55);
    for (var x10 = 0; x10 < width / 20; x10 += 60) {
      for (var y10 = 0; y10 <= 200; y10 += 4) {
        line(y10, x10, width / 4, height / 4)
      }
    }







}

While experimenting with creating lines, I was fascinated with the way that arcs and curves can be perceived when straight lines intersect. I decided to try and make a butterfly-wing like shape projecting from a corner of the canvas

Minjae Jeong-Project-04-StringArt

sketch

//Minjae Jeong
//Section B
//minjaej@andrew.cmu.edu
//Project-04


function setup() {
    createCanvas(400,300);
    background("black");
    strokeWeight(0.1);
}

function draw() {
    stroke(mouseX / 3, mouseY / 2, 255); //diagonal line
    line(0, 300, 400, 0);

    for (i = 0; i < 400; i += 10) { //top left purple curve
        stroke(204, 153, 255);
        line(0, 300 - i, i, 0);
    }

    for (i = 0; i < 400; i += 10) { //bottom right emerald curve
        stroke(0, 255, 255);
        line(i, 300, 400, 300 - i);
    }

    //center
    for (i = 0; i <= 200; i += 20) { //1st quadrant
        stroke(153, 102, 255);
        line(200, i - 50, 200 + i, 150);
    }
    for (i = 0; i <= 200; i += 20){ //3rd quadrant
        stroke(0, 255, 204);
        line(i, 150, 200, 150 + i);
    }
}

First it was very confusing to integrate for loops and line function to create string art. But after understanding the basics, It was a very fun and creative project to work on.

Jina Lee – Project 04


For this project, I played around with curves. I wanted to give a disco/chaotic vibe. When move your mouse around the canvas, the lines move making it seem more busy. I enjoyed this project because there were so many ways I could make my strings move. In the future, I want to add more curves to make it seem like a camera lens opening and closing with the string curve. This assignment helped me better understand how loops work and how I can manipulate curves with mouseX and mouseY.

sketch

//Jina Lee
//Section E
//jinal2@andrew.cmu.edu
//Project-04

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

function draw() {
    //background is random
    red = random(255);
    green = random(255);
    blue = random(255);
    background(red, green, blue, 40);

    //lines that just go up and down
    //as the mouse goes right the lines appear
    for (var i = 0; i <= mouseX; i += 50) {
        stroke(255);
      	strokeWeight(1);
      	line(i, 0, i, height + i);
    }
	  //top left corner and bottom right
    //it curves down
	  for (var a = 0; a < mouseX; a += 20) {
	      stroke(255);
		    strokeWeight(1);
		    line(a, 0, width, a);
	  }
    //top right and left bottom
	  for (var b = 0; b < mouseY; b += 5) {
		    stroke(255);
		    strokeWeight(1);
		    line(width + b, b, width - b, height);
    }
	  //left top and bottom right
	  for (var c = 0; c < mouseX; c += 20) {
		    stroke(255);
		    strokeWeight(1);
		    line(width - c, height, 0, height - c);
    }
	  //left bottom and top right
	  for (var d = 0; d < mouseY; d += 5) {
		    stroke(255);
		    strokeWeight(1);
		    line(0, height - d, d, 0);
    }
}

project 04 – Ilona Altman – string art

This project was very interesting. It really helped me to isolate the changes of the variables in terms of width and height.

sketch

//Ilona Altman
//iea 

function setup() {
  createCanvas(400, 300);
  background(230,212,160);
}

function draw() {


for(var x = 0; x < 2*width; x = x + 5) {
    line(x, width, 0, -1*x);
    stroke(194,130,150);
    }

for(var x = 0; x < 2*width; x = x + 5) {
    line(x, width, height, -1*x);
    stroke(180,200,190);
    }

for(var x = 0; x < 2*width; x = x + 5) {
    line(width - x, -1.5*height, 0, height-x);
    stroke(230,212,160);
    }

for(var x = 0; x < 2*width; x = x + 10) {
    line(0.000000005*width + x, height, width, height - x);
    stroke(180,120,140);
    }

for(var x = 0; x < 2*width; x = x + 5) {
    line(width - x, height, width, 0.000000001*width + x);
    stroke(190,130,90);
    }


}

Sarah Kang – Project-04-String Art

string

//sarah kang
//section c
//sarahk1@andrew.cmu.edu
//project-04-string art


//for center diamond
var r = 255;
var g = 125;
var b = 175;

//for intermediate rays
var rr = 255;
var gg = 196; 
var bb = 179;

//for corner rays
var rrr = 255;
var ggg = 253;
var bbb = 232;

//canvas
var W = 400;
var H = 300;

function setup() {
    createCanvas(W, H);
}

function draw() {
    background(0);

    strokeWeight(1);

    //center diamond
    for (var i = 0; i < W; i += 10) {
        line(i, H / 2, W / 2, H - (0.8 / i));
        stroke(r, g, b);

        line(W / 2, 0.8 / i, i, H / 2);
        stroke(r, g, b);
    } 

    //intermediate rays
    for (var i = 0; i < W; i += 30) {
        line(W, 0.8 / i, i, H / 2);
        stroke(rr, gg, bb);

        line(i, H / 2, W, H - (0.8 / i));
        stroke(rr, gg, bb);

        line(0, 0.8 / i, i, H / 2);
        stroke(rr, gg, bb);

        line(i, H / 2, 0, H - (0.8 / i));
        stroke(rr, gg, bb);
    }

    //corner rays
    strokeWeight(0.3);
    for (var i = 0; i < W; i += 5) {
        line(i, H / 2, mouseX, H - (0.8 / i));
        stroke(rrr, ggg, bbb);

        line(mouseX, 0.8 / i, i, H / 2);
        stroke(rrr, ggg, bbb);

        line(i, H / 2, W - mouseX, H - (0.8 / i));
        stroke(rrr, ggg, bbb);

        line(W - mouseX, 0.8 / i, i, H / 2);
        stroke(rrr, ggg, bbb);
    }
}

It was pretty confusing at first when figuring out how the variables were controlled and changed, but after playing around with different options, I finally got the hang of the basic inputs.