Project: String Art

sketch

//Jacky Lococo
//jlococo
//Section C

var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
var dx5;
var dy5;
var dx6;
var dy6;
var dx7;
var dy7;
var dx8;
var dy8;
var dx9;
var dy9;
var dx10;
var dy10;
var dx11;
var dy11;
var dx12;
var dy12;
var numLines = 50;
var numLines2 = 25;

function setup() {
    createCanvas(400, 400);
    //peach upper shape
//  line(150, 50, 50, 300);  //guiding lines to help visualize
//  line(250, 50, 350, 300);
    dx1 = (50-150)/numLines;
    dy1 = (300-50)/numLines;
    dx2 = (350-250)/numLines;
    dy2 = (300-50)/numLines;

    //peach lower shape
//  line(150, 350, 50, 100)//guiding lines
//  line(250, 350, 350, 100)
    dx3 = (50-150)/numLines
    dy3 = (100-350)/numLines
    dx4 = (350-250)/numLines
    dy4 = (100-350)/numLines

    //white spiral in the middle of canvas
//  line(200, 70, 40, 200); //guiding lines
//  line(40, 200, 200, 360);
    dx5 = (40-200)/numLines;
    dy5 = (200-70)/numLines;
    dx6 = (200-40)/numLines;
    dy6 = (360-200)/numLines

    //burgundy bowtie shape in the back of comp
//  line(200, 0, 400, 200) //guiding lines
//  line(500, 300, 100, 400)
    dx7 = (400-300)/numLines
    dy7 = (100-0)/numLines
    dx8 = (100-0)/numLines
    dy8 = (400-300)/numLines

    //top left corner lines
//  line(150, 0, 0, 100) //guiding lines
    dx9 = (0-150)/numLines
    dy9 = (100-0)/numLines
    dx10 = (0)/numLines
    dy10 = (0)/numLines

    //bottom right corner lines
//  line(250, 400, 400, 300) //guiding lines
    dx11 = (400-250)/numLines
    dy11 = (300-400)/numLines
    dx12 = (0)/numLines
    dy12 = (0)/numLines


}

function draw() {
    background(255, 63, 24);

    //this is the bowtie shape in the back of the composition
    var x7 = 300;
    var y7 = 0;
    var x8 = 100;
    var y8 = 400;
    for (var i = 0; i <= numLines; i += 1) {
        stroke(80, 13,0)
        line(x7, y7, x8, y8);
        x7 += dx7;
        y7 += dy7;
        x8 -= dx8;
        y8 -= dy8;
    }

    //upper peach colored upper curve
    var x1 = 150;
    var y1 = 50;
    var x2 = 350;
    var y2 = 300;
    for (var i = 0; i <= numLines; i += 1) {
        stroke(255, 148, 108)
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
    }

    //lower peach colored curve
    var x3 = 150;
    var y3 = 350;
    var x4 = 350;
    var y4 = 100;
    for (var i = 0; i <= numLines; i += 1) {
        stroke(255, 148, 108)
        line(x3, y3, x4, y4);
        x3 += dx3;
        y3 += dy3;
        x4 -= dx4;
        y4 -= dy4;
    }

    //white spiral in the middle dividing the canvas
    var x5 = 200;
    var y5 = 70;
    var x6 = 200;
    var y6 = 360;
    for (var i = 0; i <= numLines; i += 1) {
        stroke(255, 235, 238)
        line(x5, y5, x6, y6);
        x5 += dx5;
        y5 += dy5;
        x6 += dx6;
        y6 -= dy6;
    }

    //upper left corner lines
    var x9 = 150;
    var y9 = 0;
    var x10 = 0;
    var y10 = 0;
    for (var i = 0; i <= numLines; i += 1) {
        stroke(255)
        line(x9, y9, x10, y10);
        x9 += dx9;
        y9 += dy9;
        x10 += dx10;
        y10 -= dy10;
    }

    //bottom right corner lines
    var x11 = 250;
    var y11 = 400;
    var x12 = 400;
    var y12 = 400;
    for (var i = 0; i <= numLines; i += 1) {
        stroke(255)
        line(x11, y11, x12, y12);
        x11 += dx11;
        y11 += dy11;
        x12 += dx12;
        y12 += dy12;
    }


    //Inner circles, radius decreases by 5 for each
    //largest circle
    stroke(255)
    strokeWeight(1)
    fill(80, 13, 0)
    ellipse(200, 200, 50, 50)

    stroke(255)
    strokeWeight(1)
    fill(80, 13, 0)
    ellipse(200, 200, 45, 45)

    stroke(255)
    strokeWeight(1)
    fill(80, 13, 0)
    ellipse(200, 200, 40, 40)

    //smallest circle
    stroke(255)
    strokeWeight(1)
    fill(80, 13, 0)
    ellipse(200, 200, 35, 35)


    noLoop()

}
    

This project was a little bit difficult, I think I mainly approached it by trying to find patterns within the code given and use that to make any desired shapes. Once I got the hang of the process and why certain numbers were used, it became a lot easier.

LO-3: Computational Fabrication

The work “Intersections” by the Bengler team really stuck out to me. The project aimed to create laser sintered sculptures that depicted the map of Oslo, Norway. In one of the maps, they focused on the roads and on the other they took a look at how the map intersected with income statistics. I found it extremely beautiful with the black and white contrast between the map and the ground. It seems so delicate and intricate which just adds to how visually appealing it is. You can tell that the team who worked on this project have artistic tendencies that lean towards simplicity in broad form, but intricacy in details. The website says that they used laser sintered technology to produce this piece. From just googling the process, it seems to be an additive process that binds a material to create a form. I think the algorithm would probably tell the laser at what points to add pieces or bind them together.

Creator: Bengler Team
Title: “Intersections”

http://bengler.no/intersections

Project 3: Dynamic Drawing

sketch

//Jacky Lococo
//jlococo
//Section C
var Rc = 255 // color variables for the moving cirlce, top rectagle, small circles
var Gc = 193
var Bc = 193
var angle = 0
var Rr = 0
var Gr = 60
var Br =  255
var colorChange = 1
var strokeOpacity = 255

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

function draw() {
    background(255);
    strokeWeight(0);
    fill(Rr, Gr, Br);
    ellipse(160, 160, 200, 200);
    fill(255, 239, 239);
    rect(0, 300, 600, 300); //pink rectangle

    strokeWeight(0);
    fill(Rc, Gc, Bc, 100);
    ellipse(mouseX + 10, mouseY + 10, min (mouseX, 200), min (mouseX,200));
        //shadow of ellipse that follows mouse

    fill(255, 239, 239);
    ellipse(mouseX, mouseY, min (mouseX, 200), min (mouseX,200)); 
        //pale pink circle behind main ellipse

    fill(Rc, Gc, Bc, 200);
    ellipse(mouseX, mouseY, min (mouseX, 200), min (mouseX,200)); 
        //ellipse that follows the mouse and grows smaller at x=200

    fill(Rr, Gr, Br, 200);
    rect(0, 0, 600, 300)
    strokeWeight(0);
    fill(255, 239, 239);
    ellipse(150, 150, 200, 200);
    fill(Rc, Gc, Bc, 200);

    push(); //for top rotating tiny circles
    translate(150, 150)
    rotate(radians(angle));
    ellipse(50, 50, 50, 50);
    angle += 1
    rotate(radians(angle));
    ellipse(50, 50, 50, 50);
    angle += 0.5
    rotate(radians(angle));
    ellipse(50, 50, 50, 50);
    angle +=0 // on circle slower at 0 speed
    if(mouseY > 300){
        angle += 1
    }
    pop();

    push(); // for mouse following rotating cirlces
    translate(mouseX, mouseY);
    rotate(radians(angle));
    ellipse(50, 50, 50, 50);
    angle += 1
    rotate(radians(angle));
    ellipse(50, 50, 50, 50);
    angle += 0.5
    rotate(radians(angle));
    ellipse(50, 50, 50, 50);
    angle += 0
    if(mouseY > 300){
        angle += 1
    }
    pop()

    strokeOpacity = mouseX - 150
    //line that moves - starting from bottom of canvas
    strokeWeight(7)
    stroke(255, 255, 255, strokeOpacity);
    line(100, 0, 100, 600)

    //line that moves - starting from top of canvas
    strokeWeight(7) 
    stroke(255, 255, 255, strokeOpacity);
    line(140, 0, 140, 600)


    //colors alternating with each press if the mouse
    if (colorChange == 1){
        Rc = 255
        Gc = 193
        Bc = 193
        Rr = 0
        Gr = 60
        Br =  255
    }
    if (colorChange == 2){
        Rc = 0
        Gc = 60
        Bc = 193
        Rr = 255
        Gr = 193
        Br = 193
    }
    //text that follows the mouse
    strokeWeight(0);
    fill(255);
    textSize(15)
    text('p r e s s', mouseX, mouseY);
} 

//mouse pressed function that switches the colors
function mousePressed () {
    colorChange = colorChange + 1
    if (colorChange == 3)
        colorChange = 1
    print(colorChange.toString);
}



This project was a bit challenging at first, but I think once I had a clear sketch and idea for it, the tasks and process became a lot more manageable.

Sketch:

Project 2: Variable Faces

sketch

// Simple beginning template for variable face.
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var noseWidth = 15;
var noseHeight = 15;
var mouthWidth = 20;
var mouthHeight = 20;
var eyebrowHeight = 20;
var eyebrowWidth = 40;
var fillFaceR = 200
var fillFaceG = 200
var fillFaceB = 200
var filleyeR = 200
var filleyeG = 200
var filleyeB = 200
var fillMouthR = 200
var fillMouthG = 200
var fillMouthB = 200
var fillBrowR = 200
var fillBrowG = 200
var fillBrowB = 200
var fillHairR = 200
var fillHairG = 200
var fillHairB = 200


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

function draw() {
    background(255, 242, 242);
    strokeWeight(0);
    fill(fillFaceR, fillFaceG, fillFaceB);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    strokeWeight(0);
    fill(0);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    fill(166, 83, 83)
    ellipse(width/2, 250, noseWidth, noseHeight);
        //nose
    fill(fillMouthR, fillMouthG, fillMouthB);
    ellipse(width/2, 280, mouthWidth, mouthHeight);
        //mouth function
    fill(fillBrowR, fillBrowG, fillBrowB);
    var eyebrowLX = width / 2 - faceWidth * 0.5 
        //Left eyebrow variable thing
    var eyebrowRX = width / 2 + faceWidth * 0.52
        //Right eyebrow variable thing
    rect(eyebrowLX, height / 2 - 20, eyebrowWidth, eyebrowHeight);
        //Left Eyebrow
    rect(eyebrowRX - 40, height / 2 - 20, eyebrowWidth, eyebrowHeight);
        //Right Eyebrow
    strokeWeight(0);
    fill(fillFaceR, fillFaceG, fillFaceB);
    rect(width / 2 - 17, 265, 35, 15)
        //this is the rectangle that makes the mouth into a smile
    strokeWeight(0);
    fill(fillHairR, fillHairG, fillHairB);
    ellipse(width / 2, height / 3 + 10, 40, 40)
        //this is the hair bun



}

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.
    faceHeight = random(120, 150);
    eyeSize = random(10, 30);
    noseWidth = random(5, 12);
    noseHeight = random(5, 12);
    mouthWidth = random(15, 35);
    mouthHeight = random(5, 25);
    eyebrowHeight = random(6, 20);
    eyebrowWidth = random(30, 45);
    fillFaceR = random(70, 255);
    fillFaceB = random(70, 150);
    fillFaceG = random(70, 150);
    filleyeR = random(10, 100);
    filleyeG = random(10, 100);
    filleyeB = random(10, 100);
    fillMouthR = random(150, 255);
    fillMouthG = random(1, 50);
    fillMouthB = random(1, 50);
    fillBrowR = random(0, 100);
    fillBrowG = random(0, 100);
    fillBrowB = random(0, 1255);
    fillHairR = random(0, 255);
    fillHairG = random(0, 100);
    fillHairB = random(0, 255);
}

My main challenges were trying to place the eyebrows correctly, and getting the colors correct. I think starting was also a bit difficult, but once I got use to using global variables a bit more it got easier.

LO: Generative Art

A piece of generative art that I admire is “Differential Lattice” created by artist Anders Hoff. From a visual perspective, I think it is extremely beautiful. The small components coming together to create a very intricate lattice is very interesting. I also admire it because I am extremely interested in the process the artist had to go through to produce it. This course is my first introduction to code as well as computational art, and I think that it has been so interesting to see how the language of the code interacts with the visual art. I am just so curious as to how Hoff had to harness that code in order to create this very intricate piece. The artist said that they used Cython to produce this piece. When going into depth about his process, he talked about how he used a lot of differential meshes and systems to create the piece. It seems as though, there is a pattern of nodes being plotted, and the computer keeps using that program to create similar patterns and move throughout the canvas. I think that you can tell that the artist has an appreciation for additive pieces. In some of the ones I saw on their website, there was a start in the middle of the canvas, and then growth coming out from that point into the canvas.

https://inconvergent.net/generative/differential-lattice/

Project 1: My Self Portrait

sketch
function setup() {
    createCanvas(400, 520);

}

function draw() {
    background(81, 139, 255);

    strokeWeight(0)
    fill(190, 157, 5);
    rect(96, 230, 209, 195);

    strokeWeight(0);
    fill(255, 247, 187);
    ellipse(200, 225, 209, 209);

    strokeWeight(0);
    fill(255, 247, 187);
    rect(165, 306, 71, 42);

    strokeWeight(0);
    fill(0);
    rect(165, 340, 71, 30);

    strokeWeight(0);
    fill(190, 157, 5);
    ellipse(150, 170, 100, 100);

    strokeWeight(0);
    fill(190, 157, 5);
    rect(92, 120, 60, 100, 50 ,0 ,0 ,0)  
    
    strokeWeight(0);
    fill(190, 157, 5);
    ellipse(249, 170, 100, 100);

    strokeWeight(0);
    fill(190, 157, 5);
    rect(250, 120, 57, 100, 0, 50, 0, 0); 

    strokeWeight(0);
    fill(190, 157, 5);
    rect(145, 120, 110, 45);

    strokeWeight(0);
    fill(0);
    ellipse(200, 460, 200, 200);
    //shoulder circle

    strokeWeight(0);
    fill(0);
    ellipse(162, 252, 10, 10);
    //eyes

    strokeWeight(0);
    fill(0);
    ellipse(240, 252, 10, 10);
    //eyes

    strokeWeight(0);
    fill(0);
    rect(100, 460, 200, 202);

    strokeWeight(0);
    fill(0);
    ellipse(200, 292, 20, 20);

    strokeWeight(0);
    fill(255, 247, 187);
    ellipse(200, 289, 24, 20);

    strokeWeight(0);
    fill(255, 184, 154);
    ellipse(143, 271, 20, 20);

    strokeWeight(0);
    fill(255, 184, 154);
    ellipse(260, 271, 20, 20);

    strokeWeight(0);
    fill(243, 215, 123);
    ellipse(200, 270, 12, 12)

    strokeWeight(0);
    fill(255, 247, 187);
    ellipse(200, 268, 12, 12)

}

LO: My Inspiration

A piece of computational art that I admire is the Artechouse exhibit entitled “Renewal 2121.” This piece was created by the Artechouse creative team, which included “visual design by Yuya Takeda, music by Mario Hammer and the Lonely Robot, and scenery by Design Foundry”. The piece depicts the world 2121, and also aims to show hope for the future with the concerns of a pandemic and climate change looming over the public. The piece uses image projections onto the walls of the museum. The visitors are able to interact with the piece, for example, if someone steps in front of the wall, a cherry blossom tree will pop out of the concrete. On the Cherry Blossom Festival website, it is said that the artists were inspired by the festival to create a celebration of nature. I admire this project both because of the world it creates, but also its scale. The piece creates a very vivid experience that the viewer is able to be immersed into. That ability of artists is always something I find extremely beautiful. They also point to the future in a way of inspiring hope which is something that is extremely necessary in this time.

Author: Artechouse creative team

Title: Renewal 2121

Source