CCLab Mini Project 6: Object Dancer

Links

AndyNeonCat: https://editor.p5js.org/AndyHyprillion/sketches/T9-crodnp

Introduction

A dancing(×) naughty(√) NEONCAT.

demo

Features

In this project, the cat will spawn at a random place on the canvas and run toward the place it wants. If it runs for a long period of time, it will stop and take a nap. You can press any key to wake it up. If your mouse is on its body, it will slow down. If you press your mouse button, the can will suddenly run towards your mouse and get caught.

Analysis

The cat can slow down automatically. I use a parameter this.count to count the passing time and use this as an index to influence its speed.

The head, the feet, and the tail are re-translated by the cos() and sin() to have the moving effect.

if (this.directionX == true) {
  this.speedX = random(20 - this.count / 100);
  this.feetY += cos(-this.count / 10) / 5;
  this.feetX += sin(-this.count / 10) / 5;
} else {
  this.speedX = random(-20 + this.count / 100);
  this.feetY += cos(this.count / 10) / 5;
  this.feetX += sin(this.count / 10) / 5;
}
if (this.directionY == true) {
  this.speedY = random(10 - this.count / 200);
} else {
  this.speedY = random(-10 + this.count / 200);
}

While the count is larger than 2000, most codes in update() will not be executed. In this case, the cat will stop.

if (this.count < 2000) {
  ...
} else if (keyIsPressed) {
  ...
}

In addition, the head is zoomed in and out using the scale(). 

I also use the scale(-1, 1) to generate the mirror effect of the cat and make it can turn itself around after hits the wall.

if (this.directionX == false) {
  scale(-1, 1);
  translate(-155, 0);
}

To make the cat can follow the mouse, I use the following codes. It can also achieve the effect of linear acceleration.

if (mouseIsPressed) {
  this.speedX = (mouseX - this.x) / 10;
  this.speedY = (mouseY - this.y) / 10;
}

Reflections

In this project, while being asked to not use any code outside the class, I have a strong feeling that the class method can really help us in several aspects. Firstly, the class can give every object a specific parameter. In this case, we don’t need to take great care of every variable of every object. It’s more like giving a rule that how the object will act which is easier to write and understand.

To cooperate with others’ code, the most challenging part of the work is that we need to consider the problems of variables. We can’t widely use the global variables because this will lead to a potential conflict and bugs in the final program.

In addition, because the whole program is in a class that is very modular, we can easily copy the code inside the class and adapt the program to anywhere else we want. There won’t exist any problem with variables since all the variables are in the class.  It’s quite “portable” and reuseable in this case.

——————————————-More Info——————————————

Special Thanks

Appreciate the inspiration from Leon on the code for time counting.

Links

AndyNeonCat: https://editor.p5js.org/AndyHyprillion/sketches/T9-crodnp