September 2022 – Page 12 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Looking Outwards – 04

Work Title: The Sweet Screen, A multiplayer touch installation

Artist: DA Z Digital Art Zurich

https://studiomoniker.com/projects/the-sweet-screen

“The phone has become an extension of our body, and our finger is navigating through the endless seductive space of information or entertainment.”

This project is an interactive mobile design that invites the audience to use their fingers on the screen, and the hand mirrors the touching back motion from behind the screen. While people gather in the screening room, one can also see other people’s fingers on the digital screen and interact with one another. As the finger touches back, there is also a “knock” sound playing. I am interested in this project because yet it’s generated by a very simple motion, the multimedia experience is prolific in both 2-dimension and 4-dimension spaces. I suppose the algorithm behind this work to be mimicking the user’s finger as mouseX and mouseY. When mouseX and mouseY are tracked, there is a reaction sent from the computer, which includes the audio effect and another finger appearing.

LO4: Sound Art

The artwork that i’m interested is Senseless Drawing Bot by So Kanno & Takahiro Yamaguchi. The robot is a 4-wheeled graffiti machine, with a pendulum arm, arduino and spray cans to create random strokes as it moves up and down the gallery space. The movements of the pendulum arm creates drawings that are free and random, so that audiences can’t really expect what comes next. This randomness makes the artwork very interesting.
Moreover, this combination of technology and art creates a lot of possibilities in the future, combining AI with art and a lot of other creative aspects.
Thinking of the algorithm, I think the settings makes use of the physical characteristics of free arm pendulum, which goes through random movements while it starts rotating. So the program sets when the robot starts drawing, when it starts rotating the arm and what the storkeweight is.

link here

Project 04 – String Art – srauch

Here’s my string art — when the mouse is pressed, it makes rainbow spiderwebs in each corner of the canvas. To erase the canvas and start over, press “e”.

sketch

//Sam Rauch / srauch / section B
//this code generates four "rainbow spiderwebs", one in each corner of the canvas,
//as long as the mouse is pressed. When the user presses the "e" key, the canvas
//erases. 

// two points of A line
var ax1;
var ay1;
var ax2;
var ay2;

// two points of B line
var bx1;
var by1;
var bx2;
var by2;

// endpoints of connecting lines
var x1; 
var y1;
var x2; 
var y2;


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

function draw() {

    //draw spiderwebs in each quadrant of the canvas as long as mouse is pressed
    if (mouseIsPressed){
        strokeWeight(1);

        stringart();

        push();
        translate(200,0);
        stringart();
        pop();

        push();
        translate(200,150);
        stringart();
        pop();

        push();
        translate(0, 150);
        stringart();
        pop();
    }

    //erase canvas when user presses e key
    if (keyIsPressed){
        if (key == "e") {
            background(0);
        }
    }
}

//creates two lines, with 50 "stringers" between each line
function stringart() {
    //canvas size (200, 150)

    //randomly generate location of A line
    ax1 = random(10, 190);
    ay1 = random(10, 140);
    ax2 = random(10, 190);
    ay2 = random(10, 140);

    //randomly generate location of B line
    bx1 = random(10, 190);
    by1 = random(10, 140);
    bx2 = random(10, 190);
    by2 = random(10, 140);

    //assign first stringer's location connecting top of A and bottom of B
    x1 = ax1; 
    y1 = ay1;
    x2 = bx2;
    y2 = by2;

    //draw A line and B line in a random color
    stroke(random(255), random(255), random(255));
    line(ax1, ay1, ax2, ay2);
    line(bx1, by1, bx2, by2);
    strokeWeight(0.5);

    //draw 50 lines between A line and B line, incrementing 1/50th of distance between x values
    //and y values of each line
    for (var i = 0; i < 51; i+=1) {

        var x1Increment = (ax2- ax1) / 50;
        var y1Increment = (ay2 - ay1) / 50;
        var x2Increment = (bx1 - bx2) / 50;
        var y2Increment = (by1 - by2) / 50;

        //first stringer
        line (x1, y1, x2, y2);

        //changing position of stringer for each loop
        x1 += x1Increment;
        y1 += y1Increment;
        x2 += x2Increment;
        y2 += y2Increment;

    }

}

Blog 04

French American jazz pianist Dan Tepfer is also a coder and has developed a series of algorithms so that his computer can play with him. Jazz is known for its unpredictability and improvisations, which Tepfer’s algorithms can respond to. Tepfer, however, is a strong proponent of believing that computers should not be too intelligent but rather broaden the horizons of one’s imagination. Tepfer connects his Yamaha Disklavier to his computer where his playing is understood and the algorithms and “plays” the piano as well. His album showcasing his work, Natural Machines, was released in 2018. Tepfer is currently working on bringing his ideas to the Melbourne Planetarium where his algorithm will also project moving images in the dome.

Project-04: String Art

string art Download

// Sandy Youssef, syoussef
//Section D
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;
var numLine = 30;

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

function draw() {
    stroke("yellow");  // yellow lines 1
    line(0, 300, 50, 0);
    line(0, 0, 150, 150);
    dx1 = (50-0)/numLines; //make the lines 1/50th of a step along the reference lines
    dy1 = (0-300)/numLines;
    dx2 = (150-0)/numLines;
    dy2 = (150-0)/numLines;
    var x1 = 0; // x1 of line 1
    var y1 = 300; //y1 of line 1
    var x2 = 0;  //x1 of line 2
    var y2 = 0; //y1 of line 2
    for (var i = 0; i <= numLines; i += 1) {
        stroke("yellow");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    stroke("green");  // green lines 1
    line(0, 0, 5, 300);
    line(50, 300, 190, 300);
    dx1 = (5-0)/numLines; //make the lines 1/50th of a step along the reference lines
    dy1 = (300-0)/numLines;
    dx2 = (190-50)/numLines;
    dy2 = (300-300)/numLines;
    var x1 = 0; // x1 of line 1
    var y1 = 0; //y1 of line 1
    var x2 = 50;  //x1 of line 2
    var y2 = 300; //y1 of line 2
    for (var i = 0; i <= numLines; i += 1) {
        stroke("green");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    stroke("yellow");  //yellow lines 2
    line(400, 200, 50, 0);
    line(0, 300, 300, 300);
    dx1 = (50-400)/numLines; //make the lines 1/50th of a step along the reference lines
    dy1 = (0-200)/numLines;
    dx2 = (300-0)/numLines;
    dy2 = (300-300)/numLines;
    var x1 = 400; // x1 of line 1
    var y1 = 200; //y1 of line 1
    var x2 = 0;  //x1 of line 2
    var y2 = 300; //y1 of line 2
    for (var i = 0; i <= numLines; i += 1) {
        stroke("yellow");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    stroke("yellow");  //yellow lines 3
    line(400, 200, 250, 0);
    line(0, 300, 300, 300);
    dx1 = (250-400)/numLines; //make the lines 1/50th of a step along the reference lines
    dy1 = (0-200)/numLines;
    dx2 = (300-0)/numLines;
    dy2 = (300-300)/numLines;
    var x1 = 400; // x1 of line 1
    var y1 = 200; //y1 of line 1
    var x2 = 0;  //x1 of line 2
    var y2 = 300; //y1 of line 2
    for (var i = 0; i <= numLines; i += 1) {
        stroke("yellow");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    stroke("yellow");  //yellow lines 4
    line(400, 200, 150, 0);
    line(0, 300, 300, 300);
    dx1 = (150-400)/numLines; //make the lines 1/50th of a step along the reference lines
    dy1 = (0-200)/numLines;
    dx2 = (300-0)/numLines;
    dy2 = (300-300)/numLines;
    var x1 = 400; // x1 of line 1
    var y1 = 200; //y1 of line 1
    var x2 = 0;  //x1 of line 2
    var y2 = 300; //y1 of line 2
    for (var i = 0; i <= numLines; i += 1) {
        stroke("yellow");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    stroke("green");  //green lines 2
    line(400, 200, 400, 0);
    line(0, 300, 300, 300);
    dx1 = (400-400)/numLines; //make the lines 1/50th of a step along the reference lines
    dy1 = (0-200)/numLines;
    dx2 = (300-0)/numLines;
    dy2 = (300-300)/numLines;
    var x1 = 400; // x1 of line 1
    var y1 = 200; //y1 of line 1
    var x2 = 0;  //x1 of line 2
    var y2 = 300; //y1 of line 2
    for (var i = 0; i <= numLines; i += 1) {
        stroke("green");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

   
    stroke("green");  // green lines 3
    line(450, 0, 0, 0);
    line(0, 150, 300, 300);
    dx1 = (0-450)/numLine; //make the lines 1/50th of a step along the reference lines
    dy1 = (0-0)/numLine;
    dx2 = (300-0)/numLine;
    dy2 = (300-150)/numLine;
    var x1 = 450; // x1 of line 1
    var y1 = 0; //y1 of line 1
    var x2 = 0;  //x1 of line 2
    var y2 = 150; //y1 of line 2
    for (var i = 0; i <= numLine; i += 1) {
        stroke("green");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    stroke("green");  // green lines 4
    line(300, 0, 0, 0);
    line(0, 150, 300, 300);
    dx1 = (0-300)/numLine; //make the lines 1/50th of a step along the reference lines
    dy1 = (0-0)/numLine;
    dx2 = (300-0)/numLine;
    dy2 = (300-150)/numLine;
    var x1 = 300; // x1 of line 1
    var y1 = 0; //y1 of line 1
    var x2 = 0;  //x1 of line 2
    var y2 = 150; //y1 of line 2
    for (var i = 0; i <= numLine; i += 1) {
        stroke("green");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    stroke("green");  // green lines 5
    line(150, 0, 0, 0);
    line(0, 150, 300, 300);
    dx1 = (0-150)/numLine; //make the lines 1/50th of a step along the reference lines
    dy1 = (0-0)/numLine;
    dx2 = (300-0)/numLine;
    dy2 = (300-150)/numLine;
    var x1 = 150; // x1 of line 1
    var y1 = 0; //y1 of line 1
    var x2 = 0;  //x1 of line 2
    var y2 = 150; //y1 of line 2
    for (var i = 0; i <= numLine; i += 1) {
        stroke("green");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    stroke("green"); // green lines 6
    line(150, 0, 0, 0);
    line(0, 0, 0, 300);
    dx1 = (0-150)/numLines; //make the lines 1/50th of a step along the reference lines
    dy1 = (0-0)/numLines;
    dx2 = (0-0)/numLines;
    dy2 = (300-0)/numLines;
    var x1 = 150; // x1 of line 1
    var y1 = 0; //y1 of line 1
    var x2 = 0;  //x1 of line 2
    var y2 = 0; //y1 of line 2
    for (var i = 0; i <= numLines; i += 1) {
        stroke("green");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    



    noLoop();
}

I tried to create a loose repetition effect. It took me a while to understand how the code works, but when I did, I was able to achieve what I had in mind.

Project 4

String Art!

sketch

var numlines =18;
var dx = (240/2)/numlines;
var dy = (240/2)/numlines;

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

function draw() {
    strokeWeight(0.5);
    var x1 = 30;
    var y1 = 200;
    var x2 = 150;
    var y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    line(30,200,270,200);
    line(150,80,150,320);
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 += dx;
        y2 -= dy;
    }
    x1 = 270;
    y1 = 200;
    x2 = 150;
    y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 -= dx;
        y2 -= dy;
    }
    x1 = 30;
    y1 = 200;
    x2 = 150;
    y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 += dx;
        y2 += dy;
    }
    x1 = 270;
    y1 = 200;
    x2 = 150;
    y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 -= dx;
        y2 += dy;
    }
    translate(0,200)
    var x1 = 30;
    var y1 = 200;
    var x2 = 150;
    var y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    line(30,200,270,200);
    line(150,80,150,320);
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 += dx;
        y2 -= dy;
    }
    x1 = 270;
    y1 = 200;
    x2 = 150;
    y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 -= dx;
        y2 -= dy;
    }
    x1 = 30;
    y1 = 200;
    x2 = 150;
    y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 += dx;
        y2 += dy;
    }
    x1 = 270;
    y1 = 200;
    x2 = 150;
    y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 -= dx;
        y2 += dy;
    }
    translate(0,-400)
    var x1 = 30;
    var y1 = 200;
    var x2 = 150;
    var y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    line(30,200,270,200);
    line(150,80,150,320);
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 += dx;
        y2 -= dy;
    }
    x1 = 270;
    y1 = 200;
    x2 = 150;
    y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 -= dx;
        y2 -= dy;
    }
    x1 = 30;
    y1 = 200;
    x2 = 150;
    y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 += dx;
        y2 += dy;
    }
    x1 = 270;
    y1 = 200;
    x2 = 150;
    y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 -= dx;
        y2 += dy;
    }
}

Looking Outwards – 04

Zimoun – Sound Sculptures

Zimoun’s sound sculptures revolve around using industrial and everyday materials such as cardboard and manipulates them in a mechanical way that when in motion, creates immersive and beautical sounds. His sculptures are typically installation pieces that spin, turn, oscillate ect, to create a depth in the sounds. I admire his works especially because of the materials he uses; Zimoun manages to discover the hidden sounds of everyday objects and exhibits them in a way that produces almost a spatial experience, derived from a series of the same object.

I believe that the motion of the objects are generated by programming the oscillations of the corresponding string or wire, which leads to the oscillation of the object.

The artist, Zimoun has always been interested in both sound art and visual art, which has helped him in his projects; his sound sculptures are both visually and phonetically aesthetic and theses components work together to create the immersive experience.

LookingOutwards-04

Creator’s Name: rgb3
Title of Work: LOOPLEX
Year of Creation: 2009

The project I chose for this week is a physical user interface named LOOPLEX that explores the idea of live sound interaction. It appears as though the different hexagon tiles placed on the table-like interface change the sound made along with a representation of that sound with color. Changing the angle of the hexagon appears also to alter the sound. I think it is fascinating to explore how humans interact with the objects around them, especially in this case where computation is embedded within the object to produce sounds we are capable of processing. The description of this project states that it uses loops to improvise the sound and since we learned about them this week, it is really interesting to see them being used in ways that are more than visual outputs. The creator’s artistic sensibilities portray their creativity and vision that allows the user to change the sound, leading to a unique experience every time.

Here is a demonstration of LOOPLEX in action.

Looking Outwards-04

The most recent iteration, ‘FORMS – String Quartet,’ invites musicians on stage to interpret a series of graphic scores, which build up the visual scenery, giving the audience the experience of anticipating the “music to come.” Each instrument on the score is identified by a color code, with white representing the random engine itself. This performance was recorded in collaboration with the Brossa String Quartet at Barcelona’s CosmoCaixa Science Museum in April 2021, as part of the art+science NEO cycle curated by Irma Vilà and Pau Alsina. According to their website, the generative graphics were written in Processing, while the image sonification was done in Max/MSP. The part that I was most intrigued by was how music/sound could be visualized in a sense. And it’s not just any visuals but interactive visuals with cool light effects. That could be a way for people with hearing impairments to enjoy music. I think this style of performance has excellent potential.

Link:https://www.creativeapplications.net/maxmsp/forms-string-quartet/

Forms – String Quartet – Irma Vilà and Pau Alsina