Category: Section A

LO – 02 – Alexander Chen

In 1757, Johann Philipp Kirnberger wrote a piece based on the randomness of dice. This system, called Musikalisches Würfelspiel, used the values of dice in coordination with preassigned options to compose a piece. The result, “Der allezeit fertige Menuetten- und Polonaise Komponist,” is one of the earliest forms of this type of music.

I admire the fact that this type of generative art (music in this case) is not only something that’s relevant today but also something that’s been around for almost 300 years. Even though this is a very simple and arguably outdated, way of doing generative art, it still qualifies and obviously has stood the test of time.

The artist’s creativity still shines through this otherwise seemingly systematic way of writing music. This is because the preassigned options are still determined by the composer.

Jamie Dorst Project 02 Variable Faces

sketch

/*
Jamie Dorst
Section A
jdorst@andrew.cmu.edu
project-02
*/

// variables
var eyeSize = 20;
var faceWidth = 150;
var faceHeight = 180;
var r, g, b
var faceCorners = 120
var irisSize = 15;
var eyeR, eyeG, eyeB
var pupilSize = 12
var mouthWidth = 50
var mouthHeight = 25
var noseWidth = 15
var noseHeight = 10
var mouthR, mouthG, mouthB
 
function setup() {
    createCanvas(640, 480);

    // choose random canvas starting color
    r = random(255);
    g = random(255);
    b = random(255);

    // choose random eye starting color
    eyeR = random(255);
    eyeG = random(255);
    eyeB = random(255);

    // choose random mouth starting color
    //reddish hue
    mouthR = random(51, 255);
    mouthG = random(204);
    mouthB = random(204);
}
 
function draw() {
    noStroke();
    background(r, g, b);

    // face
    fill('#EAC086');
    rectMode(CENTER);
    rect(width / 2, height / 2, faceWidth, faceHeight, faceCorners, faceCorners, faceCorners, faceCorners);

    // eyes
    // whites
    fill('white');
    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);
    // iris
    fill(eyeR, eyeG, eyeB);
    ellipse(eyeLX, height / 2, irisSize, irisSize);
    ellipse(eyeRX, height / 2, irisSize, irisSize);
    // pupil
    fill('black');
    ellipse(eyeLX, height / 2, pupilSize, pupilSize);
    ellipse(eyeRX, height / 2, pupilSize, pupilSize);

    // mouth
    noFill();
    strokeWeight(4);
    strokeCap(ROUND);
    stroke(mouthR, mouthG, mouthB);
    arc(width / 2, height / 2 + .25 * faceHeight, mouthWidth, mouthHeight, 0, PI);

    // nose
    stroke(51);
    strokeWeight(2);
    arc(width / 2, height / 2 + .1 * faceHeight, noseWidth, noseHeight, 0, PI);
}
 
function mousePressed() {
    // randomize sizes, colors upon click
    faceHeight = random(120, 220);
    faceWidth = random(100, faceHeight);
    eyeSize = random(10, 30);
    r = random(255);
    g = random(255);
    b = random(255);
    faceCorners = random (80, 140);
    irisSize = random(5, eyeSize - 1);
    eyeR = random(255);
    eyeG = random(255);
    eyeB = random(255);
    pupilSize = random(1, irisSize - 1);
    mouthWidth = random(5, 90);
    mouthHeight = random(2, 40);
    noseWidth, noseHeight = random(5, 25);
    mouthR = random(51, 255);
    mouthG = random(0, mouthR - 50);
    mouthB = random(0, mouthR - 50);

}

For this project, I started with the template that was given and added some of my code from last week’s face project to create a base face. Then I added in some variables, thought about what to change, and ended up finding a way to have sizes change but keep them relatively proportional (ie. have the size of the pupil change but not have it be bigger than the iris). I also found it fun to change colors and learn how to randomize something like that where it’s not as simple as a range of two numbers.

P2:Variable Faces – Erin Fuller

//Erin Fuller
//SectionA
//efuller@andrew.cmu.edu
//Project-02

// Simple beginning template for variable face.
var eyeSize = 40;
var faceWidth = 150;
var faceHeight = 150;
var skin = 80
var back = 150


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

function draw() {
    colorMode(HSB);
    var c = color(back, 26, 79);
    background(c); 

    //face
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var b = color(26.09, 52, skin);
    fill(b);



    //eye  placement
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    
    // eye size
    fill(0, 100, 0)  
    ellipse(eyeLX, height/2, eyeSize, eyeSize);
    ellipse(eyeRX, height/2, eyeSize, eyeSize); 
    colorMode(HSB);
    fill(0, 100, 0)
    var b = color(26.09, 52, skin);
    fill(b);
}


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.
    faceWidth = random(250, 350);
    faceHeight = random(300, 370);
    eyeSize = random(30, 60);
    skin = random(45, 100); //changes brightness value of skin to imitate skin tones
    back = random (0, 360); //changes background colors
}

I think this project was harder than the one from the previous week. But I think the way I used HSB colors rather than RGB was a good way to create more realistic skin tone variation.

Ean Grady-Looking Outwards-02

https://creators.vice.com/en_us/article/qkwvp7/generative-video-game-puts-you-inside-mind-bending-art-galleries

‘Strangethink’, an anonymous experimental video game designer, has created a video game, Secret Habitat, that features procedurally generated art galleries that the player can view, in his words he says that the game is, “an almost entirely procedurally-generated world consisting of hundreds of alien galleries containing thousands of pieces of computer-generated art, music and poetry”. In each of the galleries that Secret Habitat features, there are ‘reading machines’ that spit out generative poetry and also generative music. When players enter the game and walk into the gallery, they can view procedurally generated art while also listening to generative music in the background.

Strangethink says in the article that he made the game because he was curious about the effects of ambient music on the user experience, and how it affects their perception of various things. I admire the idea to use procedurally generative art and music because it allows for wildly varying tones, melodies, images to be shown therefore giving each player a different perception-based experience, which in turn allows for his creative vision to be employed. I’m very curious about what programming goes into making a procedural generator, it’s really interesting how his idea for wanting to give the user varying experiences is perfectly imagined through procedural generation.

Looking Outwards – 02 Min Lee

 

Untitled work by Otto Beckman

The ReCode Project is an online archive of computer-generated art that takes its content from “Computer Graphics and Art”, a magazine that published this art from 1976 to 1978. The project is a collection of works from many different generative artists, such as one work Untitled by Otto Beckman.

The work itself is very mysterious, but what’s admirable about it to me is the artist’s ability to play with empty space and dark space to reflect the distinct style of watercolor painting, a very different medium from computer generation (in 1977, no less).

Part of the beauty of the archive is that no code is shown in any way, which leaves the algorithm of each work of art up to interpretation. I am amazed at how the artist achieved the watercolor look and managed to reflect shadows, but unfortunately cannot guess at how his algorithm works. However, the artist’s skill in perhaps other mediums shines through in his work, and his skills in computer-generated art, to me, opened my eyes to a different medium.

Source: http://recodeproject.com/artwork/v2n1untitled_Beckmann_Otto_06

Jamie Dorst Looking Outwards 02

For this week’s Looking Outward post, I am choosing to write about Daniel Eden’s Drawing With Numbers project. Eden has created many works of generative art, all created with Processing, p5.js, or OpenFrameworks.

Some of Eden’s pieces, with his captions describing the code behind them:

Pack as many circles as possible within another circle, ensuring they don’t overlap. Draw a line through the middle of each of the sub-circles at a random angle.
“Given an origin and a parallel destination, draw 1000 points of varying transparency between them. Using Perlin noise, calculate a delta vector for both origin and destination, with x coordinates between -0.2 and +0.5, and y coordinates between -1 and +2. Add the delta vectors to the origin and destination. Repeat until either the origin or destination points are at least 80px from the bottom of the canvas.”
“Plot a series of connected points around the center of the canvas, using three-dimensional Perlin noise to vary the radius. Repeat this with an increasing base radius, stepping forward through the Perlin noise function to slightly vary the next shape.”
“One example of the kinds of sketches that would collapse on p5.js and demanded a more powerful medium.” Titled: Fabric

I selected this because I admired that he created these as a way to combat his inability to draw traditionally. He drew inspiration from designs he saw in the real world, then found a way to create them through his computer. I was attracted to the simplicity of the black and white patterns, and how he really focused on making the shapes emulate movement. I think it would be interesting to see the actual code behind it (versus just the pseudocode) to see how complex it is. Some of them seem doable to me, like the circle filled with dashes, while others seem much more complicated. I also found his blog post about how he began creating generative art interesting, because describes how he started out with p5.js which is what we are using in this course.

Judy Li-Project-02-Variable-Face

judyli:Face Project 02

/*
Judy Li
Section A
judyli@andrew.cmu.edu
Project-02
*/

var eyeSize = 30;
var ballSize = 8;
var ellfaceWidth = 100;
var ellfaceHeight = 150;
var recfaceWidth = 100;
var recfaceHeight = 150;
var noseSize = 5;
var mouthWidth = 10;
var mouthHeight = 5;
var hatWidth = 200;
var hatHeight = 15;
 
function setup() {
    createCanvas(640, 480);
    stroke(0);
    strokeWeight(1.5);
    r = random(255);
    g = random(255);
    b = random(255);
}

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.
    ellfaceWidth = random(125, 250);
    ellfaceHeight = random(125, 250);
    eyeSize = random(10, 30);
    recfaceWidth = random(125, 250);
    recfaceHeight = random(125, 250);
    noseSize = random(1, 5);
    mouthWidth = random(10, 50);
    mouthHeight = random(1, 10);
    recnoseWidth = random(10, 50);
    recnoseHeight = random(10, 50);
    hatWidth = random(250,300);
    hatHeight = random(5,25);
    fill(r,g,b,);
    r = random(255);
    g = random(255);
    b = random(255);
}

function draw() {
    scale(7/8);
    background(218,175,32);
    if (mouseX < (width / 2)) {
        //Round Head
        ellipse(width / 4, height / 2, ellfaceWidth,  ellfaceHeight);
        var eyeLX = width / 4 - ellfaceWidth * 0.25;
        var eyeRX = width / 4 + ellfaceWidth * 0.25;
        var ballLX = width/4 - ellfaceWidth * 0.25;
        var ballRX = width/4 + ellfaceWidth * 0.25;
        //Glasses
        push();
        strokeWeight(5);
        stroke(255);
        ellipse(eyeLX, height / 2, eyeSize/2, eyeSize/2);
        ellipse(eyeRX, height / 2, eyeSize/2, eyeSize/2);
        pop();
        //Eyes
        strokeWeight(5);
        ellipse(ballLX, height / 2, ballSize/4, ballSize/4);
        ellipse(ballRX, height / 2, ballSize/4, ballSize/4);
        //Nose
        push();
        stroke(0);
        strokeWeight(5);
        ellipse(width / 4, (height / 2)+20, noseSize, noseSize);
        //Mouth
        strokeWeight(10);
        ellipse(width / 4, (height / 2)+50, mouthWidth, mouthHeight);
        pop();
    }

    if (mouseX >(width / 2)) {
        //Rectangular Head
        rect(3*(width / 5), (height / 3), recfaceWidth,  recfaceHeight);
        var eyeLX = (3*(width / 5)) + 1.75*(recfaceWidth * 0.2);
        var eyeRX = (3*(width / 5)) + 3.25*(recfaceWidth * 0.2);
        var ballLX = (3*(width / 5)) + 1.75*(recfaceWidth * 0.2);
        var ballRX = (3*(width / 5)) + 3.25*(recfaceWidth * 0.2);
        //Glasses
        push();
        strokeWeight(5);
        stroke(255);
        ellipse(eyeLX, (height / 3)+50, eyeSize, eyeSize);
        ellipse(eyeRX, (height / 3)+50, eyeSize, eyeSize);
        pop();
        //Eyes
        strokeWeight(5);
        ellipse(ballLX, (height / 3)+50, ballSize/2, ballSize/2);
        ellipse(ballRX, (height / 3)+50, ballSize/2, ballSize/2);
        //Nose
        push();
        stroke(255);
        strokeWeight(5);
        ellipse(3*(width / 5) + (recfaceWidth/2), (height / 2), noseSize, noseSize);
        //Mouth
        strokeWeight(10);
        ellipse(3*(width / 5) + (recfaceWidth/2), (height / 2)+30, mouthWidth, mouthHeight);
        pop();
    }
}

This project was a challenging one at first. I think I had some trouble with some overlaps in terms of what was supposed to show up first, second, and etc. But, I enjoyed writing up the codes for this project because it was fun and I was satisfied with my end results.

Looking Outwards – 02

Something From Nothing From Nothing Series (2014) – Elephant Hide Paper Photo by Erik Demaine and Martin Demaine

Origami is the art of paper folding. Erik Demaine is a MIT professor and he has been super fascinated by origami folding and now curved paper structures. Under a collaboration with Tomohiro Tachi, Demaine incorporated his algorithms into Tachi’s Origamizer (2008), a freeware that generates origami to innovate new methods to create more complex origami that hadn’t been done before. They had a concept that proved any 3D object can be made from a single piece of paper. The computational process of turning that concept into reality took about 10 years since there were a lot of holes to patch and improvements to be made. Testing out the origami in reality was also a challenge since they had to take materials into account. These studies had a lot of future potential that can be applied to architecture on how complex buildings can be built using cheaper sheet material. I thought this project was interesting because I had to do a studio project that used origami folding and it was hard for me to visualize certain folds/shapes onto the software I was using. I also had a lot of problems with making the models from them because it wouldn’t bend the way I wanted it to. From what I learned, I can probably tell that the algorithm that he used, had to do with a lot of the adjacent vertices, edges, and also the movement along the folds.

Origami – Frederick Blichert on This Computer Scientist Can Turn Anything into Origami 

 

Adam He – Looking Outward – 01

I first encountered Pixar when I just got into elementary school. I had watched a lot of two dimensional cartoons. Animations were not really a special thing. But when I saw a Pixar movie, I was astonished. How can people make an animation in such realistic forms and movements. It seemed to be a magic to me that designers and computer scientists could generate such realistic and stylistic animation on computers.

Pixar began in 1979 under a group of talented people. Edwin Catmull and Steve Jobs, two of the most important figures, changed the whole animation  industry as well as the film industry. The GCI animations were just as realistic and complex as real man actings. With its unique concepts and messages hidden in each film, Pixar’s animations immediately became well-known starting from the masterpiece Toy Story (1995).

I am currently learning a lot about three dimensional modeling and renderings, and I started to formerly understand the complexity and difficulties behind just creating one three dimensional rendering. Pixar invented its own rendering software, Renderman, and contributed greatly to the virtual computer graphics in the recent decades. Pixar appeared to be a magic when I was little, but now, I am starting to grasp the tricks behind those magics.

Toy Story (1995) The quality of the computer graphics animation created by Pixar changed the whole perceptions toward film making at the time

 

 

LookingOutward-01

Japan holds technological fascinations that are perhaps years ahead of US day-to-day technology. That’s why it’s no wonder why the world’s first digital art museum (by digital art collective teamLab and Mori Building)  opened in Tokyo, opening up a world that projects fantasy onto an immersive setting. The environment reflects child-like imagination and wonders, and although this does attract many children, it also engorges adults with elicited feelings of nostalgia.

A colorful and interactive light show

The exhibits also elicit feelings of awe and innocence due to the sheer beauty of the many colors that are on display. I thought that this is truly the most immersive work of art that I could ever encounter and that because the works requires and reacts to human interaction, that the art is truly an experience more than a medium. Perhaps it was the artists’ intentions to throw the audience’s visuals and to promote “thinking out of the box”.

 

Original Source: https://www.tokyoweekender.com/2018/06/a-world-first-mori-building-digital-art-museum-team-lab-borderless-opens-in-tokyo/