p5.js Coding Tutorial | Optical Illusion with Sound 🎵

Summary

In 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

00:00

🎵 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.

05:01

🔄 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.

10:03

🎚️ 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.

15:05

🎶 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.

20:06

🔁 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.

25:06

🖌️ 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.

Keywords

💡Object Oriented Programming

Object Oriented Programming (OOP) is a programming paradigm that uses objects and classes to design applications and software. In the context of the video, OOP is used to structure the code by creating a 'Ball' class, which encapsulates properties and methods related to the moving circles. This approach simplifies the code and makes it reusable, as seen when the tutorial shifts from duplicating code to creating multiple ball objects with varying properties.

💡Trigonometry

Trigonometry is a branch of mathematics that deals with the relationships between the angles and sides of triangles. In the video, trigonometry is essential for calculating the x and y coordinates of the circles as they move in a circular path. The script uses the equations x = r * cos(angle) and y = r * sin(angle) to determine the position of the circles on the canvas, which is crucial for creating the oscillating motion effect.

💡Oscillating Motion

Oscillating motion refers to the repetitive back-and-forth movement around a central point. The video's theme revolves around creating a visual representation of this motion using circles that move around a central point on the canvas. This motion is achieved through the use of trigonometric functions and is central to the animation's aesthetic and the soundtrack it generates.

💡Canvas

In the context of the video, the canvas refers to the virtual space where the animation is drawn. The script mentions translating the origin point of the canvas to the center, which is necessary for drawing the circles in the correct position relative to the center point. This concept is fundamental to setting up the coordinate system for the animation.

💡Preload

The 'preload' function in programming is used to load resources such as images or sounds before the main execution of the program. In the video, preload is used to load MP3 sound files into the program. This is important for ensuring that the sounds are ready to be played when the circles pass through the center point, which is a key part of the interactive animation.

💡Sound Assets

Sound assets are audio files that are used in a project. In the video, the creator uploads MP3 files as sound assets to be used when the circles hit the center point. These assets are part of the interactive experience, as they contribute to the soundtrack that is created by the movement of the circles.

💡Collision Detection

Collision detection is a technique used in animations and games to determine when two objects have intersected or 'collided'. In the script, a method called 'Collis' is created to check if the ball has passed through the center point. This detection triggers the playing of a sound, which is a core aspect of the video's interactive animation.

💡Modulo Operation

The modulo operation finds the remainder of a division between two numbers. In the video, modulo is used to循环播放 sound assets when the number of balls exceeds the number of available sound files. This ensures that the animation can continue to play sounds without running out of assets, creating a continuous soundtrack.

💡2D Array

A 2D array is a data structure that consists of arrays of arrays, essentially creating a matrix. In the video, the script transitions from using a 1D array for balls to a 2D array to manage multiple rings of balls. This change in data structure allows for more organized and scalable code, especially when dealing with multiple layers of objects in the animation.

💡Transparency

Transparency in digital graphics refers to the degree to which objects allow light to pass through them, often represented as an alpha value. In the video, the script sets the transparency of the circles' strokes and the background to create a visual effect. This use of transparency adds depth and aesthetic appeal to the animation.

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