Author: Ghadir Madani

Concept:

For this project I got my inspiration from Bridget Riley who is an artist specialized in optical illusion. She is known to use geometric shapes and patterns to create these optical illusions. Below are some of Bridget Riley’s artworks.

Getting the inspiration from Bridget Riley I decided to create my project from geometric shapes (triangles) and creating multiple loops to achieve this optical illusion that I came up with. I also added some interactivity that the user can use in my project where if the user pressed the mouse the project will change from black and white to orange and blue, and the transition between the two color schemes is supposed to create a surprising visual effect that aligns with the idea of shifting perception.

Highlighted Code:

if (mouseIsPressed){
   
   fill('#FF783D');
   rect(0,0,120,100);
   
   // loop for blue triangles 1
 for (let x1=0;x1 <= 100; x1 += 40) {
   for (let y1 = 0; y1 <= 90; y1 += 20) {
     let x2 = x1;
     let y2 = y1 + 20;
     let x3 = x1 + 20;
     let y3 = y1 + 10;
     
     fill('#3DC4FF');
     triangle(x1, y1, x2, y2, x3, y3); 
   }
 }
  // loop for opposite blue triangles 1
   
 for (let x1=20; x1<=100; x1 += 40){
   for (let y1=10; y1<=100; y1+=20){
     let x2=x1+20;
     let y2= y1+10;
     let x3=x1+20;
     let y3= y1-10;
     
     triangle(x1,y1,x2,y2,x3,y3);
   }
 } 
    rect(0,100,120,100);
 
  // loop for orange triangles 1
 for (let x1=0;x1 <= 100; x1 += 40) {
   for (let y1 = 100; y1 <= 190; y1 += 20) {
     let x2 = x1;
     let y2 = y1 + 20;
     let x3 = x1 + 20;
     let y3 = y1 + 10;
     
     fill('#FF783D');
     triangle(x1, y1, x2, y2, x3, y3); 
   }
 }
  // loop for opposite orange triangles 1
 for (let x1=20; x1<=100; x1 += 40){
   for (let y1=110; y1<=190; y1+=20){
     let x2=x1+20;
     let y2= y1+10;
     let x3=x1+20;
     let y3= y1-10;
     
     triangle(x1,y1,x2,y2,x3,y3);
   }
 }
 
   rect(0,200,120,100)
   // loop for blue triangles 2
 for (let x1=0;x1 <= 100; x1 += 40) {
   for (let y1 = 200; y1 <= 290; y1 += 20) {
     let x2 = x1;
     let y2 = y1 + 20;
     let x3 = x1 + 20;
     let y3 = y1 + 10;
     
     fill('#3DC4FF');
     triangle(x1, y1, x2, y2, x3, y3); 
   }
 }
  // loop for opposite blue triangles 2
 for (let x1=20; x1<=100; x1 += 40){
   for (let y1=210; y1<=300; y1+=20){
     let x2=x1+20;
     let y2= y1+10;
     let x3=x1+20;
     let y3= y1-10;
     
     triangle(x1,y1,x2,y2,x3,y3);
   }
 }
 
   rect(0,300,120,100);
 
  // loop for orange triangles 2
 for (let x1=0;x1 <= 100; x1 += 40) {
   for (let y1 = 300; y1 <= 400; y1 += 20) {
     let x2 = x1;
     let y2 = y1 + 20;
     let x3 = x1 + 20;
     let y3 = y1 + 10;
     
     fill('#FF783D');
     triangle(x1, y1, x2, y2, x3, y3); 
   }
 }
  // loop for opposite orange triangles 2
 for (let x1=20; x1<=100; x1 += 40){
   for (let y1=310; y1<=390; y1+=20){
     let x2=x1+20;
     let y2= y1+10;
     let x3=x1+20;
     let y3= y1-10;
     
     triangle(x1,y1,x2,y2,x3,y3);
   }
 }

The part of the code I’m most proud of is the one that changes the artwork’s colors when the mouse is pressed. Although it’s just a portion of the entire code, I’m particularly proud of it because the colors didn’t overlap, and the pattern turned out exactly as I had envisioned. I’m also proud of the overall coding process, as it was challenging to get the dimensions right, and I had to repeat it several times before figuring it out.

Sketch:

Future Improvements:

For the future I wish to incorporate some movement in the shapes and for example if I hover the mouse on the artwork it changes according to the placement of the mouse on it.

Concept:

The concept of my first assignment is to use JavaScript (p5) to code 2D primitive shapes to create a self-portrait. This involves carefully selecting the correct shapes and inputs (x-axis, y-axis, etc.), as well as determining how to fill shapes with color, and choosing the color and size of the shape strokes to achieve the final look.

In my self-portrait, I included two elements that are important to me. The first element is the night sky and the moon, as my favorite time of day is nighttime. The second element is the eyes, which hold significance because I have a twin (we are not biologically identical), but people often confuse us. To help others distinguish between us, I always suggest looking at our eye colors—I have greenish-grey eyes, while my twin has brown eyes.

Highlighted code:

I am proud of the final outcome I achieved, but I am especially proud of the eyes. I successfully layered different sizes of circles with various colors, perfectly centering them on top of each other. I am also proud of the eyelashes, as I was able to align them symmetrically opposite each other with the same length and size.

//eyes
fill(255);
circle(165,175,37);
circle(235,175,37);
fill('rgb(87,107,136)');
circle(165,175,27);
circle(235,175,27);
fill(0);
circle(165,175,15);
circle(235,175,15);
stroke(0);
strokeWeight(2);
line(147,170,140,165);
line(150,165,143,160);
line(153,160,146,155);
line(253,170,260,165);
line(250,165,257,160);
line(247,160,254,155);

Sketch:

Future Improvements:

In the future I would like to animate my work (example: make the eyes move), and I would like to learn how to draw curved lines (for example to learn how to draw the eyebrows).