Category: SectionD

Looking Outwards 2 – Generative Art

I really admire the video game “Panoramical” by Fernando Ramallo and David Kanaga. It is a very beautiful and immersive experience through a world of stunning visuals and music. The landscapes and music inside the game change based on the player’s input. 

I admire this work of generative art because of its beauty and interactivity. To put it bluntly, a lot of computer generated artworks have interesting concepts but are lacking in the quality of experience they provide. “Panoramical” on the other hand draws you in with otherworldly visuals and sounds. It is otherworldly due to the usage of algorithms, but it is beautiful due to the creators’ sensibilities to colors and sound. Each landscape and how they change is designed with care, and the music is designed to immerse players into the landscape.

“Panoramical” stands out from motion graphics and animated experiences due to its interactivity. Thanks to the creators’ usage of algorithms to  “connect multiple sensory variables to [the player’s] actions” (1), the player actively becomes a part of the experience. 

I think “Panoramical” is a good example of how the infinite possibilities of algorithms working inside the bounds of an artist’s design can create an unique and beautiful experience. 

Work Cited

  1. “Generative Art: Best Examples, Tools & Artists (2020 GUIDE).” AIArtists.org, aiartists.org/generative-art-design.

Project 2 – Variable Face

variableface
var faceWidth = 200;
var faceHeight = 200;
var eyeDistance = 10;
var eyeWidth = 5;
var eyeHeight = 20;
var eyeHeightFORREAL = 20;
var pupilSize = 10;
var r = 150;
var g = 150;
var b = 150;
var mouthY = 50;
var mouthHeight = 30;
var mouthWidth = 30;
var PI = 3.1415;

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

function draw() {
	stroke(0);
	strokeWeight(2);

	background(255);
	fill(r, g, b);
	//noStroke();
	ellipse(width/2, height/2, faceWidth, faceHeight); //head
	
	fill(255);
	ellipse(width/2 - eyeDistance, height/2 - eyeHeight, eyeWidth, eyeHeightFORREAL); //eyes
	ellipse(width/2 + eyeDistance, height/2 - eyeHeight, eyeWidth, eyeHeightFORREAL);

	fill(0);
	ellipse(width/2 - eyeDistance, height/2 - eyeHeight, pupilSize);
	ellipse(width/2 + eyeDistance, height/2 - eyeHeight, pupilSize);

	fill(255);
	ellipse(width/2, mouthY, mouthWidth, mouthHeight); //teeth

	
	line(width/2, mouthY, width/2, mouthY - mouthHeight/2);

	fill(r - 80, g - 80, b - 80);
	arc(width/2, mouthY, mouthWidth, mouthHeight, 11*PI/6, 7*PI/6, CHORD); //bottom mouth part
	

}

function mousePressed(){
	faceWidth = random(200, 300);
	faceHeight = random(200, 400);
	eyeWidth = random(25, 70);
	eyeHeight = random(-10, 30);
	eyeHeightFORREAL = random(25,70);
	eyeDistance = random(eyeWidth, faceWidth/2 - eyeWidth);
	pupilSize = random(5, min(eyeWidth - 10, eyeHeightFORREAL - 10));
	mouthY = height/2 + random(30, 70);
	mouthHeight = random(20, 80);
	mouthWidth = random(20,80);
	r = random(125, 200);
	g = random(125, 200);
	b = random(125, 200);

	
	
}

LO 2

Close up of Wall Drawing 1247

Wall Drawing 1247 is a piece of algorithmic art by prolific artist Sol LeWitt created in 2007. LeWitt was a minimalist who produced a large body of work in the form of written instructions. Wall Drawing 1247 is a large drawing of an X with a gradient effect produced by the systemic layering of graphite scribbles. LeWitt’s work focused heavily on geometry, simplicity, and, sometimes, color. Through his algorithmic works, he expressed his artistic view that the concept is more important than the product.

When I saw this piece for the first time at the MASSMoca I was struck by the dimensionality of it. I saw depth created by a beautiful, smooth gradient. It wasn’t until I immediately assumed that it had been created robotically, or that it was some sort of print. I didn’t know that a carefully grid had been constructed, labelled, and filled in bit by bit by a team of skilled artists scribbling at the wall.

The process of creating the work

LO2: Generative Art

Rewordable
Generated Cards

Allison Parrish’s work Rewordable is both admirable and inspirational as it lies between the interaction of my two interests: communications design and card games. Rewordable is a card game that uses computation to generate combinations of letters on cards. Similar to Scrabble, the game allows people to earn points by creating words using different combinations of cards. There are a total of 120 one-letter, two-letters, and three-letter cards generated by coding. Although I am unsure if the artwork on the cards is computer-generated, I really admired Parrish’s use of computation in the process of creating her cards, giving it complexity within its aesthetic, and thus, in a sense, making her work a generative art or design piece. To create the design of the card game, Parrish mainly used matrixes and n-gram frequency analysis, which allowed her to come with various letter combinations to put on the cards. Through her algorithm, Parrish created and curated an experience of enjoyment for the target audience. 

Link: http://www.rewordable.com/

http://portfolio.decontextualize.com/

Author: Allison Parrish

Work: Rewordable August, 2017

Project 2 – Variable Faces

alienface
// Yoo Jin Kim
// 15104 - section D
// yoojink1@andrew.cmu.edu
// Project-02

var faceWidth = 300;
var faceHeight = 160;
var eyeSize = 65; 
var eyeWidth = 70;
var eyeHeight = 100;
var eyeTwinkleX = 23;
var eyeTwinkleY = 18;
var tongueSize = 36;
var B = 100;
var crownTipY = 140;


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

function draw() {
	//background color
	background(color(B));

	//alien head shape
	strokeWeight(0);
	fill(171,190,188);
	beginShape();
	curveVertex(width/2 - faceWidth/2, height/2);
	curveVertex(width/2 - faceWidth/2, height/2);
	curveVertex(width/4, height/2 - (faceHeight - 40));
	curveVertex(width/2, height/2 - faceHeight); 
	curveVertex(width * (3/4), height/2 - (faceHeight - 40));
	curveVertex(width/2 + faceWidth/2, height/2);
	curveVertex(width/2, 441);
	endShape(CLOSE);

	strokeWeight(0);
	beginShape();
	curveVertex(width/2 + faceWidth/2, height/2);
	curveVertex(width/2 + faceWidth/2, height/2);
	curveVertex((width/4) * 3, height/2 - (faceHeight - 40));
	curveVertex(width/2, height/2 - faceHeight); 
	curveVertex(width/4, height/2 - (faceHeight - 40));
	curveVertex(width/2 - faceWidth/2, height/2);
	curveVertex(width/2, 441);
	endShape(CLOSE);

	//crown
	strokeWeight(0);
	fill(214,178,69);
	triangle(376,crownTipY,350,200,318,184);
	triangle(343,185,343,crownTipY - 20,305,181);
	triangle(307,crownTipY - 25,295,178,325,186);

	strokeWeight(0);
	fill(171,190,188);
	quad(353,197,295,171,276,190,342,230);


	//mouth - stagnant
	fill(0);
	stroke(0);
	ellipse(240,395,43,10);

	//tongue
	fill(0,135,53);
	quad(251,396,228,396,230,401,248,404);
	beginShape();
	curveVertex(230,401);
	curveVertex(248,401);
	curveVertex(width/1.98, height/2 + 2.6 * tongueSize);
	curveVertex(width/2, height/2 + 2.6 * tongueSize);
	endShape(CLOSE);

	//right eye
	translate(width/1, height/90);
	rotate(PI/3.0);
	fill(37,44,46);
	ellipse(186,295,eyeWidth,eyeHeight);

	//left eye
	translate(width/4.8,height/2.95);
	rotate(PI/3.0);
	fill(37,44,46);
	ellipse(186,95,eyeWidth,eyeHeight);

	//left eye twinkle
	fill(255);
	ellipse(191,127,eyeTwinkleX,eyeTwinkleY);

	//right eye twinkle
	fill(255);
	ellipse(119,height/14 - 57.5,eyeTwinkleX,eyeTwinkleY);
}

function mousePressed() {
	//random assignment of drawing with mouse clicks
	clear(); //reshaping of head instead of adding onto the original shape
	background(0);
	faceWidth = random(200,350);
	faceHeight = random(160,200);
	eyeWidth = random(50,100);
	eyeHeight = random(100,120);
	tongueSize = random(34,42);
	B = random(0,170);
	crownTipY = random(70,160);
	eyeTwinkleX = random(15,23);
	eyeTwinkleY = random(10,18);
}

I was inspired by the alien emoji to create these variable faces. I love aliens 🙂

LO 2 – Generative Art

Michael Hansmeyer – Zauberflöte (2018)

Grotto set design for Mozart’s Magic Flute, directed by Romeo Castellucci

As an architecture student, I was first interested in this project because the creator was an architect. Michael Hansmeyer is an architect who focuses his works on generative thinking, “thinking about designing a process to generate objects.”

He maximizes his creativity by exploring with computational “natural and artificial” accidents.

For this project specifically, the goal was to produce forms, shapes that “appear synthetic and organic” at the same time. The results were not foreseen as there was a continuous regeneration of the form with the computer until satisfied. There were no references or inspirations prior to the project.

I find the collaboration of generative design and an opera unique and compelling in terms of architectural, computational, artistic, aesthetic purposes. It creates new spatial experiences and sensations that one cannot create with human ability. I admire the high quality, rich details in the result as well as the architect’s confidence and control between the fine line of chaos and order. His imagination of the unimaginable is quite intriguing. 

Description of the piece itself: “The geometry was voxelized and partitioned into the nine distinct elements that are visible on stage. Four elements descend from the ceiling, while five others are rolled into space.”

Reference: http://www.michael-hansmeyer.com/zauberfloete

LO 02 – Generative Art

Moka Schitta: Knots

Today I will be analyzing generative art created by Moka Schitta. Upon entering his portfolio site, I was greeted by colorful computational designs that reflect the artist’s style. To dive deeper into his/her work, I will be talking about the piece Knots (2020). Knots is a 60 second animation loop of knots that will never untie. Regarding the project, I really admire the pure fact that the artist used code to diversify their designs. The quick processing that is possible with code really elevates his/her work, and generates multiple pieces, which in other mediums, would take a long time to produce. For me personally, the idea of creating multiple versions of one project, generated through code is captivating.  If I had to guess the algorithm used for this piece, perhaps it is done using some sort of “delay” function, and having a colored background as base, and an overlaying an opaque color. And everytime the code is generated, it erases part of the opaque overlay, thus revealing the colorful background, and creating the “knot” shape. The creator’s artistic sensibilities are present and loud in their algorithm. As you can see, the general color scheme of the “knots” are visually appealing, and the concept behind this project is very meaningful. 

View portfolio here

Project-02-Variable-Face

Alien generator!

I wanted to do something a little less straightforward than a human face so I decided to do alien faces, with variable star background behind as well. I also played around with how to do the mouse click function and using noLoop and loop to assign all random variables in the main program instead of assigning variables in the mousePressed function.

AlienFace

var centerX = 240;
var centerY = 320;

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

function draw() {
background(0);
noStroke();
var maincolorR = random(0, 255);
var maincolorG = random(0, 255);
var maincolorB = random(0, 255);
var headWidth = random(50,460);
var headHeight = random(50, 460);
var earWidth = random(10,70);
var earHeight = random(10,70);
//space backrgound
    fill(250);
	var starSize = random(4,7);
	for (let i = 0; i < 40; i++){
        ellipse(random(0,480), random(0,640), starSize, starSize);
	}
	for (let i = 0; i < 60; i++){
        ellipse(random(0,480), random(0,640), starSize-2, starSize-2);
	}
//neck
    //filling with primary color
        fill(maincolorR,maincolorG,maincolorB);
        var widthNeck = random(30, headWidth);
        rect(centerX-(widthNeck/2), centerY, widthNeck,centerY);
    //adding dark tone over for depth
        fill(0,0,0,50);
        rect(centerX-(widthNeck/2), centerY, widthNeck,centerY);
//ears
    //left ear
        fill(maincolorR,maincolorG,maincolorB);
        ellipse(centerX-(headWidth/2), centerY, earWidth, earHeight);
        //dark tone
        fill(0,0,0,50);
        ellipse(centerX-(headWidth/2), centerY, earWidth, earHeight);
    //right ear
        fill(maincolorR,maincolorG,maincolorB);
        ellipse(centerX+(headWidth/2), centerY, earWidth, earHeight);
        //dark tone
        fill(0,0,0,50);
        ellipse(centerX+(headWidth/2), centerY, earWidth, earHeight);
//body
    fill(maincolorR,maincolorG,maincolorB);
    ellipse(centerX,640,random((widthNeck+30),480),random(80,200));
//antenna
    //left antenna
        triangle(centerX-(headWidth/3), centerY, centerX-(headWidth/6), centerY, centerX-(headWidth/4.5), centerY-headHeight);
        fill(0,0,0,50);
        triangle(centerX-(headWidth/3), centerY, centerX-(headWidth/6), centerY, centerX-(headWidth/4.5), centerY-headHeight);
    //right antenna
        fill(maincolorR,maincolorG,maincolorB);
        triangle(centerX+(headWidth/3), centerY, centerX+(headWidth/6), centerY, centerX+(headWidth/4.5), centerY-headHeight);
        fill(0,0,0,50);
        triangle(centerX+(headWidth/3), centerY, centerX+(headWidth/6), centerY, centerX+(headWidth/4.5), centerY-headHeight);
//face
	fill(maincolorR,maincolorG,maincolorB);
    ellipse(centerX,centerY,headWidth,headHeight);
//nose 
    fill(maincolorR,maincolorG,maincolorB);
    ellipse(centerX, centerY+(headHeight/6), random(6,headWidth/10), random(6, headHeight/10));
    fill(0,0,0,50);
    ellipse(centerX, centerY+(headHeight/6), random(6,headWidth/10), random(6, headHeight/10));
//eyes
    //left eye
	    fill(0,0,0);
	    ellipse(centerX-random(10, headWidth/3), centerY, headWidth/8, headHeight/6);
	//right eye
        ellipse(centerX+random(10, headWidth/3), centerY, headWidth/8, headHeight/6);
//mouth
    ellipse(centerX, centerY+(headHeight/3), random(20,headWidth/6), random(5, headHeight/9));
//number
    fill(250);
    text('specimen number:',145,50);
    text(round(random(0,50000)), 260, 50);
noLoop();
}

function mouseReleased() {
  loop();
}

Looking Outwards- 02

I chose this project because I was impressed by the complexity of the algorithm behind the creation, in addition to the striking visuals. I admire how it’s based on particle interactions and collisions from the natural world, instead of abstractly defined particles with ‘random’ interactions. I like the transparency and honesty of using particle collisions and interactions because of how it makes the concepts accessible through visual representation. The algorithm uses particle simulations where the interactions between particles create color and form. I don’t understand how the different colors and textures are defined, but it seems like certain parts of the interaction are encoded to certain colors and materials. The artistic sensibilities are showcased by the framing and definition of the visuals (how zoomed the viewpoint is), the color and light contrast, and the pacing of the video visuals. This combined with the strong algorithm creates a complex and captivating visual experience, as the pattern of interactions has elements of repetition and randomness.

Markos Kay “Quantum Fluctuations: Experiments in Flux”
http://www.mrkism.com/quantum.html

Project 2 – Variable Face

sketch
//Joseph Kim
//Section D
var eyeWidth = 45;
var eyeHeight = 40;
var faceWidth = 200;
var faceHeight = 260;
var mouthWidth = 60;
var mouthHeight = 30;
let eColor = 180;
//eyes
let fColor = 80;
//face
let bgColor = 0;
//background
let mColor = 120;
//mouth
let earColor = 40;
//ear
let hColor = 20;
//hair
let bColor = 0;
//eyebrow
let iColor = 0;
//iris

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

function draw() {
    background(bgColor);
    noStroke();
    fill(fColor);
    rect((width / 2) - (faceWidth / 2), (height / 2) - (faceHeight / 2), faceWidth, faceHeight / 2);
    ellipse(width / 2, height / 2, faceWidth, faceHeight);
    //face

    fill(eColor);
    var eyeLX = width / 2 - faceWidth * 0.25; 
    var eyeRX = width / 2 + faceWidth * 0.25;
    arc(eyeLX, (height / 2) - 10, eyeWidth, eyeHeight, 0, PI, CHORD); 
    arc(eyeRX, (height / 2) - 10, eyeWidth, eyeHeight, 0, PI, CHORD);
    //eyeball

    fill(earColor);
    var earLX = (width - faceWidth) / 2;
    var earRX = width - ((width - faceWidth) / 2);
    arc(earLX, height / 2, 30, 30, PI / 2, radians(270), CHORD);
    arc(earRX, height / 2, 30, 30, radians(270), PI / 2, CHORD);
    //ears

    stroke(bColor);
    strokeWeight(5);
    strokeCap(SQUARE);
    var eyebrowLX = width / 2 - faceWidth * 0.35;
    var eyebrowRX = width / 2 + faceWidth * 0.35;
    line(eyebrowLX, (height / 2) - faceHeight / 6, eyebrowLX + (faceWidth * 0.2), (height / 2) - faceHeight / 6);
    line(eyebrowRX, (height / 2) - faceHeight / 6, eyebrowRX - (faceWidth * 0.2), (height / 2) - faceHeight / 6);
    //eyebrow
    
    fill(iColor);
    noStroke();
    circle((width / 2) - (faceWidth * 0.25), height / 2, 10);
    circle((width / 2) + (faceWidth * 0.25), height / 2, 10);
    //iris
    
    noStroke();
    fill(hColor);
    arc((width - faceWidth) / 2, ((height - faceHeight) / 2), faceWidth, 90, 0, PI / 2, PIE);
    arc(width - ((width - faceWidth) / 2), ((height - faceHeight) / 2), faceWidth, 90, PI / 2, PI, PIE);
    //hair

    noStroke();
    fill(mColor);
    arc((width / 2), (height / 2) + (faceHeight / 4), mouthWidth, mouthHeight, 0, PI);
    //mouth

}

    function mousePressed() {

    faceWidth = random(120, 300);
    faceHeight = random(200, 400);
    eyeWidth = random(20, 70);
    eyeHeight = random(40, 70);
    mouthWidth = random(10, 100);
    mouthHeight = random(10, 80);
    mouthColor = random(30, 200);
    eColor = color(random(255), random(255), random(255));
    fColor = color(random(255), random(255), random(255));
    bgColor = color(random(255), random(255), random(255));
    mColor = color(random(255), random(255), random(255));
    earColor = color(random(255), random(255), random(255));
    hColor = color(random(255), random(255), random(255));
    bColor = color(random(255), random(255), random(255));
    iColor = color(random(255), random(255), random(255));
    


    
}

I first began with the sample code provided on the website. Then, I began customizing the shapes, and added facial features that I thought would be interesting. I found that using variables instead of specific coordinate points are actually easier to work with because I don’t have to be attentive of decimal points. A good part of my process was from trial and error, learning from mistakes. In order to add more visual interest, I had to do some research on how to apply variable color.