Category: SectionC

Project 4: String Art

Keep your mouse pressed to see the magic! (not actually that cool but I tried.. lol..)

sketch
idea sketches

var x = 250;
var y = 25;
var x2 = 300;
var y2 = 250;

function setup() {
    createCanvas(300,300);
    background('blue');
}

function draw() {
  
  //setting up colors and background to help lines stand out
    background(255,5);
    stroke(255);
    if (mouseIsPressed){
     var R = random(200,255);
     var B = random(200,255);
     strokeWeight(random(0,3));
     stroke(R,0,B,random(50,100));
    }else{
     strokeWeight(random(0,10));
     stroke(255);
     background(0,random(0,50),random(0,50));

    }
    line(x,250,100,y);
    line(250,height - y,width - x,100);
    line(width - x,300,50,height - y);
    line(250,y,x,0);

    // top left and bottom right corner curves
    line(100,y2,x,50);
    line(300,height - y2,width - x,300);

    //string animation
    x += 5;
    y += 1;
    x2 -= 5;
    y2 -= 1;

    //trying to set parameters for the line movements
    x = constrain(x,100,300);
    y = constrain(y,0,300);
    x2 = constrain(x2,50,300);
    y2 = constrain(y2,25,250);

    //loop and reset 
    if (x == 300 & y == 300 && x2 == 50 && y2 == 25) {
        x = x2;
        y = y2;
        y2 = 250;
    }
}

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 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

LO-04: Blue Jeans and Bloody Tears

Blue Jeans and Bloody Tears is an AI-generated eurovision song written by AI, sung by Izhar Cohen, produced by Avshalom Ariel, and published online by Sweaty Machines. The creators fed AI hundreds of eurovision song lyrics & melodies to a neural network, which then created thousands of lines, licks, melodies, beats, etc. From these a few elements were then carefully selected and “welded” together to create the final piece.

The project, amazingly, produced an eerily catchy song despite its nonsensical lyrics. Commenters even inferred deep meanings from the lyrics, despite the fact that they were generated at random. Through the insanity, the instincts of the producers for selecting the catchiest beats shines through in a song that makes you suspicious that maybe AI really is coming for all of our jobs after all.

-Robert

Stringy Art (Project-04)

For this week’s project, string art, I wanted to make something that showed off how straight lines could form apparent curves. Given that, I decided the cleanest way to do that was with circles, which are both easy to code & visually simple. Four simple colors – red, blue, green, and yellow – diverge from what on the inner hemispheres, while the foreground circle remains in white.

-Robert

sketch
//Robert Rice
//Section C

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

angle = 0

function draw() {
    fill(255);
    strokeWeight(1);
    stroke(255);

    line(200, 0, 200, 300);

    push();
    translate(350, 150);    //changes the axis of rotation to the center of the "circle" formed by the lines
    for(let i = 1; i <= 45; i+=1) { //rotates the same line 2 degrees around the new axis of rotation, loops 45 times
        stroke(255-i*10, 255-i*10, 255);       
        rotate(2);                  //angle change per loop (this rotates 90 degrees, bc 2*45=90)
        line(-150, 0, -150, -150);  //the line being rotated each loop
    }
    pop();

    push();                 //the same code, except it arcs to the bottom right instead of the top right
    translate(350, 150);
    for(let i = 1; i <= 45; i+=1) {
        stroke(255-i*10, 255, 255-i*10);
        rotate(-2);
        line(-150, 0, -150, 150);
    }
    pop();

    push();                 //arcs towards the bottom left
    translate(50, 150);
    for(let i = 1; i <= 45; i+=1) {
        stroke(255, 255, 255-i*10);
        rotate(2);
        line(150, 0, 150, 150);
    }
    pop();

    push();                 //arcs towards the top left
    translate(50, 150);
    for(let i = 1; i <= 45; i+=1) {
        stroke(255, 255-i*10, 255-i*10);
        rotate(-2);
        line(150, 0, 150, -150);
    }
    pop();

    push(); //the final circle, with the origin at the center
    translate(200, 150);
    strokeWeight(2);
    for (let i = 1; i <= 180; i += 1) {
        rotate(2);
        line(-200, -150, 200, -150)
    }
    pop();

    noLoop();
}

LookingOutwards-04

Laetitia Sonami’s signature instrument, the Lady’s Glove, was particulary interesting to me. It is fitted with a vast array of sensors which track the motions of her dance, and those movements shape the music. It is very interesting and admirable that she takes the physical movements and process them digitally to generate the sound into the physical world again. It is very unconventional and innovative. The signals go through Sensorlab at STEIM Institute, and are mapped onto MAX-MSP software. Also, the mapping and sonic material changes in every composition. Signals control sound parameters and processes. They can also control motors, light bulbs, and video too. It is very interesting how intuitive body movement would result into digitally processed sound art.

Instruments – Lady’s Glove

Project-04-String-Art

I created a string art in which consists of lines that are sort of symmetric and floating lines according to the position of mouse.

sketch 

//Jae Son, Section C

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

function draw() {
  background(55,40,39);
  for (var i  = 0;  i <= 250; i+=2){
    strokeWeight(1);
    //yellow line -left
    stroke(240,227,30);
    line(i*2, height, 0, 3*i);
    //purple line -left
    stroke(104,99,154);
    line(i*5, height, 0, 3*i);
    //pink line -left
    stroke(181,134,132);
    line(i*8, height, 0, 3*i);
    //yellow line -right
    stroke(240,227,30);
    line(width,i*2,3*i,0);
    //purple line -right
    stroke(104,99,154);
    line(width,i*5,3*i,0);
    //pink line -right
    stroke(181,134,132);
    line(width,i*8,3*i,0);
  }
  
  for (var i = 0; i <= 300; i++) {
    strokeWeight(0.5);
    //moving orange line
    stroke(249,211,140);
    line(mouseX,i*3,i*2,mouseY);
    //moving turquoise line
    stroke(148,224,226);
     line(i*3,mouseY,mouseX,i);
  }
  

  
}

Project 04: String Art

hcsaDownload
//Hayoon Choi
//hayoonc
//Section C

var numLines = 50; 

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

function draw() {
    background(0);
    var x1 = 200;
    var x2 = 400;
    var y1 = 0;
    var y2 = 400;
    var sf = constrain(mouseY, 150, 255); //line color change
    stroke(sf); 
    strokeWeight(0.75); 
    for (var i = 0; i <= numLines; i++){
	    strokeWeight(0.75); 
        line(i, i, i * 8, 170); //top left section
        line(mouseX, i * 6, i, i); //moving left section
    }
    for (var i = 0; i <= numLines; i++){
	    strokeWeight(0.75); 
        line(400 - i, i, 400 - i * 8, 170); //top right section
        line(mouseX, i * 6, 400 - i, i); //moving right section
    } 
    for (var y1 = 0; y1 <= 400; y1 += 5) {
    	line(x1, y1 , x2, y2); //right section 
    	x2 += 35;
    }
    x2 = 0;
    y2 = 400;
    for (var y1 = 0; y1 <= 400; y1 += 5) {
        line(x1, y1 , x2, y2); //left section 
    	x2 -= 35;
    }
    stroke(244, 106, 78);
    fill(100, 23, 94, 50);
    push();
    translate(mouseX, 160);
    //rotating orange lines
    for (var j = 0; j < 60; j++){
        push();
        strokeWeight(1);
        rotate(radians(6 * j));
        line(0, 0, 0, 1000); //orange lines
        pop();
    }
    pop();
    
}

LO-04-Sound Art

Multiverse is an audio-visual installation, created by fuse, that attempts to show the eternal birth and death of infinite parallel universes. I was attracted by this artwork not only because of its astonishing visual, but also because of its concept. I’ve been fascinated with the idea of the multiverse, or just universe in general, and time. However, I’ve never thought about showing the concept through digital art and sound installation. I didn’t even know that it was possible to physically show something abstract like that. The installation shows two large surfaces mirroring each other generate an infinite reflection of the image towards the sky and the center of the earth. The creators succeeded in combining the theory with algorithmic art and created a memorable artwork that is both visually and audibly stunning.

An application developed in openFrameworks manages the various scenes that interact with Ableton Live and MAX/MSP  for the production of soundtracks through a generative sound system. In order to display “realistic” and infinite scenes, the program provides small random changes to parameter values of physical laws during the bounce, leading to a new universe with slightly different fundamental properties. In addition, in order to prevent it from replaying the same scene, for every thirty minutes, the program is set to enter an evolutionary transition from the previous genetic information.

video of Multiverse

LO- Sound and Computation

A project or work that I find inspirational is Weather Thingy by Adrien Kaeser. This work is a device that consists of two main parts, a weather station which lays on a tripod and a controller connected to the weather station. I admire this project because it is very interesting, the weather and the type of weather that is occurring outside controls the settings of the musical instruments connected to it. Kaeser is a media and interaction design student that wanted to combine art, music, and real time live weather creating the Weather Thingy. The controller transforms the weather data into midi data which is interpretable by instruments. This device can also be used in all weather conditions, as the user can constrain the values received to the device, the MIDI channel can also be changed to modify the way the effects are assigned. This device is very cool and interesting to me, it combines music and weather and lets people hear how the weather conditions are LIVE.

Weather Thingy – Real time climate sound controller