Author: ctv@andrew.cmu.edu

Random Sound, Evolving, Mixing to Compose

http://www.cmu.edu/news/stories/archives/2017/august/butterfly-sounds.html
This piece is an evolving sound composition created by a class I was in Junior year. The Phipps hosts a butterfly bloom every year, and my class wrote generative music compositions within the space. The class split into about 10 teams, and wrote a sound piece using random event triggers to play an ambient melody.

In this project, randomness played a crucial role for the experience within the space. One lesson we learned about in the class is that predicable/repetitive beats can impose undesired movement within a space. We used the randomness to unify each teams individual compositions. Because there was no specific beat to the songs, a pleasant tone was set in the garden space.

Another concept we learned about randomness is evolution. If a framework for a musical or artistic piece is designed to allow for chance, the experience is always different. A viewer can explore the space on their own time, without fear of missing out.

ctv-Project-05-Wallpaper

sketch

//Ty Van de Zande
//Section B
//ctv@andrew.cmu.edu
//Project-05

//canvas size
var cWid = 470;
var cHgt = 470;

//blockForm size
var wid = 50;
var hgt = 70;

//counter
var i = 0;

//some traits of circles and lines
var dia = wid;
var wght = 1;

//points shapes interact with
var xZero = 0;
var xOne = wid*.25;
var xTwo = wid*.5;
var xThree = wid*.75;
var xFour = wid;
var x = [xZero, xOne, xTwo, xThree, xFour];

var yZero = 0;
var yOne = hgt*.25;
var yTwo = hgt*.5;
var yThree = hgt*.75;
var yFour = hgt;
var y = [yZero, yOne, yTwo, yThree, yFour];


function setup() {
    createCanvas(cWid, cHgt);
    
    //splits canvas into cells for each pattern block
    //x-axis
    for(xOff=0; xOff<=cWid/wid; xOff++){
        
        //y-axis
        for(yOff=0; yOff<=cHgt/hgt*2; yOff++){
            
            //calls helper function bg(), sends coordinates
            draw(xOff, yOff);
        }
    }
}


function draw(xOff, yOff){

    ellipseMode(CENTER);
    stroke(200);
    strokeWeight(1);
    
    
    //
    for(i=0; i<xOff; i++) {
        for(j=0; j<yOff; j++){
            
            
    //creates an offset variable for the shapes        
    var xOffset =  i * xOne;
    var yOffset = j * yFour;
            
    strokeWeight(wght);
    
    //rightDownLines
    line(xOne + xOffset, yZero + yOffset, xFour + xOffset, yFour + yOffset);

    
    //leftDownLines
    line(xThree + xOffset, yZero + yOffset, xZero + xOffset, yFour + yOffset);

    //verticalLines
    line(xZero + xOffset*2, yZero + yOffset, xZero + xOffset*2, yFour + yOffset);

    
    //horizontalLines
    line(xZero + xOffset*4, yZero + yOffset/2, xFour + xOffset*4, yZero + yOffset/2);

    
    //ellipses
    noFill();
    ellipseMode(CENTER);
    ellipse(xZero + xOffset*4, yOne + yOffset+8, dia, dia);        
        }
    }
}

This project is based around the Modernist movement (minus color). I am interested in proportions of shape and axis of movement within a static structure. This grid is loosely based on a project I am starting to work on for designing a typeface. Type has four major components: horizontal strokes, vertical strokes, diagonal strokes, and curves. This grid is a dissociation of those elements.

ctv-Looking Outward-05

https://www.behance.net/gallery/5126039/Structural-Surface-Experiments

This designer, Levente Gyulai,

made many sketches using a Rhino 3D model software and a plugin called Grasshopper. The plugin is a drag & drop-based programming software that allows creators to quickly make complex generative forms. In the program, parameters are used to tweak surfaces in three-dimensional space. Gyulai’s work is organically inspired, and appears to grow into a form. Grasshopper allows the surfaces to be manipulated on any scale, micro and macro. The type of control allows for complex (and interesting) 3D forms; in this piece, the designer uses large, sweeping curves to create the outside forms with fine tubes on the inside. Although I have not used the Grasshopper plugin, I have used a program structured similarly (Max/MSP) to create generative 3D video art. I love the visual nature, of drag and drop programming languages because it allows me to think about the logic of a program. Coding in P5.JS allows for more detail and complexity than Max/MSP. When coding, if I can’t figure out the logic of what I want to do, I will do a quick sketch in Max/MSP.

ctv-looking outwards-04-Sound Art

Jerobeam Fenderson/2014

This person has built an algorithm to draw images using two channels of an oscilloscope. The two channels use addition and subtraction of analog waveforms to create the imagery. I love this piece because he takes a computational approach to render drawings. I would love to see this attached to an analog oscilloscope (one that uses a laser to illuminate phosphor powder). Within the past could years, I was exposed to the idea of creating interfering waves to control amplitude (I never took calculus). Since then, I have been fascinated with moiré patterns to create visually dynamic art and to control density of color value. This work relates because the artist is using the same principles to send interfering information to create something that is recognizable to humans. In this class, I would like to learn about generating analog wave forms from static imagery: the inverse of this artists’ work.

ctv-project-04-String Art

sketch

//Ty Van de Zande
//Section B
//ctv@andrew.cmu.edu
//Project-04


var mx;
function setup() {
    createCanvas(400, 300);
    background(23, 95, 171);
    
}
 
function draw() {
    //redraws background every frame
    background(23, 95, 171);
    
    //creates a list that places the lines on the x-axis
    for(i = 0; i < 500; i+=5 ) {
    p1 = {x: i, y: 0}; 
        stroke(255);
        strokeWeight(2);
	   curve(p1.x, p1.y, p1.x, p1.y, p1.x, height, p1.x, height); 
    }
     
    //creates lines that are pretty much the same as above, but rotated
    push();
    rotate(radians(2));
    for(i = 0; i < 500; i+=5 ) {
    p1 = {x: i, y: 0}; 
        stroke(255, 95, 171);
        strokeWeight(.25);
	   curve(p1.x, p1.y, p1.x, p1.y, p1.x, height, p1.x, height); 
    }
    pop();
    
    //draws lines in an upside down triangle, maps mouseY to bottom position
    for(i = 0; i < 20; i++ ) {
        noFill();
        p1 = {x: i*20, y: 10}; 
        stroke(255);
        strokeWeight(1);
	   curve(p1.x, p1.y, p1.x, p1.y, mouseY, height, width/2, height);   
    }
    
    //rotates a bunch of lines based on mouseX position
     for(i = 0; i < 50; i++ ) {
        p1 = {x: i*15, y: -1110}; 
        push();
         translate(0, 0);
         rotate(radians(mouseX/10));
         stroke(255);
         strokeWeight(1);
         curve(p1.x, p1.y, p1.x, p1.y, p1.x, height, p1.x, height);
	   pop();
     }
   
}

 

For this project, I was inspired by moiré patterns created with lines. The interference of lines that overlap create bizarre, superimposed patterns. This sense of confusion continues through the person’s mouse interactions with the piece. the mouse x, y axis is mapped to unintuitive movements of specific points. this was done to pair with the neat moirés.

ctv-Looking Outwards-03

http://www.materialecology.com/projects/details/gemini

Neri Oxman’s work at Mediated Matter lab has fascinated me for years. This piece specifically intrigues me, a product designer. Computational design comes into play with many aspects of this form. One fascinating algorithm used in this project is a pressure-point mapper. The researchers used a computer vision (and other) programs to map the back of the human body. The orange and yellow bulges in this piece are 3d printed from materials of different squishinesses. The algorithm mapped a squishier material to pressure points on the body. I love this piece because an algorithm also determines the amount of each material to print. Her other work also is within the realm of 3d printed. One project is 3d printed bacteria within a 3d printed algorithmically-generated ecosystem.

ctv-project-02

sketch

//Ty Van de Zande
//Section B
//ctv@andrew.cmu.edu
//Assignment-03-A

var wid = 640;
var hgt = 480;
var colo = 0;

function setup() {
    createCanvas(wid, hgt);
}
 
function draw() {
    //rota variable must be defined 
    //in the draw loop, so it updates every frame
    var rota = mouseX/200;
    background(170, 190, 200);
    fill(colo);
    
    //starts a shape to apply features (eye)
    push(); 
    translate(width/3, height/3); //place on canvas
    rotate(rota);
    rect(-26, -26, 52, 52); //square
    rect(0, -26, 52, 52); //makes it a rectangle
    pop(); // ends shape features
    
    //starts a shape to apply features (eye)
    push(); 
    translate(width/3*2, height/3);
    rotate(rota);
    rect(-26, -26, 52, 52);
    rect(0, -26, 52, 52);
    pop();
    
    //starts a shape to apply features (mouth)
    push(); 
    translate(width/2, height/3*2);
    //changes openness of mouth based on mouseY
    arc(0, 50, 90, mouseY, 0, PI, OPEN);
    pop(); 
    
    //starts nose with features
    push();
    translate(mouseX, mouseY);
    //draws nose
    beginShape();
    curveVertex(0, 0);
    curveVertex(10, 10);
    curveVertex(40, 40);
    curveVertex(80, 80);
    curveVertex(100, 120);
    curveVertex(80, 140);
    curveVertex(40, 130);
    curveVertex(10, 100);
    curveVertex(0, 0);
    
    // change direction of nose, based on cursor
    if (mouseX <= width/2) { 
        scale(-.75, .75);

    } else { //scales down nose shape
        scale(.75,.75);
    }
    endShape(); 
    pop();
}

//if you click, it changes black to white!
function mousePressed(){
    if(colo == 0){
        colo = 255;
    noStroke();
    } else {
        colo = 0;
    }
}

 

This project was fun because it was cool to play with the shapes while programming each line. I wish I had spent more time on it, but I spent wayyyy too much time trying to figure out coordinates for the nose. The nose still looks horrible, so I just need to spend more time using curveVertex() for drawing.

ctv-Looking_Outwards-02

The typography work (and every piece) by Q Shim is a visual orchestration of parts, wholes, shapes, and textures. He is a professor in the School of Design at CMU, and previously studied around the world. This video, in particular, fascinates me because much of his work brings digital concepts into the physical (non-digital world). He sets parameters, rules, and variables to create his pieces. He then curates those variables to create visually engaging pieces of art and design. Although a lot of his generative art is controlled by computer, in one piece, he creates stamps by hand, then places those stamps along a grid and follows an algorithmic process.

ctv-Project-02-someFaces

ctv-project-02 

//Ty Van de Zande
//Section B @ 10:30 AM
//ctv@andrew.cmu.edu
//Project-02



//document variables
var ht = 480;
var wd = 640;
var cenY = ht / 2;
var cenX = wd / 2;



//setting up the document
function setup() {
    createCanvas(wd, ht);
    frameRate(1);
}


function draw() {
background(230);    
    
var r = random(400);

//variables for heads
var headW = random(r);
var headH = random(r);

//variables for eyes
var eyePosX = random(headW);
var eyePosY = random(headH);
var eyeSize = random(50);

//variables for brows
var bPosX = random(r);
var bPosY = random(200);
var bTop = bPosY + random(r);
var bLength = random(r);
var bRot = random(r);

//mouth
var mX = random(r);
var mY = random(r);
var mTop = random(r);
var mBottom = random(r);
    
    ellipseMode(CENTER);
    rectMode(CENTER);
    fill(255);
    noStroke();
    
    //draws head
    ellipse(cenX, cenY, headW, headH);
    
    
    //daws eyes
    fill(100)
    noStroke();
    ellipse(cenX - eyePosX, cenY , eyeSize, eyeSize);
    ellipse(cenX + eyePosX, cenY , eyeSize, eyeSize);
    
    
    //draws mouth
    strokeWeight(5);
    stroke(120,0,0);
    beginShape();
    vertex(cenX-mX, cenY+mY);
    bezierVertex(cenX, cenY-mTop, cenX, cenY-mTop, cenX+mX, cenY+mY );
    bezierVertex(cenX+mX, cenY+mY, cenX, cenY-mBottom, cenX-mX, cenY+mY);
    endShape();
    
    
    //draws eyebrows
    
    p1 = {x: cenX-bLength, y: cenY - bPosY}, 
    p2 = {x: cenX-(bLength/2), y: cenY - bTop}, 
    p3 = {x: cenX, y:cenY - bPosY}
    
    p4 = {x: cenX+bLength, y: cenY - bPosY}, 
    p5 = {x: cenX+(bLength/2), y: cenY - bTop}, 
    p6 = {x: cenX, y:cenY - bPosY}
    
    noFill();
    strokeWeight(2);
    stroke(255, 150, 0);
    curve(p1.x, p1.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
    curve(p4.x, p4.y, p4.x, p4.y, p5.x, p5.y, p6.x, p6.y);
    

}

For someFaces, I structured each component to act on the center point of the canvas. (Is there a better way to use the center point as a shape starting point?) A random number generator is included in the draw() function, and all of the components generate randos with that local rando as the ceiling. The eyes and head (or sometimes nose) always stays on the centerline of the y-axis. The frameRate() is set to 1 so the image refreshes to show a new face! the eyebrows are pretty crazy.

ctv Looking Forward

 

https://www.youtube.com/watch?v=x3jkoIyJgoc

 

This project is a wall installation of black and white coins that flip to show imagery. I am fascinated by this project because of the hybrid digital/physical components working together to make an experience. Cameras and software control the black and white dots to interpret a viewer’s interaction. Software tells the display which frame should be shown. Ths image is a combination of videos, picture, text, and shapes. One of my favorite parts of this installation is not digital; the sound of each coin flipping in unison is elegant.

Many pieces of art use this type of display, but the scale of this installation is exquisite. I am unsure of the exact number of people who created this piece, but the video says it is a team from an artist collective in conjunction with TNT Network. Custom software was built to control this dot-board. In addition to writing software to determine the image to display, custom software was built to drive each pixel.

One specific type of work the creators were inspired by was airport/train station flip signs. This product is now commercially available to organizations to install. This technology was originally developed by Kenyon Taylor in the early 1960s. This specific piece is created by a team called Breakfast NY.