This forum is now read-only. Please use our new forums at discuss.codecademy.com.

Animate Your Name Forum

View Course

2375 points
571828824b7f51f26c000619_875219903
Submitted by
Maciej Wiercioch
over 3 years ago

Can I have more shapes?

All shapes are implemented inside bubbles.js file. Unfortunately, there are only squares and circles. Fortunately, nothing stands in our way, we have added a new one!

triangles

Code on which we will work:

this.draw = function (bubbleShape, dx, dy) {
    ctx.fillStyle = this.color;
    if (bubbleShape == "square") {
        ctx.beginPath();
        ctx.fillRect(this.curPos.x + dx, this.curPos.y + dy, this.radius * 1.5, this.radius * 1.5);
    } else {
        ctx.beginPath();
        ctx.arc(this.curPos.x + dx, this.curPos.y + dy, this.radius, 0, Math.PI * 2, true);
        ctx.fill();
    }
};

Circle shape is implemented inside else statement.

In this post I will show you how to create triangle shape! First we need to create a place where we add our new type, we have to add one else if statement:

this.draw = function (bubbleShape, dx, dy) {
    ctx.fillStyle = this.color;
    if (bubbleShape == "square") {
        ctx.beginPath();
        ctx.fillRect(this.curPos.x + dx, this.curPos.y + dy, this.radius * 1.5, this.radius * 1.5);
    } else if (bubbleShape == "triangle") {

        // description of our new shape

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

Now, we have to write code that will create triangles. Let's see which variables we can use:

  • this.radius - value assigned to each single point, it described how big should be our shape. Note that in circle and square shape this value is used with 1.5 multiplicator to make points a little bigger, we will use it to.
  • this.curPos.x + dx - horizontal coordinate where our point should be placed
  • this.curPos.y + dy - vertical coodinate where our point should be placed

Here you can see my planned shape on canvas surface (the lower on the grid, the greater the y):
canvas

Code:

// start our path
ctx.beginPath();
// move to vertex A
ctx.moveTo(this.curPos.x + dx, this.curPos.y + dy);
// move to vertex B
ctx.lineTo(this.curPos.x + dx, this.curPos.y + dy + this.radius * 1.5);
// move to vertex C
ctx.lineTo(this.curPos.x + dx + this.radius * 1.5, this.curPos.y + dy + this.radius * 1.5);
// fill our shape
ctx.fill();

Last thing, in our main.js file we should let bubbles.js know that we want to use new shape:

bubbleShape = 'triangle';

The method described above shows a way to create any new shape ready to use with our animation. But to know more about drawing you should check Draw with JavaScript course. After that you should be able to create complex shapes like this one.

hearts


Return to FAQs


9 votes

permalink

cool!

903 points
55f3767f95e3782ac4000384_716310303
Submitted by
Jason
over 3 years ago

2 Comments

571828824b7f51f26c000619_875219903 Maciej Wiercioch over 3 years ago

First feedback! I'm glad you liked it Jason :)

55f3767f95e3782ac4000384_716310303 Jason over 2 years ago

I wonder why so many people are inactive... Anyway I created this cool codebit! (there's no groups anymore, which is sad :( )
http://www.codecademy.com/Whale13/codebits/cFCPjx


5 votes

permalink

Awesome dude! I really like it!

688 points
51db23328c1cccf987002eae_453339921
Submitted by
Kári Hlynsson
over 3 years ago

3 Comments

571828824b7f51f26c000619_875219903 Maciej Wiercioch over 3 years ago

Thank you very much! =)

54d4dda195e3784b600022ed_679460638 MalinkaPL_54afddd39376769b6e0011c7_d over 2 years ago

THAT IS SERIOUSLY COOOOOOOOOOOLLL but what did you do it on?? and CZEŚĆ!!!:)

571828824b7f51f26c000619_875219903 Maciej Wiercioch over 2 years ago

~MalinkaPL bardzo dziękuję za Twoje miłe słowa :) Czy mógłbym Cię prosić o doprecyzowanie pytania?


4 votes

permalink

that is so interesting thanks ^_^

764 points
52a0ee0a52f863cdd6000791_211280737
Submitted by
Dante Ar
over 3 years ago

1 Comment

571828824b7f51f26c000619_875219903 Maciej Wiercioch over 3 years ago

Thanks! And you're welcome :)


3 votes

permalink

^_^ i made my own new shapes thanks to you guys

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

i hope you guys like it ^_^

764 points
52a0ee0a52f863cdd6000791_211280737
Submitted by
Dante Ar
over 3 years ago

5 Comments

571828824b7f51f26c000619_875219903 Maciej Wiercioch over 3 years ago

Dante, seriously... AWESOME job. I'm really in love with your 3d shape. May I ask you to, in your free time, write few lines about your shapes in Creative Challenge (http://www.codecademy.com/groups/advanced-javascript-coders/discussions/533cb170282ae383760006cb) started by Judy in Advanced JavaScript Coders group (http://www.codecademy.com/groups/advanced-javascript-coders)? It would be great!

52a0ee0a52f863cdd6000791_211280737 Dante Ar over 3 years ago

that will be a pleasure to me sir ^_^,
i also mad a Gun shape tell me what do you think about it!1

571828824b7f51f26c000619_875219903 Maciej Wiercioch over 3 years ago

You are one of the nicest and polite users I met! But really, there is no reason to call me a 'sir' :) I'm Maciej, dude, buddy or something like that, ok? I'm still young (or I just hope so...). What I think about gun shape? I will let you know in creative challenge discussion! :)

55f3767f95e3782ac4000384_716310303 Jason over 3 years ago

I think he just has an accent

52a0ee0a52f863cdd6000791_211280737 Dante Ar over 3 years ago

Ok Maciej i understood ^_^,lol


1 vote

permalink

I have a problem, I added the code, but the triangles draw as squares :(

217 points
B016cfa0ddde17813598cf22156919d5?s=140&d=retro
Submitted by
ipodlover3354
about 3 years ago

4 Comments

571828824b7f51f26c000619_875219903 Maciej Wiercioch about 3 years ago

Hello :) You remembered to add bubbleShape = 'triangle'; in main.js?

B016cfa0ddde17813598cf22156919d5?s=140&d=retro ipodlover3354 about 3 years ago

Yes.

571828824b7f51f26c000619_875219903 Maciej Wiercioch about 3 years ago

I know that this is unusual request, but can you send all your files to me (gpg.wiercioch@gmail.com)? I will check what is wrong instead of guessing :)

B016cfa0ddde17813598cf22156919d5?s=140&d=retro ipodlover3354 about 3 years ago

I actually found out, but one shape in Creative Challenge (Flock of Seagulls) doesn't work. (My files have changed alot) You can edit the files though my Google Drive.


0 votes

permalink

i added a new one ^_^ this time its better i hope so

if you guys have time please take a look then tell my mistakes and your ideas

www.codecademy.com/Dantear7/codebits/YvEQLX

764 points
52a0ee0a52f863cdd6000791_211280737
Submitted by
Dante Ar
over 3 years ago


0 votes

permalink

Nice as ice!

903 points
564667619113cba6c7000053_587542336
Submitted by
VeganGod
almost 3 years ago


0 votes

permalink

can you show me the code for the hearts?! that is amazing!

332 points
553fb6ae9113cba8970001cf_935186399
Submitted by
Shrek
over 2 years ago

3 Comments

55df2afa95e3787b9200005e_359368177 Judy over 2 years ago

Maciej did a really nice job with those hearts. There is a link there, just before the image, that takes you to the code.

553fb6ae9113cba8970001cf_935186399 Shrek over 2 years ago

where would I add this in my code?

55df2afa95e3787b9200005e_359368177 Judy over 2 years ago

The code for shapes is located in bubbles.js. You will need to get a copy of that for yourself. How that works will depend on if you are keeping the files on your computer or on a web server of if you are using Codebits. In bubbles.js you should be able to find the code for circles and squares. There are more shapes that people have made over here: http://www.codecademy.com/forum_questions/533d5690548c3545a4002563


0 votes

permalink

How do I make the code for hearts? and where do I put it?

388 points
571e6b5714f3ef31f900042b_234929580
Submitted by
cp99455
about 2 years ago

1 Comment

55df2afa95e3787b9200005e_359368177 Judy about 2 years ago

You will need to make a copy of the code in bubbles.js in a place where your other files can reach it because that is where you will be putting the code for your new shape. Most people are use Codebits to do this -- you can click on a person's name here and then you will be taken to their profile page where you will be able to view and fork any of their Codebits. There is a link in the first post to the code for hearts so you don't have to reinvent that but you can certainly make changes once you figure out how it works. Have a look at Maciej's or my profile to see our Codebits. In my profile you can find my Hearts codebit, fork it and go from there.


0 votes

permalink

Thanks! But how do I fork it? Also, If I want to make my own bubble shapes I need to download Bubbles.js?

388 points
571e6b5714f3ef31f900042b_234929580
Submitted by
cp99455
about 2 years ago

7 Comments

55df2afa95e3787b9200005e_359368177 Judy about 2 years ago

When you are in the code editing mode of someone else's Codebit and you make any little change then it will ask you if you would like to save your own copy. If you want to code anywhere besides Codecademy then, yes you would need to download bubbles.js.

571e6b5714f3ef31f900042b_234929580 cp99455 about 2 years ago

Ok, thank you so much! This is exciting stuff!

55df2afa95e3787b9200005e_359368177 Judy about 2 years ago

Yes it is - I really like these bubbles!

571e6b5714f3ef31f900042b_234929580 cp99455 about 2 years ago

OH! one more question, where do I download Bubbles.js? I looked on google and I can't seem to find an official website.

55df2afa95e3787b9200005e_359368177 Judy about 2 years ago

Have a look in your index.html file -- you will see a link to bubbles.js -- go to that link with your web browser and then save the text.

571e6b5714f3ef31f900042b_234929580 cp99455 about 2 years ago

ok, thanks so much!

55df2afa95e3787b9200005e_359368177 Judy about 2 years ago

You're welcome!