SectionE – Page 10 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Windows style dynamic drawing

I am trying to create a grid of circles and using my mouse cursor as an attraction point to control the size and color of the circles. The wavey movement of circles is created by changing the circle rotation angle based on the distance between the mouse cursor and the center of the circles.

//Jason Jiang
//Section E

//Setting variables 
var d = 40;
var size = d/2;
var h = 0;
var s = 0;
var a = 0;
function setup() {
    createCanvas(640, 450);
    angleMode(DEGREES);
    colorMode(HSB);
    
}

function draw() {
    background(0);
    fill(255);
    noStroke();
    //Create Grid of circles using loop
    for (var x = d/2 - d; x < width + d; x = x+d){
        for (var y = d/2 - d; y < height + d; y = y+d){
        var dis = dist(x, y, mouseX, mouseY);
        
        //Change Circle size according to distance
        
        //Remap distance to circle center to angle
        size = map(dis, 0, (width^2+height^2)^0.5, 30, 1);

        //Change Circle color according to distance
        
        //Remap distance to circle center to color value
        h = map(dis, 0, (width^2+height^2)^0.5, 0, 255);
        s = map(dis, 0, (width^2+height^2)^0.5, 50, 100);
        fill(h, s, 100);
        

        //Change circle rotation according to distance

        //Remap distance to circle center to angle
        let a = map(dis, 0, (width^2+height^2)^0.5, 0, 360);
            push();
            translate(x, y);
            rotate(a);
            circle(10, 10, size);
            pop();
        }
    }    
}

Metal and Robot arm

Author: Students in seminar led by Jeremy Ficca

Project Name: Fabricating Customization Seminar

Robot arm deforming the metal. The image is from the project website

The project I admire comes from our school. It is a studio project led by Professor Ficca that experiments with the relationship between how robotic arms interact with metals to create customizable shapes generated by computers. It has the potential to renovate the means of mass-producing metal plates. The precision and rigidity of robot arms make it possible to create them. The process involves using computational design to generate different shapes of metal. Many variables control the final form, such as the panel shape, the number of folds, and the joining location. Such a degree of freedom allows for a range of unique metal forms. The students selectively choose complex shapes to produce manually and experiment with means of producing the shape. Thus, they have to understand how metals are bent to write the correct code to control the robot arms. I adore the project because it not only focuses on generating shapes but also on how to make sure those shapes can be produced physically.

Project 03: Dynamic Drawing

sketch

var j=25
var l=15
var x=0
var y=0
var state=0
function setup() {
    createCanvas(600,450);
    background(0);
   
}

function draw() {
    //draw square according to the distance to the mosue
    /*if(mouseX<width/2){
        background(0);
    }else{
        background(255);
    }*/
    background(0);

    
    noStroke();
    
    for (x=5;x<=width;x+=j){

        for(y=5;y<=width;y+=j){
            //define variables for color changes
            var r =dist(mouseX,mouseY,x,y)
            var r2=dist(mouseX,mouseY,0,0)
            var r3=dist(mouseX,mouseY,width,height)
            var r4=dist(mouseX,mouseY,0,height)
            var r5=dist(mouseX,mouseY,width,0)
            var r6=dist(mouseX,mouseY,width/2,height/2)

            fill(r6,100-r,255-r+100)

            //fill(r+10,150-r,255-r+200);

            //color test 01
            /*if(mouseX<width/2 & mouseYheight/2){
                fill(r4,r4+100,r4+200);
            }else if(mouseX>width/2 & mouseYheight/2){
                fill(r3,r3+100,r3+200);
            }*/

            //color test 02
            /*if(mouseX<width/2 & mouseYheight/2){
                fill(r4,255-r,255-r+200);
            }else if(mouseX>width/2 & mouseYheight/2){
                fill(r3,255-r,255-r+200);
            }*/

            //color test 03
            /*if(mouseX<width/2 & mouseYheight/2){
                fill(255-(r+10),255-(150-r),r-200);
            }else if(mouseX>width/2 & mouseYheight/2){
                fill(255-r,r+100,r+200);
            }*/
            
            var l=(dist(mouseX,mouseY,x,y)/20+7)
            
                if(state==0){
                    rect(x,y,l,l);
                }else if(state==1){
                    circle(x+l/2,y+l/2,l);
                }else if (state==2){
                    triangle(x,y,x+l,y,x+l/2,y+l);
                    triangle(x,y+l,x+l,y+l,x+l/2,y);
                }
            
            }
            fill(255);
            text('press mouse please :)',10,15);
    }
    
    }
    function mousePressed(){
        state+=1;
        if(state>=3){
            state=0;
        }
}

LO3:Computational Fabrication

The project that I find inspiring is Jeremy Ficca’s: Fabricating Customization Seminar;

This is a very interesting project that associates robotic research and AI with architecture design. Through coding and generating patterns, we can cut out patterns on paper or other materials that helps us build special shapes that we want. This is helpful in generating facades and textures in Architecture design.
I think the algorithm behind the project is to first generating random patterns and shapes through different functions and programs, controlling the size of the patterns and some parametric calculation process. Then with the help of robots and laser cutters, these programs could be successfully transformed into pieces of shapes ready for use. Also the programs calculate which piece fits in which position, so that people can put these pieces together and form a complete design.

link here

Looking Outwards 03

This project is a fashion line called Voltage by Iris Van Herpen, an architect-turned-designer. The line has pieces like a “skirt-and-cape combo lined with thousands of tiny white anemone-like nodules.” It essentially is a 3D printed (on an Object Connex) and laser sintered fashion line and a frontrunner of digital fabrication. What I find most interesting about the garments she made are that they have a mix of both soft/flexible and hard/structured elements. This varying of the softness and elasticity allows the clothes to have differing forms and ranges of motion. I assume that the process of production and the algorithms used are related to CAD, or computer-aided design, to make templates that can be used to make 3D models.

Iris Van Herpen’s Voltage , 2013

Video of Voltage line : YouTube video of Van Herpen’s full line

Project 02- Variable Faces

efleischer -02 – project

/* 
    eliana fleischer
    efleisch
    section e
*/

//Global variables to be used across different functions
//these are all the variables that will be used to make the initial face before randomization.

var eyewidth = 20;
var eyeheight = 20;
var faceshape = 1;
var facewidth = 200;
var faceheight = 200;
var eyecolorR = (15);
var eyecolorG = (255);
var eyecolorB = (100);
var noseheight = 5;
var nosewidth = 5;
var iris = 10;
var skinR = 100;
var skinG = 100;
var skinB = 100;
var x = 320;
var y = 240;


function setup() {
    createCanvas(640, 480);
    background(220);
}

function draw() {

    background(eyecolorR, eyecolorG, eyecolorB); // sets background to the random variables for the eye color
    //faces 
    push();
    fill(skinR,skinG, skinB);
    noStroke()
    if (faceshape == 1){

        face1 = ellipse(x,y, facewidth, faceheight); //draws ellipse face

    } else {

        face2 = rect(x - facewidth /2 , y - faceheight /2 , facewidth , faceheight); //draws square face
    }

    //nose
    fill(255, 204, 255)
    nose = ellipse(x, y, noseheight, nosewidth); //draws nose at the center of the face
    pop();

    //eyes
    fill(255); //white fill for irises
    strokeWeight(2); // outline for eyes
    Leye = arc(x - facewidth / 5, y - faceheight / 5, eyewidth, eyeheight, 0, PI + QUARTER_PI, OPEN); //draws left eye
    Reye = arc(x + facewidth / 5, y - faceheight / 5, eyewidth, eyeheight,100, PI + QUARTER_PI, OPEN); //draws right eye

    //iris
    fill(eyecolorR, eyecolorG, eyecolorB); // fills in the irises with the random eye color
    Riris = ellipse(x + facewidth / 5, y - faceheight / 5, iris, iris)
    Liris = ellipse(x - facewidth / 5, y - faceheight / 5, iris, iris);

    //mouth
    strokeWeight(1);
    mouth = line(x - facewidth / 5, y + faceheight / 5, x + facewidth / 5, y + faceheight / 5 );

}


function mousePressed() {

    // when the user clicks, these variables are reassigned


    facewidth = random(100, 200);
    faceheight = random(100, 200);
    eyewidth = random(15, 45);
    eyeheight = random(10, 45);
    nosewidth = random(5,15);
    noseheight = random(5,15);
    iris = random(1, 7);
    eyecolorR = random(0,255);
    eyecolorG = random(0,255);
    eyecolorB = random(0,255);
    faceshape = int(random(1,3));
    skinR = random(100,200);
    skinG = random(100,200);
    skinB = random(100,200);
}

The most difficult part of this project for me was figuring out a creative solution to increase variability and actually make unique and distinct images through randomization.

project 02: variable faces

m’s project 2

/* atayao
    lab section E
    project 2
*/

// random reassignment (RR)
var eyeSize = 20;
var eyeDistance = 0.20;
var faceWidth = 115;
var faceHeight = 105;

// pick a card, any card (PAC)
var mouth = 0;
var skin = 0;

// variables from canvas dimensions
var x = 320;
var y = 240;

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

function draw() {
    background(255);
    strokeWeight(2.5);
    /* if-else statements test for the current value of 
    PAC variables to fill in skin color, mouth, & any facial marks.*/

    // SKIN COLORS
    if (skin == 0) {
        // bright blue skin
        fill(33, 118, 255);
        ellipse(width/2, height/2, faceWidth, faceHeight);
    } else if (skin == 1) {
        // pink skin
        fill(255, 79, 170);
        ellipse(width/2, height/2, faceWidth, faceHeight);
    } else if (skin == 2) {
        // green skin
        fill(136, 212, 38);
        ellipse(width/2, height/2, faceWidth, faceHeight);
    } else if (skin == 3) {
        // orange skin
        fill(255, 117, 43);
        ellipse(width/2, height/2, faceWidth, faceHeight);
    } else if (skin == 4) {
        // turquoise skin
        fill(2, 206, 217);
        ellipse(width/2, height/2, faceWidth, faceHeight);
    } else {
        // yellow skin
        fill(255, 228, 56);
        ellipse(width/2, height/2, faceWidth, faceHeight);
    }   

    // MOUTH SHAPES
    if (mouth == 0) {
        // open mouth
        fill(0);
        circle(width/2, (height/2 + (faceHeight/3)), faceWidth/6); 
    } else if (mouth == 1) {
    // neutral mouth
        line((x - faceWidth/5), (y + faceHeight/4), (x + faceWidth/5), (y + faceHeight/4));
    } else if (mouth == 2) {
    // smiling mouth
        fill(255);
        triangle((x - faceWidth/5), (y + faceHeight/4), (x + faceWidth/5), (y + faceHeight/4), x, (y + faceHeight/3));
    } else {
    // dot mouth
        fill(0);
        circle(width/2, (height/2 + (faceHeight/3)), faceWidth/25); 
    }

    // EYES
    var eyeLX = width / 2 - faceWidth * eyeDistance;    // x-coordinate for left eye
    var eyeRX = width / 2 + faceWidth * eyeDistance;    // x-coordinate for right eye
    fill(255);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);    // left eye
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);    // right eye
    fill(0);
    ellipse(eyeLX, height/2, eyeSize/2, eyeSize/2);    // left pupil
    ellipse(eyeRX, height/2, eyeSize/2, eyeSize/2);    // right pupil
    fill(0);
}

function mousePressed() {
    /* when the mouse is clicked, variables are reassigned to random values within
    specified ranges. */

    // RR
    eyeSize = random(18, 35);
    eyeDistance = random(0.20, 0.28);
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);

    // PAC
    skin = int(random(0, 6)); 
    mouth = int(random(0, 4));
    cheeks = int(random(0, 6));
}

The most challenging and interesting part of this project for me was figuring out the maximum random variability possible to create interesting combinations while still making the overall images legible as faces.

Looking Outwards -02

The series of works I picked is “Quantum Superpositions” made by Markos Kay. These generative art pieces were created using a simulation that is inspired by the events in the Large Hadron Collider, but all the imagery is original and not actual images from the Collider. The artist used an original simulator to generate the images and then superimposed them on each other to represent different quantum properties.

I find this piece to be really interesting because of the interdisciplinary nature combining aspects of quantum mechanics and digital art. These pieces come together in a way that is visually striking, especially considering the complexity and randomness of the generated images that are overlayed.

Markos Kay’s body of work is composed of mostly video art which differs from this series of stills. While the stills are all pulled from video simulations, the intricacies of the particle interactions and the complicated quantum mechanics are better represented in the superimposed images that the artist has created.

Link to the artist’s website: https://www.mrkism.com/superpositions.html

l.o. 02: generative art

‘variations on a definition’ by poet and programmer allison parrish is a series of poems that were produced by breaking words down into numbers that correspond to their constituent sounds using a stats-based model of the english language. the program then automatically mixes and recombines these numbers to blur and corrupt the original phonetic features of the words used in the poems.

I admire how this project makes use of algorithmically-defined representation to highlight the malleability of language over space and time, especially in the context of the social internet and postmodern poetics. it’s a precise and elegant way to confuse language, which falls in line with parrish’s research on contemporary use of language at NYU.

project2-variable face

sketch