Author: Luca

LO: Randomness

For this week’s looking outwards, I looked at Andrej Bauer’s work. I find it tough to interpret randomly generated art because I could not quickly identify the artist’s central message. However, I admire the visuals in Bauer’s artworks; there was a combination of attractive colors and shapes. Also, although computer algorithms randomly generate the artworks, Bauer’s pieces always have a focal point and repetitive graphic elements. This is because the algorithm that Bauer employs is pseudo-random. The artist uses a random number generator to create mathematical formulas, which determine the colors and composition. We can still consider the algorithm as random since we cannot accurately predict the outcome. Bauer declared two main variables in his algorithm to create the visuals: the first one determines the composition, and the second one decides the colors that appear. By reassigning the values in those variables, the artist can create random pictures every time. However, the same values would produce results with similar compositions or colors. Overall, I think Bauer successfully achieves randomness in his artworks with the use of randomly generated numbers and mathematical computation.

Link to website

Project 5: Wallpaper

luca wallpaper

var xp = 50;//startingx
var yp = 50;//startingy


function setup() {
    createCanvas(600, 600);
    angleMode(DEGREES);//using degrees instead of radians
}

function draw(){
    background(237, 224, 212);
    noStroke();
    for (var row = 0; row <= 10; row++){
        for (var col = 0; col <= 10; col++){
            drawCougar(row*90, col*90);//loop drawing
        }

    function drawCougar(x, y){
            push();
            translate(x-20, y-20);
            fill(221, 184, 146);
            ellipse(xp-20,yp-15,20,30);
            ellipse(xp+20,yp-15,20,30);
            
            fill(127, 85, 57);
            ellipse(xp,yp+20,35,30);//front mouth
            ellipse(xp-20,yp-15,20,30);
            ellipse(xp+20,yp-15,20,30);


            fill(176, 137, 104);
            ellipse(xp,yp,60,60);//head
            
            push();
            translate(10,10);
            rotate(7);
            fill(221, 184, 146);
            ellipse(xp-10,yp+5,20,27);//left mouth
            pop();

            push();
            rotate(353);
            fill(221, 184, 146);
            ellipse(xp,yp+25,20,27);//right mouth
            pop();

            fill(0);
            ellipse(xp-20,yp,5,10);//left eye
            ellipse(xp+20,yp,5,10);//right eye
            ellipse(xp,yp+5,20,10);//nose
            pop();
    }

 }   

}

I started the project by sketching out ideas. Then, I moved to p5.js and created one drawing, and embedded a loop to make it repeat, creating the pattern and effect. I think figuring out how to employ a for loop was the most challenging for me. However, I really liked how my wallpaper turned out in the end. The project provided me with a better understanding of loops and functions.

LO: 3D Computer Graphics

My artist is Adam Martinakis, a digital 3D artist based in Greece. Since 2000, Marinakis has been making computer-generated visuals. What caught my attention about Martinakis’ work is how he portrays the human figure. To covey the fragility of humans, Martinakis would create 3D humans and then shatter them. I admire the artist’s 3D graphic skills in creating a detailed rendering of the space and subjects in his art. His artworks perfectly captured the critical moment when the figures were destroyed, leaving a strong visual impact. The artist achieved his vision by making the human figure almost featureless, which supported his idea that fragility is a universal characteristic of all humans. In an interview with Marinakis, he described the process and algorithms that he employed. First, he creates 3D models using the software 3ds Max and then renders them. Since he constructed his art in 3D, Martinakis could render different angles of the same model and publish the best ones. This workflow is a unique feature of digital 3D art, which is not possible without the help of computers. Overall, Adam Martinakis inspires me by combining an engaging visual style and actualizing it through computer programs.

website

interview

Project 4: String Art

luca string

var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var numl = 40;//linenumber
var sw = 0.5;//strokeweight


function setup(){
    createCanvas(300,400);
}

function draw(){
    background(0);

    strokeWeight(1);

    //reference red
    stroke(183,58,66);
    line(10,10,50,250);
    line(250,10,250,350);
    line(50,250,250,350);

    dx1 = (50-10)/numl;
    dy1 = (250-10)/numl;
    dx2 = (250-250)/numl;
    dy2 = (350-10)/numl;
    dx3 = (250-50)/numl;
    dy3 = (350-250)/numl;

    //defineshape
    var x1 = 10;
    var y1 = 10;
    var x2 = 250;
    var y2 = 10;
    var x3 = 50;
    var y3 = 350;


    //drawlines
    for (var c = 0; c <= numl; c = c + 1){
        stroke(255,0,0);
        strokeWeight(sw);
        //squarelinepath
        line(x1,y1,x2,y2);
        //trianglelinepath
        line(x2,y1,x1,x2);
        //curvepath
        line(x3,y1,x2,y2);
        //rect
        line(x1,y1,x2,y1);

        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
        x3 += dx3;
        y3 += dy3;

    //interaction:changeslineform
    if (mouseIsPressed){
        x1 += 1;
        y1 += 1;
        x2 += 3;
        y2 += 2;
        x3 += 3;
        y3 += 3;

    }


    }

        }

I enjoyed coding this project because by changing a few variables, I get to create different interesting compositions. Compared to the previous projects, I feel like this one is more intuitive than planned. During the process, I faced difficulty understanding what each variable does. However, after looking at some examples and experimenting, I understood my variables better and was able to alter them to achieve the effects I wanted.

LO: Sound Art

I found a creative coder named Rino Petrozziello, who uses Pure Data (Pd) to create algorithmic music. This language that the artist uses allows coders to create graphical data structures, making it easier to edit and control the code. I enjoyed one of his compositions called Insomnia(2017). The music, generated by data flow, actually reminds me of actual string instruments. I admire Petrozziello’s work because, besides the sonic experience, he also creates visual representations of the sound. The viewers can witness the data flowing in real-time and what each control unit does to alter the sound. Additionally, I was impressed by how the artist can use computer algorithms to convey complex human emotions. 

This image depicts the graphical structure, as the music plays.

Link to video

Link to website

Project 3: Dynamic Drawing

luca p3

var bs = 50//boxsize
var bv = 5//boxspeed
var bx = 300//box x position
var by = 200//box y position
var an = 180//box angle

function setup() {
    createCanvas(600, 450);
    background(254, 250, 224);
    rectMode(CENTER)
    frameRate(100)
    noStroke();
}

//background
function draw(){

    rotate(radians(an));
    an=an+50;

    function mousePressed(){
        an=an-50
    }

    //colorchange
    if(mouseX<width/2 & mouseYheight/2)
        fill(220, 47, 2);
    if(mouseX<width/2 & mouseY>height/2)
        fill(250, 163, 7);

    rect(bx,by,bs,bs);

    if(mouseX & mouseY >= 600 || mouseY && mouseX >= 450)
        bs=bs+0.1;


}

I find this project quite challenging because we have a lot more variables to consider. I think it was easy to create an interaction that is totally random but it was difficult to create an interaction that was consistent every time. Through this project, I learned more about coding with multiple variables.

LO: Computational Fabrication

Silk Pavilion

By Mediated Matter Group at MIT Media Lab

I learned about Mediated Matter through a Netflix documentary series called Abstract. Since then, their work at the MIT Media Lab has become my inspiration. I admire this Silk Pavilion project because of the creator’s interplay between design, biology, and computer technology. The creators were inspired by the silk worms’ inherent ability to generate synthetic structures, which they hope to utilize as a building block to bridge the natural world and the built world. The team began by studying the spinning pattern of silkworms and then used it to design larger structures with the support of CNC and CAD. Later, they deployed and guided the silkworms to complete the structure that they designed. The algorithm that generated the work studied individual silkworms and represented their biological pattern through computation. We always talk about biomimicry in design classes, but I never thought about how one can introduce the living subject of mimicry into the manufacturing process, which I find fascinating. Finally, the creators achieved their artistic vision by combining new research methods, cutting-edge technology, and biological knowledge to imagine a future where things, people, and the environment can live in harmony.

The image depicts how the silk structure is fabricated.

Sources:

Website

Video

Project 2: Variable Faces; Face Variables.

lucacao-02-project

var headwidth = 200
var headheight = 250
var eyewidth = 30
var eyeheight = 30
var pupilwidth = 30
var pupilheight = 30
var mouthwidth = 150
var mouthheight = 50
var bodywidth = 300
var bodyheight = 300
var hairhx = 0
var hairhy = 0


function setup() {
    createCanvas(480, 640);
    background(171, 196, 255);
}


function draw() {
    fill(0)
    rect((width-bodywidth)/2,400,bodywidth,bodyheight)//blazer
    fill(255,255,255)
    rect((width-100)/2,400,100,300)//shirt

    fill(252,210,175)
    ellipse(width/2,height/2, headwidth, headheight)//head

    fill(248, 237, 235)
    ellipse(width/2-40,height/2-20,eyewidth,eyeheight)
    ellipse(width/2+40,height/2-20,eyewidth,eyeheight)//eyes

    fill(51, 53, 51)
    ellipse(width/2-40,height/2-20,pupilwidth-20,pupilheight-20)
    ellipse(width/2+40,height/2-20,pupilwidth-20,pupilheight-20)//pupil

    fill(239, 99, 81)
    ellipse(width/2,height/2+70,mouthwidth-100,mouthheight-25)//mouth

    fill(70, 63, 58)
    triangle(width/2-30,200,hairhx+width/2,hairhy+width/2,width/2,195)
    triangle(width/2,195,hairhx+width/2+50,hairhy+width/2,width/2+45,200)
    triangle(width/2-10,197,hairhx+width/2+20,hairhy+width/2,width/2+20,200)//hair


}

function mousePressed() {
    eyewidth=random(30,50)
    eyeheight=random(30,50)
    pupilwidth=random(30,40)
    pupilheight=random(30,40)
    mouthwidth=random(50,150)
    mouthheight=random(25,50)
    hairhx=random(20,50)
    hairhy=random(80,100)
}

After declaring variables (var) in my code, locating and editing the shapes became more intuitive. However, I struggled with assigning values to my variables and understanding the relationship between each variable. Overall, I feel like adding variables helped my coding process a lot, but I still need more practice to become more efficient.

LO: Generative Art

Turbulence by Jon McCormack, 1994

Turbulence by Jon McCormack is an installation piece that combines computer algorithms and human creativity. The installation consists of a screen and a projector that outputs images and videos of the artist’s work. McCormack used genetic algorithms to create “lifeforms,” such as flowers, trees, and animals. I admire this generative art project because I was thrilled by the idea of creating “life” with a computer. I also found it interesting that, although the creation of artificial lifeforms in this artwork is autonomous, the algorithm mimics the process of natural selection, which is a significant phenomenon in biological ecosystems. Ideas of natural selection are present when the algorithm automatically selects the most beautiful and visually exciting “lifeforms.” Also, I find it interesting that the codes function like DNA, in which McCormack categorized the imagery of different “lifeforms” by the similarity in their code. Even though McCormack’s “lifeforms” were fictional and virtual, they made me reflect on our relationship with machines and with the natural world.

Some examples of McCormack’s “lifeforms.”

Sources:

website

image

Project 1: My Self-Portrait

luca-portrait

function setup() {
    createCanvas(1000, 1000);
    background(180);
}

function draw() {
    background(171,130,130)
    text("Luca's portrait",15,20)

    //hoodie
    fill(61,64,91)
    ellipse(500,700,500,200)
    fill(229,229,229)
    ellipse(500,700,450,200)


    //body
    fill(244,241,222)
    rect(450,765,100,245)//shirt
    fill(61,64,91)
    rect(280,765,200,245)//bodyr
    fill(61,64,91)
    rect(550,765,200,245)//bodyl
    fill(61,64,91)
    ellipse(270,840,150,150)//shoulderr
    fill(61,64,91)
    ellipse(738,840,150,150)//shoulderl
    fill(61,64,91)
    rect(210,850,120,200)//armr
    fill(61,64,91)
    rect(730,780,190,120)//upperarm
    fill(61,64,91)
    rect(800,500,120,290)//arm
    fill(255,215,215)
    rect(800,400,100,100)//hand
    fill(34,19,17)
    rect(580,900,100,10)//pocket
    fill(224,122,95)
    rect(600,850,10,50)//pen

     //facefeatures
    fill(34,19,17)
    ellipse(500,420,500,400)//hair1
    fill(255,215,215)
    ellipse(500,520,450,470)//head
    fill(255,255,255)
    ellipse(400,525,100,50)//eyeright
    fill(34,19,17)
    ellipse(380,525,40,30)//pupilright
    fill(255,255,255)
    ellipse(600,525,100,50)//eyeleft    
    fill(34,19,17)
    ellipse(580,525,40,30)//pupilleft
    fill(34,19,17)
    rect(345,455,100,20)//browr
    fill(34,19,17)
    rect(550,440,100,20)//browl
    fill(255,210,218)
    rect(480,510,50,100)//noseb
    fill(255,210,218)
    ellipse(506,600,60,55)//nose

    fill(34,19,17)//hair
        ellipse(500,310,60,60)
        ellipse(480,330,60,60)
        ellipse(530,310,60,60)
        ellipse(560,320,60,60)
        ellipse(600,300,60,70)
        ellipse(460,300,60,60)
        ellipse(430,300,60,60)
        ellipse(400,310,60,60)
        ellipse(370,300,60,60)
        ellipse(320,360,60,60)
        ellipse(340,330,60,60)
        ellipse(600,330,60,60)
        ellipse(620,330,60,60)
        ellipse(630,340,60,60)
        ellipse(650,330,60,60)
        ellipse(680,350,60,60)
        ellipse(690,370,60,60)
        ellipse(700,400,60,60)
        ellipse(710,420,60,60)
        ellipse(300,400,60,60)

    fill(34,19,17)
    stroke(0)
    strokeWeight(5)
    line(450,700,550,700)
    noloop();

}

Locating and finding the right coordinates on the canvas was quite challenging for me. I also spent a lot of time trying to find the right lines of code when I was making changes. However, I made things easier when I used “//” to label each graphic element.

Also, I checked my HTML code used to embed p5.js, and the data-width and data-height match with my canvas size, but I don’t know why my self-portrait shows up like this in WordPress.