Project 2 – Variable Face

An avatar generator for a bunny/bear game

sketchDownload
//face
var faceWidth = 70;
var faceHeight = 200;
var faceRound = 20; //max 40
var faceColor = 0
//ears
var earWidth = 20;
var earHeight = 70;
//eyes
var eyeSize = 20;
var eyeColor = 0;


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

function draw() {
	background (154, 215, 255);
    noStroke();
    fill (faceColor);
    //face
    rect (width/2-faceWidth/2, height/2-faceHeight/2, faceWidth, faceHeight, faceRound);
    //ears
    fill(faceColor);
    var earLX = width/2-faceWidth/2+earWidth/2;
    var earRX = width/2+faceWidth/2-earWidth/2;
    ellipse (earLX, height/2-faceHeight*0.6, earWidth, earHeight);
    ellipse (earRX, height/2-faceHeight*0.6, earWidth, earHeight);
    //eyes
    fill(eyeColor);
    var eyeLX = width/2-faceWidth*0.25;
    var eyeRX = width/2+faceWidth*0.25;
    ellipse(eyeLX, height/2+faceHeight*0.1, eyeSize, eyeSize);
    ellipse(eyeRX, height/2+faceHeight*0.1, eyeSize, eyeSize);
    //eyesHighlight
    fill(255, 255, 255);
    ellipse(eyeLX-eyeSize*0.25, (height/2+faceHeight*0.1)-eyeSize*0.25, 0.25*eyeSize, 0.25*eyeSize);
    ellipse(eyeRX-eyeSize*0.25, (height/2+faceHeight*0.1)-eyeSize*0.25, 0.25*eyeSize, 0.25*eyeSize);
    //nose
    fill(0,0,0);
    var noseLX = width/2-faceWidth*0.1;
    var noseRX = width/2+faceWidth*0.1;
    var noseDY = height/2+faceHeight*0.2+5;
    triangle(noseLX, height/2+faceHeight*0.2, noseRX, height/2+faceHeight*0.2, width/2, noseDY);
}

function mousePressed() {
    //face
    faceWidth = random(100, 200);
    faceHeight = random(100, 200);
    faceRound = random(0, 41);
    faceColor = color(random(0,255), random(0,255), random(0,255));
    //ear
    earWidth = random(10, 25);
    earHeight = random(30, faceHeight*2);
    //eyes
    eyeSize = random(5, 30);
    eyeColor = color(random(0,240), random(0,240), random(0,240));
}

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 1 – Self Portrait

How I was feeling that week.

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

function draw() {
	background (130, 130, 130);
    noStroke();
    fill('#4d6a7b') //blue
    rect(random(0, 600), random(0, 600), 3, 40);    //rain
    rect(random(0, 600), random(0, 600), 3, 40);    //rain
    rect(random(0, 600), random(0, 600), 3, 20);    //rain
    rect(random(0, 600), random(0, 600), 3, 20);    //rain
    fill(255, 255, 255);
	ellipse(300, 184, 266, 211);   //hat
    triangle(182, 64, 185, 134, 227, 96);   //ear
    triangle(600-182, 64, 600-185, 134, 600-227, 96);   //ear
    fill('#000000');
    ellipse(300, 224, 174, 164);    //head
    rect(213, 227, 174, 144);   //hair
    fill('#ddb88d')
    rect(246, 206, 105, 112);   //face
    ellipse(299, 304, 127, 58); //cheeks
    rect(288, 325, 22, 35); //neck
    fill('#bb7522')
    ellipse(300, 449, 143, 203);    //shirt
    fill('#ddb88d')
    rect(230, 424, 25, 124);    //left arm
    rect(345, 424, 25, 124);    //right arm
    fill('#000000');
    triangle(239, 205, 363, 182, 363, 242);     //fringe
    ellipse(273, 269, 9, 21);   //left eye
    ellipse(325, 269, 9, 21);   //right eye
    stroke(0, 0, 0);
    strokeWeight(3);
    line(288, 300, 310, 300);   //mouth
    noStroke();
    fill('#f69180');
    ellipse(259, 295, 21, 10);  //deimple1
    ellipse(336, 295, 21, 10);  //deimple2
    fill('#752516');    //red
    triangle(288, 428, 318, 428, 300, 460);     //fox pattern1
    triangle(288, 428, 285, 418, 298, 428);     //fox pattern2
    triangle(306, 428, 321, 418, 318, 428);     //fox pattern3
    fill('#4d6a7b') //blue
    rect(0,517, 600, 83);   //puddle




}

LO 1 – My Inspiration

Undertale main characters

A project I really admire is the indie game called “Undertale”. It is a story orientated role-playing game about a child who falls into the underground, and has to navigate through a world of monsters (some of whom helps him) to get back to the surface. This game is one of the reasons I want to learn programming.

I admire it very much because programming is used really well as a storytelling tool. It is a multiple-ending game, in which every decision the player makes affects the outcome. In fact, there are so many different possible endings that people disagree over how many endings it has. This type of storytelling is very powerful because the story is literally in the player’s hands. And I want to explore novel ways of storytelling that programming offers.  

Another reason I admire “Undertale” is because it is done by very few people. The main team consists of just two people: Toby Fox, the developer and composer, and Temmie Chang, the artist assistant. Toby Fox used the game engine GameMaker Studio for development. This shows that a good and meaningful game does not have to take a big team, a big budget, or a super complex programming language.