week 3- OOP – Introduction to Interactive Media

Concept:

For this assignment, I tried incorporating OOP, arrays and functions in different ways to make it interesting. When I was first doing the assignment I wanted to keep the same theme as the last art project and go for something to do with the beach. in the beginning, I was going to make the crab move sideways while his claws open and close but I found that challenging. I still wanted to go along with the theme, so instead I took an Inspiration from a GIF I found online:

https://media.gifdb.com/crab-summer-kawaii-art-06bvdd0otf5hfr0t.gif

And from these drawings I found online:

Code Highlight:

I figured out how to make the background change after the shades hit a specific coordinate but what I found challenging was finding the right values for the rays so that it looks like the GIF. I had to do a lot of trial and error:

//draws sun rays from the crabs center

function drawSunRays() {

let centerX = width / 2;

let centerY = height - 120;

let numRays = 12; //number of rays

let angleStep = TWO_PI / numRays; //even spacing between rays

//loop through each ray

for (let i = 0; i < numRays; i++) {

//finding angle for this ray

let angle = i * angleStep;

let rayX = centerX + cos(angle) * width; //move in x direction

let rayY = centerY + sin(angle) * height; //move in y direction

stroke(sunRayColors[int(random(sunRayColors.length))]); //picks a random color

strokeWeight(random(4, 8))

line(centerX, centerY, rayX, rayY);

}

//draws sun rays from the crabs center function drawSunRays() { let centerX = width / 2; let centerY = height - 120; let numRays = 12; //number of rays let angleStep = TWO_PI / numRays; //even spacing between rays //loop through each ray for (let i = 0; i < numRays; i++) { //finding angle for this ray let angle = i * angleStep; let rayX = centerX + cos(angle) * width; //move in x direction let rayY = centerY + sin(angle) * height; //move in y direction stroke(sunRayColors[int(random(sunRayColors.length))]); //picks a random color strokeWeight(random(4, 8)) line(centerX, centerY, rayX, rayY); } }

  //draws sun rays from the crabs center
  function drawSunRays() {
    let centerX = width / 2;
    let centerY = height - 120;
    let numRays = 12; //number of rays
    let angleStep = TWO_PI / numRays; //even spacing between rays

  //loop through each ray
    for (let i = 0; i < numRays; i++) {
  //finding angle for this ray 
    let angle = i * angleStep;
    let rayX = centerX + cos(angle) * width; //move in x direction
    let rayY = centerY + sin(angle) * height; //move in y direction
    
    stroke(sunRayColors[int(random(sunRayColors.length))]); //picks a random color
    strokeWeight(random(4, 8))
    line(centerX, centerY, rayX, rayY);
  }
}

Reflection and future improvement:

It was pretty fun and challenging doing this assignment and trying to somehow incorporate randomness and arrays into making the rays. I really enjoyed trying to make my art project come close to my inspiration even though I did not fully incorporate everything. So for the future maybe I will try to make it so that another background would show up before it resets, just like the GIF, or implement interactions with the mouse.

Leave a Reply Cancel reply