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.

Outlines

00:00

🎨 Introduction to Rotating Circles Tutorial

This paragraph introduces a coding tutorial focused on creating an animation of rotating circles using the concept of oscillation. The animation consists of smaller white circles arranged in a larger circular shape, which appears to move along a circular path. However, these circles are independently oscillating in a straight line. The tutorial suggests watching a previous video on oscillation for better understanding and begins by drawing the largest circle using the 'ellipse' function, detailing the parameters for its center and size. It also explains how to move the origin point to the center of the canvas using 'translate' and sets up the initial drawing of smaller circles using trigonometric equations to determine their positions.

05:00

📐 Understanding Oscillation and Axes Drawing

The second paragraph delves into the concept of simple harmonic motion, represented by sine and cosine functions, which are used to calculate the X and Y positions of the oscillating circles. It describes how to draw additional axes that are rotated by 45° counterclockwise using the 'rotate' function and introduces the idea of shifting the coordinate system to follow the red circle's motion. The paragraph also explains the process of adjusting the equations for X and Y to ensure that the oscillating circles align correctly with the red circle's position at different angles, and how to implement multiple axes with a variable number of them controlled by 'num_axis'.

10:01

🔄 Implementing Multiple Axes and Circles Animation

This paragraph explains how to dynamically generate multiple axes based on the 'num_axis' variable using a for loop and mathematical calculations to determine the shifting angles. It details the process of converting single variables into arrays to accommodate multiple axes and circles, and how to update the drawing code to use these arrays. The importance of using 'push' and 'pop' functions for saving and restoring the canvas state after each transformation is emphasized, ensuring that the animation remains consistent and accurate. The paragraph concludes with a discussion on adjusting the number of axes and the motion of the circles, suggesting an incremental approach to their movement.

15:03

🌈 Final Touches and Beautification

The final paragraph discusses the aesthetic aspects of the animation, including changing the background color to turquoise, the main circle to black, and the stroke to a semi-transparent white for a visually pleasing effect. It also touches on the concept of oscillation, where the circles create an illusion of circular motion by traveling back and forth on a straight path. The paragraph encourages the viewer to experiment with the number of axes and appreciates the cool visual effect achieved through this coding technique.

Keywords

💡Oscillation

Oscillation refers to the repetitive motion of an object moving back and forth around an equilibrium point. In the context of the video, this concept is used to create the illusion of smaller circles moving in a circular path by actually moving them in a straight line in an oscillating manner. The script mentions using the cosine and sine functions to represent this motion, which are fundamental in describing simple harmonic motion.

💡Ellipse Function

The ellipse function is a method used in graphics programming to draw an ellipse or a circle. The video script describes using this function with four arguments: the X and Y coordinates of the center, and the width and height of the ellipse. It is fundamental in creating the base shape that the smaller circles will oscillate around.

💡Trigonometry

Trigonometry is a branch of mathematics that deals with the relationships between the sides and angles of triangles, particularly right-angled triangles. In the script, trigonometry is essential for converting polar coordinates (using angles) to Cartesian coordinates (X and Y positions), which allows the placement of the smaller circles along a circular path.

💡Polar Coordinates

Polar coordinates are a two-dimensional coordinate system in which each point is determined by a radius and an angle from a reference direction. The video uses polar coordinates to calculate the position of the smaller circles along the circular path, which is then translated into Cartesian coordinates for drawing on the canvas.

💡Cartesian Coordinates

Cartesian coordinates, also known as rectangular coordinates, are a system used to define points in a plane by a pair of numerical values. In the video, Cartesian coordinates are the end result of the conversion from polar coordinates, allowing the script to specify the exact location of the smaller circles on the canvas.

💡Map Function

In the context of the video, the map function is a method used to scale and transform a value from one range to another. It is used to map the mouse's X location to the angle of rotation for the smaller circle, creating an interactive element where the circle's motion is influenced by the viewer's mouse movement.

💡Simple Harmonic Motion

Simple harmonic motion is a type of periodic motion where the restoring force on the object is directly proportional to the displacement from the equilibrium position. The video describes the motion of the smaller circles as a form of simple harmonic motion, using the sine and cosine functions to create the oscillating effect.

💡Transformation

Transformation in graphics refers to the process of modifying the position, orientation, or shape of an object. The script discusses using transformation functions like 'translate' and 'rotate' to move the origin point and to create the illusion of circular motion by rotating and shifting the axes.

💡Cosine Function

The cosine function is a fundamental trigonometric function that relates the angle of a right-angled triangle to the ratio of the adjacent side over the hypotenuse. In the video, the cosine function is used to calculate the X position of the smaller circles as they oscillate, creating the horizontal component of their motion.

💡Sine Function

The sine function is another key trigonometric function that relates the angle of a right-angled triangle to the ratio of the opposite side over the hypotenuse. The video uses the sine function to calculate the Y position of the circles, creating the vertical component of the oscillating motion.

💡Angle Mode

In the context of the video, angle mode refers to the units used for angles in trigonometric calculations, such as degrees or radians. The script specifies using 'angle mode degrees' to ensure that the trigonometric functions work with degrees, which is more intuitive for the viewer.

Highlights

Introduction to a coding tutorial on creating rotating circles using oscillation.

Demonstration of an illusion where smaller white circles appear to move in a larger circular path but are actually oscillating independently.

Explanation of using the 'ellipse' function to draw the largest circle with specified width and height.

Use of 'translate' function to move the origin point to the center of the canvas for circle drawing.

Trigonometry rules applied to calculate the X and Y coordinates of the smaller circles on the circular path.

Introduction of 'map' function to control the motion of the smaller circle based on the mouse's X location.

Drawing additional circles to follow the X and Y coordinates of the red circle, creating a visual effect of oscillation.

Utilization of 'line' function to draw the X and Y axes for better visualization of the oscillating motion.

Concept of simple harmonic motion represented by sine and cosine functions to explain the oscillating movement.

Rotating the coordinate axes by 45° to create a new set of axes for the circles to follow.

Adjusting the equations for X and Y coordinates to align with the new rotated axes.

Use of an array to manage multiple shifting angles for different axes.

Implementation of a loop to calculate shifting angles based on the number of desired axes.

Dynamic drawing of smaller white circles based on the calculated X2 and Y2 coordinates for each axis.

Importance of 'push' and 'pop' functions in maintaining the state during transformations.

Customization of the background color and circle properties for aesthetic appeal.

Final result showcasing multiple axes and circles creating an illusion of complex motion from simple oscillation.

Transcripts

welcome to another coding tutorial and

in today's video I'm going to show you

how to make this rotating circles using

the concept of

oscillation what you may see here is a

set of smaller white circles in a shape

of a bigger Circle that is traveling in

an even bigger Circle circular path but

that is not actually what is happening

these smaller white circles are actually

traveling independently of each other in

an oscillating motion along a straight

line before I show you how it works I

have a coating Mas video on the concept

of oscillation so if you want to get a

better understanding be sure to check

that out first let's start by drawing

the biggest circle so I'm going to use a

function called ellipse and ellipse

takes in a total of four arguments the

first two are the X and Y coordinates of

the center of the circle and then the

third and the fourth are the width and

the height of the circle so I want the

circle to be in the middle of my canvas

so we're going to put width / by two and

height / two here then let's do the size

to to be 300 by

300 so actually instead of putting width

divided two and height divided by two

here I want to translate or I want to

move the origin point from the top left

corner of my canvas to the Middle Point

here so I can do that by using a

translate

function and then put in the two

arguments as the new origin point so

let's do width / two and height divid

two and once we move the origin point we

can put in 0a 0

here all right so everything is still

the same next I want to draw a smaller

Circle and this smaller circle is going

to travel along the circular path here

so we need to figure out what are the X

and Y location of this smaller Circle

and we can do that by using the rules of

trigonometry you can watch my video on

how we convert from Polar coordinates to

cartisian coordinates but essentially we

need two equations and these two

equations are X = = to R * cosine of

angle and y = r * s of angle so let's us

also

declare X and Y variables as well as

angle let's set angle to zero and also

how about we

also do radius equals to 150 and then

instead of putting 300 here let's do R *

2 and R * 2 and do not forget to draw

this small small circle so let's do it

at X and Y and then give it a size of

20 a few tweaks so I'm going to put this

after and then I'm going to not color

the big circle and I want the smaller

Circle to be the color

red and also I am going to use the angle

mode degrees so I'm going to also write

a function called angle mode and put in

degrees here so right now this red

circle is not traveling anywhere it's a

stuck at angle equals to zero so let's

move it we're going to move it based on

the location of the mouse we can map

using the equation called map and we're

going to map what we're going to map the

mouse X location from 0 to

width to the degrees of 0 to

360 all right so now it's traveling in

the clockwise Direction along this

circular path now I'm going to draw two

more circles and these two cires

one is going to follow the X location of

the red circle and the other one is

going to follow the Y location of the

red circle so we can do that

by calling the UST function again and

instead of putting X comma y we're going

to do X comma 0 Let's do the same size

then the second one is going to be 0

comma y same size and let's give it a

color how about

white all right so right now one is

following the X location of the red

circle and the other one is following

the Y location of the red circle you can

see that it's traveling what along a

straight line right along the X and Y

AIS how about we draw the axis out as

well so we can use a function called

line and line takes in a total of four

arguments the X and Y coordinates of the

first point and the x and y coordinate

of of the second point where these two

points are connected to make a line so

let's do the xaxis first so it's going

to be R comma 0 and R comma

0 all right and then another one will be

0 comma R and0 comma

R and what these two white circles are

doing is that it is traveling in an

oscillating motion right around a center

point which is the origin point

and this oscillating motion is called a

simple harmonic motion which can be

represented by the sign and the cosine

function which is exactly what these two

locations are right because X = to R *

cosine of angle and y = to R Time s of

angle what we're going to do next is

that we're going to draw another set of

X and Y AIS but we're going to rotate it

counterclockwise by

45° so let's copy these two lines of

code

and use a rotate function and we're

going to rotate by 45° counterclockwise

and that's why I need to put -45 here

all right so let's give it a different

color so we can see so let's

do

blue for the Y AIS and green for the x-

axis

and then we need to also reset it back

to black here all right let's try

this and I'm also going to comment this

out first all right so now we shift so

if we don't shift it at all right

so we can see that the x axis is blue

and then the Y AIS is green and now we

shift it by

45° now what if we want to draw two more

of these white circles have them travel

along this new axis but still follow the

location of the red circle what if we

start by declaring two more variables

the new X and Y coordinates so let's do

X2 equals to and we're going to just set

it equals to the same equation first and

let's see what happens so Y2 = to R * s

of

angle and then we're going to draw it

out as well so we're going to draw the

exact same thing as

this but we're going to replace it by X2

and Y2 and then let's give it the same

color of

white

angle all right so and then we're going

to have it

move okay so this is not exactly what we

want right because because right now

everything is shifted by 45° meaning

that at angle equals to Z the x

coordinate is at equals to one right and

then the y coordinate is equals to zero

which is exactly the same thing as what

it is on the main axis so we need to

change something in these two equations

such

that the circles are following the X and

Y locations of the red circle right so

what we want is that let's change this

to 45 and comment this out again so at

angle equals to 45 the locations of

these two circles need to be shifted a

little bit right so we want actually

this circle to be equals to one and we

want the circle to be equals to zero

what that means is in terms of X and Y

as a function of angle we want Y at

angle equal to 45 to have a value of 1

and X at angle equal to 45 to have a

value of zero if you look at the sign

and the cosine graphs here as a function

of angle y = 1 and X = to 0 when angle

equals to 90 so we need to tweak these

two equations such that inside the

parentheses it equals to 90 when we give

an argument of 45 and we can do that by

adding the shifting angle or in this

case 45 inside the parentheses so now y

of angle equals to S of angle + 45 and X

of angle equals to cosine of angle + 45

so let's first declare a new variable

let's call it shifting

angle and set it to 45 and then our

angle will be at zero right and then we

need to add

shifting angle

here all right

so

all right so at angle equals to 45 right

and this is what

happens now we can start adding more

axis so let's first we don't need this

green and blue stroke colors anymore we

want everything to be black so instead

of declaring the shifting angle as a

variable that is set to 45 we're going

to make it an

array so we're going to change it to to

an array and then we're going to declare

another variable called num axis and

this is going to be a variable that

controls the number of axis that we want

so let's start with two so two will be

what we have right now right so the main

axis and then another one that is

shifted

45° and then in the setup function we're

going to calculate the shifting angles

based on the number of axis that we want

so let's use a four Loop so four let IAL

z i less than num of axis

i++ and then the shifting angle of I

will be equals to so the equation that

we're going to use is going to be I * 90

/ num of axis so let's try to understand

this so if we only have this one axis

which is the main axis I will be equals

to 0 right so 0 * 90 / number of axes

will be equals to 0 meaning that we're

not shifting it anywhere and now we want

the second axis to be shifted 45° right

so if I equal to 1 and then 1 / 2 right

is 1 and2 1/2 * 90 is 45 so now that we

changed the shifting angle from a

variable to an array we also need to

change the X2 and Y2 variables to an

array as well so let's start by

declaring X2 and Y 2 as an

array and we are going to use the four

loop as well to populate the X2 and Y2

array so let's do for let I equal to

zero I less than the num

axis

i++ and then we're going to copy these

two lines of

code in here it's going to be X2 of I =

to R * cosine of angle plus shifting

angle of I right and then Y 2 of I = to

R * s of angle plus shifting angle of i

as well and now we're going to draw the

two smaller white circles based on the

X2 and Y2

location

so we have it here already so how about

we just first we need to move this down

here

and then we want to copy the set of

code and then put it in

here so what do we have here so now we

have calculated the X2 and Y2 locations

of the smaller white circles we want to

rotate it by negative of the shifting

angle of I right and then we also need

to put X2 of I here and then Y 2 of I

let's try

this all right so now it's still the

same we can clean this up a little bit

more too because right now we also

have this set of codes that draw the

main axis and the main two smaller

circles which now it's just a repeated

of what we have in here so let's delete

this all right

and now all we have to do is that we

need to change the number of the axis

here so let's do

three ooh what's going on

here all right don't freak out the thing

that is going on here is that we forgot

to put in two functions that are very

important when we do transformation

which is push and pop so let's put it

here

push and pop and essentially the push

and pop function push save the

transformation and then pop returns it

back to the

original state that we are in and we

need to put these two functions every

time we call a new Circle because we

want to save the new transformation

which is the rotating of Shifting angle

right and then we want to return it back

before we rotate it again so let's try

this all

righty and now all we have to do is we

just play around with the number of axis

that we want

okay and so now instead of having it

mapped to our Mouse location what if we

just increment it by

one all

right the last piece which is the fun

piece is how do we beautify this I am

going to change the color of my

background to this turquoise color and

then I'm going to change the color of

my main Circle to be black and then how

about let's give the

stroke white color and let's do

transparency to be 100 so it's not very

very bright and yeah just do that and

this is just like the original image

that I had shown

you um and then let's do let's give it

just a huge number of axes here and

there you go and this is just using the

concept of oscillation where the circles

just travel back and forth on a straight

path and it gives this illusion that

it's travel in a circle motion which is

really cool so give it a try