Delete Icon
This forum is now read-only. Please use our new forums at discuss.codecademy.com.
0 points
Submitted by Maciej Wiercioch
6 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

Answer 534f285c52f863c801000764

9 votes

Permalink

cool!

969 points
Submitted by Jason
6 years ago

2 comments

Maciej Wiercioch 6 years ago

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

Jason 5 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

Answer 5371262d9c4e9dce960001c9

5 votes

Permalink

Awesome dude! I really like it!

866 points
Submitted by Kári Hlynsson
6 years ago

3 comments

Maciej Wiercioch 6 years ago

Thank you very much! =)

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

Maciej Wiercioch 6 years ago

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

Answer 537114f580ff330f34000f62

4 votes

Permalink

that is so interesting thanks ^_^

764 points
Submitted by Dante Ar
6 years ago

1 comments

Maciej Wiercioch 6 years ago

Thanks! And you’re welcome :)

Answer 537bb4c57c82ca62b5000316

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
Submitted by Dante Ar
6 years ago

5 comments

Maciej Wiercioch 6 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!

Dante Ar 6 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

Maciej Wiercioch 6 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! :)

Jason 6 years ago

I think he just has an accent

Dante Ar 6 years ago

Ok Maciej i understood ^_^,lol

Answer 53e0de157c82cac740002940

1 vote

Permalink

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

217 points
Submitted by ipodlover3354
6 years ago

4 comments

Maciej Wiercioch 6 years ago

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

ipodlover3354 6 years ago

Yes.

Maciej Wiercioch 6 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 :)

ipodlover3354 6 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.

Answer 537d44ec80ff331c95000500

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
Submitted by Dante Ar
6 years ago

Answer 547f5cfb7c82ca793a003802

0 votes

Permalink

Nice as ice!

903 points
Submitted by VeganGod
6 years ago

Answer 54f749bf9376764e9b002b33

0 votes

Permalink

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

366 points
Submitted by Nervoxin
6 years ago

3 comments

Judy 6 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.

Nervoxin 6 years ago

where would I add this in my code?

Judy 6 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

Answer 55c67bc19113cb06550001cc

0 votes

Permalink

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

388 points
Submitted by cp99455
5 years ago

1 comments

Judy 5 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.

Answer 55c79eea9376762b32000317

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
Submitted by cp99455
5 years ago

7 comments

Judy 5 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.

cp99455 5 years ago

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

Judy 5 years ago

Yes it is - I really like these bubbles!

cp99455 5 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.

Judy 5 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.

cp99455 5 years ago

ok, thanks so much!

Judy 5 years ago

You’re welcome!