Assignment 2 – “Abstract art”

My concept

My concept was to create my version of abstract art of shades of blue, with one shade of maroon to counter the other colors. As I became more accustomed to coding and following what I’ve learned during class, I tried to implement the bouncing ball element, also added the concepts of conditional statements such as loops and if statements.

I tried to find a way that I could make the dark turquoise ball leave traces of its position on the canvas, but i was not successful in that, therefore I eventually just left it as it is.

A highlight of some code that you’re particularly proud of

I am proud of this part of my code which I am proud of because I was having trouble with how to make the ball bounce back, I eventually understood the if statement and how it works, as it was initially challenging for me.

   //to make the ball bounce back the opposite side
    
 if(circleA < 0 || circleA > width) 
    speedA = speedA * -1;
     
  }

  //  to make the ball bounce back the top to bottom
  
{
    if(circleY < 0 || circleY > height) {
    speedY = speedY * -1; 
      fill(25,23,22);

 

Embedded code

// state
let circleX = 100;
let circleY = 0;
let speedX = 10;
let speedY = 8;
let circleA= 100;
let circleB=400;
let speedA= 4;
let speedB= 8;
let a = 50;



function setup() {
  createCanvas(450, 450);
}

function draw() {
  
  background(204,255,229);
  fill(90,153,153)
  rect(250,202,300);
  noFill();
  fill(210,255,255);
  rect(0,202,300);
  noStroke();
  
  {//for loop
    for (let x = 0; x < 8; x += 2) { // same as x = x + 2
     fill(229,255,204)
    circle(a * x + 25, height / 2, a, a);
    circle(width / 2, a * x + 25, a, a);
  noStroke()
    }
  }

  // Frame based on state
  fill(0,102,102) //color of circle X,Y
  circle(circleX, circleY, 50);
  fill(102,0,0); //color of circle B,A
    circle(circleB, circleA, 50);
    fill(255,202,204)

 

  
  circleX = circleX + speedX;
  circleY = circleY + speedY;
  circleA=circleA+speedA;
 


  
  //make the ball bounce from left to right
  {
    if(circleX < 0 || circleX > width) 
    speedX = speedX * -1; 
  }
    {
      //to make the ball bounce back the opposite side
     if(circleA < 0 || circleA > width) 
    speedA = speedA * -1;
     
  }

  //  to make the ball bounce back the top to bottom
  {
    if(circleY < 0 || circleY > height) {
    speedY = speedY * -1; 
      fill(25,23,22); 
    }
    {
      
     
    }
}
}

• Reflection and ideas for future work or improvements

What I think is most important at this moment is that I have to have more knowledge on how i can transform the ideas in my head into reality through coding. This assignment took more time than it should have because at first, i was partially confused about how things work and how they are going to be executed. Practicing and understanding fully how to write more precise and cohesive coding would be my goal to reach, nonetheless, i enjoyed creating this assignment.

Editable link:
https://editor.p5js.org/mka413/sketches/r-RMAvSOJ