An avatar generator for a bunny/bear game
//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));
}
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
- “Generative Art: Best Examples, Tools & Artists (2020 GUIDE).” AIArtists.org, aiartists.org/generative-art-design.
How I was feeling that week.
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
}
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.
]]>