## Looking Outward 06: Randomness

labios

Title: labios

Artist: Manoloide

Date: 2018

I really admire the bold color choices in this piece of artwork. In my work so far in class, it’s been difficult to use bold colors with them looking tacky. This piece has a very smooth, continuous feel to it, which makes me wonder what code they used to generate the curves and shapes. I’m particularly curious about what was used to depict the lines separating apart from the multicolored curves. The almost gradient of the colors and the lack of sharp edges or corners help create the smooth and continuous feeling.

I would guess that there’s randomness components are used to generate the locations of spheres and the curves of the multicolored lines. There might also be randomness in the spacing apart of the lines at the locations they come apart at.

The image I found was not animated, but this piece would be fascinating to look at as an animation. If the code could use non linear movement (sine or cosine curves? Spherical movement?) to have the multicolored lines warp and shift, I would imagine that it would produce quite a mesmerizing effect.

Other artwork by Manoloide:

## Project 05: Wallpaper

``````//Alana Wu
//ID: alanawu
//Project 05: Wallpaper

function setup()
{
createCanvas(400, 400);
background(255);
}

function draw()
{

bigGrid (.25, 0);
bigGrid(.125, 50);
bigGrid(.0625, 75);
noLoop();
}

//blue, dark red, yellow color scheme
/*function bigGrid (s, dist)
{
for (var x = 0; x < 4; x ++)
{
for (var y = 0; y < 4; y ++)
{
push();
translate (x*100 + dist, y*100 + dist);
scale (s);
grid (40, 0, 13, 78, 255, 100, 10); //blue
grid (15, 300, 100, 0, 255, 255, 30); //violet
grid (2, 150, 76, 25, 255, 120, 5); //red
grid(10, 200, 255, 0, 0, 100, 10); //mustard
grid (10, 300, 255, 236, 0, 150, 15); //yellow
pop();
}
}
}*/

//green, blue, yellow, red color scheme
function bigGrid (s, dist)
{
for (var x = 0; x < 4; x ++)
{
for (var y = 0; y < 4; y ++)
{
push();
translate (x*100 + dist, y*100 + dist);
scale (s);
grid (40, 0, 0, 255, 50, 150, 10); //green
grid (15, 300, 255, 0, 0, 255, 30); //red
grid (10, 150, 0, 0, 55, 180, 15); //blue
grid(10, 200, 255, 255, -200, 100, 10); //yellow
grid (10, 300, 180, -100, -100, 150, 15); //dark red
pop();
}
}
}

//pastels color scheme
/*function bigGrid (s, dist)
{
for (var x = 0; x < 4; x ++)
{
for (var y = 0; y < 4; y ++)
{
noStroke();
push();
translate (x*100 + dist, y*100 + dist);
scale (s);
grid (40, 0, 150, 255, 255, 100, 10); //pale blue
grid (30, 300, 150, 150, 255, 255, 30); //lavender
grid (2, 150, 255, 80, 255, 120, 5); //pale pink
grid(10, 200, 255, 200, 200, 100, 10); //pink
grid (10, 300, 250, 250, 190, 150, 15); //pale yellow
pop();
}
}
}*/

function grid (rectW, start, red, green, blue, opacity, dist)
{
for (x = start; x <= width - rectW; x += dist)
{
var count = 0;
fill (red, green, blue, opacity);
rect (x, 0, rectW, height);
rect (0, x, width/2, rectW);
red += 10;
blue += 20;
green += 10;
}

}
``````

To generate ideas for this project, I experimented with building different functions that played with a variety of geometric shapes. I eventually decided to use a function that interwove and layered rectangles in different colors and opacities.

After building the initial function, I played around with a lot of different color schemes and opacities, a few of which are shown below (scroll down past the code). For the future, I think it’d be interesting to try and create optical illusions.

## Looking Outwards 05: 3D Computer Graphics

Artist: Stephan Martiniere, a concept illustrator and artist who’s created graphics for Avenger: Age of Ultron, Ready Player One, Avatar, Star Wars, and many other acclaimed films. He’s also produced 150+ book covers, comic book covers, and editorial illustrations for clients like National Geographic, Penguin and Random House, Pyr, etc.

This piece of imagery was created for the book New York 2140 by Kim Stanley Robinson, which is set in a futuristic NYC that’s been flooded by rising sea level. I particularly like this piece of computer graphics because it helps people visualize the effects of climate change. Because the scope of climate change and its effects is so huge, for many of us, it’s hard to comprehend what the world will look like in 50, or even 10 years because of it. Not being able to comprehend the effects of climate change can result in either denying its existence, not doing anything about climate change (due to a feeling of helplessness), eco-anxiety, or taking tangible action. I think 3D computer graphics like this that depict how our world will look like with climate change will really help communicate the effects of climate change to people. This particular image is very optimistic and depicts a world in which we adapt to a changing Earth, so we could assume that the creator is optimistic about how humanity will adapt in the future. Pairing this piece with equally possible dystopian imagery would help show people what results from taking action now vs. not taking action now.

An interesting possibility would be to put together a project that exhibits an image of a current city, a produced image of how it’ll look in 50 years if we reduce carbon emissions by X amount by a certain time, and a produced image of how the city will look if we don’t reduce carbon emissions by X amount.

## Project 04 String Art

``````//Alana Wu
//ID: alanawu
//Project 04: String Art

function setup ()
{
createCanvas (400, 300);
}

function draw ()
{
background (0);
if (mouseIsPressed)
{
background(255);
}
var x = 100;
var y = 100;
var dist = 50;
var num = 5;

push();
translate (100, 75);
//white lines
for (y = 10; y <= 300; y += 5)
{
strokeWeight (4);
stroke (255);
if (mouseIsPressed)
{
stroke(0);
}
line (x + dist, y + dist, min (mouseX, 300), y);
strokeWeight (.5);
dist -= 1;
}

//purple lines
for (y = 100; y <= 200; y += .5)
{
stroke (76, 0, 153);
if (mouseIsPressed)
{
stroke (179, 255, 102);
}
line (constrain (mouseX, 50, 350), y, x + dist, y + dist);
dist -= 5;
}
//light blue lines
for (y = 200; y <= 400; y += 1)
{
stroke (0, 255, 255);
if (mouseIsPressed)
{
stroke (255, 0, 0);
}
line (min (mouseX, 400), y, x + dist, y + dist);
}
pop();

//white string in larger black circle
push ();
translate (300, 200);
fill (0);
if (mouseIsPressed)
{
fill (255);
}
//big circle
ellipse (0, 0, 250, 250);
for (var k = 0; k < 100; k+= 1)
{
stroke (255, 220, 255);
//when mouseIsPressed, colors invert
//and new strings are drawn
if (mouseIsPressed)
{
stroke (0);
for (var a = 0; a < 40; a ++)
{
line (2, 10, 10 + min (mouseX/10, 40), 30);

}
push ();
translate (-100, -50);
for (var a = 0; a < 40; a ++)
{
stroke (100, 255, 100);
line (2, 10, 10 + min (mouseX/10, 40), 30);

}
pop();
noFill();
ellipse (0, 0, 220, 220);
ellipse (0, 0, 180, 180);
ellipse (0, 0, 140, 140);
}
line (25, 0, 25 + mouseY/5, 45);
}
pop ();

//string in smaller black circle
push();
translate (180, 275);
fill (0);
if (mouseIsPressed)
{
fill (255);
}
//smaller circle
ellipse (0, 0, 100, 100);
for (var i = 0; i < 100; i ++)
{
stroke (204, 204, 255);
if (mouseIsPressed)
{
stroke (51, 51, 0);
for (var a = 0; a < 40; a ++)
{
line (15, 25, 15 + min (mouseX/10, 20), 35);
}
}
line (15, 5, mouseY/8, 30);
line (10, 5, min (mouseY, 50), min (mouseY, 50));
}
pop ();

if (mouseIsPressed)
{
push();
translate (mouseX, mouseY);
//circle of red string circles
for (var c = 0; c <= 8; c ++)
{
translate (20, 20);
for (var b = 0; b < 80; b ++)
{
stroke (255, 0, 0);
line (8, 8, 20, 20);
noStroke();
}
}
pop();
}
}

``````

For this project, it was hard to figure out what I wanted to do, since I didn’t really understand what the possibilities were. I did a first draft of string art to explore the different options, then completely started over in a new file.

## Looking Outwards 04: Sound Art

Created by Fraction, Louis-Phillippe St. Arnault, Nature Graphique, and Creation Ex Nihilo, Entropia is an immersive performance built of interconnected layers of media; a physical geodesic structure, immersive visuals, and sonic effects are synchronized by real time 3D programming. It’s meant to pay tribute to the architect and theorist of geodesic design, Richard Buckmeister Fuller.

I particularly admire how new artists added on to the project throughout its making, building new layers of media into what the previous artist had done. The fact that the production used real time programming was also very impressive, and therefore must creative a different experience each time Entropia is performed. The idea that an exact performance will never be recreated would probably make people appreciate all the more.

Going back to the idea that coding isn’t widely considered an “art”, having performances like this would help realize how coding can be artistic in itself. Coding could, like writing, be considered a creative way of expression… just in a different language.

Creators: Fraction, Louis Phillippe St-Arnault, Nature Graphique, Creation Ex Nihilo

First performed May 2015.

## Project 03: Dynamic Drawing

This animation depicts a sun and a moon rotating in a circle, depending on the location of the user’s mouse. The background the sun passes through changes through sunrise, blue sky, and sunset colors as the sun moves from left to right.

``````//Alana Wu
//ID: alanawu
//Section C
//Project-03

//sun and moon move in a circle centered in the canvas
// stars rotate around the moon
//clouds rotate around the sun
//when sun is above height/2, sunrise, then blue, then sunset colors
//when moon is above height/2, varying shades of blue

function setup()
{
createCanvas(600, 450);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
var x = 30;

function draw()
{
strokeWeight(0);
background(0);

//moves (0,0) to center of canvas
translate (300, 225);

//as mouse moves from left to right, background sky transitions
//from red (sunrise) to yellow, blue, yellow, and back to red(sunset)
if (mouseX < 120)
{
fill (255, mouseX*2, 0);
}
if (mouseX>= 120 & mouseX < 220)
{
fill (255, 255, mouseX-40);
}
//get from (255, 255, 180) to (50, 155, 255)
if (mouseX>= 220 & mouseX < 300)
{
fill (50+(300-mouseX)*2.5, 155+(300-mouseX)*1.2, 255 - (300-mouseX));
}
//get from (50, 155, 255) to (255, 255, 180)
if (mouseX >= 300 & mouseX < 380)
{
fill (50+(mouseX-300)*2.5, 155+(mouseX-300)*1.2, 255-(mouseX-300));
}
//from (255, 255, 180) to (255, 240, 0)
if (mouseX >= 380 & mouseX < 480)
{
fill (255, 175+(480-mouseX), (480-mouseX)*1.4);
}
if (mouseX >= 480)
{
fill(255, 700-mouseX*1.1, 0)
}
rect (-300, -225, 600, 225);
fill (mouseX/25, mouseX/25, 100);
rect (-300, 0, 600, 225);

//draws background clouds that move horizontally
push(0);
fill(235);

//if mouse is pressed, clouds change to dark gray and move left
if (mouseIsPressed)
{
fill (90);
x -= 5;
}
translate (-300, -225);
ellipse (x, 45, 40, 40);
ellipse (x+25, 30, 50, 50);
ellipse(x+35, 60, 35, 35);
ellipse (x+20, 50, 40, 40);

ellipse (x+500, 150, 40, 40);
ellipse (x+475, 160, 50, 50);
ellipse(x+525, 170, 35, 35);
ellipse (x+500, 180, 40, 40);

ellipse (x + 300, 60, 40, 40);
ellipse (x + 270, 70, 30, 30);
ellipse (x + 285, 90, 50, 50);
ellipse (x + 320, 90, 40, 40);

ellipse (x+50, 100, 40, 40);
ellipse (x+80, 130, 50, 50);
ellipse(x+30, 132, 35, 35);
ellipse (x+58, 135, 50, 50);
pop();

//draws sun
push();
fill (255, 255, 0);
ellipse (90, 90, 50, 50);
translate (90, 90);
//draws 9 clouds around the sun
for (var i = 0; i <= 8; i++)
{
fill (255);
strokeWeight(0);
ellipse (mouseX/5 + 5, mouseY/5 + 5, 15, 15);
ellipse (mouseX/5 - 8, mouseY/5-10, 15, 15);
ellipse (mouseX/5, mouseY/5, 20, 20);
}
pop();

//draws moon
push();

fill (255, 255, 200);
ellipse (90, 90, 50, 50);
translate (90, 90);

//draws randomly moving stars around the moon
for (var j = 0; j < 5; j++)
{
fill (255, 255, 204);
rectMode (CENTER);
rect (mouseX/9, mouseX/8, 5, 20);
rect (mouseX/9, mouseX/8, 20, 5);
push();
translate (mouseX/9, mouseX/8);

//can you change the frameRate for only a section of the code?
for (var h = 0; h <= 7; h++)
{
fill (255 - mouseX/7, 255 - mouseY/3, 255 - mouseX/5);
ellipse (10+mouseX/20, mouseY/50, 8, 8);
}
pop();
}

//clouds move horizontally right by .5 every frame
x += .5;

pop();

}
``````

## Looking Outwards 03: Computational Fabrication

Wanderers computationally grows wearables through a process that emulates natural growth behavior. The shapes start out as a “seed” and adapt to their environment as they grow.

The process imitated biological growth by transforming a geometric input into an intermediate representation, then deforming the initial geometric representation. The deformed initial representation reacts to the deformation of the object. This process is done iteratively, so as it repeats, the deformations aggregate into visible growth of the object.

I admire this project because it take biomimicry to the next level; rather than emulating specific end product qualities found in nature, this project literally grows and adapts the same ways living organisms do. Most man-made creations lack this quality. This opens up a whole host of new possibilities in design because as humans, many aspects of the future will always be uncertain, so fixed design will always have a flaw. But if you create algorithms that are capable of adapting to future changes, then design will be much for capable and efficient. Many of the things we design (buildings, energy systems, etc) are meant to exist for long periods of time and will need to be able to adapt to uncertain changes (eg effects of climate change).

## Project 02: Variable Face

With each click, the eyes are changed randomly. If the mouse is pressed, the facial expression changes, the arms move up and down, and the character switches between wearing different hats. When the pink button, blue button, or yellow sun button are clicked, either blushing circles, tear tracks, or yellow polka dots will appear.

``````//Alana Wu
//Section C

var faceWidth = 120;
var eyeLength = 20;
var x = 200;
var y = 250;
var eyeThickness = 5; //for changing eye thickness
var randomEars = 1; //for changing hat/ears
var randomSun = 10; //for changing yellow polka dot locations

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

function draw()
{
background (51, 0, 102);

//if mouse is pressed on yellow sun, yellow polka dots appear
if (mouseIsPressed & mouseX > .7 * width && mouseX < .9 * width
&& mouseY > .1*height && mouseY < .3*height)
{
fill (255, 255, 0)
strokeWeight(0);
ellipse (randomSun, randomSun*10, faceWidth/2, faceWidth/2);
ellipse (x + randomSun*4, randomSun*2, faceWidth/4, faceWidth/4);
ellipse (randomSun*20, randomSun*6, faceWidth/5, faceWidth/5);
ellipse (randomSun*7, y + randomSun*4, faceWidth/3, faceWidth/3);
ellipse (randomSun*12, y +randomSun*6, faceWidth/4, faceWidth/4);
ellipse (x + randomSun*3, randomSun*2.7, faceWidth/6, faceWidth/6);
ellipse (randomSun*2.2, y +randomSun*5.7, faceWidth/7, faceWidth/7);
ellipse (randomSun*6, y +randomSun*10, faceWidth/2, faceWidth/2);
ellipse (randomSun*12, y +randomSun*12, faceWidth/3, faceWidth/3);
ellipse (randomSun*20, y - randomSun*8, faceWidth/4, faceWidth/4);
ellipse (randomSun*32, y +randomSun*11, faceWidth/4, faceWidth/4);
ellipse (randomSun*28, y -randomSun*6, faceWidth/3, faceWidth/3);
ellipse (randomSun*38, y +randomSun*5, faceWidth/2, faceWidth/2);
ellipse (randomSun*35, y -randomSun*3, faceWidth/4, faceWidth/4);
}

//blush button
strokeWeight (0);
fill (255, 0, 127);
rect (15, 15, 70, 40);

//draws blue tear shape button
fill (0, 0, 255);
beginShape();
curveVertex(50, 100);
curveVertex(50, 100);
curveVertex(25, 150);
curveVertex(50, 175);
curveVertex(75, 150);
curveVertex(50, 100);
curveVertex(75, 150);
curveVertex(50, 100);
endShape();

//draws sun
fill (255, 255, 0);
ellipse (.8*width, .2*height, width/5, width/5);
strokeWeight(8);
stroke(255, 255, 0);
line ( .8*width, .2*height, .8*width + width/6, .2*height);
line ( .8*width, .2*height, .8*width, .2*height + width/6);
line ( .8*width, .2*height, .8*width, .2*height - width/6);
line ( .8*width, .2*height, .8*width - width/6, .2*height);
line ( .8*width, .2*height, .8*width + width/8, .2*height - width/8);
line ( .8*width, .2*height, .8*width - width/8, .2*height - width/8);
line ( .8*width, .2*height, .8*width + width/8, .2*height + width/8);
line ( .8*width, .2*height, .8*width - width/8, .2*height + width/8);
fill (255);
strokeWeight (0);
ellipse (x, y, faceWidth, faceWidth); //draws head shape

strokeWeight (eyeThickness); //thickness of eye line
stroke(0);
line (x - faceWidth/5, y - faceWidth/5,
x - faceWidth/5, y - faceWidth/4 + eyeLength); //draws left eye line
line (x + faceWidth/5, y - faceWidth/5,
x + faceWidth/5, y - faceWidth/4 + eyeLength); //draws right eye line

//draws body
strokeWeight(5);
stroke(255);
fill (255);
line (x - faceWidth/5, y + faceWidth/2, x - faceWidth/3, y + faceWidth);
line (x + faceWidth/5, y + faceWidth/2, x + faceWidth/3, y + faceWidth);
line (x - faceWidth/3, y + faceWidth, x + faceWidth/3, y + faceWidth);
//draw legs
line (x - faceWidth/5, y + faceWidth, x - faceWidth/5, y + 1.3*faceWidth);
line (x + faceWidth/5, y + faceWidth, x + faceWidth/5, y + 1.3*faceWidth);
//draw feet
line (x - faceWidth/5, y + 1.3*faceWidth, x - faceWidth/3, y + 1.3*faceWidth);
line (x + faceWidth/5, y + 1.3*faceWidth, x + faceWidth/3, y + 1.3*faceWidth);

//when mouseispressed, arms are lowered
if (mouseIsPressed)
{
line (x - faceWidth/4, y + .6*faceWidth, x - faceWidth/2, y + faceWidth);
line (x + faceWidth/4, y + .6*faceWidth, x + faceWidth/2, y + faceWidth);
stroke(0);
ellipse (x, y + faceWidth/7, faceWidth/4, faceWidth/4);
}
//when mouse isn't pressed, arms are raised
else
{
line (x - faceWidth/4, y + .6*faceWidth, x - faceWidth, y - faceWidth/4);
line (x + faceWidth/4, y + .6*faceWidth, x + faceWidth, y - faceWidth/4);
stroke (0);
line (x + faceWidth/5, y + faceWidth/7, x - faceWidth/5, y + faceWidth/7);
}

//blush spots appear when you click "blush" button
if (mouseIsPressed & mouseX > 15 && mouseX < 85 && mouseY > 15 && mouseY < 55)
{
strokeWeight (0);
fill (255, 0, 127);
ellipse (x + faceWidth/3, y + faceWidth/10, faceWidth/6, faceWidth/6);
ellipse (x - faceWidth/3, y + faceWidth/10, faceWidth/6, faceWidth/6);
}

// draws blue tear lines under eyes when blue teardrop is clicked
if (mouseIsPressed & mouseX > 25 && mouseX < 75 && mouseY > 100 && mouseY < 175)
{
stroke (0, 0, 255);
strokeWeight(8);
line (x - faceWidth/5, 1.02*y, x - faceWidth/5, y + faceWidth/2);
line (x + faceWidth/5, 1.02*y, x + faceWidth/5, y + faceWidth/2);
strokeWeight (0);

}

//depending on random number generated, either panda ears, a cone hat, or a top hat appears
if (randomEars <= 1) //draws panda ears
{
fill (0);
ellipse (x - faceWidth/2, y - faceWidth/2, faceWidth/2, faceWidth/2);
ellipse (x + faceWidth/2, y - faceWidth/2, faceWidth/2, faceWidth/2);
fill (255);
ellipse (x - faceWidth/2, y - faceWidth/2, faceWidth/4, faceWidth/4);
ellipse (x + faceWidth/2, y - faceWidth/2, faceWidth/4, faceWidth/4);
}
else if (randomEars <= 2) //draws red top hat w/ black and white buckle
{
strokeWeight (0);
fill (255, 0, 0);
rect (x - faceWidth/2, y - .6*faceWidth, faceWidth, faceWidth/4);
rect (x - faceWidth/4, y - faceWidth, faceWidth/2, faceWidth/2);
fill (0);
rect (x - faceWidth/5, y - .58*faceWidth, faceWidth/2.5, faceWidth/5.5);
fill (255);
rect (x - faceWidth/9.5, y - .55*faceWidth, faceWidth/5, faceWidth/8);
}
else if (randomEars <= 3) //draws pink cone hat
{
strokeWeight(0);
fill (255, 0, 127);
triangle (x, y - 1.2*faceWidth, x - faceWidth/2.5, y - faceWidth/3, x + faceWidth/2.5, y - faceWidth/3);
fill (255);
ellipse (x, y - 1.2*faceWidth, faceWidth/4, faceWidth/4);
}
}

function mousePressed ()
{
//when user clicks, these variables are reassigned to random values w/n specific ranges
eyeLength = random (8, 25);
eyeThickness = random (5, 12);
randomEars = random (0, 3);
randomSun = random (5, width/10);

}

``````

## Looking Outwards 02: Generative Art

GITEX is a project created by Marek Bereza and Felix Faire (of Marshmallow Laser Feast, an experiential collective based in London) that visualizes sets of urban data from Dubai in an interactive and immersive experience for the user. The 3D visualization and interaction software was written from scratch in C++.

Data is often hard to comprehend, especially for those unfamiliar with how to read data, yet it’s relevant to all our lives and the decisions we make. By turning sets of urban data into a visual, interactive experience, this project allows a resident of Dubai (or anyone else) to explore the city in perspectives that otherwise wouldn’t be accessible. I particularly admire this project because it both enables the average person to make more informed decisions about their own city, while also being a beautiful work of art in itself.

I don’t know much about the algorithm that generated the work, since it was built in scratch in C++. I do know that it must have incorporated a large variety of sets of data (traffic collisions, topographical data, geographic data, types of locations, etc).

Because the creators wrote the program from scratch, they would’ve implemented their own way of visualizing the city. It’d be fascinating if different people were to create their own version of this program: each person could convey which aspects of the city they find most important. For someone environmentally focused, they could emphasize green space and natural life in their visualization. For someone culturally focused, they could highlight the different cultures, ethnicities, and neighborhoods within a city.

While this is an amazing piece of work on its own, it’d be ideal if the concept could be transformed into a program where non-coders could upload their own sets of data and create personal maps of cities. This would enable people to communicate much more effectively in regards to any urban issues to want to advocate for.

## Project 1: Self Portrait

``````// at least 10 graphic elements -> quad, triangle, ellipse,
//square, arc, line, point

function setup()
{
createCanvas(200, 200);
background(255, 0, 0);
}

function draw()
{
strokeWeight (0);

//lines in background
strokeWeight (10);
stroke (255, 255, 255); // white lines
line (0, 200, 200, 0);
line (30, 200, 200, 30);

stroke (0, 0, 0); //black lines
line (0, 0, 200, 200);
line (30, 0, 200, 170);

line (0, 150, 50, 200);
line (0, 120, 80, 200);
strokeWeight(0);

//earrings
fill (0, 255, 255);
triangle (45, 170, 65, 170, 55, 140);
triangle (155, 170, 135, 170, 145, 140);
fill (255, 255, 0);
circle (55, 140, 7);
circle (145, 140, 7);

fill (185, 255, 218);
ellipse(100, 100, 100, 120);

ellipse (100, 200, 200, 40);
fill (0, 0, 102);
arc (100, 100, 100, 120, PI + HALF_PI, HALF_PI, CHORD);
arc (100, 200, 200, 40, PI, PI + HALF_PI);
circle (80, 85, 15);
fill (185, 255, 218);
circle (120, 85, 15);
fill (255, 255, 255);
ellipse (100, 130, 50, 15);
fill (210, 0, 0);
circle (65, 110, 18);
circle (135, 110, 18);

//hat
fill (0, 0, 102);
rect (55, 30, 90, 20);
rect (75, 5, 50, 40);

fill (185, 255, 218);
rect (100, 30, 45, 20);
rect (100, 5, 25, 40);

noLoop ();
}
``````