Self-Portrait by Aya

Hello! I’m Aya

Concept

I love flowers and also recently I changed my hair color, that’s why I wanted to use these traits as interactive components for this self-portrait concept. I included a property that changes the color of the hair when the mouse moves, which I think is an interesting way to see the new possible future hair colors on myself beforehand! In the beginning, I was overcomplicating my task by willing to add an RGB color palette and make flower rain by trying to create an array of shapes that form one flower. However, I struggled to create a static object which will have to move later, that’s why I came to the idea of using the ready picture as a variable instead of creating flowers in the editor. As a result, this solution helped me to move on with the process. I would like to point out that this practice was a really fun and easy way to discover the scope of the possible projects that can be done in p5.js.

Code features

I am including code snippets for the interactive parts of my code:

1. adding an image to the code and using mouseX and mouseY, so it can be moved by mouse coordinates

   function preload(){
     flower=loadImage('flower.png');
   }
   function draw(){
    //moving flowery background
     image(flower,mouseX, mouseY, 50,50);
   }

2. filling the shape with variables, which are changing values when mouseMoved()

   //variables for color changing property
   let r=240;
   let g=230;
   let b=87;
   
   function draw() {
     //hair
     fill(r,g,b);
     ellipse(200,300, 200, 500);
   }
   
   //function that will change rgb code whenever mouse moves
   function mouseMoved(){
     r=r+5;
     g=g+10;
     b=b+50;
     
     //to not exceed the rgb limit, so colors will keep changing 
     if(r>255){
       r=0;
     }
     if(g>255){
       g=0;
     }
       if(b>255){
       b=0;
     }
   }

   Reflection

As I finished this self-portrait, I once again understood that I overthink a lot and also that not all concepts don’t have to be executed in the most intricate way. It would be a pleasant addition, but a simple implementation also works in the message delivery and is enough (at least for now). Nevertheless, I still would like to learn to do moving backgrounds and find out whether it will be possible to create my own object and make it move, and don’t forget about the palette where the user can choose any color haha!