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

Animate Your Name Forum

View Course

3691 points
55df2afa95e3787b9200005e_359368177
Submitted by
Judy
about 3 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.

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();

3691 points
55df2afa95e3787b9200005e_359368177
Submitted by
Judy
over 2 years ago


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.

3691 points
55df2afa95e3787b9200005e_359368177
Submitted by
Judy
over 2 years ago


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.

3691 points
55df2afa95e3787b9200005e_359368177
Submitted by
Judy
over 2 years ago


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

3691 points
55df2afa95e3787b9200005e_359368177
Submitted by
Judy
over 2 years ago


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/

3691 points
55df2afa95e3787b9200005e_359368177
Submitted by
Judy
over 2 years ago


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
54889bdcd3292f644f0005e5_954688136
Submitted by
JordanLescaleet
about 2 years ago


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

3691 points
55df2afa95e3787b9200005e_359368177
Submitted by
Judy
over 2 years ago


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 :'(

3691 points
55df2afa95e3787b9200005e_359368177
Submitted by
Judy
over 2 years ago


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
}

3691 points
55df2afa95e3787b9200005e_359368177
Submitted by
Judy
over 2 years ago


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

3691 points
55df2afa95e3787b9200005e_359368177
Submitted by
Judy
over 2 years ago


0 votes

permalink

![Flock of Seagulls][1]

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();
    ```

  [1]: http://i.imgur.com/UpTw4jf.png

3691 points
55df2afa95e3787b9200005e_359368177
Submitted by
Judy
over 2 years ago

3 Comments

549a7ba49113cba91200af41_836889415 HiteshRohila over 2 years ago

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

55df2afa95e3787b9200005e_359368177 Judy over 2 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.

549a7ba49113cba91200af41_836889415 HiteshRohila over 2 years ago

Thanks for the information :)


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

3691 points
55df2afa95e3787b9200005e_359368177
Submitted by
Judy
over 2 years ago


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


}

887 points
53936e64548c35cd6a002180_628253785
Submitted by
Wafzal2P/Risviltsov/Defeating_The_Be
over 2 years ago

1 Comment

53936e64548c35cd6a002180_628253785 Wafzal2P/Risviltsov/Defeating_The_Be over 2 years ago

don't work.


0 votes

permalink

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

571 points
54bbc4a99113cb9116003ab6_938228051
Submitted by
Kewlgirl88
over 2 years ago

3 Comments

55df2afa95e3787b9200005e_359368177 Judy over 2 years ago

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

54bbc4a99113cb9116003ab6_938228051 Kewlgirl88 over 2 years ago

kk. Thanks! You are one smart coder!

554aca459113cb4f76000189_503585315 Lincoln over 2 years ago

How do you get your icon to move?!


0 votes

permalink

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

268 points
554aca459113cb4f76000189_503585315
Submitted by
Lincoln
over 2 years ago

1 Comment

55e32aa8e39efed814000316_885628478 The Flaming Lion over 1 year ago

it already is


0 votes

permalink

that's a very nice trick!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

266 points
54a6aa9a86f552962900307b_924944857
Submitted by
Arushi Singh
over 2 years ago


0 votes

permalink

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

706 points
54b1479b9113cb2e89003b1e_580704040
Submitted by
Wolf72x
over 2 years ago

6 Comments

55df2afa95e3787b9200005e_359368177 Judy over 2 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?

54b1479b9113cb2e89003b1e_580704040 Wolf72x over 2 years ago

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

55df2afa95e3787b9200005e_359368177 Judy over 2 years ago

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

54b1479b9113cb2e89003b1e_580704040 Wolf72x over 2 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

55df2afa95e3787b9200005e_359368177 Judy over 2 years ago

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

54b1479b9113cb2e89003b1e_580704040 Wolf72x over 2 years ago

Yeah that would be a problem xD


0 votes

permalink

Is possible to use images to replace the shapes?

781 points
Picture
Submitted by
Julie Anne Moore
about 2 years ago

5 Comments

55df2afa95e3787b9200005e_359368177 Judy about 2 years ago

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

Picture Julie Anne Moore almost 2 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.

55df2afa95e3787b9200005e_359368177 Judy almost 2 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.

Picture Julie Anne Moore almost 2 years ago

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

55df2afa95e3787b9200005e_359368177 Judy almost 2 years ago

You did it! Very nice.


0 votes

permalink

wow,nice

636 points
541c44d8548c35b82f002a3c_228774915
Submitted by
Rideedee
almost 2 years ago


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
Picture
Submitted by
Julie Anne Moore
almost 2 years ago

2 Comments

55df2afa95e3787b9200005e_359368177 Judy almost 2 years ago

I like them better now that they are round!

Picture Julie Anne Moore almost 2 years ago

Agree, It makes the letters clearer.