How does bounceBubbles() work?

Is it possible to up the code introduced into this lesson into HTML?

drawName('Your Name Here');


I have a website in HTML and I would like to get some of the headings to react in the same way. I am just unclear as to how HTML and this code would work together.


I am completely new to coding… what should I enter in the bounceBubbles()


<!DOCTYPE html>

function myFunction() {
document.getElementById(“demo”).innerHTML = “Paragraph changed.”;

<h1>A Web Page</h1>
<p id=“demo”>A Paragraph</p>
<button type=“button” onclick=“myFunction()”>Try it</button>



How come the letters in the previous lesson is colored while the letters in this one are gray?
The code look the exact same, are you hiding things from us?


Hey there Methodslayer, so the instructions on this exercise page, is to only interact with the first line of code :+1: and not the javascript method to animate the bubbles


So there’s a few questions here:

  1. bounceBubbles() just needs to be run as is, it changes the text so that it will be all bubbly and bouncy.
  2. The code in order to make that is quite a bit more advanced and something that would come with further lessons in javascript, however if you want to peak behind the curtain - click the small folder icon, then click bubbles.js. Be careful not to edit anything though as you could break it.
  3. This lesson is just the barest of introductions, follow through and if this type of programming interests you - follow web development courses and our courses on javascript.

Can I be guided with what can I do with bounceBubbles()?


Finish the course then come back to this question. Best not to stray from the path until you have some tools in your kit and a better idea of how to plan, start and complete a project.


No… bounceBubbles is you remove it… the bubles is not exploding when you hovering on it…


How do bounce bubbles know to be bounce bubbles? How/why exactly do the letters know to bounce when you rollover them. To me they’re just a font, but how does the font know to be a font. Thinking too much

1 Like

Hi @array5773926193 the text knows to be bouncy and bubbly through the javascript bubbles.js. If you want to know exactly how this is done, you can inspect bubbles.js. They are, in fact, not a font and have little to do with a font at all. For simplicity, let’s say the font, in this case, provides the outline of the letters. If you take Comic Sans MS as the font, the letters will have a different outline than if you took Cupertino or Libertinus or Doulos for a font. The bubbles are affected by the font in the way of their arrangement on the screen, they do not influence the font in any way themselves.


Five years ago we created a FAQ regarding this project. You can find archived version here ->
Article How does alphabet.js work? and bubbles.js with comments gist might shed some light on the nature of the bubbliness :slight_smile:


wow… this is very cool i wish i could afford to pay for this program monthly . i am really enjoying it .


Why there are always some semicolons? I deleted them and it still works well.

Hey @bit1204184061 that’s good to hear! I am also thoroughly enjoying the courses and the forums :wink: .
Happy Coding!

Because it is good practice to write semicolons. In my personal opinion, it should be necessary, but it’s not. Most JavaScript environments have ASI, also known as Automatic Semicolon Insertion. For this reason, it is not necessary to put semicolons yourself.

hello everyone, I’m new to coding. how can I add different colours to bounce bubbles
red = [0, 100, 63];
orange = [40, 100, 60];
green = [75, 100, 40];
blue = [156, 77, 55];
purple = [320, 50, 60];

// Letters in the message will cycle through these colors:
letterColors = [red, orange, green, blue, purple];

message = ‘Multiple colors!’;

drawName(message, letterColors);

what should I do here. I’m confess

the parentheses are used to set parameters so that you better understand the idea of parameters, I will give you this example …

The height of a child … according to the example would be like this: childheight();

Now, having this structure, we can define the parameter for example (150 cm, 1.50 m, 22 inches, etc.). If you see these values they can be any value and they are within the parentheses … if we had childheight(150cm ); We are defining the value of 150 centimetres as the parameter, while if we leave it blank, we are indicating that there will be a value and that we will define it or take it later in the code.

1 Like

I’m also new too. I just want to clear my confusion please. So basically, this boucebubbles action isn’t really an html? It is just an action for beginners to play around with and understand how it works?