Delete Icon
This forum is now read-only. Please use our new forums at discuss.codecademy.com.
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?

triangles

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:

hearts

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.

Answer 545f83147c82caacd200560d

7 votes

Permalink

From Namahage (http://www.codecademy.com/users/namahage4649)

OK, here we go: alt text

(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

Answer 545f836b7c82ca26c2005636

5 votes

Permalink

From Gaurang Tandon (http://www.codecademy.com/users/GaurangTandon)

Well, who doesn’t like donuts :P

Donuts please!

http://www.codecademy.com/GaurangTandon/codebits/yqjDhG/edit

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

Answer 545f864c282ae3f91e005e3c

2 votes

Permalink

From Cedro Gasque (http://www.codecademy.com/users/chipMaster66419)

Stars

http://www.codecademy.com/chipMaster66419/codebits/IUV06y

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

ctx.beginPath();
ctx.moveTo(this.curPos.x+dx, this.curPos.y+dy-this.radius*0.625);
ctx.lineTo(this.curPos.x+dx+this.radius*0.5, this.curPos.y+dy+this.radius*1.125);
ctx.lineTo(this.curPos.x+dx-this.radius*0.875,this.curPos.y+dy);
ctx.lineTo(this.curPos.x+dx+this.radius*0.875,this.curPos.y+dy);
ctx.lineTo(this.curPos.x+dx-this.radius*0.5, this.curPos.y+dy+this.radius*1.125);
ctx.fill();

Oh, and I used Geogebra to plan it out.

3701 points
Submitted by Judy
6 years ago

Answer 545f86f852f863149a005a65

2 votes

Permalink

From Dante Ar (http://www.codecademy.com/users/Dantear7)

Explosion ## animation

Draw your Name 2

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

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"){

    ctx.drawImage(explosion,exp_x,exp_y,exp_w,exp_h,this.curPos.x+dx,this.curPos.y+dy,this.radius*4,this.radius * 4);
  }

^_^ 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

Answer 545f877452f863ff0b0050f2

2 votes

Permalink

From smallwins (http://www.codecademy.com/users/smallwins)

pyramids - image 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…

http://www.codecademy.com/smallwins/codebits/qmiJw7/

3701 points
Submitted by Judy
6 years ago

Answer 551179a09113cb3bb200256e

1 vote

Permalink

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

Answer 545f840252f863da07005a4c

0 votes

Permalink

From Dante Ar (http://www.codecademy.com/users/Dantear7)

Guns

alt text

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

ctx.lineTo(this.curPos.x + dx +this.radius * 2, this.curPos.y + dy +this.radius );

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 +this.radius * 2, this.curPos.y + dy +this.radius );
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

Answer 545f856452f863629c00551d

0 votes

Permalink

From Dante Ar (http://www.codecademy.com/users/Dantear7)

3D_3D part 1

http://www.codecademy.com/Dantear7/codebits/YvEQLX

alt text

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?!!!

alt text

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

Answer 545f85b28c1ccc0f56005a37

0 votes

Permalink

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

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


ctx.beginPath();
ctx.moveTo(this.curPos.x+dx+this.radius+6,this.curPos.y-dy-this.radius+6);
ctx.lineTo(this.curPos.x+dx+this.radius+6,this.curPos.y+dy+this.radius+6);
ctx.lineWidth = 3;
ctx.strokeStyle = "white";
ctx.stroke();
//2
ctx.beginPath();
ctx.moveTo(this.curPos.x+dx+this.radius*2 + 6,this.curPos.y-dy-this.radius*1.5 + 6);
ctx.lineTo(this.curPos.x+dx+this.radius *2 + 6,this.curPos.y+dy+this.radius + 6);

ctx.lineWidth = 3;
ctx.strokeStyle = "white";
ctx.stroke();
//3
ctx.beginPath();
ctx.moveTo(this.curPos.x+dx+this.radius + 6,this.curPos.y-dy-this.radius + 6);
ctx.lineTo(this.curPos.x+dx+this.radius*2 + 6,this.curPos.y-dy-this.radius*1.5 + 6);

ctx.lineWidth = 3;
ctx.strokeStyle = "white";
ctx.stroke();
//4
ctx.beginPath();
ctx.moveTo(this.curPos.x+dx+this.radius + 6,this.curPos.y+dy+this.radius + 6);
ctx.lineTo(this.curPos.x+dx+this.radius *2 + 6,this.curPos.y+dy+this.radius + 6);

ctx.lineWidth = 3;
ctx.strokeStyle = "white";
ctx.stroke();
//55
/////////    
ctx.beginPath();
ctx.moveTo(this.curPos.x+dx+this.radius,this.curPos.y-dy-this.radius);
ctx.lineTo(this.curPos.x+dx+this.radius+ 6,this.curPos.y-dy-this.radius + 6);
ctx.lineWidth = 3;
ctx.strokeStyle = "red";
ctx.stroke();
///a
ctx.beginPath();
ctx.moveTo(this.curPos.x+dx+this.radius * 2,this.curPos.y-dy-this.radius*1.5 );
ctx.lineTo(this.curPos.x+dx+this.radius*2 + 6,this.curPos.y-dy-this.radius*1.5 + 6);

ctx.lineWidth = 3;
ctx.strokeStyle = "blue";
ctx.stroke();
//3
ctx.beginPath();
ctx.moveTo(this.curPos.x+dx+this.radius *2,this.curPos.y+dy+this.radius);
ctx.lineTo(this.curPos.x+dx+this.radius *2 + 6,this.curPos.y+dy+this.radius + 6);

ctx.lineWidth = 3;
ctx.strokeStyle = "red";
ctx.stroke();//4
ctx.beginPath();
ctx.moveTo(this.curPos.x+dx+this.radius,this.curPos.y+dy+this.radius);
ctx.lineTo(this.curPos.x+dx+this.radius + 6,this.curPos.y+dy+this.radius + 6);

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

ctx.beginPath();
ctx.moveTo(this.curPos.x+dx+this.radius,this.curPos.y-dy-this.radius);
ctx.lineTo(this.curPos.x+dx+this.radius,this.curPos.y+dy+this.radius);
ctx.lineWidth = 3;
ctx.strokeStyle = "white";
ctx.stroke();
//2
ctx.beginPath();
ctx.moveTo(this.curPos.x+dx+this.radius*2,this.curPos.y-dy-this.radius*1.5);
ctx.lineTo(this.curPos.x+dx+this.radius *2,this.curPos.y+dy+this.radius);

ctx.lineWidth = 3;
ctx.strokeStyle = "white";
ctx.stroke();
//3
ctx.beginPath();
ctx.moveTo(this.curPos.x+dx+this.radius,this.curPos.y-dy-this.radius);
ctx.lineTo(this.curPos.x+dx+this.radius*2,this.curPos.y-dy-this.radius*1.5);

ctx.lineWidth = 3;
ctx.strokeStyle = "white";
ctx.stroke();
//4
ctx.beginPath();
ctx.moveTo(this.curPos.x+dx+this.radius,this.curPos.y+dy+this.radius);
ctx.lineTo(this.curPos.x+dx+this.radius *2,this.curPos.y+dy+this.radius);

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

Answer 545f86887c82caaf5a005794

0 votes

Permalink

From Dante Ar (http://www.codecademy.com/users/Dantear7)

inspired from Cedro Gasque Stars

Ninja Star

www.codecademy.com/Dantear7/codebits/YvEQLX alt text

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"){

    ctx.drawImage(img,sw,sh,128,256,this.curPos.x+dx,this.curPos.y+dy,this.radius*4,this.radius * 4);
  }

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

Answer 545f86c3631fe9ad260059df

0 votes

Permalink

Flock of Seagulls

Play here: http://www.codecademy.com/AlbionsRefuge/codebits/yXt0Dr

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

3 comments

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 :)

Answer 545f8746631fe90057005a26

0 votes

Permalink

From Dante Ar (http://www.codecademy.com/users/Dantear7)

Bird Dash

Draw your Name 2

lol that what i called it :P

its animating Sprite Sheet Image alt text

3701 points
Submitted by Judy
6 years ago

Answer 5480e31a86f552324a00010d

0 votes

Permalink

(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 +this.radius * 2, this.curPos.y + dy +this.radius );
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 +this.radius * 2, this.curPos.y + dy +this.radius );
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

1 comments

Risviltsov 6 years ago

don’t work.

Answer 549f62619113cb4d46010f3a

0 votes

Permalink

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

573 points
Submitted by Kewlgirl88
6 years ago

3 comments

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?!

Answer 54af240c9113cb9622008fd9

0 votes

Permalink

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

268 points
Submitted by Lincoln
6 years ago

1 comments

The Flaming Lion 5 years ago

it already is

Answer 54b7b14251b887737400208d

0 votes

Permalink

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

266 points
Submitted by Arushi Singh
6 years ago

Answer 54c4dd3dd3292fd714002df0

0 votes

Permalink

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

6 comments

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

Answer 555cec04e39efe3709000597

0 votes

Permalink

Is possible to use images to replace the shapes?

781 points
Submitted by Julie Anne Moore
5 years ago

5 comments

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.

Answer 5570651f937676dc18000227

0 votes

Permalink

wow,nice

636 points
Submitted by Rideedee
5 years ago

Answer 557242efe39efe82cb00080f

0 votes

Permalink

Multiple images: link text

Screenshot: alt text

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];


          ctx.drawImage(img, this.curPos.x + dx, this.curPos.y, this.radius * 2.5, this.radius * 2.5);
    }
781 points
Submitted by Julie Anne Moore
5 years ago

2 comments

Judy 5 years ago

I like them better now that they are round!

Julie Anne Moore 5 years ago

Agree, It makes the letters clearer.