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()
    }

The Illusion

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);
  
  //head
  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);

Sketch

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.

Casey Reas stands out not only for his artistic prowess but also for his extraordinary creativity. His work serves as a testament to his ability to push the boundaries of traditional artistic expressions and explore the intricate interplay between chance and order. From my perspective, machines are an ideal platform for unraveling the complex relationship between these two seemingly opposing forces.

Reas’ examples vividly illustrate how chance and order coexist harmoniously within the realm of code and machines. His artistry delves into the inner workings of algorithms, a domain often associated with rigid orderliness. Yet, within this structured framework, he manages to unleash the untamed power of randomness. Through the careful orchestration of algorithms, Reas reveals hidden patterns within chaos, offering a glimpse into the hidden harmony that underlies our seemingly chaotic world.

In conclusion, Casey Reas’ video presentations and artistic endeavors provide not only inspiring but also thought-provoking insights into the dynamic interplay of chance, order, and technology within the realm of art. His work encourages us to reconsider our preconceived notions about chaos and structure, inviting us to explore the fascinating territory where they converge. Through Reas’ pioneering work, we gain a deeper appreciation for the intricate dance between chance and order that shapes our world and enriches our understanding of art and creativity.