Bubble Art
Creating piles of random bubbles
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…
Loading...