Bubble Art

Bubble Art Demo

You can create something like this but with your own theme

Code Your Own

Create a new file called bubbleart.html and paste in this code:

You will need to click and drag to scroll and get it all!

Bubble Box

In your HTML there is already a container:

<div id="bubbleBox">
</div>

And some CSS for it:

#bubbleBox {
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
  background-color: lightblue;
}

You should already see this code in bubbleart.html

Designing a Bubble

In your CSS, create a class called bubble:

.bubble {
  width: 50px;
  height: 50px;
  border-style: solid;
  border-width: 2px;
  border-radius: 50%; 
  border-color: black;
  background-color: white;
}

In your HTML, inside your bubbleBox, add a bubble:

<div id="bubbleBox">
<div class="bubble"></div>
</div>

You should see a white circle with a black border.

Designing A Bubble

You can also make the background and border colours see-through:

.bubble {
  width: 50px;
  height: 50px;
  border-style: solid;
  border-width: 2px;
  border-radius: 50%; 
  border-color: rgba( 255, 255, 255, 0.2);
  background-color: rgba( 255, 255, 255, 0.2);
}
 
 
 
 

Remix to make any colour you like.

Delete your bubble HTML

Once you are happy with how your bubble looks,

delete it from your bubbleBox:

<div id="bubbleBox">
</div>

We will make it again, but using jQuery.

Your bubble box should be empty again.

CreateBubble Function

Make a new function which will create a bubble:

function createBubble() {

  // code to create a bubble goes here

}

Create A Bubble

Inside your createBubble function:

function createBubble() {
var bubble = $('<div>');
bubble.addClass('bubble');
bubble.appendTo('#bubbleBox');
}
 
 
 
 
 
 

Run the Function

Run the createBubble function:

function createBubble() {
var bubble = $('<div>');
bubble.addClass('bubble');
bubble.appendTo('#bubbleBox');
}

createBubble();
 
 

You should see your bubble in the box again.

Create a Swarm

Now that we’ve got code to make one bubble,

we can easily make more using a loop:

var numberOfBubbles = 0;
while( numberOfBubbles < 20 ) {
  createBubble();
  numberOfBubbles = numberOfBubbles + 1;
}

 
 
 
 
 
 
 
 

Where are all the bubbles?

We made 20 bubbles, but we can still only see one.

They are all identical! They are the same size and they are in the same place, stacked on top of each other.

We need to move them so they don’t overlap.

Bubble Position

We can also change the position of our bubbles:

function createBubble() {
var bubble = $('<div>');
bubble.addClass('bubble');

var leftSpace = 300;
bubble.css('left', leftSpace);

var topSpace = 300;
bubble.css('top', topSpace);

bubble.appendTo('#bubbleBox');
}
 
 
 
 
 
 
 
 
 
 

Your bubbles should now be stacked in a different place.

Random Numbers

var randomNumber = Math.random() * howMany;

var randomNumber : The variable to store the random number
Math.random() : Creates a random number between 0 and 1
howMany : How many numbers to choose between.

Random Bubble Position

Randomly position your bubbles:

var leftSpace = Math.random() * 300;
bubble.css('left', leftSpace);

var topSpace = Math.random() * 300;
bubble.css('top', topSpace);
 
 
 
 

Your bubbles should now be all in different places.

Smarter Positioning

We could even make our random numbers

based on the size of the bubble box:

var leftSpace = Math.random() * $('#bubbleBox').width();
bubble.css('left', leftSpace);

var topSpace = Math.random() * $('#bubbleBox').height();
bubble.css('top', topSpace);
 
 
 
 

Your bubbles should now be all around the box.

Bubble Size

Change the size of your bubbles using jQuery:

var leftSpace = Math.random() * $('#bubbleBox').width();
bubble.css('left', leftSpace);

var topSpace = Math.random() * $('#bubbleBox').height();
bubble.css('top', topSpace);

var size = 200;
bubble.css('width', size);
bubble.css('height', size);
 
 
 
 
 
 
 
 

Your bubbles should now be bigger.

Random Sizing

We can use the same random number trick as before

to make our bubbles all different sizes:

var size = Math.random() * 200;
bubble.css('width', size);
bubble.css('height', size);

 
 

Your bubbles should now be all different sizes.

Challenge: Themed Bubble Art

Give your bubble art a unique and creative theme.

Bubble Art: Complete

Fabulous! Now let’s make those bubbles dance…

Take me to the next chapter!