Author: Ayazhan Gabitkyzy

Inspiration:

I was inspired by the chorus of Halsey’s “Could have been me”(https://www.youtube.com/watch?v=fowcj6Swn84) song which follows this:

I wanna taste love
I wanna feel pride and shame
I don’t wanna take my time
I don’t wanna waste one night
I wanna live better days

I decided to play around with lyrics and randomly generate endings for the phrases “I wanna…” and “I don’t wanna…”

So the lyrics will be generated in this form:

I wanna VERB1 WORD1

I don’t wanna VERB2 WORD2

Code

When the user clicks on the mouse, either phrase with “I wanna” or “I don’t wanna” randomly appears on the screen. The code for that is:

function mouseClicked() {
  let randnumber=int(random(1,3));
  if (randnumber==1){
    text(message,mouseX,mouseY);
  }
  else if(randnumber==2){
    text(message2,mouseX,mouseY);
  }

My CSV file has this list of words:

feel,love,cross,door
dream,future,waste,night
live,happiness,close,Disney
see,sunshine,limit,life
win,butterfly,hate,sky

Code to access each of the words and randomly generate the phrase:

strings = loadStrings("words.csv");
let singleRow=[];


  message = "I wanna " ;
  singleRow = split(strings[int (random(strings.length))], ',');
  message += singleRow[VERB1];
  message+=" ";
  singleRow = split(strings[int (random(strings.length))], ',');
  message += singleRow[WORD1];

Future improvements

This was a great way to learn important components for the midterm game program, as users need instructions. I think that taking data from global dictionaries or common lists would produce interesting results.  Also, playing around with the text on the screen will be so sophisticated upgrade. For example, letters move when the mouse hovers the word, changes the color, or adds other effects.

 

Inspiration:

I made a generative artwork using a Ring class created when the user clicks on the mouse. I was inspired by the form and  color distribution of human eye and wanted to recreate similar pattern to that:

I also wanted to create a hypnotic effect when we look with our eyes at the “Eye”. That’s why I tried to move the rings into and out of the center.

Example of one of the patterns:

Code:

The ring is created using the loop of ellipses which is then rotated:

for (let i = 0; i < 30; i++) {
      ellipse(this.x, this.y, this.flowerWidth, this.flowerHeight);
      rotate(PI/15);

  }

Function to create rings when mouse is clicked:

function mouseClicked() {

  
  //random assignment of speed and sizes
  let xSpeed = map(mouseX, 0, height, gXSpeedMax, -gXSpeedMax);
  let ySpeed = map(mouseY, 0, height, gYSpeedMax, -gYSpeedMax);
  let ringWidth = random(minSize, maxSize);
  let ringHeight = random(minSize, maxSize);
  
  //create new ring based on the mouse position
  let newRing = new Ring(
      mouseX,
      mouseY,
      ringWidth,
      ringHeight,
      xSpeed,
      ySpeed

    
  );
  
  // Add it to the global array of all rings
  ringArray.push(newRing);
}

It allows the ellipses to form into a circle and then form a flower necklace. When user clicks on the upper part of the canvas, rings fly from the center,when bottom part is clicked, rings fly to center and go outwards. Code for the movements of the rings:

let xSpeed = random(-gXSpeedMax, gXSpeedMax);
let ySpeed = random(-gYSpeedMax, gYSpeedMax);   

   this.x += this.xSpeed;
   this.y += this.ySpeed;

Reflections

Working with the classes allowed me to better understand how to optimize the code and create more advanced actions for my art. For the fututre improvements, rings movement when mouse is clicked kinda works randomly, so it would be better if the action had specific order. Also, it would be cool to recreate exact picture of an eye like in the reference by learning how to draw that type of interesting curves and creating ombre effect.

 

Concept

For this project, I was inspired by figure skating ice, where many patterns are left by the blades of skates from jumps, spirals, and spins. I decided to make an art pattern that resembles the after-spin effect like in this video:https://www.youtube.com/watch?v=ss_3secVE_c

I also wanted to make an effect of ice flakes during the interaction of blade and ice, so there are mini circles going around.

For the execution of the code, I used the tutorial for making spirals(https://www.youtube.com/watch?v=wSNYOYlRsBE) and made loops out of them.

Code Snippets

Code for spiral loops

var angle  = 0.0;
var offset = 10;
var scalar = 1;
var speed = 0.01;   

function draw() {
  for(let i=10;i<=width; i=i+50){
    stroke(153,204,255);
    var x = offset + cos(angle) * scalar;
    var y = offset + sin(angle) * scalar;
    ellipse(x + i, y+ i,1,1);
    angle += speed;
    scalar += speed;  
  }
}

I also was playing with bezier and spiral formula, but combining them together went chaotic, so I only left the formula and a funny string tornado appeared:

Reflections

For future improvements, I would like to add user interactions where users could point out where the spiral starts. Also, I want to learn to work with frames for more fun animations. I also understood that a lot of animations require the usage of complex formulas and trying iterating code again and again. That’s why, I really want to untangle this complex process.

 

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!