top of page

Circle Randome Movement (P5.js)

​Brief

Create a sketch that expresses non-linear movement on the screen.

Openprocessing link:

https://openprocessing.org/sketch/1276824

Problems:

- Not familiar with the coding language 

- Not good at Mathematics. Can not calculate the central angle of a circle

- One of the circles is always out of the canvas  

  

Solution:

- Watching tutorials about Random function on YouTube by Daniel Shiffman 

- Research online to find the formula calculate the central angle of a circle

- Review the coding to find the bug

  

​Process

Screen Shot 2021-12-15 at 7.41.34 PM.png

The most interesting challenge I encountered is how to make the five

circles move together from different positions. The first two circles are

easy, but when I code five circles together, The rest of the three circles got out of control. I forget "-1" represents the opposite direction at the beginning.

Screen Shot 2021-12-15 at 7.42.42 PM.png

Two circles got out of the frame of canvas and another was always shaking on the y-axis. I tried to adjust my codes a few times and found the circle of the initial position is wrong.

bottom of page