LOGO Animation with p5.js

LOGO (Click! to try out)

On September 10, 2019 Apple showcased new Apple products. I was fascinated by their introductory motion graphic. How they implemented concepts and history through animated logo was very interesting and beautiful. It gave a characteristics, personality and energy to the Logo, and brand as a whole.

I always wanted to give my static Logo a movement and personality because I tried to represent and depict every side of me into the Logo. Especially as interactive designer (creative technologist), I always wanted to make an interactive logo that changes overtime.

This is an update of my last assignment. First of all, There was a big improvement on its look.

I made Neon Sunglasses to follow the cursor so that user can interact with Logo.

And I animated the background and nose to show some energy.

var chaser = {
  x: 75,
  y: 35
};

  // neon sunglasses
  push();
  fill(57, 255, 20, 150);
  if (chaser.x < mouseX) {
    chaser.x += 5;
  }

  if (chaser.x > mouseX) {
    chaser.x -= 5;
  }

  if (chaser.y < mouseY) {
    chaser.y += 5;
  }

  if (chaser.y > mouseY) {
    chaser.y -= 5;
  }

  textSize(20);
  rect(chaser.x - 77.5, chaser.y - 30, 160, 65, 25);
  text('Put him on a sunglasses then CLICK!', 10, 30)

  pop();

I also made color of the background to change each time user generates, so that the logo can have many different feelings. His eyes move as a default in order to give him some personality. My favorite part of this assignment is background. I generated 20 circles that wiggles when user press the mouse, and it came out beautifully.

  //background decoration (soundwave)
  push();
  noFill();
  strokeWeight(1);
  stroke(255, 255, 255);

  for (var wave = 0; wave < 20; wave++) {

    //animate the bg decor
    if (mouseIsPressed) {
      ellipse(300 + random(0, 15), 300 + random(0, 15), 20 + 40 * wave, 20 + 40 * wave);
    } else {
      ellipse(300, 300, 20 + 40 * wave, 20 + 40 * wave);
    }
  }
  pop();

I had some conflict with a museIsPressed(); function. I wanted to make eyes to follow cursor but I could not find a way to make eyeball stay in a boundary.

also whenever I release the mouse, eyes are in a wrong place and I could not figure out why. Sometime, it disappears.

 if (mouseIsPressed) {
    circle(260, 300, 25);
    circle(340, 300, 25);
  } else {
    if (ballX >= 320) {
      ballSpeedX = -ballSpeedX;
    }

    // bottom
    if (ballY >= 313) {
      ballSpeedY = -ballSpeedY;
    }

    // left
    if (ballX <= 270) {
      ballSpeedX = -ballSpeedX;
    }

    // top
    if (ballY <= 280) {
      ballSpeedY = -ballSpeedY;
    }
    strokeWeight(2);
    fill(0);
    circle(ballX - 37, ballY, 25);
    circle(ballX + 37, ballY, 25);

  }
  pop();