p5.js Coding Tutorial | Optical Illusion with Sound 🎵
Summary
TLDRIn this coding tutorial, viewers are guided through creating an interactive animation featuring circles oscillating around a center point, accompanied by sound. The tutorial leverages object-oriented programming, incorporating trigonometry for the movement and sound playback when circles pass through the center. It progresses from a single circle to multiple rings, synchronizing visual motion with a soundtrack generated from preloaded MP3 files. The final touch includes adjusting the animation's aesthetics, such as background color and circle transparency, to enhance the visual experience.
Takeaways
- 🎨 The tutorial focuses on creating an interactive animation with sound using object-oriented programming in JavaScript.
- 🔄 It builds upon a previous tutorial where circles oscillate around a central point, adding complexity to the existing concept.
- 🎵 The new feature involves circles playing a note when they pass through a center point, enhancing the visual experience with auditory elements.
- 📊 The tutorial demonstrates the use of trigonometry to create circular motion, specifically using the equations x = r * cos(angle) and y = r * sin(angle).
- 🖥️ The origin point of the canvas is translated to the center to facilitate drawing and animation, making the coding process more intuitive.
- 🎚️ The angle of the circles' movement is mapped to the mouse's x-location, creating an interactive element where user input influences the animation.
- 🔁 The tutorial introduces the concept of 'push' and 'pop' functions in transformations, essential for managing the canvas state during animations.
- 🎹 Sound is integrated into the animation by preloading MP3 files and playing them based on the circles' position, creating a dynamic and engaging user experience.
- 🔢 The tutorial addresses potential issues like buffer zones and modulo operations to ensure smooth playback and prevent errors when the number of circles exceeds available sound files.
- 🌐 It concludes with tips on adjusting parameters like buffer size and angle velocity to fine-tune the animation and sound synchronization for different numbers of circles and sound files.
Q & A
What is the main focus of today's coding tutorial?
-The main focus of the tutorial is to create an interesting soundtrack by experimenting with sound and movement, specifically by animating circles that play notes as they pass through a center point.
What programming concept is used in this tutorial to avoid code duplication?
-The tutorial uses object-oriented programming and specifically classes to avoid code duplication, encapsulating the behavior and properties of the moving circles within a 'Ball' class.
How does the tutorial achieve the oscillating motion of the circles?
-The oscillating motion is achieved by using trigonometric equations to calculate the x and y coordinates of the circles and adjusting their positions relative to a central point on the canvas.
What is the purpose of the 'translate' function used in the tutorial?
-The 'translate' function is used to change the origin point for drawing, moving it from the top-left corner to the center of the canvas, which facilitates drawing circles around a central point.
How does the tutorial synchronize the visual movement of circles with sound?
-The tutorial synchronizes the visual movement with sound by playing a note each time a circle passes through the center point, which is detected using a collision detection method within the 'Ball' class.
What is the significance of the 'angle' and 'shifting angle' variables in the code?
-The 'angle' variable determines the current position of the circle along its path, while the 'shifting angle' variable offsets this position to create multiple circles that move in phase but start at different points, contributing to the complexity of the animation and sound pattern.
How does the tutorial handle the preloading of multiple sound files?
-The tutorial handles the preloading of multiple sound files by using a for loop within the 'preload' function to load each sound file into an array called 'sound', with each file's name dynamically constructed using the 'assets' array.
What is the role of the 'push' and 'pop' functions in the transformation of the circles' positions?
-The 'push' and 'pop' functions save and restore the transformation state of the canvas, allowing for multiple rotations to be applied without affecting subsequent drawings, which is crucial for creating the illusion of circular motion.
How does the tutorial adjust the sound playback to accommodate a varying number of circles?
-The tutorial adjusts sound playback by using the modulo operator to循环播放音符,确保即使圆圈的数量超过音文件的数量,也能够循环使用现有的音文件,避免出现索引越界的错误。
What visual effects are applied to enhance the final presentation of the animation?
-The tutorial applies a black background with a transparency effect, sets the strokes of the circles to white with a transparency of 50%, and adjusts the circles' size to create a visually appealing final presentation.
Outlines
🎵 Introduction to Sound and Movement Programming
The tutorial begins by introducing a coding project that combines sound and movement to create an intriguing soundtrack. The presenter references a previous video where circles oscillate around a central point and announces a faster-paced approach using object-oriented programming. The aim is to enhance the previous project by having circles play notes as they pass through a center point and to create multiple rings of circles for a richer audiovisual effect. The first step is to set up the animation by drawing a central circle on the canvas, translating the origin point to the center, and then drawing another smaller circle that will move along a circular path using trigonometric equations.
🔄 Creating Oscillating Motion with Trigonometry
The paragraph explains how to create an oscillating motion for the circles using trigonometry. The presenter sets the angle to zero and uses the cosine function to determine the x-coordinate of the moving circle. The y-coordinate is manipulated to create the illusion of oscillation. The tutorial then progresses to setting up the mouse-controlled angle, which dictates the position of the circle along the path. The presenter also demonstrates how to create additional circles that follow the x and y coordinates of the primary circle, giving the impression of circular motion. The importance of using 'push' and 'pop' functions for transformations is highlighted to ensure that the transformations do not interfere with one another.
🎚️ Refactoring Code with Object-Oriented Programming
The focus shifts to refactoring the code using object-oriented programming principles. The presenter creates a 'ball' class in a new JavaScript file, 'ball.js', to avoid duplicating code. The class includes properties for the angle and a shifting angle, which is passed as a parameter. Methods for displaying the ball and updating its position are defined. The tutorial then shows how to integrate this new file into the main program and how to create ball objects with different shifting angles to produce the desired motion. The concept of arrays is introduced to manage multiple ball objects, and a for loop is used to create and update these objects.
🎶 Integrating Sound with the Animation
The paragraph delves into adding sound to the animation. The presenter guides through the process of uploading MP3 files into an 'assets' folder and using the 'preload' function to load these sound files. A method to play the sound files is demonstrated, and the concept of mapping each ball to a specific sound is introduced. The tutorial then shows how to preload all the sound files using a for loop and how to play a sound when a ball reaches the center point. The presenter also discusses adjusting the buffer to ensure the sound plays correctly and introduces the use of 'angle velocity' to control the speed of the balls' movement.
🔁 Handling Multiple Sound Files and Balls
The tutorial addresses the challenge of having more balls than sound files by using the modulo operator to循环回声文件数组,确保每个球都能播放声音。The presenter also shows how to adjust the buffer and angle velocity to fine-tune the sound playback. The paragraph concludes with a demonstration of how to create multiple rings of balls with different starting angles, using nested for loops and 2D arrays to manage the balls in each ring.
🖌️ Final Touches: Aesthetic Enhancements
The final paragraph focuses on the visual enhancements to the project. The presenter sets the background to black with a blur effect and changes the stroke color of the circles to white with a semi-transparent effect. The size of the circles is adjusted, and the tutorial concludes with a playful exploration of different configurations of loops and balls, demonstrating the creative potential of the project. The presenter encourages viewers to experiment with various settings to produce unique sounds and visuals.
Mindmap
Keywords
💡Object Oriented Programming
💡Trigonometry
💡Oscillating Motion
💡Canvas
💡Preload
💡Sound Assets
💡Collision Detection
💡Modulo Operation
💡2D Array
💡Transparency
Highlights
Introduction to creating an interesting track with sound and movement.
Tutorial builds upon previous work with oscillating circles around a center point.
Use of object-oriented programming to streamline the coding process.
Explanation of creating multiple rings of circles for a soundtrack.
Demonstration of drawing a circle in the middle of the canvas using translate function.
Utilization of trigonometry for circular motion and oscillation.
Setting up the angle to oscillate based on the mouse location.
Adjusting the angle mode to degrees for accurate motion.
Creating the illusion of circular motion with push and pop transformations.
Encapsulating the animation logic into a class for cleaner code.
Introduction of a method to update the angle for oscillation.
Creating an array of balls to manage multiple circles efficiently.
Integration of sound assets into the program using preload function.
Method to play a sound when a circle passes through the center point.
Adjusting the buffer to ensure accurate collision detection for sound playback.
Managing a larger number of balls with a limited number of sound files using modulo.
Creating multiple rings with different starting angles for a richer visual effect.
Use of 2D arrays to manage multiple rings of circles.
Final touches to the visual appearance with background and stroke settings.
Encouragement to experiment with different configurations for unique results.
Transcripts
welcome to another coding tutorial and
in today's video we'll be experimenting
with some sound and movement to create
this interesting track that you're
hearing right
now this tutorial is an add-on to a
video that I did in the past where a
bunch of circles are moving in an
oscillating motion which is a movement
back and forth around a center point
this time around I'll be going a little
bit faster and we'll also be approaching
it a little bit differently Cally we'll
be using object oriented programming so
I recommend you checking out the other
video as well if you want a little bit
more details the add-on that we're going
to do is that one we're going to have a
circle play a note once it passes
through a center point and then two
instead of creating this one ring of
circles we're going to be creating
multiples to create interesting
soundtrack why don't we start by
creating the animation so we're going to
draw a circle in the middle of the
canvas I'm going to actually translate
the origin points from the top left
corner here to the middle of the canvas
and we can do that using a translate
function and and then provide the two
arguments of where you want to move the
origin to so we're going to put width /
two and height / two and by doing this
now drawing on the lips I can just put
in the new origin at 0 comma 0 and now
it's going to be in the middle point and
I want the radius to be of the variable
R which I'm going to declare right now
and set it to
150 all right and now how about we also
do do no
fill now how about we draw another
Circle a smaller one and have it be
traveling on this circular path so we
need to use trigonometry specifically
the equation x = to R * cosine of angle
and y = r * s of anle then let's set
anle to be equal to zero then I'm going
to draw this ellipse let's color it red
and and let's draw it at The X and Y
location here and give it a size of
20 all right then now I'm going to also
actually set the angle map it to my
mouse location between zero and the
width and between the angle 0 and
360° and because I'm using the degrees
mode I also need to change the angle
mode to degrees and I can do that just
by calling this function right here and
provide the argument
degrees all right so now as I move my
mouse the circle travels along this
circular
path perfect but we don't actually want
the circle to travel along the circular
path we actually want it to oscillate
around a center point which is the
origin so what we can do
basically we just draw another ellipse
at the same X location but we want the Y
to be at zero actually and let's give it
the same size I'm going to fill it with
the color
white and as you can see here it is
essentially just
following the x coordinate of the red
circle
right perfect how about we also draw
draw a line that show the path that it
is traveling in so a line function takes
in four arguments the two coordinates of
the two points that ones connect become
a line so it's going to be r z and
r0 now let's draw another Circle that
actually travels vertically so what we
can do is
basically how about I stop this from
moving first and then I'm going to draw
out the same thing but this time around
we want to actually rotate the axis by a
certain degree so how about we rotate it
counterclockwise by
90° so if I were to move
this so this will not actually give us
the illusion that we want of the white
circles traveling in a circular path to
do that the white circles actually needs
to follow the X and Y coordinates of
this red circle here so what we need to
do actually is that we need to give
another variable and add it inside this
equation here so I'm going to actually
declare a new variable called X2 and it
will be R * cosine of angle plus
shifting angle and basically this
shifting angle it needs to be shifted
the same amount as a rotation so how
about we set let
shifting ankle equals to 90 and please
notice that this is positive but this
one the rotation of the axis is negative
all right so if we do
this then
now oh we also need to set this to
X2 and now the white circles are
tracking the X and Y location of the red
circles so how about we do two more to
get that circular motion illusion so I'm
going to actually declare this as
two and then how about we do two more
and let's set it
at in between so 45 and
135 and then I'm just going to copy
this to more times and then change this
to three three three this one to
four four and
four all right and also in here we need
it to be shifting angle of two
right this one is of three and then this
one is of four all right let's
run okay and then this is not what we
want what do we
miss we missed two very important
functions when do any types of
Transformations which are push and pop
and push basically saves the
transformation specifically the rotation
here of negative shifting angle and then
pop returns it back to the original
setting before we call the next rotation
or the next transformation so that's
what we need to put
in before and after each transformation
so push and pop
push and pop here and then the last one
here and this should fix
it all right so
now the white circles are
moving it seems like they're moving in a
circular motion great why don't we put
this inside a class first so that we
don't need to copy and paste the set of
cod code multiple times so let's come to
this Arrow here click the plus sign and
then click create file we're going to
call this file ball.
JS and then before we start writing this
class let's go to
index.html then come to this line of
code let's copy and
paste change the name from sketch to the
name of the new file that you just
created in my case it's ball. JS and
this is how you integrate a new
Javascript file into the program all
right now let's go back to ball. JS to
write a class we start with the word
class and then I'm going to call this
class ball and then inside the
Constructor function what do we need
let's go
back
so we can keep the radius AS Global so
we don't need that we want angle and we
want shifting angle all right so let's
start with these two so how about we set
angle to be equal to zero but then we
set shifting angle as a parameter
here all right and
then now inside here we don't really
need this red circle anymore so I'm
going to actually delete
it and what we want is we want the set
of codes right and this is going to
actually be in another method let's call
it display
we also want to set X as a variable here
so this.x = to R time cosine of this do
anle and then this do shifting angle
right and then this also has to be this
dot all right and then how about we do
one more method called update and then
we're actually going to change the angle
or increment the angle by how about 1°
at a time whenever we call update all
right let's start with that so let's go
back now we can delete all of
this and we want to still keep the
biggest circle which is up here and we
can delete this as well how we just
start by creating just one ball object
so that b to be equals to a new ball and
we need what we need just the shifting
angle right so how about we set the
shifting angle to be
zero so it is actually just going to be
at this point here and then we're going
to call update and
display all right and then now the
circle is moving in an oscillating
motion around a Center Point great so
how about we create more of them so
instead I'm going to create an array and
and let's call it ball and then also
create another variable called num how
about we set num to just
two then to create new objects we're
going to use a for Loop that goes from I
equal Z to I less than num
i++ and then we're going to Now set
balls of I to be equals to a new ball
object but here we need to put in the
new shifting angle right so let's see
how we would calculate
that so if we have just one ball object
the shifting angle will be zero right
but if we have two we want the shifting
angle to be at 90° right just like what
we did previously we want to rotate the
axis 90° to the left so what we need to
do is that we need to use an equation
180 / num * I so this way if num equal 2
180 / 2 is 90 * 0 is 0 and then * 1 is
90 so that's exactly what we want then
we can just put in shifting angle in
here and then now we just need the same
for Loop to
call these two
methods so it's going to be balls of I
and here as well
all right and then now how about we
change it to
four how but we change it to
10 perfect now that we have the
animation done why don't we start to
figure out how to add on some sound
let's come to this Arrow here click the
plus sign and then click create folder
we're going to be putting all of the MP3
files into this folder right here I'm
going to call it
assets and then you need to click cck
this Arrow here click upload file and
then you're going to be drag and
dropping your MP3 files in here then
once your fil is uploaded you can just
click this and as you can see here I
have a total of 12 MP3 files and this is
off a chromatic scale and a chromatic
scale is essentially the 12 notes in one
octave on a piano key then now what we
want to do is we want to how about we
label this first this is
ball variables and then I'm going to Now
set variables for our sound assets I'm
going to start by actually just
uploading One MP3 file just to show you
how to upload so how about we set this
variable called asset and then we want
to use a function called preload and
then this is going to allow you to
preload your sound files onto the
program before you start calling the
other functions all right so what we
want to do is that we want to set the
variable asset set to another function
called load sound and then you want to
put in the location of the sound file
that you have so in our case it's in a
folder called assets and then let's just
do this ash. MP3 file so you need to put
in the quotation mark put in the name of
your folder and then backs slash and
then a sharp.
MP3 let's click
run all right still working and then now
I'm going to show you how to play this
file all you need to do is put in the
name of your variable here put in Dot
and then play the function
play and it is as easy as that okay so
now that we know how to preload one file
how about we do it for all of them
instead of setting just a variable
called asset I'm going to call it assets
so now we have an array of sound files
that are arranged in a specific way and
this is just how I choose to do it but
you can actually play around with how
you want to arrange these files all
right and now inside preload what you
need to do is that you need to write a
for Loop that goes from I equal to Z to
I less than assets.
length i++
and then we're going to be doing the
same command here but instead of a
variable here it's going to be a new
array let's call it sound and then let's
do sound of I to be equal to load sound
of assets
plus assets of I let's click run the
loading text here tells me that it's not
pre-loading properly and I'm not
actually sure why but I found a way to
fix it and that is by instead of putting
the names like this I just change it to
this way of putting in the file names so
instead of doing assets back slash plus
this we can just
do this so if you actually know why this
error happens please comment down below
but if we do this first we need to also
comment this out let's click run and now
it seems to be pre-load in
properly so what we want to do now is
that we want to go back
to ball. JS and we want to add in this.
note as a new
parameter and then we're going to create
a new method let's call it
Collis and essentially this method is
going to tell us whether the ball hits
the Middle Point
so how about we just do a conditional
statement that says if this.x is equals
to a specific point x so this is going
to be our parameter then return true
else return false okay and then inside
update here we want to call this method
and to call a method inside a class all
you need to do is put in the word this
Dot and then the name of the class and
then we want to put in zero right which
is the middle
point but this actually is going to be a
conditional statement that says if this.
Collision of zero equals to true then we
want to play the
note
and yeah that's it so let's go back to
sketch. JS now we need to add a new
argument inside our object here which is
going to be
sound of
I and let's delete this all right so
let's
play hm but it's not playing why is that
so let's go back to ball. JZ
and let's print this.x and X
so as you can see here the location of
the ball actually moves between negative
to positive so it actually hits zero but
it doesn't hit zero exactly and that's
why it's really hard to get this do X to
be equals to X so how about we add some
buffer to make sure that once it hits
but if it's off by a little bit then
still return true so what we can do is
we can add
actually I'm going to set it as a
variable called
buffer and then add it as a new
parameter
here so if this.x is greater or equals
to x minus buffer and this. X is less
than or equals to X+ this.
buffer so this has to be this. buffer
all right and
then now if we go back to sketch. JS we
need to add buffer how about we set
buffer at
one is that too small let's
try seems to be
okay so I really think that it also
depends on the rate at which you move
the circle so why don't we add that as
an argument too or a parameter so how
about I add one more angle V for angle
velocity and then just set angle V to be
equals to this and then instead of
incrementing by one here we're going to
set this do angle V here then we're
going to come back here and actually
instead of putting one here I'm going to
set it as buffer a variable buffer an
angle V and then I'm going to come up
here and then set buffer to one and then
how about angle
v21 as well so we can adjust it easily
here all right then how about we start
[Music]
smaller you see that it doesn't play all
of
them so maybe you need to to increase
the
buffer but you can see that it's kind of
played the note twice so this is where
you want to adjust it a little bit how
about
1.5 to get the final result that you
want you can address the buffer and the
angle V based on the number of balls
that you have to create the sound that
you want but what if I want to increase
the number of balls to be greater than
the number of sound files that I have
let's say say I have 13 balls
here it gives me an error and that is
because why it is because there is no
sound of index 13 right so what we can
do is that we can Loop it back we can do
that quite easily by using an expression
called modulo and basically modulo is
this percentage signs where you want to
do I mod and then the length of your
array which is sound. length which is 12
and that is because this expression here
Returns the remainder between these two
Division I and sound. length so let's
say that you have I = to 0 to 12 when
you divide that by the length which is
12 you get to return number of between 0
and 11 but once it is more than the
sound length let's say 13 right so 13
mod sound. length which is 13 / 12 you
get a remainder of one we will always
get an index that is between the length
of the sound array right so let's try
[Music]
this okay so this is how we fix this
issue before we move to the second
add-on I want to change the number back
to 12 and then how about we set ankle
velocity to 1.5 and then let's do a
buffer of 2.5 this this seems to give a
pretty good
[Music]
sound the last add-on is to create
multiple rings and we can do that quite
easily by how about just copy and
pasting this for a loop here so we
create multiple more objects and then we
want
to create another array let's call it
balls
2 and then we just need to change balls
two here
and then we want to call the method here
right but you only see one ring and that
is because of the starting angle we want
the two rings to have a different
starting angle so how about we go back
to ball. JS and we are going to add
starting angle here as a new parameter
and let's set this do starting angle to
be starting angle and all we need to do
is that we just need to add this inside
this parenthesis
here so instead of having it start at
zero all the time it will be starting at
a new starting angle so now all we need
to do is we how about we set zero and
180 here then I'm going to stop it from
moving for
now so now you can see that
we have two rings right that start at
zero and 180 all right so you can change
it to let's say
90 and then now you can see that this
ring starts here all right so we can do
it this way and it's fine but it is
basically copy and pasting which is not
as clean as I would like and it's going
to be more difficult if we want to add
multiple rings so how about we actually
create a 2d array
so we can delete this balls 2 array and
we're going to make this balls array
from a 1D array to be a 2d array so what
do we need to do what we need to do is
we need to create a nesset for a loop so
let I equal Z to I less than how about
we set another variable called Loop and
we're going to set loop to be
2 so I less than Loop and then I ++ and
then we're basically going to put this
other for Loop inside here then I'm
going to delete all this first and then
we need to make sure that all of this
has to be J right so all of the previous
I will become
J and and then this is for 1D array
right so what you want is
first inside of this outer loop we want
to create a 2d array so we can do that
by setting balls of I to be equals to a
bunch of empty 1D arrays and then now
balls of I of J will be a new ball
object and instead of zero here we also
want to set the new starting angle right
and how would we calculate this if we
want to space out the starting angle
evenly what we can do is we can do 360
which is one revolution divided by the
number of loop that we have and then we
just multiply it by I so with one Loop
it starts at zero and then with two
Loops it starts at 180 so now we just
need to put in starting angle
Here and Now inside
here we don't need this second one we
just need this one and then we want to
actually do a nested for Loop here as
well
right then this
will be inside here and then change all
of the previous I to
J then this will be balls of i.j because
now it is a 2d
array so let's actually stop it from
moving first so now we have two rings
that are spaced out evenly so we can
just change the number of Loops here
and that's
it right I'm going to keep it at
three and then how about
we uncomment this
out and there you go now we have this
interesting track that sounds like when
Mario meets the final boss okay so how
about we make it pretty which is the
last step what I want to do is first I
want to set the background to Black and
I also want to set the transparency to
100 to give it some of a blurring
effect and for The Strokes
of these circles I want it to be white
with a transparency of
50 and then inside ball. JS I actually
want the circles to be smaller at 10
comma 10 and I think that's it let's try
it and then how about we play around
so if I were to do
eight at four
Loops oo that sounds kind of
happy
five have
24
wa so this is so much fun to play around
with so I hope that that this gives you
a lot of ideas to experiment with so
give this one a try
Посмотреть больше похожих видео
p5.js Coding Tutorial | The Making of Animation - Beautiful Trigonometry
AutoCAD Tutorial for Beginners - 4
Coding Challenge #50.2: Animated Circle Packing - Part 2 (Kitten Addendum)
Graad 11 Meetkunde
Cara Menggambar Gambar Potongan - Gambar Teknik
Standard Equation of Circle | Conic Sections | Don't Memorise
5.0 / 5 (0 votes)