Angela Lee – Project – 02

angela-generative-face

/*
 * Angela Lee
 * Section E
 * ahl2@andrew.cmu.edu
 * Assignment-02
 */

// variables for eye size, face width, and face height
var eye_size = 40;
var face_width = 200;
var face_height = 300;
var mouth_width = 30;
var mouth_height = 30;
var color_change = 0;
var mouth_change = 0;


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

function draw(){
	background (230, 255, 255);

    // body
    fill (253, 255, 158);
    ellipse (width / 2, height / 2 + face_height * 0.75, face_width, face_width);
    rect (width / 2 - face_width / 2, height / 2 + face_height * 0.75, face_width, 400)

    // face
    noStroke ()
    fill (255 - color_change, 217 - color_change, 177 - color_change);
    ellipse (width / 2, height / 2, face_width, face_height);

    // variables for eye position
    var left_eye = width / 2 - face_width * 0.25;
    var right_eye = width / 2 + face_width * 0.25;

    // eyes
    noStroke ()
    fill ("black")
    ellipse (left_eye, height / 2, eye_size, eye_size);
    ellipse (right_eye, height / 2, eye_size, eye_size);
    
    // highlights of the eyes
    fill ("white")
    ellipse (left_eye + eye_size / 5, height / 2 - eye_size / 5, 10, 10)
    ellipse (right_eye + eye_size / 5, height / 2 - eye_size / 5, 10, 10)
    
    // creating mouth
    noStroke ()
    fill (222 - mouth_change, 81 - mouth_change, 73 - mouth_change)
    ellipse (width / 2, height / 2 + 0.25 * face_height, mouth_width, mouth_height);



}

function mousePressed() {
    face_width = random (175, 300);
    face_height = random (175, 300);
    eye_size = random (30, 50);
    mouth_width = random (40, 80);
    mouth_height = random (30, 50);
    color_change = random (0,150);
    mouth_change = random (0, 50);
}

I started this project feeling slightly intimidated since I had no idea how you could create faces that changed. I went through a couple of iterations to get to this final product; being able to visually see mistakes really helped me adjust my shapes. This project helped me experience how powerful variables and built-in functions such as random can be. One thing I had fun playing with was randomizing color but also adhering to a skin tone palette—I hope to experiment more with randomization of color in the future.

YouieCho-LookingOutwards-02

Manfred Mohr’s Algorithmic Modulations, 2019

I looked at the work “Algorithmic Modulations,” 2019, by Manfred Mohr. He is a first generation artist of generative art, and his earliest works date back to the 1960s. For me, this work is inspiring primarily because it involves skills that I personally cannot work with well, but would like to explore. Using computer to generate art that is constantly responding to changing variables inspires me.The algorithm includes diagonal paths that go through a 12-D hypercube and are placed in different angular positions, which are rotated in 12-D and projected into 2-D. Transparent color bands and black lines are created according to the paths, and the algorithm randomly changes colors and overlays as well. There are also music-related horizontal lines. I think it was very sensible of the artist to create a very complex algorithm in which many variables affect each other, as opposed to having simpler relationships. This makes the work very unique and dynamic.

A moment from Manfred Mohr’s Algorithmic Modulations , 2019

Caroline Song – Looking Outwards-02

Mitchell Whitelaw specializes in creating generative systems, as well as data-aesthetics. This specific project called Local Colour (made in June 2011), is made out of recycled vegetable boxes, that are both laser-cut and laminated into bowl forms such as the one below. After that, there is a network diagram graphic that is mounted onto the bowls by using a second generative process.

Local Colour, made out of vegetable boxes that have been laser-cut.

I find this project to be interesting because of its use of recycled vegetable boxes to create a bowl, which then showcases a network diagram. Network diagrams can visualize data from places such as social networks, biological systems, and etc. The network diagram being on a bowl is the part that intrigues me because this bridges together the scientific data that network diagrams have, with the artistic form it takes in the shape of a bowl.

I do not know much about the algorithm that generated the work, but I suppose that it took into account the specific curves and edges of the bowl in order to properly infuse the graphic into the form. I also suppose that the algorithm had to somehow take numerical data and translate it into a visual form in order to incorporate it into the bowl.

Whitelaw’s artistic sensibilities are shown in this algorithm very clearly. As I stated above, his algorithm had to take this precise, scientific data and turn it into a graphic that could be presented visually on the laser-cut vegetable boxes. The fact that the data had to go from numbers to graphics alone shows Whitelaw’s artistic side.

Angela Lee – Looking Outwards – 02

“Artificial Arcadia,” created by Fragmentin in collaboration with KOSMOS architects in 2019, utilizes a 3D spatial contraption to raise questions surrounding how the natural, digital, and artificial shapes contemporary landscapes. The installation features white blankets propped up by poles—reminiscent of famous Swiss mountains—and changes and falls as the mountains themselves begin to melt. What I enjoyed about this piece was how viewers were able to interact with it and walk through the space; in my experience, incorporating space into artwork creates an immersive experience and a more profound impression on the viewer. From what I can guess, the program must calculate the heights of each pole at a given time, so perhaps there’s a section of code devoted to each pole. Also, the program should be making these calculations every few minutes, so there must be a part of the code that regulates the time frames in which these calculations are made and the code repeats itself in a loop. I think that with their narrative surrounding landscapes, the artists rightfully chose to program something that involved 3D space (supported with a 2D graphic) rather than creating an algorithm for 2D work; I really admire how they explored the intersection of coding and art in order to make an important statement about climate change.

Joseph Zhang – Looking Outwards – 02

The Historical Spiral – By Ramiro Perez

This is a generative art piece called The Historical Spiral by designer Ramiro Perez. This project stood out to me because of its presence in three-dimensional space. Perez’s ability to introduce light and shadow to an object that is so evidently mathematically made is mesmerizing to look at and in many ways, makes me ponder how he did it. It seems like Perez used fractals to create the spiral form, but what makes me go “wow” are the micro details that are in the form. If one compares ring by ring, he or she can see that the orientation alternates from laying down to upright. Within each spiral, you can see mini spirals as well, which shows that scaling in and scaling out really just reveals the same mathematical pattern at a different size.For me, the attention to detail is what convinces me that much tought went into the design of this structure.

www.rfractals.net/historical_spiral.php

Ilona Altman- Looking Outwards 01 – Fluid Leaves

In this project the designer Reinoud van Laar created a new brand concept for the tea company Tee & Cupp in Xian.He did so by creating a pattern for the company that was created generatively, by simulating the movement of leaves in hot water. Thus, tea becomes defined in terms of a process rather than a product. I found this project very beautiful because its is interesting that a corporate project could become so poetic. The pattern of the tea leaves swirling in hot water makes me think about those practices of reading the leaves to see your future. It is also interesting because this project was made individually and with Processing, so it is something that maybe we could make someday, with enough practice. A way I think they could have expanded this project however would be to pay greater attention to materially. It would have been lovely to see these patterns on ceramics.

the project fluid dynamics in action, crafted as a pattern for a tea company
photos of some of the generated patterns
still of fluid dynamics digital simulation

It also poetic to me how the ebb and flow of natural life is both a visual and temporal pattern. It is interesting that this element of chance determines composition. It makes me think about the Fluxus movement and John Cage, with his chance operations. Others that set precedents for generative patterns include Georg Nees and Vera Molner, who created works within a strict set of rules. There works are like maps of the relationship between order and chaos.

Vera Molner, a possible precedent and one of the first generative artists

http://reinoudvanlaar.nl/project/leavespattern/

https://www.artnome.com/news/2018/8/8/why-love-generative-art

(the first link is a link to the fluid leaves project and the next one links to some history of early generative art).

Ilona Altman – Project 01 – Face

sketch

function setup() {
    createCanvas(200, 20);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    createCanvas(600,600);
    fill(255,255,255);
    noStroke();
    rect(0,0,width, height);
   
    //triangle 1 blue
    fill(100,120,200);
    noStroke();
    triangle(0,0,width,0,width,height);

    //triangle 2 green
    fill(100,150,150);
    noStroke();
    triangle(0,0,0,height,width,height);

    //semi-circle 1
    fill(190,80,50);
    noStroke();
    arc(width/2, height/2, width, height, PI/4, 5*PI/4, CHORD);

    //semi circlen 2
    fill(230,170,100);
    noStroke();
    arc(width/2, height/2, width, height, 5*PI/4,PI/4, CHORD);

    //semi circle 1 small
    fill(100,150,150);
    noStroke();
    arc(width/2, height/2, 3*width/4, 3*height/4, PI/4, 5*PI/4, CHORD);

    //semi circle 2 small
    fill(100,120,200);
    noStroke();
    arc(width/2, height/2, 3*width/4, 3*height/4, 5*PI/4, PI/4, CHORD);

    // eye circle 1
    fill(230,190,180);
    noStroke();
    arc(width/4, height/4, width/5, height/5, 0, 2*PI,CHORD);

    // eye circle 2
    fill(200,140,210);
    noStroke();
    arc(3*width/4, 3*height/4, width/5, height/5, 0, 2*PI,CHORD);

    // eye circle 1
    fill(235,235,236);
    noStroke();
    arc(width/4, height/4, width/5, height/5, PI/4, 5*PI/4,CHORD);

    // eye circle 2
    fill(70,80,130);
    noStroke();
    arc(3*width/4, 3*height/4, width/5, height/5, PI/4, 5*PI/4,CHORD);



}

I wanted to make a smile/face something dynamic with two sides, but whole, almost like a ying and yang. Identity as both hidden and revealed.

The colors are based off a favorite Matisse painting of mine.

Zee Salman-Looking Outwards-01

I watched my best friend code in 112 for the first time last year and it inspired me you also learn how to code. I would see them work on their 112 projects during the end of the fall semester and would just be in awe. It was so cool I remember a project that was interactive by using hand motions and head motions and it was all done with code. The graphics were amazing and it really inspired me to do some type of coding at CMU. This project was really fun, It took some time and I struggled a lot but in the end, I created something that I thought was pretty cute. I would definitely want to go back and tweak when I have honed other skills from 104 and have gained new knowledge that I can use to improve it. One thing I look forward to in future classes and assignments is more ways to make the final project interactive or exciting.

Zee Salman-Project 01-Face


sketch

function setup() {
    createCanvas(400,300);
    background(155, 228, 250)


// hair background
    fill('black')
    ellipse(170, 130, 180, 205);

//face and upper shoulders
    


    fill(168, 84, 29)
    noStroke()
    rect(147, 110, 50, 120);
    
    fill(87, 47, 21)
    ellipse(170, 130, 85, 105);

    fill(168, 84, 29)
    ellipse(170, 110, 120, 135);
    
    fill(168, 84, 29)
    ellipse(170, 215, 170, 50);
//facial features
    //blush
    fill(181, 98, 91)
    ellipse(130, 130, 40, 20);

    fill(181, 98, 91)
    ellipse(210, 130, 40, 20);
    //eyes
    fill(0, 0, 0)
    ellipse(195, 100, 20, 20);

    fill('white')
    ellipse(200, 97, 5, 5);

    fill(0, 0, 0)
    ellipse(145, 100, 20, 20);

    fill('white')
    ellipse(148, 97, 5, 5);

    arc(170, 145, 30, 30, 100, PI);

    fill(97, 58, 30);
    noStroke();
    arc(173, 127, 30, 30, 10, PI + QUARTER_PI);



// blouse
    fill('blue')
    quad(83, 213, 257, 215, 275, 275, 60, 276);


 //curl  
    noFill();
    strokeWeight(4);
    stroke(0, 0, 0);
    bezier(150, 42, 80, 95, 190, 100, 125, 140);

    
//curl bubbles
//left curls
    
    noFill();
    stroke('black');
    strokeWeight(6);
    ellipse(150, 40, 30, 30);


    noFill();
    stroke('black');
    strokeWeight(6);
    ellipse(130, 50, 30, 30);

    noFill();
    stroke('black');
    strokeWeight(10);
    ellipse(110, 70, 35, 40);

    noFill();
    stroke('black');
    strokeWeight(10);
    ellipse(95, 110, 45, 50);

    noFill();
    stroke('black');
    strokeWeight(10);
    ellipse(95, 150, 40, 50);

    noFill();
    stroke('black');
    strokeWeight(10);
    ellipse(105, 180, 40, 50);

//right curls
    noFill();
    stroke('black');
    strokeWeight(6);
    ellipse(190, 40, 30, 30);

    noFill();
    stroke('black');
    strokeWeight(8);
    ellipse(215, 50, 30, 30);

    noFill();
    stroke('black');
    strokeWeight(10);
    ellipse(235, 80, 35, 40);

    noFill();
    stroke('black');
    strokeWeight(10);
    ellipse(245, 115, 45, 40);

    noFill();
    stroke('black');
    strokeWeight(10);
    ellipse(245, 150, 40, 40);

    noFill();
    stroke('black');
    strokeWeight(10);
    ellipse(235, 180, 40, 40);


    
	
}

function draw(){
	
    

}

Deklin Versace – Project 01 – Self Portrait

sketch

// Deklin Versace Section E

function setup() {
    createCanvas(600,600);
    background(38,48,60);
    fill(255,233,52);
    stroke(255,233,52);
    quad(125,425,125,600,475,600,475,425);
    fill(214,214,214);
    stroke(214,214,214);
    quad(85,415,145,415,145,600,85,600);
    quad(515,415,455,415,455,600,515,600);
    bezier(85,415,45,425,44,600,85,800);
    bezier(515,415,555,425,556,600,515,800);

    fill(255,210,200);
    stroke(255,210,200);
    strokeWeight(1);
    quad(190,390,410,390,410,450,190,450);
    bezier(190,450,275,470,325,470,410,450);
    fill(255,218,200);
    stroke(255,218,200);
    quad(150, 100, 450, 100, 445, 390, 155, 390);
    triangle(155,390,300,470,445,390);

    fill(250);
    stroke(250);
    ellipse(220,220,70,60);
    ellipse(380,220,70,60);

    fill(255,191,160);
    stroke(255,191,160);
    triangle(300,200,259,320,341,320);
    quad(270,310,295,175,305,175,330,310);


    fill(53,7,7);
    strokeWeight(4);
    stroke(255,191,160);
    bezier(220,370,225,415,375,415,380,370);
    fill(255,191,160);
    bezier(220,370,290,360,310,360,380,370);

    fill(0);
    stroke(54,110,178);
    ellipse(222,225,35,35);
    ellipse(378,225,35,35);

    noFill();
    strokeWeight(15);
    stroke(33,28,24);
    bezier(170,190,210,180,260,160,275,195);
    bezier(325,195,340,160,390,180,430,190);
    noStroke();
    fill(33,28,24);
    quad(150,125,450,125,440,90,160,90);
    bezier(160,90,190,50,220,60,310,90);
    bezier(440,90,410,70,350,50,300,90);
    bezier(160,90,140,100,150,120,150,130);
    bezier(440,90,460,100,450,120,450,130);


}

While working on this, I challenged myself to learn how to use the bezier tool. While most of the shapes are straight-forward and easy to create with the co-ordinate system, the bezier tool’s unique points that pull the line towards them were very difficult to work with initially.