p5.js Coding Tutorial | The Making of Animation - Beautiful Trigonometry

Summary

This coding tutorial demonstrates how to create an illusion of rotating circles using the concept of oscillation. The video guides viewers through drawing a large circle and smaller white circles that independently travel in an oscillating motion, creating a complex circular pattern. It covers the basics of trigonometry for coordinate conversion, uses the 'map' function to control motion with the mouse, and introduces simple harmonic motion. The tutorial also explains how to adjust axes and circle positions for different angles, ultimately showing how to create a visually appealing, dynamic effect with a customizable number of axes.

Takeaways

• 🎨 The video demonstrates how to create an illusion of rotating circles using the concept of oscillation.
• 📐 It begins by drawing the largest circle using the 'ellipse' function with arguments for center coordinates and dimensions.
• 🔄 The origin point is translated to the center of the canvas to facilitate drawing symmetrically around the center.
• 📊 Smaller white circles are positioned using trigonometric equations to convert from polar to Cartesian coordinates.
• 🔴 A red circle is animated to move along a circular path based on the mouse's X position, mapped to a range of angles from 0 to 360 degrees.
• 🔵 Two additional white circles are drawn to follow the X and Y positions of the red circle, illustrating the concept of oscillation along a straight line.
• 📏 Axes are drawn to represent the oscillating motion, using the 'line' function with coordinates for the start and end points of each axis.
• 🌀 Additional axes are introduced, rotated by 45° increments to create a grid effect, enhancing the visual illusion of motion.
• 🔢 The number of axes and their rotation angles are controlled by variables, allowing for customization of the visual effect.
• 🎨 The color and transparency of the circles and background can be adjusted to create a desired aesthetic, such as a turquoise background with black and white circles.
• ✨ The final result is a visually appealing animation that uses simple harmonic motion to create the illusion of complex circular motion.

Q & A

What is the main concept demonstrated in the coding tutorial?

The main concept demonstrated in the tutorial is creating the illusion of rotating circles using the concept of oscillation.

What is the purpose of the 'ellipse' function in the tutorial?

The 'ellipse' function is used to draw the circles, including the largest circle and the smaller white circles that appear to be part of a bigger rotating circle.

Why is the 'translate' function used in the script?

The 'translate' function is used to move the origin point from the top left corner of the canvas to the middle point, which simplifies the centering of the circles.

What trigonometric equations are used to determine the X and Y locations of the smaller circles?

The trigonometric equations used are X = R * cos(angle) and Y = R * sin(angle), which convert from polar to Cartesian coordinates.

How does the script create the illusion of the smaller circles traveling in a circular path?

The script creates the illusion by having the smaller circles travel independently in an oscillating motion along a straight line, which is then mapped to the circular path by trigonometric functions.

What is the role of the 'map' function in the tutorial?

The 'map' function is used to map the mouse X location from 0 to width to the angle from 0 to 360 degrees, controlling the rotation of the red circle.

How does the script handle the drawing of additional circles that follow the X and Y locations of the red circle?

The script uses the same trigonometric equations to calculate the X and Y coordinates for the additional circles and then draws them at those coordinates.

What is the significance of the 'angleMode' function in the script?

The 'angleMode' function is used to set the angle to be interpreted in degrees rather than the default radians, which is more intuitive for the given context.

How does the script create multiple axes and corresponding circles?

The script uses loops and arrays to calculate shifting angles for multiple axes and then uses these angles to determine the X and Y coordinates for the circles along these axes.

What are the 'push' and 'pop' functions used for in the transformation process?

The 'push' and 'pop' functions are used to save and restore the state of the canvas before and after applying transformations like rotation, ensuring that the transformations do not affect subsequent drawings.

How does the tutorial achieve the final aesthetic of the rotating circles?

The tutorial achieves the aesthetic by adjusting the background color, circle colors, and stroke transparency, as well as incrementing the angle to create continuous motion.