Category: SectionC

Project-04: String Art

sketch
var dx1;
var dy1;
var dx2;
var dy2;

var numLines = 20;

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

    //setting up star shaped template
    rectMode(CENTER);
    fill(50);
    noStroke();
    // stroke(255,0,0);
    push();

    translate(200, 150);
    rotate(radians(45));
    rect(0, 0, 200, 200);

    pop();
    translate(200, 150);
    rect(0, 0, 200, 200);

    //increments
    dx1 = (100-100)/numLines;
    dy1 = (250-200)/numLines;
    dx2 = (340-200)/numLines;
    dy2 = (151-291)/numLines;

}

function draw() {
    stroke(255);
    // reference: line(100, 50, 100, 250);
    // reference: line(200, 291, 340, 151);

    //line1_top left to bottom center
    var x1 = 100;
    var y1 = 50;
    var x2 = 200;
    var y2 = 291;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += -dx2;
        y2 += dy2;
    }

    //line 2_bottom left to right center
    var x1 = 100;
    var y1 = 250;
    var x2 = 340;
    var y2 = 151;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += -dy1;
        x2 += -dx2;
        y2 += -dy2;
    }

    //line3_bottom right to top center
    var x1 = 300;
    var y1 = 250;
    var x2 = 200;
    var y2 = 10;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += -dy1;
        x2 += dx2;
        y2 += -dy2;
    }

    //line 4_top right to left center
    var x1 = 300;
    var y1 = 50;
    var x2 = 60;
    var y2 = 151;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    noLoop();
    }

     //line 5_top left to top center
    var x1 = 100;
    var y1 = 50;
    var x2 = 200;
    var y2 = 10;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += -dx2;
        y2 += -dy2;
    noLoop();
    }

     //line 6_bottom right to bottom center
    var x1 = 300;
    var y1 = 250;
    var x2 = 200;
    var y2 = 290;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += -dy1;
        x2 += dx2;
        y2 += dy2;
    noLoop();
    }


    
}

I really enjoy creating geometric patterns, so it was really intriguing for me to learn how I can modify the increments and number of lines to create a pattern.

Looking Outwards 04: Sound Art

The project that grabbed my attention immediately was FORMS–String quartet created by Playmodes. One of the reasons is because I come from a strings background, but as I skimmed through the articles the simple and geometric design really matched my eye, which seemed to be designed similarly with the aesthetic I have been exploring a lot recently.

I think it’s fascinating that the performance is both visual and sonic, and that the performer’s playing of the instrument is converted to a visual pattern in real time. The visuals also reminded me of the mobile instrument games I used to play, so it was even more entertaining. This program seem to use size, shape, and color as a variable to express the different instruments rhythm and dynamic, which I assume is taken into programming as the decibels and pitch is measured from the recording of the performance. I think the choice of using simple geometric shapes and gradient colors show the artist’s attempt to combine modern design aesthetics and classical music to invite a wider variety of audiences to this source of entertainment. 

Project 4- String Art

sketch
//Eva Oney
//eoney
//section C

var c1 = 0;
var c2 = 255;

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

}

function draw() {
    background(0);
    //loop for lines coming off the x axis
    for (var i = 1; i <= 500; i += 5) {
        stroke(255,0,0);
//I found my x and y values by originally setting x1 and x2 to mouseX
//and mouseY, then when I found a position I liked, I printed the value
//of mouseX and mouseY and got (15,400)
        line(400 + i, 0, 15 +i, 150);
        line(15 + i, 150, 400 +i, 400);
    }
    //loop for lines coming off the y axis
    for(var i = 0; i <=500; i +=5) {
        stroke(0,0,255);
        line(0, 400 + i, 200, 15 + i );
        line(400, 400 + i, 200, 15 +i);
    }
    noLoop();
 }

I kept my code pretty simple so I could focus on understanding how the loops and parameters actually affect the image. I am not a math wiz by nature, so it is a little difficult for me to understand but I am slowly getting the hang of it.

Looking Outwards- Sound

The project that I decided to look at was Expressions, by Kynd and Yu Miyashita. I found the video to be captivatingly intricate, and I was shocked when I read that it was all digitally rendered. I was even more shocked when I found out it was rendered in 2D, using various layering and shading techniques as opposed to 3D vectors. 

The images themselves were really cool, but the soundscape that went with it really elevated the experience. A brief warning if you are going to watch it, make sure to turn your sound down. I got blasted with an intense high pitched screech in my ear right off the bat (which was cool… but scary). I thought the interactivity between the sound and visuals was really compelling.

When reading about the piece at: https://www.creativeapplications.net/sound/expressions-paint-and-pixel-matiere-at-micro-scale/

I learned that the developer used WebGL which is a JavaScript api, made to render 2D and 3D graphics, and then went in on TouchDesigner to add detail. When looking at WebGL samples, I found that they are very similar to what we are doing now. I also know that we can use WebGL in p5.js, so maybe they’re the same thing? It was hard to find information on it. But anyways, it was interesting to see what I could do in the future if I keep up with programming.

Project-04-String-Art

index-9

var dx1; var dy1; var dx2; var dy2; var numLines = 43; function setup() { createCanvas(400, 400); background (0); dx1 = (100)/numLines; dy1 = (250)/numLines; dx2 = (50)/numLines; dy2 = (-200)/numLines; } function draw() { var x1 = 0;// dark blue wave var y1 = 350; var x2 = 400; var y2 = 300; for (var i = 0; i The inspiration for this string art project were ocean waves, created by three different shades of waves.

Project-04: String Art

sketch-beansDownload
//Yeon Lee, Section C
//Project-04: String Art

var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var numOfLines = 50;
var angle = 0;

function setup() {
    createCanvas(400, 300);
    background(244, 226, 116);
    dx = width / numOfLines;
    dy = height / numOfLines;    
    dx2 = 100 / numOfLines;
    dy2 = 200 / numOfLines;    
    dx3 = -100 / numOfLines;
    dy3 = -200 / numOfLines;
}

function draw() {
    var x1 = 0;
    var y1 = 0;
    var x2 = 0;
    var y2 = height;
    var x3 = 0;
    var y3 = 0;
    var x4 = width;
    var y4 = 0;
    var x5 = 0;
    var y5 = 0;
    var x6 = 0;
    var y6 = height / 3;    
    var x7 = width;
    var y7 = 0;
    var x8 = 0;
    var y8 = 0;    
    var x9 = 300;
    var y9 = 0;
    var x10 = 400;
    var y10 = 300;
    var x11 = 300;
    var y11 = 400;
    var x12 = 400;
    var y12 = 300;

    //draw torquoise lines on the left bottom
    for (var i = 0; i <= numOfLines; i ++) {
        stroke(123, 169, 147);
        line(x1, y1, x2, y2);
        y1 += dy;
        x2 += dx;
    }

    //draw pink lines on top right in the very back
    for (var i = 0; i <= numOfLines; i ++) {
        stroke(240,192,165);
        line(x3, y3, x4, y4);
        x3 += dx2;
        y4 += dy2;
    }    

    //draw purple lines on the left
    for (var i = 0; i <= numOfLines; i ++) { 
        stroke(177, 131, 222);
        line(x5, y5, x6, y6);
        x5 += dx2;
        y6 += dy2;
    }

    //draw light orange lines in the back
    for (var i = 0; i <= numOfLines; i ++) { 
        stroke(255, 195, 153);
        line(x7, y7, x8, y8);
        x7 += dx2;
        y8 += dy2;
    }    

    //draw light yellow lines in the back
    for (var i = 0; i <= numOfLines; i ++) {
        stroke(255,245,153);
        line(x7, y7, x8, y8);
        x7 += dx2;
        y8 += dy2;
    }    

    //draw light green lines on top right
    for (var i = 0; i <= numOfLines; i += 1) {
        stroke(127, 255, 180);
        line(x9, y9, x10, y10);
        x9 += dx3;
        y10 += dy3;
    }

    //draw blue lines on bottom right
    for (var i = 0; i <= numOfLines; i ++) {
        stroke(102,116,255);
        line(x11, y11, x12, y12);
        x11 += dx3;
        y12 += dy3;
    }

    noLoop();
}

I enjoyed playing around with variables to change the colors and shapes of the lines around. By overlapping lines on top of each other, one by one, I loved to mixture of colors and harmony it created among themselves.

Looking Outwards-04

The inspirational project that I found is called Forms- Screen Ensemble , created in 2020. I found this artwork very interesting, as the graphic scores that are created by random probability are transformed into sound through a unique algorithm, creating music as played in the video.  From the description it was interesting that the project was described as something that the audience can literally simultaneously hear what they see. The algorithms that generated the work are that briefly, the three screens each contribute to create sound as they each cover rhythm, texture, and harmony.  The screens display graphics that are endless, and can never be repeated again. 

Link

LO: Sound Art

Kaeser plays with real time weather events to compose a piece of music.

Adrien Kaeser’s “Weather Thingy“ is a sound and computational art that uses real-time climate-related data to create custom-built sound effect and control the musical instruments. Each sound sensor is attached to a weather station on a tripod microphone to measure speed, rain, direction of wind, as well as a brightness sensor to assess ambient levels of light. Then, the sensor transforms the weather-events into MIDI inputs, which adjusts settings like chorus, pan, decay and LFO through a custom instrument panel. I found it really intriguing that the device interprets the differing stimulation of weather and connects user’s input to produce a variety of audio effects on the keyboard with a pair of knobs and four audio buttons. I really admire how weather can be rendered into auditory technology and computational data, and how Kaeser simply collaborated with the environment to compose an interesting musical piece. Kaeser’s artistic sensibility surfaces when he first came up with the idea of musical weather contraption, and later actually plays the music in such a novel way along with the nature.

Reference: https://medium.com/@JeremySCook/hear-the-environment-with-this-weather-thingy-c0d0502fca0e

Looking Outwards 04: Sound Art

Reading this week’s topic about automated emulations of music style was very interesting. Considering the evolution and how far music has come and applying it to this week’s topics are thought provoking. After reading more articles about this topic I learned more about simple harmonic motions and how the sounds we hear are actually fluctuations in air pressure, tiny variations from normal atmospheric pressure, cause by vibrations. This reminded a lot of when I took AP physics in high school and went over the sound waves unit. The continuous rise and fall in pressure are what creates the waves of sound. Contemporary technology has evolved dramatically as now digital music technology is possible. Digital music is a method of representing sound in numerical values and is often synonymous with MP3 music as its a common file formate which digital music exists in.

Project 04: String Art

sketch

//Tim Nelson-Pyne
//tnelsonp
//Section C

//shape 1
var ax1;
var ay1;
var ax2;
var ay2;

//shape 2
var by1;
var bx1;
var by2;
var bx2;

//shape 3
var cy1;
var cx1;
var cy2;
var cx2;

var numLines = 2;
var angle = 0;

//controls green value
var g = 0;
var gMod = 0;

//controls blue value
var b = 0;
var bMod = 0;

function setup() {
    createCanvas(400, 300);
    background(0);
    
    //shape 1
    ax1 = (100)/numLines;
    ay1 = (0)/numLines;
    ax2 = (100)/numLines;
    ay2 = (0)/numLines;

    //shape 2
    bx1 = (0)/numLines;
    by1 = (0)/numLines;
    bx2 = (0)/numLines;
    by2 = (0)/numLines;

    //shape 3
    cx1 = (100)/numLines;
    cy1 = (0)/numLines;
    cx2 = (0)/numLines;
    cy2 = (0)/numLines;
    
}

function draw() {

    //if you hold down the mouse it makes the canvas rotate around your mouse position
    if (mouseIsPressed == true){
        translate(mouseX, mouseY);
        rotate(radians(angle));
        angle += 1;
    }
    

    //brings green levels up and down based on sin() graph
    //maped between zero and 255
    gMod += 0.01;
    g = sin(gMod);
    g = map(g, -1, 1, 0, 255);

    //brings blue levels up and down based on cos() graph
    //maped between zero and 255
    bMod += 0.01;
    b = cos(bMod);
    b = map(b, -1, 1, 0, 255);


    //set stroke color and weight
    stroke(255, g, b);
    strokeWeight(.25);

    var x1 = min(mouseX, width);
    var y1 = min(mouseY, 246);
    var x2 = 0;
    var y2 = 0;

    //shape 1
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += ax1;
        y1 += ay1;
        x2 += ax2;
        y2 += ay2;
    }


    //green to zero for shape 2
    g = 0;
    stroke(255, g, b);

    var x1 = width;
    var y1 = map(mouseY, 0, height, 250, height);
    var x2 = 0;
    var y2 = map(mouseY, 0, height, 250, height);

    //shape 2
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += bx1;
        y1 += by1;
        x2 += bx2;
        y2 += by2;
    }

    
    //set blue to zero for shape 3 and return green to sin() based value
    b = 0;
    g = sin(gMod);
    g = map(g, -1, 1, 0, 255);
    stroke(255, g, b);

    var x1 = min(mouseX, width);
    var y1 = constrain(mouseY, 150, 246);
    var x2 = width;
    var y2 = 150;

    //shape 3
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += cx1;
        y1 += cy1;
        x2 += cx2;
        y2 += cy2;
    }
    


}

I chose to make some interactive string art. Moving the cursor around changes the drawing and clicking and dragging changes it even more. I also decided to incorporate shifting colors to make the drawing change a bit more over time.