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!

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

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.

cool!

969 points
Submitted by Jason
6 years ago

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

Awesome dude! I really like it!

866 points
Submitted by Kári Hlynsson
6 years ago

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?

that is so interesting thanks ^_^

764 points
Submitted by Dante Ar
6 years ago

Maciej Wiercioch 6 years ago

Thanks! And you’re welcome :)

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

i hope you guys like it ^_^

764 points
Submitted by Dante Ar
6 years ago

Maciej Wiercioch 6 years ago

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

1 vote

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

217 points
Submitted by ipodlover3354
6 years ago

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.

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

764 points
Submitted by Dante Ar
6 years ago

Nice as ice!

903 points
Submitted by VeganGod
6 years ago

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

366 points
Submitted by Nervoxin
6 years ago

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

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

388 points
Submitted by cp99455
5 years ago

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.

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

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