In the first chapter of Chris Crawford’s The Art of Interactive Design, I found myself engaged with the foundational ideas presented. From Crawford’s exploration into the nature of interaction as the core of design, one of the key takeaways for me was Crawford’s emphasis on interaction being the core of design. Before reading this, I often saw interactivity as an added feature rather than the fundamental aspect of the user experience. It was like a light bulb went off when he explained that interaction isn’t just about adding clickable elements but about making the whole design process revolve around the user’s actions and reactions. This perspective has made me question my approach to design—am I truly focusing on how users interact with my work, or am I just ticking off boxes?
I agree with him on the definition of interactivity. If I am creating an interactive device/art/product, I should always remember how four parameters, aka listening, speaking, thinking, and responding, work on my idea. I really enjoyed how he explained interactivity with examples, making it easier to even teach my 7-year-old brother about interactivity in technology.
Lastly, on the notion of traditional entertainment like movies being non-interactive, I think that might get shifted with emerging technologies. Digital media, including interactive films, virtual reality experiences, and even interactive web-based stories, demonstrate that interactivity can be a fundamental aspect of various media forms. The rise of these new media formats challenges the traditional notion that interactivity is limited to games or other explicitly interactive experiences.
Category: Spring 2024 – Aaron (Section 001)
Reading Response Week 3
A strongly interactive system, as described in The Art of Interactive Design, goes beyond just reacting to user input; it creates an ongoing back-and-forth between the user and the system. Crawford talks about the system as “listening, thinking, and speaking,” meaning it responds in meaningful ways to what the user does. In my p5.js sketches, I want to improve user interaction by giving more immediate feedback and making the system react in a way that feels more real or personalized if that makes sense. For example, much like how in Minecraft your actions (building or destroying) immediately affects the world around you, like destroying the wrong block could lead to a flood, same with my designs, I want to make my sketches change and evolve with user input. Furthermore, instead of having a single click trigger a known/set action, I want the system to adapt and change based on the actions similar to how Spotify creates personalized playlists based on previous songs you’ve listened to. So basically, the previous user inputs influence the sketch’s future outcomes. I can also add depth by layering interactions, like having multiple variables such as colors, shapes, or movement change in response to user input, which I am implementing right now to my sketches and giving it a go, as I do believe it gives a more appealing look to the system. I also just found out, that you can add sound effects on P5, which I hope we get to learn that, during the semester, as I’m sure everyone can agree sound enhances any type of design. Hence, by incorporating these elements into my sketches and designs, I aim to create more interactive and engaging sketches that feel alive and responsive, aligning with Crawford’s vision of true interactivity.
Reading Reflection 1
Casey Reas’ Eyeo talk on chance operations:
After watching Casey Reas’s assessment of randomness in art, I’m convinced of its valuable role, especially in the STEM field, where it allows researchers to predict and analyze randomness in their subjects. His explanation reminded me of a study where Japanese researchers used algae to optimize their rail transport system. The algae grew in random, unpredictable ways, yet always found the most efficient pathway to form a network based on the pattern or map of the space in which it was cultured. (In 2010, a team of researchers from Japan and the U.K. fed a slime mold with nutrients arranged to imitate the nodes of the Tokyo subway system. The resulting network closely resembled the actual subway network, leading to the development of biologically inspired adaptive network design.) This study highlights the potential of introducing randomness to the template designs of objects, something Casey Reas often emphasizes in his work.
When it comes to incorporating randomness in my own projects, I find it most effective in creating animations. For example, using a random number generator and initializing it to a variable, then applying that variable as an argument for certain shapes in my self-portrait sketch, allowed me to simulate the movement of the ‘mouth’ shape, giving the illusion of the sketch talking. To me, randomness is most enjoyable and useful when applied in animations.
In the balance between total randomness and complete control, I prefer maintaining more control over an object while leaving some variables to function randomly. This approach not only makes the model more reliable but also allows me to observe and understand the specific randomization patterns more clearly. Much like in research, where we use a “control” scenario to keep experiments fair, having a balance between control and randomness helps detect how certain variables influence the behavior of others.
Assignment 2: Fuzzy Brain
Concept:
In this project, I draw inspiration from the geometric artworks discussed in: COMPUTER_GRAPHICS_AND_ART_Aug1977. My goal with this project was to explore the potential of ‘for’ loops to generate grids of symmetrical, curved lines, creating a structured, rhythmic design. However, I hoped to disrupt this symmetry by introducing heavy distortion, with the intention of simulating the visual effect of mind fog. The resulting artwork presents a uniform arrangement of curves that distort and displace when the cursor hovers over it, evoking a sense of disorientation and randomness—mirroring the feeling of brain fog.
Highlight:
I’m particularly proud of the distortion animation I added to this sketch. By utilizing the dist() function, I created interactive conditions that are activated when the mouse hovers over the Bézier curves. Using an if statement, I introduced random increments within a range of negative to positive values to the variables used as arguments for the original Bézier curves. This approach helped change the positions of the curve lines at random, adding distortion and creating the brain fog effect that I intended. Additionally, reducing the frame rate helped give the animation a 90’s cartoon effect aesthetic.
// mouse hover animation
if (dist(mouseX, mouseY, x, y) < 300) {
// displace lines randomly
x1 += random(-20, 10);
y1 += random(-30, 10);
x2 += random(-40, 10);
y2 += random(-50, 10);
x3 += random(-60, 10);
y3 += random(-70, 10);
x4 += random(-80, 10);
y4 += random(-90, 10);
}
bezier(x1, y1, x2, y2, x3, y3, x4, y4);
Reflections:
While working on this project, I experimented with creating symmetrical grids and distorting the curves to simulate mind fog. Initially, I focused on generating the grids using for loops, but as I introduced interaction through mouse hover effects, I realized how much potential this had to enhance the dynamic nature of the piece. The use of dist() and if() functions to trigger random distortions worked well in creating a more immersive experience.
Looking back, I think there’s room for improvement in making the distortions more fluid and gradual. Currently, the randomness of the distortions can feel abrupt, so in future iterations, I would explore using easing functions to smooth the transitions.
Assignment#2_piece of art
CONCEPT:
Two artists have caught my eye for my concept: Vera Molnár and Dr. Bill. Vera Molnár’s use of grids and squares with small touches of randomness was something I thought of as cool and want to bring to my own piece, especially after watching Casey Reas and learning how randomness can create unique art pieces. Her piece “(Dés)Ordres” shows an example of balance between order and chaos by introducing little changes in color and shape within a structured grid (Molnár, 1974). I want to do something similar by using a grid of squares and making each square unique, creating a sense of predictability within the order. The second artist’s art, Dr. Bill’s, has inspired me to incorporate interactive elements into my artwork (Kolomyjec, n.d.). I plan to incorporate an interactive element where the colors of the squares shift as the viewer moves their mouse across the screen, making it engaging.
To be more specific about my design, I will use the loop function to add squares all over the canvas. However, like Molnár’s designs, I’ll also add squares within the squares, but I’ll be using randomness to change either how the square moves or how big it is inside the square, or the colors of the square. Also, I wanted to make it more interesting by picking one color on one side of the canvas that changes with the user and the mouse interaction with it. In addition to that, I wanted to make it a vibrant piece by adding random colors, but as I said, I’ll be choosing one specific color that changes within the interaction of the viewer and the mouse. Hopefully, by combining Molnár’s structured randomness with Dr. Bill’s generative interaction, I am aiming to create a dynamic and engaging piece, by working with order and unpredictability, to make something that evolves with each viewer’s interaction.
The images below are Vera Molnár and Dr. Bill’s work that inspired my piece:
SKETCH:
HIGHLIGHT:
One part I’m really proud of is figuring out how to make the cubes “shake.” I used the “random()” function to add small random movements to the X and Y coordinates of each square. By setting “randomShakeX” and “randomShakeY to values between -3 and 3, the squares move slightly, creating a subtle shaking effect.
It took me a while to get this right and was the most time-consuming part about my code. I started out by testing different ranges for the movement and tested the effect with various square sizes. After some trial and error, I found the perfect balance where the shaking felt noticeable but not too chaotic. This part of the code may seem little, but it makes the design feel more dynamic and playful, which is something I was excited to achieve. In the end, I was proud of how it turned out because it brought my art piece together, which proved Casey Reas’s message of how small random changes can make a big difference in how a design feels.
heres a code snippet on how to do it:
// Adding random movement to create an effect of shaking (inner squares)
let randomShakeX = random(-3, 3);
let randomShakeY = random(-3, 3);
// Draw three inner squares with the shaking effect, decreasing in size.
rect(x + randomShakeX, y + randomShakeY, 30, 30);
rect(x + randomShakeX, y + randomShakeY, 20, 20);
rect(x + randomShakeX, y + randomShakeY, 10, 10);
}
}
}
REFLECTION:
One thing I learned from this assignment is how randomness can play a big role in art. It adds variety and surprises that make the piece more engaging. One thing I want to improve is to add more interactions with the user in my piece. For example, I had an idea where pressing a key on the keyboard would change the shapes, and using the arrow keys could adjust the size of the shapes. Along those lines, I’d like to eventually turn the art into a game where people can play with the shapes and make their own patterns that fit their personalities. It would be more fun to do this with the art piece.I’m happy with how the code turned out, though. It makes me feel like the art piece fits with who I am by being colorful and unique.
References
Kolomyjec, B. (n.d.). Dr. Bill, Generative Art OG. https://www.drbillkolomyjec.com/
Molnár, V. (1974). Désordres. Digital Art Museum. https://dam.org/museum/artists_ui/artists/molnar-vera/des-ordres/
Assignment 2- Art Design
CONCEPT:
For this assignment, my inspiration mostly came from Bill Kolomyjec’s art piece ‘Random Squares’.
‘Random Squares’ Bill
However, I wanted to add a bit of a twist and make it more chaotic or trippy in some sort of way. I’ve gotten the idea of the changing shapes depending on the area of the canvas from class and interpreted it into my design, which thankfully pulled the piece together. In addition, the crazy random colours definitely added to the effect of it being trippy at least I hope so. Moreover, it still felt a bit bland, and after watching Casey Reas’s video, I knew I needed to add something to make the piece seem more alive or organic, as he says. In doing so, I discovered a growing and shrinking factor, which, after some trial and error, I realized it was just a variable that I needed to create and then just adjust the shape size accordingly, and it turned out not so hard after all. This would probably be what I’m most proud of in the whole code.
Code that I’m most proud of:
/ Variable for size change
let sizeChange = 0;
// Variable for the shapes (growing or shrinking)
let growing = true;
function setup() {
createCanvas(400, 400);
frameRate(5);
}
function draw() {
background("black");
// sizeChange variable to create growing/shrinking effect
if (growing) {
sizeChange += 1;
// If the size gets too large, start shrinking
if (sizeChange > 20) {
growing = false;
}
} else {
sizeChange -= 1;
// If the size gets too small, start growing again
if (sizeChange < 0) {
growing = true;
}
}
Reflection/Improvment:
Next time, I would love to have the shapes rotate, which is something I tried doing but unfortunately failed, I did watch videos on youtube but i still didn’t understand it so i decided to scratch that until i fully understand how it works. So hopefully next time!
My design:
My code:
// Variable for size change
let sizeChange = 0;
// Variable for the shapes (growing or shrinking)
let growing = true;
function setup() {
createCanvas(400, 400);
frameRate(5);
}
function draw() {
background("black");
// sizeChange variable to create growing/shrinking effect
if (growing) {
sizeChange += 1;
// If the size gets too large, start shrinking
if (sizeChange > 20) {
growing = false;
}
} else {
sizeChange -= 1;
// If the size gets too small, start growing again
if (sizeChange < 0) {
growing = true;
}
}
for (let x = 0; x <= width; x += 40) {
for (let y = 0; y <= height; y += 40) {
// Outer stroke for the shapes
strokeWeight(3);
stroke("black");
// Right half of the canvas - enlarging and shrinking squares
if (mouseX > width / 2) {
for (let size = 30 + sizeChange; size > 0; size -= 10) {
fill(random(255), random(255), random(255), 150);
// nested squares
rect(x + (30 - size) / 2, y + (30 - size) / 2, size, size);
}
} else {
// Left half of the canvas - enlarging and shrinking circles
for (let size = 30 + sizeChange; size > 0; size -= 10) {
fill(random(255), random(255), random(255), 150);
// nested circles
ellipse(x + 20, y + 20, size, size);
}
}
}
}
}
Assignment#2_reflection
The first time watching Casey Reas speech, I had so many thoughts. But one main point I kept thinking about is how the author focuses on artists using randomness to create art that represents history, biology, or society, but none of these works seem to connect with deeper human emotions. So then I kept thinking about this, and I asked myself. Does randomness restrict personal expression?. For example, the artist said, “We used a little bit of randomness and a lot of sort of decision-making based on how we wanted things to feel.” From my point of view, this quote shows how randomness keeps art from being predictable, leading to unexpected results that might move the piece away from personal emotional expression. So, this makes me question whether relying too much on randomness prevents personal expression since the process seems more about handling the chaos of the system than about conveying intentional emotions. The reason I focused on this part of the video is because I always thought of art as a form of personal expression that reflects the artist’s emotions, thoughts, and experiences. So, when too much randomness is involved, it feels like the artist loses control over that emotional connection, letting the system or algorithm take over, which could overshadow the personal meaning and emotional depth behind the work.
However, watching the clip for the second time, I decided to think with an open mind. For example, does the unpredictability in art lead to more innovative pieces that lead to deeper stories?. Casey Reas mentioned a few artists who used randomness to create works with meaningful messages. For example, he talks about a project visualizing cancer cell communication. “Everything is structured and ordered, and randomness is used slightly to determine the position and the scale of these individual clusters.” In the example, randomness plays a role in producing a lifelike representation. The artist used randomness to decide where the protein clusters would go and how big they would be, which reflects the natural unpredictability of real biological processes. As a viewer of this artwork, I felt as though it captured the chaotic nature of cellular interactions. So, in this case, I think that the randomness added depth in the art piece, which in a way made me feel connected with the processes of life in a way that a pure structured system or algorithm might not be able to. Overall, while at first randomness may seem to get in the way of personal expression, it nevertheless lets artists make works that reveal deeper truths about nature, society, and the human experience in ways that pure intention or structured systems might not be able to just by using unpredictability in some part of the art.
REFRENCES:
Reas, C. (2012). Form+Code in Design, Art, and Architecture.
Retrieved from the weekly PowerPoints: https://vimeo.com/45851523
Assignment 2-Reflection
In Casey Reas’ talk on chance operations, one of the most interesting ideas he explores is how randomness can act as a creative form in art. Reas shows how randomness can introduce unpredictability into structured digital systems, giving artificial creations a more natural and organic feel which he stated at the beginning of the video. Hence, made me think about how randomness is used in larger projects, like architectures and so on. For example, the designs of Expo 2020 or the Museum of the Future in Dubai bring together technology and creativity in a way that balances control with randomness, showing how both aspects can work together to create something that feels alive and evolving. Another thought that came to mind was how even small random changes can totally change the result of an algorithm. The “noise” is what keeps the system interesting, as he said without it, it’ll turn homogeneous and basically move in the same direction, which obviously isn’t exciting, and the system pretty much just becomes predictable. However, it also makes me think about things like how much randomness is good before it turns into chaos and when it stops adding to the art and starts taking away from it. One artist, for instance, Jean Tinguely, made “Homage to New York,” a machine that is meant to break itself. Yes, I get the idea of embracing chaos, but this amount of uncertainty makes it harder for me to connect. It’s too random for me to handle, and the lack of structure makes it difficult for me to connect personally with the piece. Still, I can see how some people might connect with Tinguely’s method, enjoying the randomness and how it shows how chaotic life is. In essence, too much chaos makes me feel disconnected, which shows that this type of art might not speak to everyone.
Homage to New York:
Assignment 1: Aysha’s Self-Portrait
Concept:
For this assignment I use my knowledge of drawing basic shapes in p5*js to create a self-portrait. This portrait is a rough sketch of me, wearing my favorite hairstyle—a high ponytail. Since I’m still relatively new to coding, I chose to keep my approach simple by using basic shapes, lines, and curves to create this sketch. Understanding how the order of code affects the final drawing inspired me to stack shapes strategically, allowing me to capture minute details like the facial features in my portrait.
Highlight:
I’m particularly proud of the eyes in this sketch, as I invested a lot of effort into adding detailed elements that took some time to perfect. My biggest challenge was getting the curves right, especially when it came to the eyebrows and eyelids. Positioning them correctly was tricky, but using the mouseX and mouseY variables was incredibly helpful in determining their relative placement. However, achieving consistent curves across the sketch was the most time-consuming aspect of the entire process.
//eyes fill(250); ellipse(180,195,15,20); ellipse(220,195,15,20); noFill(); curve(175,230,167,190,194,190,200,230); curve(180,240,206,190,235,190,220,220); curve(200,170,167,200,194,200,200,150); curve(200,155,206,200,235,200,200,170); //eyebrows curve(200,175,207,175,239,175,250,220); curve(150,220,165,175,197,175,280,200);
Reflections:
When drawing the eyelids and eyebrows, I initially used the curve() function, but I later realized that combining noFill() with bezier() would have been a quicker and more efficient approach for creating curves. Additionally, I used the width and height variables to center the head on the canvas, which worked well. However, I believe that applying these variables more consistently throughout my sketch would make the portrait scalable for any canvas size in the future.
Self Protrait
CONCEPT:
Creating this self portrait was a tough journey. My concept was to create a cartoonish version of myself whilst including specific features like my curly hair, and other basic features (eye lashes, rosy cheeks, lashes, lips, eyebrows etc) that would make the portrait come together. Anyways I wanted to also keep it simple since by focusing on implementing the basic shapes so I could get familiar with it, since I’m still new to this. Moving on, for the background I wanted to stick to a specific color that would match the aesthetic of my portrait which is bluish-purple. However, as you could tell I couldn’t decide on just one color, so I went with a rainbow background that changes as you move the mouse around the screen which I’ll explain more about below.
HIGHLIGHT:
i have two highlights in my code. The first one is the background. The background was a bit of an accident. I wanted to do strips of different shades of blue but i kept being indecisive about the color and changing it. So then I went to look for inspirations in peoples blog and that’s when i stumbled on Noura alhosanis idea. However i changed it up by using different shapes, colors and sizes so it could go with my theme. Also, I looked into the class resources and came across a YouTube video, that helped me understand variables and the use of it. Here’s a snippet of the code:
let x, y, r, g, b;
function setup() {
createCanvas(400, 400);
}
function draw() {
print(mouseX + "," + mouseY)
//background
background(mouseX,mouseY,100, 7)
r = random (0,255)
g = 0
b = random(0,400)
x = random(0,700)
y = random(0,400)
noStroke();
fill(r,g,b,100)
square(x,y,50)
The second thing I’m proud of is my hair. The reason for this is because it was so time consuming to perfect the curly hair look which includes the placing for it, the layers of circles to create volume, and different type of shades to add depth into it. I’m proud of how it turned out because it brought my portrait together.
REFLECTION:
However, as much as I’m proud of the hair, it was still a real challenge. First It was tricky figuring out the placements, but as I kept messing up , I figured out the print mouseX and mouseY function which helped. But with that function it was still really time consuming. So, for next time i would like to find an easier method that won’t make me want to pull my hair out. Now, does this portrait look exactly like me? Well…not quite. It’s my first attempt, so I focused more on capturing basic features by using the basic shapes we used in class. But that’s something I want to work on next time which is making the portrait more realistic. Overall, I had fun with this project, and I’m already thinking about how I can improve.
Here is the overall code:
let x, y, r, g, b;
function setup() {
createCanvas(400, 400);
}
function draw() {
print(mouseX + "," + mouseY)
//background
background(mouseX,mouseY,100, 7)
r = random (0,255)
g = 0
b = random(0,400)
x = random(0,700)
y = random(0,400)
noStroke();
fill(r,g,b,100)
square(x,y,50)
//FACE SHAPE
strokeWeight(0)
fill(255,204,153)
ellipse(200,200,105,150)
//LEFT EYE
strokeWeight(1)
fill(255)
ellipse(180,180,14,10)
//LEFT EYES LID
strokeWeight(1)
fill('#B98B7B')
arc(180,180,15,25,PI,0)
//LEFT PUPIL
strokeWeight(1)
fill('rgb(98,26,26)')
circle(180,180,8)
//RIGHT EYE
strokeWeight(1)
fill(255)
ellipse(220,180,14,10)
//RIGHT EYES LID
strokeWeight(1)
fill('#B98B7B')
arc(220,180,15,25,PI,0)
//LEFT PUPIL
strokeWeight(1)
fill('rgb(98,26,26)')
circle(220,180,8)
//left eye brows
stroke('rgb(48,5,5)')
strokeWeight(4)
line(173,160,188,160)
// Right Eyebrow
stroke('rgb(48,5,5)')
strokeWeight(4)
line(210,160,225,160)
//left eye lashes
strokeWeight(1)
stroke('black')
line(174,178,174,172)
line(176,177,176,172)
line(181,176,181,172)
line(186,178,186,172)
line(179,177,179,172)
line(184,177,184,172)
//right eye lashes
strokeWeight(1)
stroke('black')
line(213,178,213,172)
line(216,177,216,172)
line(221,176,221,172)
line(218,176,218,172)
line(224,176,224,172)
line(226,176,226,172)
//down lip
strokeWeight(1)
fill("rgb(213,67,67)")
arc(200, 240, 30, 15, 0, PI);
//upper lip
fill("rgb(195,42,42)")
arc(200, 240, 30, 15, PI, 0)
//LIP LINE
arc(200, 240, 27, 1, 0 ,PI)
//NOSE
noFill()
arc(200,210,13,10,0,PI)
line(200,188,194,210)
//body
fill('rgb(39,39,133)')
rect(150, 295, 100, 200,40)
//left arm
noStroke()
fill(255,204,153)
rect(140, 320, 20, 120, 40)
//right arm
noStroke()
fill(255,204,153)
rect(240, 320, 20, 120, 40)
//left sleeves
noStroke()
fill('rgb(39,39,133)')
rect(140, 320, 20, 50, 5)
//right sleeves
noStroke()
fill('rgb(39,39,133)')
rect(240, 320, 20, 50, 5)
//neck coller
noFill()
strokeWeight(10)
stroke('rgb(31,31,91)')
arc(200, 295, 20, 30, 0 ,PI)
//left sleeve coller
noFill()
strokeWeight(7)
stroke('rgb(31,31,91)')
line(140,370,160,370)
//right sleeve coller
noFill()
strokeWeight(7)
stroke('rgb(31,31,91)')
line(240,370,258,370)
//neck
noStroke()
fill(255,204,153)
rect(190, 260, 20, 40,10)
//V neck
strokeWeight(7)
arc(200, 270, 27, 78, 0 ,PI)
//chin
noFill()
strokeWeight(1)
stroke('black')
arc(199,265,16,10,0,PI)
//jaw
strokeWeight(5)
stroke('#461C0D')
line(158,247,187,276)
line(241,247,212,276)
strokeWeight(3)
line(188,277,212,277)
//cheeks
noStroke()
fill(225,0,0,50)
circle(169,219,15)
circle(231,219,15)
// HAIR (Left side)
strokeWeight(4)
stroke('rgb(54,7,7)')
fill('rgb(54,7,7)')
circle(140, 230, 20)
circle(135, 225, 20)
circle(130, 220, 20)
circle(140, 225, 20)
circle(140, 240, 20)
circle(151, 243, 12)
circle(153, 260, 20)
circle(140, 260, 20)
stroke('rgb(71,18,18)')
fill('rgb(71,18,18)')
circle(143, 250, 20)
circle(134, 173, 20)
circle(135, 135, 20)
circle(130,130,20)
circle(136,140,20)
circle(139,143,20)
circle(146,149,20)
circle(146,139,20)
circle(131,157,20)
circle(143,162,20)
circle(137,185,20)
circle(136,201,20)
circle(123,173,20)
stroke('rgb(54,7,7)')
fill('rgb(54,7,7)')
circle(126,187,20)
circle(119,203,20)
circle(169,126,20)
circle(161,135,20)
circle(182,135,20)
circle(159,149,20)
circle(118,149,20)
circle(150,174,20)
circle(139,211,20)
circle(142,193,20)
circle(147,116,20)
circle(164,273,20)
circle(178,285,20)
circle(143,300,20)
circle(124,269,20)
circle(137,274,20)
circle(132,286,20)
circle(221,289,20)
circle(233,297,20)
circle(248,298,20)
circle(263,292,20)
circle(268,275,20)
circle(165,269,20)
circle(174,301,20)
stroke('rgb(71,18,18)')
fill('rgb(71,18,18)')
circle(153,127,20)
circle(165,108,20)
circle(187,120,20)
circle(182,103,20)
circle(177,114,20)
circle(124,248,20)
circle(121,228,20)
circle(129,240,20)
circle(146,279,20)
circle(160,291,20)
circle(241,283,20)
circle(257,278,20)
circle(233,273,20)
circle(225,284,20)
circle(175,276,15)
circle(238,267,20)
circle(243,275,25)
circle(220,278,10)
circle(158,305,15)
//HAIR (RIGHT SIDE)
stroke('rgb(73,24,24)')
fill('rgb(73,24,24)')
circle(260, 230, 20)
circle(265, 225, 20)
circle(270, 220, 20)
circle(260, 225, 20)
circle(260, 240, 20)
circle(250, 243, 12)
circle(248, 260, 20)
circle(260, 260, 20)
circle(257, 250, 20)
circle(272, 173, 20)
stroke('rgb(67,9,9)')
fill('rgb(67,9,9)')
circle(270, 135, 20)
circle(275, 150, 20)
circle(280, 165, 20)
circle(275, 205, 20)
circle(260, 210, 20)
circle(270, 210, 20)
stroke('rgb(54,7,7)')
fill('rgb(54,7,7)')
circle(270, 175, 20)
circle(255, 190, 20)
circle(265, 205, 20)
circle(252,263,20)
circle(254,162,20)
circle(254,173,20)
circle(262,149,20)
circle(246,134,20)
circle(277,188,20)
circle(269,259,20)
circle(243,149,20)
circle(268,162,20)
circle(273,233,20)
circle(275,246,20)
circle(258,127,20)
circle(201,127,20)
circle(219,131,20)
circle(230,138,20)
circle(197,106,20)
circle(208,110,20)
circle(231,117,20)
circle(217,119,20)
circle(244,117,20)
stroke('rgb(73,24,24)')
fill('rgb(73,24,24)')
circle(220,102,20)
circle(236,102,20)
circle(236,129,20)
}