LO: Algorithmic Music Video

For this weeks LO, I looked into how computational softwares + algorithms could be incorporated into art that combines both visual and sonic elements.

I came across the music video for Howler Monkey by German duo Meier and Erdmann. The video itself was created by Victor Doval, a visual artist, that developed an algorithm that tracks the frequencies in the song to generate an ever-changing landscape.

Image from Victor Doval’s website visualizing his working process for the video.

I felt that this work was especially intriguing because it comments on the human perception of music. Although music and sound can have lasting effects and influences on our lives, the experience of listening is inherently an extremely temporal process.

Doval’s visual interpretation of how we are forever impacted by any sound/song we encounter and engage with while each passing second is temporary through a generative landscape begins to question the purpose of art in our lives. By using algorithm and software to help situate the listener in a virtual (and visual) space, Doval allows us to question why we seek art (in all forms and mediums) when inherently, each fleeting moment with the pieces are so temporal; do we seek immediate pleasure, or hope to grow with each time?

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

LO: Computational Fabrication

In exploring computational digital fabrication, I began my search with a simple Google of “algorithm based physical sculptures.” I came across one link that talked about MoSculp, an algorithmic system created out of the Computer Science and Artificial Intelligence Laboratory (CSAIL) at Massachusetts Institute of Technology (MIT) in 2018.

A sculpture created by MoSculp.

Mosculp is a computer system that, when fed a 2D video of human movement, can create a 3D-printed sculpture conveying the arcs and curves created through the body’s movements. This is possible through the algorithm’s ability to estimate and detect key points of human body movements that transform the video of 2D frames into a 3D-aware rendering of the (human) subject’s 3D geometry.

Watch to see how MoSculp sculpts!

The pieces created by MoSculp now may simply seem like abstract sculptures without much purpose, but the potential of the technology is clear. Researchers have noted the possible implications of technology like MoSculp; can this improve the ability for athletes and dancers (amongst other careers) to find a new way to micro-analyze the nuances of techniques by studying these motion-capture images? How about using these sculptures as toys and tools for physical rehabilitation?

I found this project to be interesting as it begins an important discussion about the necessity of the visual arts and the ability for people to utilize these computer generated softwares to create real and effective solutions to everyday problems.

Project: Dynamic Drawing

A little house on a hill! Move left to right to see clouds, the sun, and the sky change. Move up and down to see the chimney puff smoke and some (abstract flowers).

sketchI tried using map() and it was pretty helpful!
The Illustrator sketch I originally did! Decided to take the door out.
var R= 0;
var G= 100;
var smokey = 0;
var Xcloud = 0;

function setup() {
    createCanvas(600, 600);
}

function draw() {
    let R = map(mouseX, 0, width/2, 0, 150)
    background(R,150,130); //background color changes based on mouseX
  
    noStroke();
    //sky
    fill('#FFC773');
    circle(R,R,R); //sun moving
    //clouds moving based on mouseX
    fill('#EAF0FF');
    ellipse(442 + Xcloud, 83, 77, 59);
    ellipse(472 + Xcloud, 117, 77, 59);
    ellipse(416 + Xcloud, 115,84,64);
    ellipse(374 + Xcloud, 115,52,34);
    ellipse(319 + Xcloud,183,66,23);
    ellipse(265 + Xcloud,183,107,44);
    ellipse(206 + Xcloud,161,133,56);
    ellipse(172 + Xcloud,183,137,40);
    ellipse(76 + Xcloud,78,47,27);
    ellipse(4 + Xcloud,65,84,65);
    ellipse(45 + Xcloud, 79, 49,46);
  
    //smoke
    G = height-mouseY
    fill(234,210,194,G)
    circle(369, 210 + smokey, 28)
    fill(217,185,137,G)
    circle(386,170 + smokey,34)
    fill(217,206,191,G)
    circle(349,133 + smokey,42)
    fill(153,129,92,G)
    circle(390, 84 + smokey, 53)
   
    //grass
    fill('#BDFF9F');
    circle(82,446,412);
    fill('#507C41');
    circle(518,629,543);
  
    //house
    fill('#C39156')
    rect(184, 297, 231, 200,18);
    fill('#754C24')
    rect(348,205,42,99)
    fill('#876946')
    triangle(300,224,457,319,143,319);
    //grass again
    fill('#7EBA70');
    circle(94,689,539);
  
    //flowers and fill based on opacity with mouseY
    fill(258,118,109,G)
    circle(16,257,41)
    fill(238,174,243,G)
    circle(103,245,37)
    fill(255,205,108,G)
    circle(163,260,22)
    fill(145,137,227,G)
    circle(137,294,35)
    fill(258,118,109,G)
    circle(68,297,22)
    fill(238,174,243,G)
    circle(48,285,19)
    fill(258,118,109,G)
    circle(3,314,24)
    fill(145,137,227,G)
    circle(31,313,11)
    fill(255,205,108,G)
    circle(64,329,12)
    fill(238,174,243,G)
    circle(35,348,25)
    fill(145,137,227,G)
    circle(110,342,25)
    fill(255,205,108,G)
    circle(144,352,22)
    fill(258,118,109,G)
    circle(143,388,31)
    fill(255,205,108,G)
    circle(110,379,19)
    fill(255,205,108,G)
    circle(68,388,44)
    fill(258,118,109,G)
    circle(10,384,30)
    fill(255,205,108,G)
    circle(18,431,47)
    fill(145,137,227,G)
    circle(50,423,12)
    fill(238,174,243,G)
    circle(83,441,17)
    fill(145,137,227,G)
    circle(122,457,27,)
    fill(145,137,227,G)
    circle(157,422,27)
    fill(238,174,243,G)
    circle(192,438,42)
    fill(255,205,108,G)
    circle(18,486,12)
    fill(145,137,227,G)
    circle(53,510,57)
    fill(258,118,109,G)
    circle(106,504,12)
    fill(255,205,108,G)
    circle(153,498,38)
    fill(238,174,243,G)
    circle(118,527,19)
    fill(255,205,108,G)
    circle(230,502,41)
    fill(145,137,227,G)
    circle(200,539,32)
    fill(255,205,108,G)
    circle(92,561,19)
    fill(258,118,109,G)
    circle(296,520,37)
    fill(258,118,109,G)
    circle(260,541,12)
    fill(238,174,243,G)
    circle(143,575,65)
    fill(258,118,109,G)
    circle(25,593,65)
    fill(255,205,108,G)
    circle(265,541,12)
    fill(258,118,109,G)
    circle(310,571,27)
    fill(145,137,227,G)
    circle(462,367,65)
    fill(238,174,243,G)
    circle(518,385,30)
    fill(255,205,108,G)
    circle(589,353,97)
    fill(258,118,109,G)
    circle(611,439,58)
    fill(238,174,243,G)
    circle(550,426,19)
    fill(145,137,227,G)
    circle(485,429,39)
    fill(258,118,109,G)
    circle(445,414,16)
    fill(145,137,227,G)
    circle(589,506,58)
    fill(255,205,108,G)
    circle(533,479,22)
    fill(258,118,109,G)
    circle(451,488,56)
    fill(255,205,108,G)
    circle(515,510,44)
    fill(145,137,227,G)
    circle(533,554,29)
    fill(238,174,243,G)
    circle(599,588,81)
    fill(255,205,108,G)
    circle(500,600,38)
    fill(238,174,243,G)
    circle(410,585,105)
    fill(258,118,109,G)
    
   
   //some interaction stuff 
    smokey = mouseY
    Xcloud = mouseX //clouds moving

}

  

Project 2: Generative Faces

How I feel after having to eat Resnik because I left my lunch at home.

sketch
var eyeSizeL = 20;
var eyeSizeR = 20;
var faceWidth = 100;
var faceHeight = 150;
var chinHeight = 300;
var irisSizeL = 10;
var irisSizeR = 10;
var browHeightL = 130
var browHeightR = 130
var cheekSizeL = 70
var cheekSizeR = 70
var lusciousLips = 15
var juicyLips = 17
var thickLipsTop = 13
var thickLipsBottom = 22

let moodColor = 50
 
function setup() {
    createCanvas(300, 500);
}
 
function draw() {
    background(moodColor);
    noStroke ();
    fill ('#86BB43');
    ellipse(width /2, height / 3, 135,140); //head shape
    fill('#F2BE80');
    rect(width/2 -15,250,30,60); //neck
    fill('#E856AD');
    ellipse(width/2, height,210,360,); 
    rect(width/2 -20, 300, 40,60)//shirt
    rect(width/2 -25, 280, 50,25, 10)
    fill('#86BB43');
    ellipse(width /2, 230, 80); //chin
    fill('#86BB43');
    circle(width/2-40, height/7*3,cheekSizeL); //left cheek
    circle(width/2+40, height/7*3, cheekSizeR); //right cheek
    fill (150);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill('#2B3D15');
    ellipse(eyeLX, browHeightL,30,20); //eyebrow
    ellipse(eyeRX, browHeightR-3,30,20); //eyebrow
    fill('#86BB43');
    ellipse(eyeLX, browHeightL-6, 35, 20); //eyebrow
    ellipse(eyeRX, browHeightR+3, 35, 20); //eyebrow
    fill(225)
    circle(eyeLX, height / 3, eyeSizeL); //eyeball
    circle(eyeRX, height / 3, eyeSizeR); //eyeball
    fill(10);
    ellipse(eyeLX, height / 3, irisSizeL, irisSizeL); //pupil
    ellipse(eyeRX, height / 3, irisSizeR, irisSizeR); //pupil
    fill('#D25A27');
    arc(width/2-5, 222, thickLipsTop,lusciousLips, PI,TWO_PI) //top lip
    arc(width/2+5, 222, thickLipsTop,lusciousLips, PI, TWO_PI) //top lip
    arc(width/2, 224,thickLipsBottom,juicyLips, 0,PI) //bottom lip
  
    
    
    
}
 
function mousePressed() {
    faceHeight = random(100, 200);
    eyeSizeL = random(15, 35);
    eyeSizeR = random(15, 35);
    irisSizeL = random(7,15);
    irisSizeR = random(7,15);
    browHeightL = random(125,135);
    browHeightR = random(125,135);
    cheekSizeL = random(70, 90);
    cheekSizeR = random(70, 90);
    lusciousLips = random(13, 25);
    juicyLips = random(15,25)
    thickLipsTop = random(13, 20)
    thickLipsBottom = random(20, 30)
  
    moodColor = color(random(30), random(95), random(40))
}

LO: Generative Art

Generative art has become such a tool to reflect on what we have seen until now and use those tools to create new scenes and dream-like experiences. Refik Anadol does exactly this.

‘Machine Hallucinations’, a synesthetic reality experience explores the connections between collective memories and archival tendencies of humans.

Powered by an algorithm fed over 100 million photographs of New York City, this 30 minute cinematic installation helps us to understand why we record experiences and hold onto memories into every step of a coming reality. Using the immense data that it has been provided and learned from, the algorithm produces scenes of a transforming New York City (in a possible future) and a multitude of similar dream-like ‘hallucinations’.

Examples of algorithmic studies done based on NYC photography.

Anadol’s work stood out to me as it begins the exploration in answering why we as humans act the way we do, all while introducing machines and AI as the possible vehicle for carrying out these considerations. His work not only serves to explore alternate realities through a visual medium, but also to bring a more hopeful narrative to the apocalyptic relationship between AI and humans that we often see today. 

Project 1: Self-Portrait.

I did this before we went over “width/2” and “height/2”, so trying to guess and predict individual points was very tedious and difficult!

my-portrait
function setup() {
    createCanvas(300, 300);
    background(180);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background('#F2857D');
    fill('#ED5145');
    noStroke();
    circle(width/2,height/2,190);
    noFill();
    stroke('#FDE74C');
    strokeWeight(15);
    circle(width/2, height/2,250);
    fill('#D4A25B');
    stroke('#D4A25B');
    strokeWeight(1);
    quad(172,225,129,225,123,130,178,130);

    fill('#163905');
    stroke('#163905');
    quad(172,220,129,220,50,250,250,250);
    rect(48,251,204,100);

    fill('#33830B');
    stroke('#33830B');
    quad(173,210,150,220,155,230,184,224);
    quad(127,210,150,220,145,230,116,224);

    fill('#F1C280');
    stroke('#F1C280');
    ellipse(150,129,87,84);
    quad(167,195,134,195,111,148,189,148);

    fill('#C28146');
    circle(150,147,20);

    fill('#CB6618');
    stroke('#CB6618');
    triangle(148,172,145,166,138,172);
    triangle(152,172,155,166,162,172);
    circle(150,168,10);

    fill('#F1C280');
    stroke('#F1C280');
    circle(150,135,35);
    ellipse(150,164,8);

    fill('#C28146');
    stroke('#C28146');
    quad(145,180,143,177,157,177,155,180);
    ellipse(150,180,10,6);

    fill('#FDF6ED');
    stroke('#FDF6ED');
    ellipse(133,142,23,8);
    ellipse(167,142,23,8);
    quad(145,142,121,142,119,132,146,132);
    quad(179,142,155,142,154,132,181,132);

    fill(40);
    stroke(40);
    ellipse(132,131,28,4);
    ellipse(168,131,28,4);

    fill('#FDF6ED');
    stroke('#FDF6ED');
    ellipse(132,134,25,4);
    ellipse(168,134,25,4);

    fill(40);
    stroke(40);
    quad(97,83,188,89,190,110,105,110);
    rect(104,107,8,35);
    rect(186,107,8,35);
    triangle(105,143,112,143,113,153);
    triangle(186,143,194,143,188,153)
}

LO: Voicing those Unheard- My Inspiration.

This past July, media-artist collective Breakfast (based in NY) released a Flip-Disk computational art piece to facilitate their ‘Don’t Go Quiet’ campaign in light of recent events with the murder of George Floyd and the insurgence in Black Lives Matter support.

“Dont Go Quiet” by Breakfast (2020) // 34.7 x 34.7 x 3.3 in // Flip-discs, software, camera + computer

The piece is composed of flip-discs triggered by the system’s real-time detection of new social media posts uploaded using the #blacklivesmatter hashtag or mentioning BLM, creating ripples (due to flip-disc movement) on an upside-down American flag. Through this piece, Breakfast hopes to highlight a collective, and hopefully, ongoing conversation to bring about an end to racism.

Flip-disc art has been around for quite some time, sometimes presenting itself in more practical forms: clocks, calendars, sign displays, etc. However, implementing a live internet tracking software to represent these current and highly important conversations brings another meaning to this technology. As an audience, we are drawn to artwork we can relate to; Breakfast has created an experience for its viewers to see the impact of each and every person speaking out against racism. I, like many, are inspired to stand alongside Black people today, tomorrow, and each day until we have created a world equitable enough. Let this be a time where we march harder, protest louder, and create with more empathy to see a world more diverse and inclusive than ever. Let your impact be seen.