can’t do math – Page 2 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Project-06: Abstract Clock

This project posed a large challenge in how I was going to sync up each lightning strike on the minute, but it turned out to be a really simple solution once I sat down to get it. On each minute, lightning strikes as a line and strokeWeight decreases over the minute, causing it to fade like a real strike. Every hour, another cloud is added until it resets at 00:00.

cloud

var cloudx = [] //where to draw each cloud
var cloudy = []
var strikeTime; //the timing of the lightning strike







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

function draw() {
    numClouds = hour() //adds a cloud for every hour
    strikeTime = ((60 - second()) / 10) //lightning strikes on the minute and fades
    background(48, 4, 181)
        for (m = 0; m <= numClouds; m ++) { //randomly determines cloud coordinates and sends to array
        		cloudx.push(random(40, 440))
        		cloudy.push(random(40, 440))
}
        for (i = 0; i < numClouds; i++) { //draws cloud and lightning
        	cloud(cloudx[i], cloudy[i], 15)
        	strike(cloudx[i], cloudy[i])
        	         }
}

function cloud(cloudx, cloudy, cloudsize){ //instructions for each cloud
	push()
	translate(cloudx, cloudy)
	fill(40, 40, 40, 188)
	ellipse(-10, 0, cloudsize)
	ellipse(0, -10, cloudsize)
	ellipse(0, 0, cloudsize)
	ellipse(10, 0, cloudsize)
	pop()
}



function strike(cloudx, cloudy){ //instructions for lightning
    push()
	translate(cloudx, cloudy)
	strokeWeight(strikeTime)
	stroke(255, 255, 0)
	line(0, 0, 10, 10)
	line(10, 10, -20, 20)
	line(-20, 20, 15, 30)
	pop()
}

LO-06: Randomness

I looked into the String Quartet by Witold Lutoslawski, a randomly determined piece made in the 20th century style of aleatoricism, a composition style where elements of the score and performance are left to chance. Many of the rhythms and articulations of the piece are left up to chance, such as repetition until the audience is quiet, or determining tempo through counting seconds. An analysis of the score shows it to be very complex, with new music notations such as wavy lines as beams and instructions on the score. It appears to be chaotic and disjointed but various elements of the score show that it is heavily dependent on communication by the members of the quartet, with synchronized exits and entrances. Repetitions are also determined by the members of the quartet or the audience. Lutoslawski experienced great repression of his work by the Soviet Union, with some of his pieces being banned for “inaccessibility”. However, he only lived in the USSR as he was forced out of Poland by World War II. His music, I believe, reflects these challenges but also acknowledges order and stability in dark times, when each part comes together to create flowing soundscapes and peaceful silence.

Project 05: Wallpaper

The biggest challenge in this project was dealing with drawing the spines on the cactus. It turns out P5.js doesn’t really like nested loops in functions and it crashed the program when I tried to use it, so I had to do the inefficient solution of manually drawing the points.

cactus







function setup() {
    createCanvas(600, 600);
    strokeWeight(3)
   
   


}

function draw() {
for (x = 120; x <= width - 120; x += 120) {
    
    for (y = 120; y <= height - 120; y += 120) {
        
        createCactus(x, y, 60, 80)
    }
}
    
  




}

function createCactus(cactusx, cactusy, cactusw, cactush) { 
    push()
    rotate(radians(random(-PI * 2, PI * 2)))
    translate(cactusx,cactusy) 
    fill(35, 117, 67)
    ellipse(0, 0, cactusw, cactush)
    body()
    arms(45)
    flower()
    pop()
    noLoop()
    



}

function body() {
      point((random(-20, 20)), random(-30, 30))
      point((random(-20, 20)), random(-30, 30))
      point((random(-20, 20)), random(-30, 30))
      point((random(-20, 20)), random(-30, 30))
      point((random(-20, 20)), random(-30, 30))
      point((random(-20, 20)), random(-30, 30))
      point((random(-20, 20)), random(-30, 30))
      point((random(-20, 20)), random(-30, 30))
      point((random(-20, 20)), random(-30, 30))
      point((random(-20, 20)), random(-30, 30))
      noLoop()


}

function arms (x) {
    push()
    translate(x,0)
    rotate(degrees(90))
    ellipse(0, 0, 20, 40)
    pop()
    push()
    translate(-x,0)
    rotate(degrees(230))
    ellipse(0, 0, 20, 40)
    pop()
    }

function flower() {
        noStroke()
        push()
        translate(0, -40)
        for (r = 90; r <= 270; r += 180) {
            rotate(degrees(r))
            fill(245, 110, 191)
            ellipse(0, 0, 10, 20)
            
        }

        pop()    
    }



    //// for (x = 0; x <= cactusw/2.75; x += 10) {
        //for (y = 0; y <= cactush/2.25; y += 10) {
             //point(x,y)
            
        //}
    //}
    ///for (x = -(cactusw/3); x <= 0; x += 10) {
        ///for (y = 0; y <= cactush/2.25; y += 10) {
             //point(x,y)
            
        //}
    //}
    //for (x = -(cactusw/3); x <= 0; x += 10) {
        //for (y = (-cactush/2.75); y <= 0; y += 10) {
             //point(x,y)
            
        //}
    //}
    //for (x = 0; x <= cactusw/2.75; x += 10) {
        //for (y = (-cactush/2.75); y <= 0; y += 10) {
             //point(x,y)
            
        //}
    //}

Looking Outwards 05

A piece I found particularly interesting was the work Glasses, Pitcher, Ashtray, and Dice by Gilles Tran. In a blog post about the image, he described the process of making it, where he used ray tracing and radiosity to generate photorealistic images of the objects. It reflects a very somber mood, and keeps an audience uncertain as to whether the piece is to be reflective or dark. It seems as though Tran intended the piece to be ambiguous due to the quality of the elements drawn but also the hues of lighting, which imply a sunny day but a dark room. It is a very high-quality image despite being amateur work and over twelve years old. I find it very interesting how Tran manipulates color and focus to emphasize certain aspects of the work. Lines and edges are crisp and clear, but the whole piece can be seen as dated due to subtle outlines and a lack of warp when looking through the glasses.

http://www.oyonale.com/modeles.php?lang=en&page=40

Project 04: String Art

I had a lot of difficulty coming up with this project but I’m pretty happy with how it turned out. I wasn’t sure of the syntax of combining an if statement and a loop and it took a few tries to get it how it is. Instead of just drawing a crack when an area is clicked on, the crack gets darker and darker the more you click on it and eventually the window “breaks” to show an orange sunset color.

window

var dx1;
var dy1;
var dx2;
var dy2;
var dx3
var dx4
var dx5
var dx6
var numLines = 24 ////builds the cracks
var numLines2 = 12
var numLines3 = 36
var shatterCount = 0  ////keeps track of the clicks until the window breaks


function setup() {
    createCanvas(300, 400);
    dx1 = (120 - 110 )/numLines;
    dy1 = (80 - 80)/numLines;
    dx2 = (150 - 50)/numLines;
    dy2 = (200 - 200)/numLines
    dx3 = (240 - 220) /numLines2
    dx4 = (250 - 150)/numLines2
    dx5 = (170 - 160)/numLines3
    dy5 = (260 - 240)/numLines3
    dx6 = (250 - 150)/numLines3

}
function draw() {
    rectMode(CENTER)
    background(0)
    fill(237, 160, 17)  ////window info
    rect(width / 2, height / 2, 150, 300)
    line(width / 2, 50, width / 2, 350)
    line(75, height / 2, 225, height / 2)
    noLoop()
    line(110, 80, 120, 80)
    line(220, 140, 240, 160)
    line(160, 240, 170, 260)
   
            
}

function mousePressed() {
    var x1 = 110
    
    var y1 = 80
    var x2 = 75
    var y2 = 200
    var x3 = 220
    var y3 = 140
    var x4 = 150
    var y4 = 200
    var x5 = 160
    var y5 = 240
    var x6 = 150
    var y6 = 200
    var brokenx1 = random(0, width)
    var brokeny1 = random(0, height)
    var brokenx2 = random(0, width)
    var brokeny2 = random(0, height)
    print(shatterCount)
    
       if (mouseX <= width / 2 & mouseY <= height / 2) { 
        
        for (var s = 0; s <= numLines; s += 1) {
            line(x1, y1, x2, y2)
            x1 += dx1;
            y1 += dy1;
            x2 += dx2;
            y2 += dy2; ////first crack
            
        } shatterCount = shatterCount + 1
    }
       if (mouseX >= width / 2 & mouseY <= height / 2) {
        
       for (var s = 0; s <= numLines; s += 1) {
            line(x3, y3, x4, y4)
            x3 += dx3;
            x4 += dx4; ////second crack along the middle pane
            
            } shatterCount = shatterCount + 1
        }
        if (mouseX >= width / 2 & mouseY >= height / 2) {
            
            for (var s = 0; s <= numLines; s += 1) {
            line(x5, y5, x6, y6)
            x5 += dx5
            y5 += dy5
            x6 += dx6; ////bottom crack along the middle pane
            
           } shatterCount = shatterCount + 1
        }
        
        if (shatterCount >= 12) {
            fill(237, 160, 17) ////what to do after the window "breaks"
            rect(width / 2, height / 2, width, height)
                
    }
}

LO-04: Sound Art

One piece I found particularly interesting was Keiko Uenishi’s LandFilles. It is a structure made out of recyclables, with an “instrument” made out of used plastic bottles that Uenishi moves to interact with the piece. An algorithm (she doesn’t describe it) then interprets her movements as though the bottles were a tube or resonance chamber to create sound, while a separate person uses video cameras, lights, and monitors to change the environment of the instrument. It’s a great example of how to find uses for anything, and I find the concept of natural resonance extremely interesting. It was fascinating to see how to algorithm read Uenishi’s movements with the structure of bottles to create these hollow, airy sounds. It also had an interesting range and tone, between a lower brass instrument such as a french horn, and the upper limits of a flute, while also incorporating piano-like sound as well. The program involved most likely follows something such as a set of sensors throughout the bottles, or a mapping program which follows their movement, then models a chamber for sound that is then played through speakers. It presents Uenishi’s personal views of the environment as conservation-focused, as the entire structure is built from recycled materials, and the sounds coming from the instrument aren’t your typical beautiful notes. It produces eerie, unsettling pitches that I can only see as a commentary on our treatment of the environment.

http://soundleak.org/works/landfilles

A small section of the audiovisual performance

Project-03: Dynamic Drawing

My project was pretty much inspired by this giant cat I saw outside of my window one night running around in the grass, and so I cut my old project for this one. It started with getting the cat drawn, which was the hardest part by far to keep it symmetrical and looking friendly. After the cat, I wrote the “time” variable which keeps the movement of the sun synced with the color of the background, which lightens as the sun rises. The cat’s eyes follow your mouse as it moves around as well, and as the sun comes up the grass shrinks to show the whole cat.

catto






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

}

function draw() {
	var time = min(mouseY, 255) ////controls mouse and background
	var eyemoveX1 = constrain(mouseX, 228, 236)
    var eyemoveX2 = constrain(mouseX, 364, 372)
    var eyemoveY = constrain(mouseY, 170, 182) ////eyes follow mouse
    var grassHeight = constrain(time, 0, 255) + 120 ////grows grass
    var sunHeight = 480 - min(mouseY, 480)    ////moves sun
    



	background(time / 4, time / 2, time);
    fill(100, 100, 100)
    circle(width / 2, height / 2, 300)
    ////ears
    triangle(188, 120, 240, 84, 136, 24)
    triangle(408, 120, 356, 84, 456, 24)
    ////eyes
    fill(236)
    circle(232, 176, 40)
    circle(368, 176, 40)
    fill(50, 0, 200)
    circle(232, 176, 24)
    circle(368, 176, 24)
    fill(0)
    ellipse(eyemoveX1, eyemoveY, 12)
    ellipse(eyemoveX2, eyemoveY, 12)
    ////nose
    fill(255,182,193)
    triangle(276, 248, 324, 248, width / 2, 272)
    line(width / 2, 272, width / 2, 304)
    ////whiskers
    line(288, 280, 200, 240)
    line(288, 282, 200, 288)
    line(288, 284, 200, 336)
    line(312, 280, 400, 240)
    line(312, 282, 400, 288)
    line(312, 284, 400, 336)
    ////mouth
    line(width / 2, 304, 276, 332)
    line(width / 2, 304, 324, 332)
    ////sun
    fill(255, 247, 16)
    circle(80, sunHeight, 100)
    ////grass
    fill(11, 156, 21)
    triangle(0, 450, 50, 450, 25, grassHeight)
    triangle(50, 450, 100, 450, 75, grassHeight)
    triangle(100, 450, 150, 450, 125, grassHeight)
    triangle(150, 450, 200, 450, 175, grassHeight)
    triangle(200, 450, 250, 450, 225, grassHeight)
    triangle(250, 450, 300, 450, 275, grassHeight)
    triangle(300, 450, 350, 450, 325, grassHeight)
    triangle(350, 450, 400, 450, 375, grassHeight)
    triangle(400, 450, 450, 450, 425, grassHeight)
    triangle(450, 450, 500, 450, 475, grassHeight)
    triangle(500, 450, 550, 450, 525, grassHeight)
    triangle(550, 450, 600, 450, 575, grassHeight)



}

LO-03: Computational Fabrication

I explored the piece Proteus, made by RobotsInArchitecture. It is a display featuring a series of pixel-like structures in which a robot rearranges ferrofluid similar to how a computer screen recolors pixels to form images. Ferrofluid art isn’t particularly rare, but I find that the robotic programming of the piece makes it much more interesting as it coordinates and randomizes how its magnetic array is realigned, rather than simply having a preprogrammed structure it moves. Algorithms which control the magnet array have to feature some sort of group of randomized controls, with preset timers and restrictions on making the same pattern twice, as it is emphasized that the robot constantly shifts between patterns and has a large amount and doesn’t follow any sort of specific order. Patterns most likely aren’t programmed, but magnet movement of course is, meaning that there are technically limits to what the robot can create, but the creators programmed it so that it constantly is shifting, and transitions from pattern to pattern make the art almost limitless. It reflects a lot of the sensibility of RobotsInArchitecture as they constantly look to expand the usage of robots in art, and creating such an intricate robot I believe displays that same spirit of progress. It also reflects the piece’s title, reflecting the shapeshifting sea god of Greek myth who never keeps the same form, just as the robot constantly shifts its ferrofluid.

This video is a brief walkthrough of Proteus, displaying its art and some of the processes behind it

Project 02: Variable Face

The main challenges in constructing my face were primarily around the placement of each element and how to control their heights so pieces didn’t overlap in ugly ways or stick out, but also to keep the overall identity of the face. I wanted each face to seem a little larger than life, while generating a completely new and cartoonish, albeit simple, face every time. I wanted simple elements based off of the original code, but that used that basic template given to us to create really weird and outrageous faces.

cowboyedit

var eyeSize = 20;     ////how large the outside eyes get
var faceWidth = 100;   ////width of face
var faceHeight = 150;  ////height of face
var glasses = 40      ////size of glasses lens
var hatWidth = 125    ////width of the brim
var hatHeight = 35    ////height of the brim
var hatX = 25        ////position of the top corner of the rectangular portion of the hat
var hatTall = 150    ////length of the rectangular portion of the hat
var bandannaSize = 80 ///width of the bandanna 
var bandannaY = 380   ///bottom corner of the bandanna
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(180);
    var hatSize = hatX * 2   ////determines width of the hat based on distance from the center
    var eyeLX = width / 2 - faceWidth * 0.25;  ////size of left eye
    var eyeRX = width / 2 + faceWidth * 0.25;  ////size of right eye
    var noseLength = 40    ////furthest position of nose
    var noseX1 = (width / 2, height / 2) - (.35 * faceWidth)   ////first x of nose triangle
    var noseY1 = height / 2 + faceHeight / 10   ////first y of nose triangle
    var noseX2 = (width / 2, height / 2) + (.75 * faceWidth)  ////2nd x of nose triangle
    var noseY2 = height / 2 + faceHeight / 10    ////2nd y of nose triangle
    var noseX3 = faceWidth / 2   ////x position of noise point
    var noseY3 = (height / 2) + noseLength ////height of nose point
    var bandanna1 = (width / 2) - bandannaSize  ////right x of bandanna, based on distance from center
    var bandanna2 = (width / 2) + bandannaSize   ///left x of bandanna, based on distance from center
    var bandannaLength = 400    ////y of bandanna point
    rect((width / 2) - hatX, 4, hatSize, hatTall) ////rectangle of hat
    ellipse(width / 2, height / 2, faceWidth,  faceHeight); ////face
    triangle(noseX1, noseY1, noseX2, noseY2, noseX3, noseY3)   ////nose
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);  /////left eye
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);  /////right eye
        if (faceWidth > 200) {   ////condition for glasses when face is wide
            line(eyeRX, height / 2, eyeLX, height / 2)
            ellipse(eyeRX, height / 2, glasses)
            ellipse(eyeLX, height / 2, glasses)
        } else {    ////otherwise pupils of eyes
            ellipse(eyeRX, height / 2, 4)
            ellipse(eyeLX, height / 2, 4)
         }    
    ellipse(width / 2, (height / 2) - ((faceHeight / 2) * .85), hatWidth, hatHeight);   /////hat brim
    triangle(bandanna1, bandannaY , bandanna2, bandannaY, width / 2, bandannaLength)    ////bandanna

       noLoop()


 
}

    

 
function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    redraw()
    faceWidth = random(75, 280);
    faceHeight = random(75, 280);
    eyeSize = random(10, 30);
    glasses = random(40, 65)
    hatWidth = random(120, 240)
    hatHeight = random(40, 80)
    hatX = random(10, 40)
    hatTall = random(160, 280)
    bandannaSize = random(100, 300)
    bandannaY = random(260, 300)
    bandannaLength = random(400, 550)
}

LO-2

I was interested in Mitchell Whitelaw’s Succession. It is a beautiful, haunting work that I think takes a modern approach to documenting and presenting history. I find the combination of each fossil element to have the striking effect of confusing viewers and forcing them to take time to pick apart and understand each element. Each part of the composite it displays is shown below the entire image so viewers may deconstruct the composite to better understand the work. Whitelaw’s description presents the mechanics of the code, which selects five images from a database of two thousand and combines them. I suppose there is something which controls how the images fit together, most likely which controls each layer, as there is a foreground and many layers of backgrounds, and an algorithm for transparency as well. It’s a very deep work which presents Whitelaw’s own respect for the culture as all of the pieces of the composite are presented as vital, and even pieces of the composite are recognized below. His description includes his artistic goal for the piece: to present new views on industrial capitalism and find new ways to document and look backwards.

https://mtchl.net/succession/#