# THE ILLUSION

##### CONCEPT

I have a deep fascination for optical illusions, which I began exploring from a young age. Among my favorite illusions is the one depicted below, consisting of multiple squares of diminishing size stacked at various angles. I decided to recreate this illusion infusing it with a rotation effect to make It more appealing.

Initially, the squares rotated in fixed positions, but I visualized a more satisfying illusion with a deliberate pattern. After researching techniques, I stumbled upon a video tutorial explaining the application of sine and cosine functions to create intricate patterns. After hours of trial and error its look never failed to create a smile on my face.

Yet, my creation remained monochromatic. To enhance its visual allure, I refined the project by applying color adjustments using the frame count in combination with sine and cosine functions. This introduced a pleasing and seamless color transition, which I extended to the background to enhance its overall appeal.

#### Code Highlight

```translate(width/2, height/2);

for(var i = 0; i < 200; i++)
{
push()

rotate(sin(frameCount + i ) * 100)

var r = map(sin(frameCount), -1, 1, 50, 255)
var g = map(cos(frameCount /6), -1, 1, 50, 255)
var b = map(sin(frameCount /2), -1, 1, 50, 255)

stroke(r,g,b)

rect(0, 0, 600 - i * 3, 600 -i * 3, 200 - i)

pop()
}```

#### reflection and improvement

I am looking forward to  incorporating user agency into this illusion project, enabling individuals to have control over aspects such as the spiral patterns and color schemes.

## EMOJIFIED

#### Concept

In this project I wanted to portray myself not just through my physical appearance, but also by showcasing my personality, hobbies, and interests. To achieve this, I initially explored various methods of conveying this information, experimenting with different visual structures. However, I found that nothing captured it better than emojis. I carefully selected emojis that resonated with me and then experimented with their placement on a canvas.

I wanted to convey the idea that there’s a lot happening in my mind, even though it might not be apparent from the outside. To achieve this, I initially tried placing these emojis in a small container that resembled a portal to my thoughts, but it didn’t feel right. Then, I considered stationary placements around my image, but that didn’t quite capture what I was aiming for. Finally, I decided to position the emojis behind my portrait and give them random motion, which better represented my inner thoughts and emotions.

Creating the facial features was another journey of exploration. I stumbled upon the Bezier shape, which, although initially confusing and requiring precise coordination, presented a unique opportunity. To simplify its usage, I developed a function that assisted me in determining the mouse’s location on the screen, significantly saving me time in the process. As a final touch to enhance the project, I chose to replicate the effect of concert lights in the backdrop. Thus, when you click, dynamic lights can be observed moving behind my portrait which were also created using 3 different colored hearts.

#### Code that i’m proud of

##### Mouse coordinate function:
```  //mouse coordinates
textSize(18);
fill(255, 50, 30);
text("(" + mouseX + ", " + mouseY + ")", mouseX, mouseY);```
##### The face
```//shirt
noStroke();
fill(201, 73, 73);
ellipse(189+9, 410+70, 460, 372)

//collar
fill(135, 43, 43);
ellipse(189 +9, 260+70, 221, 138);

//neck
fill(215, 183, 150);
ellipse(189+9, 250+70, 191, 115);

//neck height
fill(215, 183, 150);
rect(94+9, 167+70, 190, 88);

//ear R
fill(215, 183, 150);
ellipse(318, 170, 40, 69);

//ear L
fill(215, 183, 150);
ellipse(72, 170, 40, 69);

//Hair rear
fill(0);
rect(72.5, 10, 245, 170);

noStroke();
fill(215, 183, 150);
rect(79, 10+35, 232, 186);

//jaw
noStroke();
fill(215, 183, 150);
ellipse(195, 200+30, 232, 179);

//right eye
noStroke();
fill(255);
ellipse(250, 135, 79, 41); // white eye

noStroke();
fill(66, 33, 11);
ellipse(250, 135, 40, 40); //pupil brown

noStroke();
fill(0);
ellipse(250, 135, 22, 22); //pupil black

//left eye
noStroke();
fill(255);
ellipse(132, 135, 79, 41); //white eye

noStroke();
fill(66, 33, 11);
ellipse(132, 135, 40, 40);//pupil brown

noStroke();
fill(0);
ellipse(132, 135, 22, 22); //pupil black

//beard
noStroke();

let x = 12;
let y = -120;
fill(184, 156, 128);
beginShape();
vertex(79, 178);
bezierVertex(79, 178, 178, 261, 311, 178);
bezierVertex(311, 243, 323, 325, 195, 325);
bezierVertex(78, 325, 75, 257, 79, 178);
endShape();

//Nose Arc
noFill();
stroke(171, 123, 76);
strokeWeight(7)
strokeCap(ROUND);
bezier(159, 195, 181, 218, 208, 218, 230, 195);

//Nose Tri
noStroke();
fill(171, 123, 76);
triangle(194, 115, 194, 216, 230, 200);

noStroke()
fill(188, 75, 102);
ellipse(196, 253, 94, 34);

//Lip Line
noFill()
strokeCap(ROUND);
stroke(133, 53, 72);
bezier(147, 246, 147, 246, 187, 266, 242, 246);

//Eyebrow R
noFill();
stroke(0);
strokeWeight(17);
bezier(90, 110, 105, 94, 142, 87, 166, 94);

//Eyebrow L
stroke(0);
strokeWeight(17);
bezier(222, 93, 247, 86, 283, 95, 298, 112);```

#### Reflection and improvements:

In the future, I’d like to incorporate more interactive features. One idea is to make the eyes on the portrait move along with your mouse. I’m also thinking about adding different feelings or vibes that can change how everything looks – the background and the emojis – to make the project more interesting and more fun to interact with.