Category: Uncategorized

Project 04: String Art

sketch
sketch

 

in this project, I tried to use different colors and combinations of strings to compose a gradually changing geometry that goes from edge to the center.

 

    var dx1;
    var dy1;
    var dx2;
    var dy2;
    var dx3;
    var dy3;
    var dx4;
    var dy4;
    var numLines = 50;
    var c;


function setup() {
    createCanvas(400, 300);
    background(0);
    
    //base set of lines #1
    /*line(width/4,0,0,height/3);
    line(0,height/3,width/2,height/3);*/

    /*line(1,300,2,1);
    line(2,1,200,150);
    line(200,150,398,299);
    line(398,299,399,1);*/

    dx1=(2-1)/numLines;
    dy1=(1-300)/numLines;
    dx2=(200-2)/numLines;
    dy2=(150-1)/numLines;
    dx3=(398-200)/numLines;
    dy3=(299-150)/numLines;
    dx4=(399-398)/numLines;
    dy4=(1-299)/numLines;

    //define the change of x, y variables
    /*dx1 = (0-width/4)/numLines;
    dy1 = (height/3-0)/numLines;
    dx2 = (width/2-0)/numLines;
    dy2 = (height/3-height/3)/numLines;*/
}
    
    //draw first set of strings
function draw() {

        var x1 = 1;
        var y1 = 300;
        var x2 = 2;
        var y2 = 1;
        var x3 = 200;
        var y3 = 150;
        var x4 = 398;
        var y4 = 299;

        stroke(0,255,0);
        //in a for loop, when a increases, x1+= a*dx1)
        //for(var e=0;e<=5;e+=1){
            //dx2=e*dx2;
            /*x1 += e*dx1;
            y1 += e*dy1;
            x2 += e*dx2;
            y2 += e*dy2;
            x3 += e*dx3;
            y3 += e*dy3;
            x4 += e*dx4;
            y4 += e*dy4;*/
        
            for (var i = 0; i <= numLines; i += 1) {
                line(x1, y1, x2, y2);
                line(x3,y3,x4,y4);
                x1 += dx1;
                y1 += dy1;
                x2 += dx2;
                y2 += dy2;
                x3 += dx3;
                y3 += dy3;
                x4 += dx4;
                y4 += dy4;
}
                
                string02();
                string03();
                string04();
                noLoop();
}
        //second set of strings
    function string02(){


        var x5 = 2;
        var y5 = 1;
        var x6 = 399;
        var y6 = 50;
        var x7 = 1;
        var y7 = 250;
        var x8 = 399;
        var y8 = 300;

        stroke(255);
       
            for (var e =0; e <= 20; e += 1) {
                line(x5, y5, x6, y6);
                line(x7,y7,x8,y8);
                x5 += dx1;
                y5 -= dy1;
                x6 += dx2;
                y6 -= dy2;
                x7 -= dx3;
                y7 += dy3;
                x8 -= dx4;
                y8 += dy4;
    }
    }

    //third set of strings
    function string03(){

        var x9 = 2;
        var y9 = 1;
        var x10 = 399;
        var y10 = 100;
        var x11 = 1;
        var y11 = 200;
        var x12 = 399;
        var y12 = 300;

        stroke(195,255,195);
       
            for (var l =0; l <= 25; l += 1) {
                line(x9, y9, x10, y10);
                line(x11,y11,x12,y12);
                x9 += dx1;
                y9 -= dy1;
                x10 += dx2;
                y10 -= dy2;
                x11 -= dx3;
                y11 += dy3;
                x12 -= dx4;
                y12 += dy4;
    }  
    }

    //fourth set of strings
    function string04(){

        var a = 2;
        var b = 1;
        var c = 399;
        var d = 200;
        var e = 1;
        var f = 100;
        var g = 399;
        var h = 300;

        stroke(90,255,90);
       
            for (var l =0; l <= 28; l += 1) {
                line(a, b, c, d);
                line(e,f,g,h);
                a += dx1;
                b -= dy1;
                c += dx2;
                d -= dy2;
                e -= dx3;
                f += dy3;
                g -= dx4;
                h += dy4;
    }  
    }
    //}
       //noLoop();



    //devide the lines
    //connect different parts on each line
    //define a function for different lines and variable

Project-04: String Art

string artDownload
// 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.

anabelle’s blog 04

Since middle school, I’ve always been a huge Vocaloid fan. Vocaloid is a software used to simulate human singing and was originally created to help performers and producers add vocal music even if they did not have access to a real singer. However, Vocaloid expands beyond the software and includes “characters” for each voicebox/voicekit, with popular examples including Hatsune Miku and Kagamine Len&Rin. Initially released in 2004 in a project led by Kenmochi Hideki in Barcelona, the Vocaloid software continues to be updated and rereleased today, with numerous versions and iterations of the same character with new singing abilities. If popular enough, Vocaloids are also given 3D holograms that are capable of holding real-life concerts in real-life venues (with really great turnout). I think the algorithms to create Vocaloid are fairly simple — a commissioned singer records the base notes for a character, which can be modified and edited by producers. What I love about Vocaloid is how each character is given vocal “limitations” to produce their own unique sounds. For example, Teto is best used for soft, low energy ballads, and Kaito’s deeper range will sound distorted in higher ranges.

Here’s an example of a vocaloid concert — the turnout is actually crazy for these things:

Link to Vocaloid website (anyone can buy the software): https://www.vocaloid.com/en/

Srishty’s Looking Outwards: Sound Art

Purform’s White Box, Audio Visual Performance

The project I found is a performance called, “Puform; White Box.” This performance was programmed by Jean Sébastian Rousseau, and Peter Dines. The music is done by Alain Thibault, and visuals are done by Yan Breauleaux. The performance consists of three white rectangle screens, angled together to create a wall, displaying black parametric and geometric visuals transcend, twist, break, and many other transformations. When I first watched this video, the first thing that struck me was the way the audio sounded in different ways wearing earbuds and without. When I wore my airpods, I was able to hear the movement of the sound spatially because of its spatial audio feature. This made me think not only about the computational aspects of the audio within the project, but also the technology we use to interpret it. 

The music of the performanced matched the visuals tightly, creating a surreal and daunting experience. The visual artist correlated sharp breaks with the musician’s staccato notes, and created vibrations and faster tempo, based on the speed of the visuals. The darkness of the exhibit room allowed the transforming visuals to stand out as they were contrasted amongst a white background. 

The main software technique used by programmers is called white box testing. This is a testing technique in which the software’s internal structure, design, and coding are tested to verify input outflow, improve design, usability and testing. White Box is a new software based on an old way of generating A/V compositions in real time and is a new piece in a cycle that began in with Black Box, which exhibits inputs, outputs and transfer functions. Puform uses two layers mixed with their video tapes. Using Quartz composer compositions, the programmers can easily change the relationship between the music and video, as the piece is constructed with a database of clips using Lemur.

Sources: 

https://s-v-m.tumblr.com/post/59526848935/graphic-sound-visualizers-vii

dynamic drawing

I wanted to explore the spinning of an object and see if I could control it or alter it in some way by using the location of the mouse.

sketch
function setup() {
    createCanvas(400, 400);
    rectMode(CENTER);
}

var g = 5;
var angle = 0;

function draw() {
    background(0);
    var r = g + mouseX
    fill(r, 255, 0);
    // restrict mouseX to 0-400
    var m = max(min(mouseX, 400), 0);
    var size = m * 350.0 / 400.0;
    circle(10 + m * 190.0 / 400.0, 200.0,
         size);
    fill(255, 0, r);
    size = 350 - size;
    circle(200 + m * 190.0 / 400.0, 200.0,
         size);
    //heres some confetti yay
    
    var confettiDimention1 = 100;
    var confettiDimension2 = 150;
    var confettiDimension3 = 120;
    var confettiDimension4 = 142;
    var angleSpangle = map(mouseX,0,width,3,300);
    push();
    fill('magenta');
    translate(m / 2,200 + size);
    rotate(radians(angle));
    square(confettiDimention1,confettiDimention1,50);
    fill('green');
    square(confettiDimention1,confettiDimention1,50);
    fill('cyan');
    square(confettiDimension2,confettiDimention1,10);
    square(confettiDimension3,confettiDimension4,30);
    pop();
    angle += angleSpangle;
    //if not then square probably

}

project3

sketch
   //Qixin Zhang
   // section E

    var x = 1
    var y = 1
    var angle = 0

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

}


function draw() {
    blendMode(SCREEN);
    translate(width/2,height/2);
  rotate(radians(angle+1))
    //fill(254,32,32);
   // noStroke ();
     // circle (0,0,1);

  
  if (mouseX <width/2 )  {
    
     x = x+0.3;
    y = y+0.3;
    angle = angle +22;
    fill(255,0,0);
    noStroke();
    scale(x/50)
    rotate(radians(angle));
    translate(x,y);
    circle (0,0,20);
    
    
  } else if (mouseX >width/2 ) {
    x = x+0.3;
    y = y+0.3;
    angle = angle -21;
    fill(156,0,0);
    noStroke();
   
    rotate(radians(angle));
    translate(x,y);
    circle (0,0,20);
  }

  
   
  
}

I am fascinated by the spiral, so i used mouseX and mouseY to control the direction of spinning angle

LO 3: Mouse intestine. FluoCells® prepared slide #4

https://www.thermofisher.com/us/en/home/technical-resources/research-tools/image-gallery/image-gallery-detail.2436.html

Off of the description given in the website, it is interesting that the function of this piece does not seem to be purely artistic.
It goes to purpose of digital art as a visual aid, something which we may tend to take for granted in this era. In order for the image to
be produced, nuclei were colored using a combination of lighting and stain. Three digitized sets were then compiled into this image. I
spoke in my last blog post about digitized art that is either hard or impossible to replicate traditionally, which is a concept that can
go beyond being a novelty and rather add something to the artistry of the piece. Here, digital art is also being used in a way that
cannot be replicated perfectly traditionally though the emphasis on its purpose in doing so is more in the realm of practicality, though
notably not necessarily outside of aesthetics when presented with the color choices and presentation and how that can influence our
understanding and focus on the piece.

Mouse intestine. FluoCells® prepared slide #4, a composite of three digitized images

Project-03: Dynamic Drawing

sketch
//Alicia Kim
//Section B

var r = 80;
var angle = 0;

function setup() {
    createCanvas(450, 600);
    background(220);
}

function draw() {
    noStroke ();
    //limiting y from 0 to 600
    var y = max(min(mouseY, 600), 0);  
    // as y increases background gets lighter
    background (255*y/650); 


//top ellipse
    fill (255,232,124); // star yellow
    ellipse (width/2,37.5,25,25);

//trunk
    fill (58.8,29.4,0); // brown
    rect(width/2-17.5,65,35,450);

//leaves
// as y increases, size of the leaves increases & y position changes 
    push();
    // higher the y, leaves get darker 
    fill (157-120*y/650,205-140*y/650,143-120*y/650); //frog
    triangle(width/2, 50, width/3, 120, 2/3*width,120);

    translate (-45*y/650,-25*y/650);
    scale (1+0.2*y/650);
    triangle(width/2, 50+65*y/650, width/3-8*1/3*y/650, 
        120+55*y/650, 2/3*width+8*1/3*y/650, 120+55*y/650);

    translate (-45*y/650,-25*y/650);
    scale (1+0.2*y/650);
    triangle(width/2, 50+95*y/650, width/3-12.121212*y/650, 120+100*y/650,
     width*2/3+12.121212*y/650, 120+105*y/650);

    translate (-45*y/650,-25*y/650);
    scale (1+0.2*y/650);
    triangle(width/2, 50+140*y/650, width/3-15.68627*y/650, 120+150*y/650,
     width*2/3+15.68627*y/650, 120+150*y/650);
   

    translate (-45*y/650,-25*y/650);
    scale (1+0.2*y/650);
    triangle(width/2, 50+175*y/650, width/3-18.05956*y/650, 120+185*y/650,
     width*2/3+18.05956*y/650, 120+185*y/650);
    pop();

//ornaments 
// higher the y, more ornaments appear

    if (y>125){
        fill (251,209,225); // ornaments pink
        ellipse (width/2-10,88,25,25);

    }
    if (y>165){
        fill (255,232,124); // ornaments yellow
        ellipse (width/2+27,138,25,25);
    }

    if (y>210){
        fill (255,218,173); // ornaments orange
        ellipse (width/2,200,25,25);
    }
    if (y>270){
        fill (250,128,114); // ornaments salmon
        ellipse (width/3,220,25,25);
    }
    if (y>330){
        fill (255,232,124); // ornaments yellow
        ellipse (width/2-8,300,25,25);
    }
    if (y>390){
        fill (255,218,173); // ornaments orange
        ellipse (width-width/3,280,25,25);
    }

    if (y>440){
        fill (255,232,124); // ornaments yellow
        ellipse (width/3,360,25,25);

    }

    if (y>495){
        fill (251,209,225); // ornaments pink
        ellipse (width/2+14,400,25,25);
    }

    if(y>550){
        fill (250,128,114); // ornaments salmon
        ellipse (width-width/4,420,25,25);

        fill (255,218,173); // ornaments orange
        ellipse (width/4,450,25,25);
    }
    
}
Ideation

Looking-Outwards-03

Clare Katyal, Section E

This project was created by Michael Faraday and is called Faraday waves. Faraday, along with photographer Linden Glendhill, used a high-speed camera and an LED ring light to reflect on water and capture the motions of the waves in the water. He attempted to depict the change in the waves when vibrating from different frequencies and found that higher frequencies create more complex patterns. I assume the patterns are generated through some art computer program which translates the wave frequencies (Hertz) into colorful circles on a black background, in order to better show the patterns and the complexities of the waves’ movements. Faraday studied the patterns of waves and their frequencies in the early nineteenth century, and used his knowledge of the vibrations to create a final product which artistically shows a beautiful and detailed graphic of a wave, while also educating the viewers about the ways nature can create beautiful art.
https://www.youtube.com/watch?v=APcBqk_UujA
Created by Michael Faraday
https://parametricworld.tumblr.com/post/175502683288/fuckyeahfluiddynamics-vibrate-a-pool-of-water