Month: September 2021

Random Lines Spin Art

I spent a good amount of time trying to decide what to make. I ended up moving certain variables to fit between my triangular sides to make a star or compass shape. To keep it more simple for myself to move between to points I made it so I was not changing all of the line points. I think this helped a lot to understand the movement of the lines better. I tried to condense my code as much as I could.

file

var dx1; //variables for each triangle 1= triangle 1, 2= triangle 2
var dy1;
var dy2;
var dx3;
var dy3;
var dx4;
var numLines = 35;
function setup() {
    createCanvas(400, 400);
    background(200);
    dx1 = (100 - 50) / numLines; //x2-x1/number of lines(thick or thin)
    dy1 = (300 - 100) / numLines; //makes line lenght shorter or longer(higher,lower)
    dy2 = (100 - 300) / numLines; //some of the movement could stay the same or be switched
    dx3 = (250 - 50) / numLines;
    dy3 = (100 - 150) / numLines;
    dx4 = (50 - 250) / numLines;
}
    
function draw() { //per 1 line stroke
    strokeWeight(.5);
    var x1 = 200; //variables for each line, every triangle has 2
    var y1 = 0; //must have different variables or will not run correctly
    var x2 = 150;//even if numbers are the same
    var y2 = 200;
    var x3 = 200;
    var y3 = 400;
    var x4 = 150;
    var y4 = 200;
    var x5 = 0;
    var y5 = 200;
    var x6 = 200;
    var y6 = 250;
    var x7 = 200;
    var y7 = 250;
    var x8 = 400; 
    var y8 = 200;

    for (var i = 0; i <= numLines; i += 1) { 
        line(x1, y1, 150, 200); //top tri, left line
        x1 += dx1;
        y1 += dy1;
        line(x2, y2, 250, 200); //top tri right line
        x2 += dx1;
        y2 += dy2;
        line(x3, y3, 150, 200); //bottom tri, left line
        x3 += dx1;
        y3 += dy2;
        line(x4, y4, 250, 200); //bottom tri right line
        x4 += dx1;
        y4 += dy1;
        line(x5, y5, 200, 250); //left tri, bottom line
        x5 += dx3;
        y5 += dy3;
        line(x6, y6, 200, 150); //right tri, top line
        x6 += dx3;
        y6 += dy3;
        line(x7, y7, 200, 150); //left tri, top line
        x7 += dx4;
        y7 += dy3;
        line(x8, y8, 200, 250); //right middle tri, bottom line
        x8 += dx4;
        y8 += dy3;
    }
    noLoop();
 }

To make/ find my shape points I had to make some circles and lines first as a preliminary canvas

LO week 4-The Sugarcube

https://www.instructables.com/Sugarcube-MIDI-Controller/

video of button pressing and whole form
Demo of Arpeggiator, just one of the sound functions of this creation

Looking on Vimeo, I found the Sugarcube controller. I thought it was unique because of the button pressing and I have seen familiar things before online with a connected mouthpiece. I really like the ease of this project and how you can connect it to different apps to do different sound related tasks. I liked how hands on it was with movement and shaking to erase work or play with the buttons. I thought this would make a really cool kids toy for kids who like music, without having a screen. It has a lot of different connections and apps to use; you can generate polyrhythms based on tilt and control the velocity. It also had a step sequencer which allowed it to go through different patterns of sound and tempo. The creator went through a lot of work for the parts and to make it on arduino and make it have a clean box packaging.The creator also goes through the motions of saying how they made the whole set up so you can too.They also attached their code in arduino, and I appreciate how they were able to program the buttons to do so many different commands.

Algorithmic Drive – Spectacular car(au)tonomy

Sound always surrounds us no matter where we are – in our rooms, on the boardwalk by the ocean, in class during final exams when everyone is focused on their work. Even during complete silence there’s a sound of our breathing or the sound of dust falling on the floor. Sound is always there and the idea of music always follows it. Many would consider a loud street in the middle of New York City to be noisy or annoying but, as a native New Yorker, I grew to hear music in the random Manhattan sounds. We can hear constant beats from honking cars or from people throwing out metal cans of soda that make a clunking sound. People’s conversations are lyrics about daily life, struggles and human routines. Music is everywhere and I think it’s beautiful. 

I chose a project called “Algorithmic Drive” created by François Quévillon. “The work plays with the tension generated by confronting the technologies used by mobile robotics with the unpredictable nature of the world.” What I admire about this project is the fact that both technology and nature are connected here because robotics were used to capture the sound of the world around us. It’s fascinating. What I know about the algorithms that generated the work is that Quévillon built his own database that consisted of camera recordings and he connected that database to his car’s on-board computer. The camera was recording videos via Bluetooth in the car’s OBD-II port of a surrounding nature and it took into consideration all of the factors such as altitude, orientation, car’s location and speed, engine RPM, stability and the temperature of various sensors. To sort all of the videos statistically from minimum to maximum value by the parameters like sounds, images, location and car’s activity, there was a specific sampling system that used signal processing, data analysis and computer vision algorithms. The parameters were “mapped using a Uniform Manifold Approximation and Projection (UMAP) dimension reduction technique.” Sound analysis software was used to get the sound and visual features of the environment based on OpenCV and road scene segmentation using the SegNet deep convolutional encoder-decoder architecture and its Model Uncertainty. Moreover, the system that François Quévillon used in his project had  “a custom-built interface with illuminated rotary encoders and a monitor installed on a road case that contains a subwoofer.”

A way the creator’s artistic sensibilities manifested in the final form is the fact that François Quévillon was able to bring life into technology: robotics were used to record videos and he managed to add sounds based on recordings of nature. It’s simply fantastic. We were able to hear music based on ocean’s waves and on trees that were growing on the side of the road. We were able to hear beats from rain drops and we were able to hear melodies based on the flying insects. This project brought together technology and nature to create music – this project shows us that technology can be used not only for practical purposes but also for spirituality. 

Algorithmic Drive – Spectacular car(au)tonomy
François Quévillon, ‘Algorithmic Drive’ , 2018

Project-04: String Art

string art
// for the right up center and left down center string shapes
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
//for the left up corner and right down corner string shapes
var da1;
var da2;
var da3;
var da4;
var ds1;
var ds2;
var ds3;
var ds4;

var numLines=20;
function setup() {
    createCanvas(400,300);
    background(224,255,255);
    dy1 = 150 / numLines;
    dx2 = 200 / numLines;
    dy3 = -150 / numLines;
    dx4 = -200 / numLines;
    da1 = 200 / numLines;
    ds2 = -150 / numLines;
    ds3 = 150 / numLines;
    da4 = -200 /numLines;
}

function draw() {
    var x1 = 200;
    var y1 = 0;
    var x2 = 200;
    var y2 = 150;
    var x3 = 200;
    var y3 = 300;
    var x4 = 200;
    var y4 = 150;

    var a1 = 0;
    var s1 = 0;
    var a2 = 0;
    var s2 = 150;
    var a3 = 400;
    var s3 = 150;
    var a4 = 400;
    var s4 = 300; 

    //right up string section, section 1
    stroke(127,255,0);
    for (var i = 0; i <= numLines; i += 1 ) {
        line(x1,y1,x2,y2);
        y1 += dy1;
        x2 += dx2;
    }
    //left down string section, section 2
    stroke(75,0,130);
    for (var i = 0; i <= numLines; i += 1) {
        line(x3,y3,x4,y4);
        y3 += dy3;
        x4 += dx4;
    }

    //right up corner
    stroke(255,192,203);
    for (var a = 0; a <= numLines; a += 1) {
        line(a1,s1,a2,s2);
        a1 += da1;
        s2 += ds2; 
    }
    //left down corner
    stroke(255,99,71);
    for (var a = 0; a <= numLines; a += 1) {
        line(a3,s3,a4,s4);
        s3 += ds3;
        a4 += da4;
    }
    noLoop();
}

While writing this project, I first only used 2 sets of x and y to draw out 4 string shapes, which the computer did not conduct the action I expected it to do. Then, I added another 2 sets of a and s to draw the left up corner and right down corner string shape. Eventually, my code works.

Looking Outwards 4: Sound Art

“Cycling Wheel: The Orchestra” performed at Nuit Blanche Taipei

For this week’s LO, I looked into “Cycling Wheel: The Orchestra” created by Keith Lam, Seth Hon, and Alex Lai. The piece was first released in 2016 is composed of 3 sets of bicycle wheels and connecting strings. Together, the installation acts as a dynamic and interactive instrument for performance. The Hong Kong-based new media artist Keith Lam explains that the piece was based on the idea of Marcel’s Bicycle Wheel and that they wanted to remake the masterpiece by composing a multi-media performance. I love how they embedded audio and lighting in the wheel so the piece is very dynamic and interactive. The music created is very unique and the flashing lights really complement the orchestra. I also admire how there’s a live element where the artists are present and controlling those wheels in front of an audience. I suppose the algorithms behind the project helps to transform the mechanics of the wheel into variations in sounds and lights.

LO: Sound Art

I found a creative coder named Rino Petrozziello, who uses Pure Data (Pd) to create algorithmic music. This language that the artist uses allows coders to create graphical data structures, making it easier to edit and control the code. I enjoyed one of his compositions called Insomnia(2017). The music, generated by data flow, actually reminds me of actual string instruments. I admire Petrozziello’s work because, besides the sonic experience, he also creates visual representations of the sound. The viewers can witness the data flowing in real-time and what each control unit does to alter the sound. Additionally, I was impressed by how the artist can use computer algorithms to convey complex human emotions. 

This image depicts the graphical structure, as the music plays.

Link to video

Link to website

Project 4: String Art

sketch
//Anthony Pan
//Section C
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4; 
var dx5;
var dy5;
var dx6;
var dy6;
var dx7;
var dy7;
var dx8;
var dy8;
var dx9;
var dy9;
var dx10;
var dy10;
var dx11;
var dy11;
var dx12;
var dy12;
var dx13;
var dy13;
var dx14;
var dy14; 

var numLines = 30;


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

    //left of circle change in x/y
    dx1 = (280)/numLines;
    dy1 = (70)/numLines;
    dx2 = (120)/numLines;
    dy2 = (150)/numLines;

    //top of circle change in x/y
    dx3 = (150)/numLines;
    dy3 = (320)/numLines;
    dx4 = (90)/numLines;
    dy4 = (90)/numLines;

    //top right of circle change in x/y
    dx5 = (250)/numLines;
    dy5 = (20)/numLines;
    dx6 = (40)/numLines;
    dy6 = (150)/numLines;

    //bottom of circle change in x/y
    dx7 = (70)/numLines;
    dy7 = (120)/numLines;
    dx8 = (20)/numLines;
    dy8 = (300)/numLines;

    //right of circle change in x/y
    dx9 = (220)/numLines;
    dy9 = (120)/numLines;
    dx10 = (80)/numLines;
    dy10 = (150)/numLines;

    //bottom right of circle change in x/y
    dx11 = (240)/numLines;
    dy11 = (10)/numLines;
    dx12 = (105)/numLines;
    dy12 = (60)/numLines;

    //bottom left of circle change in x/y
    dx13 = (80)/numLines;
    dy13 = (140)/numLines;
    dx14 = (20)/numLines;
    dy14 = (300)/numLines;


}

function draw() {
    //ellipse(width/2, height/2, 120, 120) //ellipse for reference

    //left of circle start points
    var x1 = 130;
    var y1 = 5;
    var x2 = 130;
    var y2 = 230;

    //top of circle start points
    var x3 = 0;
    var y3 = 100;
    var x4 = 250;
    var y4 = 85;

    //top right of circle start points
    var x5 = 273;
    var y5 = 5; 
    var x6 = 273;
    var y6 = 230;

    //bottom of circle start points
    var x7 = 125;
    var y7 = 210;
    var x8 = 400;
    var y8 = 210;

    //right of circle start points
    var x9 = 220;
    var y9 = 40;
    var x10 = 280;
    var y10 = 180;

    //bottom right of circle start points
    var x11 = 240;
    var y11 = 10;
    var x12 = 270;
    var y12 = 210;

    //bottom left of circle start points
    var x13 = 160;
    var y13 = 200;
    var x14 = 230;
    var y14 = 220;


    for (var i = 0; i <= numLines; i += 1) { 
        stroke(220, 20, 0);

        //creating red vortex around a circle

        line(x1, y1, x2, y2); //left of circle
        x1 += dx1;
        x2 -= dx2;
        y1 += dy1;
        y2 -= dy2;

        line(x3, y3, x4, y4); //top of cirlce
        x3 -= dx3;
        y3 -= dy3;
        x4 += dx4;
        y4 += dy4;

        line(x5, y5, x6, y6); //top right of circle  
        x5 -= dx5;
        y5 += dy5;
        x6 += dx6;
        y6 -= dy6;

        line(x7, y7, x8, y8); //bottom of circle
        x7 -= dx7;
        y7 -= dy7;
        x8 += dx8;
        y8 += dy8;

        line(x9, y9, x10, y10); //right side
        x9 += dx9;
        y9 -= dy9;
        x10 -= dx10;
        y10 += dy10;

        line(x11, y11, x12, y12); //bottom right
        x11 += dx11;
        y11 -= dy11;
        x12 -= dx12;
        y12 += dy12;

        line(x13, y13, x14, y14); //bottom left
        x13 -= dx13;
        y13 -= dy13;
        x14 += dx14;
        y14 += dy14;

    }

    noLoop();

}

Creating a vortex around an ellipse using string art

Looking Outwards 04: Sound Art

Today I took a look at Unity’s music visualization program done by Peer Play. They created something that I found very intriguing because it was a refreshing take on traditional music visualization, utilizing small dots to create movement according to the beats of the music. The different colors keep the artwork lively and engaging as you follow along with the spinning movement of the small dots. It feels like a miniature light show on a display! I think that one way they were able to sync the movements of the lights with the music was to have certain lights assigned to certain instruments. The change in volume of the instrument would subsequently change the direction and movement of the light. However, there are so many movements that it’s hard to understand what each specific movement is assigned to!

Peer Play Unity Music Visualization

Project 04 String Art

String Art ProjectDownload 

//Alana Wu
//ID: alanawu
//Project 04: String Art



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

function draw ()
{
    background (0);
    if (mouseIsPressed)
    {
        background(255);
    }
    var x = 100;
    var y = 100;
    var dist = 50;
    var num = 5;

    push();
    translate (100, 75);
//white lines
    for (y = 10; y <= 300; y += 5)
    {
        strokeWeight (4);
        rotate (radians (-num + 180));
        stroke (255);
        if (mouseIsPressed)
        {
            stroke(0);
        }
        line (x + dist, y + dist, min (mouseX, 300), y);
        strokeWeight (.5);
        dist -= 1;
    }

//purple lines
    for (y = 100; y <= 200; y += .5)
    {
        rotate (radians (num));
        stroke (76, 0, 153);
        if (mouseIsPressed)
        {
            stroke (179, 255, 102);
        }
        line (constrain (mouseX, 50, 350), y, x + dist, y + dist);
        dist -= 5;
    }
//light blue lines
    for (y = 200; y <= 400; y += 1)
    {
        rotate (radians (num));
        stroke (0, 255, 255);
        if (mouseIsPressed)
        {
            stroke (255, 0, 0);
        }
        line (min (mouseX, 400), y, x + dist, y + dist);
    }
    pop();

//white string in larger black circle
    push ();
    translate (300, 200);
    fill (0);
    if (mouseIsPressed)
    {
        fill (255);
    }
//big circle
    ellipse (0, 0, 250, 250);
    for (var k = 0; k < 100; k+= 1)
    {
        rotate (radians (num));
        stroke (255, 220, 255);
//when mouseIsPressed, colors invert
//and new strings are drawn
        if (mouseIsPressed)
        {
            stroke (0);
            for (var a = 0; a < 40; a ++)
            {
                rotate (radians (1));
                line (2, 10, 10 + min (mouseX/10, 40), 30);

            }
            push ();
            translate (-100, -50);
            for (var a = 0; a < 40; a ++)
            {
                stroke (100, 255, 100);
                rotate (radians (4));
                line (2, 10, 10 + min (mouseX/10, 40), 30);

            }
            pop();
            noFill();
            ellipse (0, 0, 220, 220);
            ellipse (0, 0, 180, 180);
            ellipse (0, 0, 140, 140);
        }
        line (25, 0, 25 + mouseY/5, 45);
    }
    pop ();

//string in smaller black circle
    push();
    translate (180, 275);
    fill (0);
    if (mouseIsPressed)
    {
        fill (255);
    }
//smaller circle
    ellipse (0, 0, 100, 100);
    for (var i = 0; i < 100; i ++)
    {
        rotate (radians (num));
        stroke (204, 204, 255);
        if (mouseIsPressed)
        {
            stroke (51, 51, 0);
            for (var a = 0; a < 40; a ++)
            {
                rotate (radians (num));
                line (15, 25, 15 + min (mouseX/10, 20), 35);
            }
        }
        line (15, 5, mouseY/8, 30);
        line (10, 5, min (mouseY, 50), min (mouseY, 50));
    }
    pop ();

    if (mouseIsPressed)
    {
        push();
        translate (mouseX, mouseY);
//circle of red string circles
        for (var c = 0; c <= 8; c ++)
        {
            translate (20, 20);
            for (var b = 0; b < 80; b ++)
            {
                stroke (255, 0, 0);
                rotate (radians (num));
                line (8, 8, 20, 20);
                noStroke();
            }
        }
        pop();
    }
}

For this project, it was hard to figure out what I wanted to do, since I didn’t really understand what the possibilities were. I did a first draft of string art to explore the different options, then completely started over in a new file.

LO-Sound Art

The project I choose for this week LO is an exploratory public engagement project called quantum parallelograph by Professor David Deutsch of Oxford University. It basically applies the notion of parallel universe into a public engaging experiment based on the Young’s double slit theory. Since the double slit experiment says that a photon of light appears to pass through the double slits, the scientists suggests that a connection is made across universes when this happen. Therefore, they made the abstract idea of parallel universe into something tangible and visible. Interestingly, this project examines a scientific notion from an aesthetic point of view, it also approaches the scientific fiction by letting people engage in the activity of “communicating” with the alternate kind of self in another parallel world.

The Double Split Machine Used in the Experiment