## 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_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.

## 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)

}```