0 points
Submitted by Judy
6 years ago

# Done? Interested in a Creative Challenge?

Use the HTML `<canvas>` element and JavaScript to draw 2D graphics.

If you haven’t worked through the Animate Your Name goal yet, go do that first so you’ll see where we’re heading with this.

Love the bubbles? Wish there were more shapes than just circles and squares?

The goal of this challenge is for you to develop the code to draw another shape. Here are some things to help you get started:

Get out your graph paper and start sketching - geometry class should have been this much fun.

1. Show us your finished code snippet for drawing the new shape. It should be in the same format as you see in *”Can I have more shapes?”*. That way it can easily be dropped into bubbles.js as another `else if`. Tell us how you felt putting it together. Did you find any good resources on the web?
2. Show us a small screen capture of a sample of your new shape, just like the triangle and heart images you see here. That will make this a very fun looking discussion.
3. If you’ve done your developing online, link us to a live version of your code so we can all play! Here is an example using jsbin.com and another example using a codebit.

OK, here we go:

(you can play with it here: http://www.codecademy.com/AlbionsRefuge/codebits/Nyjlii)

It’s easy enough to draw a single filled circle–you might use something like this:

``````else if (bubbleShape=="target") {
ctx.beginPath();
ctx.arc(this.curPos.x + dx, this.curPos.y + dy, this.radius, 0, Math.PI * 2, true);
ctx.fill();
}``````

But what if you want to make another circle inside that one? No problem, you might make the radius a bit smaller:

``````else if (bubbleShape=="target") {
ctx.beginPath();
ctx.arc(this.curPos.x + dx, this.curPos.y + dy, this.radius, 0, Math.PI * 2, true);
ctx.arc(this.curPos.x + dx, this.curPos.y + dy, this.radius/5*4, 0, Math.PI * 2, true);
ctx.fill();
}``````

What happened? It’s no different from the first one! It would be fine if we could just fill the space between the two circles…

Fortunately, you can. You might have noticed that the arc() method takes an argument at the end as to which direction the arc is drawn. For a circle, it might not seem to be important whether it’s drawn clockwise or not, but due to the non-zero rule it makes some of the points within the large circle fall “inside” and others “outside” the curve. So we can make a single “donut” by just changing a parameter:

``````else if (bubbleShape=="target") {
ctx.beginPath();
ctx.arc(this.curPos.x + dx, this.curPos.y + dy, this.radius, 0, Math.PI * 2, true);
ctx.arc(this.curPos.x + dx, this.curPos.y + dy, this.radius/5*4, 0, Math.PI * 2, false);
ctx.fill();
}``````

Finally, we just add more alternating circles to get the final product:

``````else if (bubbleShape=="target") {
ctx.beginPath();
ctx.arc(this.curPos.x + dx, this.curPos.y + dy, this.radius, 0, Math.PI * 2, true);
ctx.arc(this.curPos.x + dx, this.curPos.y + dy, this.radius/5*4, 0, Math.PI * 2, false);
ctx.arc(this.curPos.x + dx, this.curPos.y + dy, this.radius/5*3, 0, Math.PI * 2, true);
ctx.arc(this.curPos.x + dx, this.curPos.y + dy, this.radius/5*2, 0, Math.PI * 2, false);
ctx.arc(this.curPos.x + dx, this.curPos.y + dy, this.radius/5, 0, Math.PI * 2, true);
ctx.fill();
}``````

edit:

I just realized that this code can be made even shorter using a for loop:

``````else if (bubbleShape=="target") {
ctx.beginPath();
for (var i=5;i>0;i--) {
ctx.arc(this.curPos.x + dx, this.curPos.y + dy, i*this.radius/5, 0, Math.PI * 2, i%2===0);
}
ctx.fill();``````
3701 points
Submitted by Judy
6 years ago

Well, who doesn’t like donuts :P

Here’s the code:

``````else if(bubbleShape == "donuts"){
ctx.beginPath();
ctx.arc(this.curPos.x + dx, this.curPos.y + dy,this.radius, 0, Math.PI * 2, true);
ctx.arc(this.curPos.x - dx, this.curPos.y + dy, this.radius/2, 0, Math.PI * 2);
ctx.fill();
}``````

As it can be seen, this is nothing but just a small variation of Namahage’s Targets.

3701 points
Submitted by Judy
6 years ago

This one was pretty simple, I just used lineTo and some relative magic to draw a star.

``````ctx.beginPath();
ctx.fill();``````

Oh, and I used Geogebra to plan it out.

3701 points
Submitted by Judy
6 years ago

## Explosion ## animation

^_^ thank you for your time its a honor :D

``````var explosion = new Image(); // creating a new image
explosion.src = "http://i1368.photobucket.com/albums/ag171/Dantear7/video%20game/explode_zpsb4502042.png" // define the source
var exp_x = 0, /// explosion starting x
exp_y = 0,
exp_w = explosion.width / 4,
exp_h = explosion.height / 4;

//// because this is a  sprite Image that has 4 rows and 4 colums each with an image
/// and by divide the img width with the 4 colums we get the width also with the height

``````

now we need to draw the Image into the canvas this is a Sprite Sheet Image and we need it to animate

so we have to loop and loop

i did that by going to a function called update then paste

``````
if(bubbleShape == "explosion"){

}
``````

^_^ now the image is drowned over and over again but its not Animating

we need to change the sprite x and y positions

we do that by creating a function i called it exp_animation you can call it anything you like :)

``````
function exp_animation(){
if(exp_x >= 0){
exp_x+=exp_w;
if(exp_x >= exp_w * 3){
exp_x = 0;

if(exp_y >= exp_h * 3){
exp_y = 0;
}else{
exp_y+=exp_h;
}
}
}

}// end exp_animation
``````

cool :) now we need to call that function now we have to look for a function called bounceBubbles and in the third line after the update(); call that function but only if bubbleshape = “explosion”

``````if(bubbleShape == "explosion"){
exp_animation();
}``````

:) and that it and I know my codes is always Messy :P sorry

3701 points
Submitted by Judy
6 years ago

Pyramids. I chose pyramids.
Pyramids Thanks to all the awesome work everyone put into moving the scripts around and lining everything up to make my code possible. I borrowed HEAVILY! I am learning tons. THANKS!!

I know that was kind of easy. Here is a rainbow I worked out, although I would need to rework the color part of the code for it…

3701 points
Submitted by Judy
6 years ago

1 vote

i have worked on mine for a while and i think i have every single one there is on here so far come check it out and please let me know what you think http://www.codecademy.com/JordanLescaleet/codebits/ypmP7O

235 points
Submitted by JordanLescaleet
6 years ago

## Guns

the code is very simple:

so the (this.curPos.x +dy ,this.curPos.y +dy) is actually the starting x,y of any object that any letter of your name is contained

so we start by beginPath() ,then move it to (this.curPos.x + dx - this.radius * 1.5, this.curPos.y + dy) as our starting point, then we create a straight line from that point by linking our starting point with a new different point by ctx.lineTo(this.curPos.x + dx +this.radius * 2, this.curPos.y + dy )

then we want to create a new line by linking the second point with a new point so it be like this ‘’’’’’’’’’’|

and will be by

so now so good; and then we want a new line linking the 3rd point with a new point ctx.lineTo(this.curPos.x + dx - 3, this.curPos.y + dy +this.radius );

and the rest of the code is below

``````    else if(bubbleShape == "Gun"){

ctx.beginPath();
ctx.moveTo(this.curPos.x + dx - this.radius * 1.5, this.curPos.y + dy);
ctx.lineTo(this.curPos.x + dx +this.radius * 2, this.curPos.y + dy  );
ctx.lineTo(this.curPos.x + dx - 3, this.curPos.y + dy +this.radius );
ctx.lineTo(this.curPos.x + dx - 3 , this.curPos.y + dy +this.radius * 2 );
ctx.lineTo(this.curPos.x + dx -this.radius * 1.5, this.curPos.y + dy +this.radius * 2 );
ctx.closePath();
ctx.strokeStyle ="red";
ctx.stroke();
ctx.fillRect(this.curPos.x + dx +this.radius * 2, this.curPos.y + dy,5,5);

//the Rectangle is for our guns head

}``````

thank you ^_^

3701 points
Submitted by Judy
6 years ago

## 3D_3D part 1

So we all know how to make a 3d cube using a pencil or a pen, well its just about drawing 2 rectangle and then link there edges to gather right?!!!

there is actually 2 ways to do this the easy way or the hard way

the easy way is just create a rect class so you can track of the x and y components

like this

``````    Rect = new function(x,y,w,h){
this.x = x;
this.y = y;
this.h = h;
this.w = w;

this.draw = function(ctx){
ctx.fillRect(this.x,this.y,this.w,this.h);
}

}``````

and by creating a 2 rectangles you will have the x,y values dynamic and not static and by that you can create a lines link the edges

however i actually choose the long way and the because you can control the colors of each line

and the code is like so

and im very sorry for not explain it step by step T_T, my apology :’(

3701 points
Submitted by Judy
6 years ago

Danta Ar’s 3D_3D, part 2 (it was too many characters to fit into one post)

``````else if(bubbleShape == "3D"){

ctx.beginPath();
ctx.lineWidth = 3;
ctx.strokeStyle = "white";
ctx.stroke();
//2
ctx.beginPath();

ctx.lineWidth = 3;
ctx.strokeStyle = "white";
ctx.stroke();
//3
ctx.beginPath();

ctx.lineWidth = 3;
ctx.strokeStyle = "white";
ctx.stroke();
//4
ctx.beginPath();

ctx.lineWidth = 3;
ctx.strokeStyle = "white";
ctx.stroke();
//55
/////////
ctx.beginPath();
ctx.lineWidth = 3;
ctx.strokeStyle = "red";
ctx.stroke();
///a
ctx.beginPath();

ctx.lineWidth = 3;
ctx.strokeStyle = "blue";
ctx.stroke();
//3
ctx.beginPath();

ctx.lineWidth = 3;
ctx.strokeStyle = "red";
ctx.stroke();//4
ctx.beginPath();

ctx.lineWidth = 3;
ctx.strokeStyle = "blue";
ctx.stroke();
//f

ctx.beginPath();
ctx.lineWidth = 3;
ctx.strokeStyle = "white";
ctx.stroke();
//2
ctx.beginPath();

ctx.lineWidth = 3;
ctx.strokeStyle = "white";
ctx.stroke();
//3
ctx.beginPath();

ctx.lineWidth = 3;
ctx.strokeStyle = "white";
ctx.stroke();
//4
ctx.beginPath();

ctx.lineWidth = 3;
ctx.strokeStyle = "white";
ctx.stroke();
//55
}``````
3701 points
Submitted by Judy
6 years ago

## Ninja Star

first create a global variables img,sw,sh like so

``````var img = new Image();
var sw =0 ,sh = 0;
img.src = "http://i1368.photobucket.com/albums/ag171/Dantear7/video%20game/star_zpsdc9a4f18.png";

//this img is not mine ``````

then look for a function called update then paste this code at the end

``````if(bubbleShape == "ninja"){

}``````

for animate that ninja star we need a function that change the position for both x and y in the sprite sheet

just paste it at the end of your code

``````function turn(){

if(sw >= 0){
sw+=128;
if(sw >= 128 * 3){
sw = 128;

if(sh >= 256){
sh = 0;
}else{
sh+=256;
}
}
}

}``````

then look for a function called bounceBubbles and in the third line after the update(); type

``````if(bubbleShape == "ninja"){
turn();
}``````

and that it ^_^ the stars it self are now turning

3701 points
Submitted by Judy
6 years ago

I messed around with the colours, the point sizes and the springStrength. I wanted the seagulls to be a little bit more relaxed than the original bubbles. I found this canvas cheat sheet. There are a few methods and attributes there that could produce something interesting - in the right hands … ```} else if (bubbleShape == "bird") { // set the style of our lines ctx.lineWidth = 3; ctx.lineCap = "round"; ctx.lineJoin = "miter"; ctx.strokeStyle = this.color; // start our path ctx.beginPath(); // draw one wing, and then the other ctx.arc(this.curPos.x + dx, this.curPos.y + dy, this.radius, Math.PI, false); ctx.arc(this.curPos.x + dx + this.radius * 2, this.curPos.y + dy, this.radius, Math.PI, false); ctx.stroke();```

3701 points
Submitted by Judy
6 years ago

HiteshRohila 6 years ago

How can i add this type of name into a web page with small size of fonts Plz help me . Thanks

Judy 6 years ago

Hi HiteshRohilla, you will find information about adding this code to a web page over here: http://www.codecademy.com/forum_questions/533857ac631fe9794700a672 – there is also a thread there about changing the font size.

HiteshRohila 6 years ago

Thanks for the information :)

## Bird Dash

lol that what i called it :P

its animating Sprite Sheet Image

3701 points
Submitted by Judy
6 years ago

``````(this.curPos.x +dy ,this.curPos.y +dy)

beginPath()
(this.curPos.x + dx - this.radius * 1.5, this.curPos.y + dy)
ctx.lineTo(this.curPos.x + dx +this.radius * 2, this.curPos.y + dy )
'''''''''''|
ctx.lineTo(this.curPos.x + dx - 3, this.curPos.y + dy +this.radius );

else if(bubbleShape == "Gun"){

ctx.beginPath();
ctx.moveTo(this.curPos.x + dx - this.radius * 1.5, this.curPos.y + dy);
ctx.lineTo(this.curPos.x + dx +this.radius * 2, this.curPos.y + dy  );
ctx.lineTo(this.curPos.x + dx - 3, this.curPos.y + dy +this.radius );
ctx.lineTo(this.curPos.x + dx - 3 , this.curPos.y + dy +this.radius * 2 );
ctx.lineTo(this.curPos.x + dx -this.radius * 1.5, this.curPos.y + dy +this.radius * 2 );
ctx.closePath();
ctx.strokeStyle ="red";
ctx.stroke();
ctx.fillRect(this.curPos.x + dx +this.radius * 2, this.curPos.y + dy,5,5);

//the Rectangle is for our guns head

}``````
1338 points
Submitted by Risviltsov
6 years ago

Risviltsov 6 years ago

don’t work.

WOW !!!(which is MOM upsidown!) How do you change the color though

573 points
Submitted by Kewlgirl88
6 years ago

Judy 6 years ago

If you want to make more colours you should have a look at this http://www.codecademy.com/forum_questions/53385d4e8c1ccca3de00a9a6

Kewlgirl88 6 years ago

kk. Thanks! You are one smart coder!

Lincoln 6 years ago

How do you get your icon to move?!

How do I get my avatar icon to move/change color ?

268 points
Submitted by Lincoln
6 years ago

The Flaming Lion 5 years ago

that’s a very nice trick!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

266 points
Submitted by Arushi Singh
6 years ago

Hey @AlbionsRefuge , I really like your Codebits sites :D Do You have blog or portfolio by any chance?

710 points
Submitted by Wolf72x
6 years ago

Judy 6 years ago

Hi Wolf72x, I have neither of those. There haven’t been any new shapes posted here for a while - maybe you’d like to give that a whirl?

Wolf72x 6 years ago

http://www.codecademy.com/Wolf72x/codebits/6dFc2A >.< I have no idea how to draw in javascript xD

Judy 6 years ago

You might learn to if you read and work through those three ‘getting started’ links in the original post. :)

Wolf72x 6 years ago

Yeah I figured out that and made few simple shapes xD but I feel like it’s too much work to create simple heart (for example) when I can draw it for 5 seconds in some graphic software xD

Judy 6 years ago

Now if you could just find the code to make your heart graphic form multicoloured letters and bounce around the screen. :)

Wolf72x 6 years ago

Yeah that would be a problem xD

Is possible to use images to replace the shapes?

781 points
Submitted by Julie Anne Moore
5 years ago

Judy 5 years ago

Hi Julie, yes it is. You can see that has been done in a couple of the examples that have been posted.

Julie Anne Moore 5 years ago

Thanks, I am looking forward to experimenting. I would like to make the bubbles be a set of images in a random order. I guess some experimenting is in order.

Judy 5 years ago

I’m not sure about how it would work with more than one image, but I look forward to seeing how you get on with it.

Julie Anne Moore 5 years ago

Not exactly what I had in mind but I am happy with the following: http://www.codecademy.com/bitSolver96941/codebits/r21wQf

Judy 5 years ago

You did it! Very nice.

wow,nice

636 points
Submitted by Rideedee
5 years ago

Screenshot:

Bubble code:

``````if (bubbleShape == "photo")
var imgs=["http://i1292.photobucket.com/albums/b564/Julie_Anne_Moore/3_zpsmdtfd3mj.gif",
"http://i1292.photobucket.com/albums/b564/Julie_Anne_Moore/2_zpspxvhv5am.gif",
"http://i1292.photobucket.com/albums/b564/Julie_Anne_Moore/4_zpsxaaiccu9.gif",
"http://i1292.photobucket.com/albums/b564/Julie_Anne_Moore/5_zpspjwyer55.gif",
"http://i1292.photobucket.com/albums/b564/Julie_Anne_Moore/1_zps8zcpqsdj.gif"];
var img = document.createElement("img");
var random = Math.floor(this.curPos.x/100)%5;

if (!(random >= 0 && random <= 4))
random = Math.floor(Math.random()*5);

img.src = imgs[random];

}``````
781 points
Submitted by Julie Anne Moore
5 years ago