Polygon Animation with Turtle Graphics
Warning
This page is currently a stub. The true animation tutorial can be found here
Overview
This tutorial will take you through the basics of drawing with turtle graphics through the creation of the motion of stars as seen from a space craft exceeding the speed of light. This is a journey, but like all journeys, it has a series of small steps.
In preparation for the journey, it is assumed that you already have some knowledge of JavaScript and Turtle Graphics. If not, you may want to read or review the following pages before starting here:
On this journey we will visit various turtle graphics functions, creating JavaScript functions to do new things, repeating mechanisms to do the same thing over and over, using coordinate systems to plot things on the screen, using JavaScript objects to simplify parameter passing and processing, and finally animating some polygons.
Another way is to take advantage of the loop control mechanisms that are part of JavaScript. Since this is “real” JavaScript programming, it is the preferred way to go. JavaScript has many looping mechanisms from which to choose including:
- a
whileloop, - a
do..whileloop and - a
forloop. All of these require the following be done:
-
initialize the loop variable
-
do some action
-
if the loop variable meets a condition
a. change the loop variable
b. loop back to number 2 to repeat
The while loop this looks like:
i = 0 /*1*/
while (1 < 4) { /*3 and 3b*/
forward (100) /*2*/
right (90) /*2*/
i = i + 1 /*3a*/
}
The do..while loop this looks like:
i = 0 /*1*/
do {
forward (100) /*2*/
right (90) /*2*/
i = i + 1 /*3a*/
} while (1 <= 4) { /*3 and 3b*/
The for loop this looks like:
for ( i = 0 /*1*/; i < 4 /*3*/; i = i + 1 /*3b*/) { /*2*/
forward (100)
right (90)
}
Note that the while and for loops may not execute the intruction at all since the test is done before the actions are executed. The do..while will always execute the actions at least once, because the test is performed after the actions. The do..while also has to test for one more than the others since it is testing after the loop variable has been changed. The for loop has the most compact syntax and it is generally preferred by programmers.
Coloring the Polygon or Spikey
In the tutorial you learned how to change the color and width of the stroke.
We will review that and add a fill function to fill a shape with a color.
To change the color of the turtle’s pen use use the color()
function with a color as in the following example:
function spikey (n, revs, size) {
var i = 0
while (i < n) {
write (i)
forward (size)
right (revs*360/n)
i = i + 1
}
}
function demo() {
reset() // just clear the screen and home the turtle
color("red")
spikey(5, 2, 50)
}
To change the width of the pen stroke, we use the width() function
with the width expressed as a number of pixels. A pixel is the
size of smallest piece of the display, a dot or maybe a period.
function spikey (n, revs, size) {
var i = 0
while (i < n) {
write (i)
forward (size)
right (revs*360/n)
i = i + 1
}
}
function demo () {
reset()
color("blue")
width(5)
spikey(5, 2, 50)
}
We can even fill in the interior of the polygons or spikeys
by using the fill directives of turtle graphics. This directive
is a little different than others we have used in that it has
to bracket a series of moves with a beginShape() and
a fillShape() functions. This lets the program know the boundaries
of the shape to fill.
Of course the movements between the beginShape() and
fillShape() functions should start and end at the same point on
the canvas.
So let’s give it a try:
function spikey (n, revs, size) {
var i = 0
while (i < n) {
write (i)
forward (size)
right (revs*360/n)
i = i + 1
}
}
function demo () {
reset()
color("black")
beginShape()
spikey(5, 2, 50)
fillShape("red")
}
The stroke color, the color left by the turtle’s pen, and the fill color can be different.
You may have noticed that the fill color goes over the top of pen stroke and it overlaps about half of the stroke line. To make the width of the stroke as you intended it, you need to re-stroke the graphic to get it on top of the fill.
function spikey (n, revs, size) {
var i = 0
while (i < n) {
write (i)
forward (size)
right (revs*360/n)
i = i + 1
}
}
function demo () {
reset()
width(1)
color("white")
beginShape()
spikey(5, 2, 50)
fillShape("blue")
width(2)
color("white")
spikey(5, 2, 50)
}
Positioning the Polygon or Spikey
We want to start with the
spikey() function that was discussed
in the Turtle Graphics Tutorial.
We don’t have to always start at the center of the canvas. We can start
anywhere on the canvas. We can use the basic turtle moves like
the following code to move the figure:
function spikey (n, revs, size) {
var i = 0
while (i < n) {
write (i)
forward (size)
right (revs*360/n)
i = i + 1
}
}
function demo() {
reset()
forward (100)
right(90)
forward( 100)
left(90)
spikey( 5, 2, 40)
}
That leaves a line of where the turtle traveled. We can prevent the
turtle from marking by having it lift the pen as in the following code.
function spikey (n, revs, size) {
var i = 0
while (i < n) {
write (i)
forward (size)
right (revs*360/n)
i = i + 1
}
}
function demo() {
reset()
penup()
forward (100)
right(90)
forward( 100)
left(90)
pendown()
spikey( 5, 2, 40)
}
But it still isn’t centered about a specific point. It would be nice if it were centered because spikies of different sizes could be place concentrically and the points of the spike can be reoriented without appearing to move the spikey, sort of like the spokes of a bicycle wheel. To center the two spikies takes a little geometry and trigonometry. So if you don’t understand the following calculations, don’t worry, this will be the only time that the math will be this difficult in this tutorial. Consulting the figure on the right we find that:
- Turn Angle = 360° * revolutions / number of points
- Outside Angle = 180° + Turn Angle
- Inside Angle = 360° - Outside Angle
- Angle a = (360° - Outside Angle) / 2
- Angle a = (180° - Turn Angle) / 2
- Angle a = (180° - (360 * revolutions / number of points)) / 2
- adjacent side = stroke length /2 = radius * cosine (Angle a)
- multiplying both sides by 2 gives:
- stroke length = 2 * radius * cosine (Angle a)
- replacing Angle a:
- stroke length = 2 * radius * cosine((180° - Turn Angle) / 2)
These calculations can be used to center a spikey. The size of the spikey
can now be the radius of a circle that would go around the spikey.
The code for a spikey that uses a central point and a radius
instead of a side to determine size in the following code.
Math.cos() is the cosine function from the JavaScript Math
library. The beauty of the cosine function is that it expresses the ratio of
the side adjacent to the angle to the hypotenuse (the long side of the
right triangle as a function of the angle. Since the JavaScript implementation
of the cosine function uses radians instead of degrees, the function
degToRad() is used to make the proper conversion. There
are 2 pi radians in a circle and there are 360 in the same circle. So this
conversion finds the fraction of a circle (number of degrees divided by
the number of degrees in a cirles), and multiples that fraction by the
number of radian in a circle (2 pi).
This also uses the
goto() function to move the turtle to an x, y position on the
canvas Cartesian coordinate system. It also uses the
setheading() function to orient the spikey. Although the
spikey will be drawn with a point straight up, it could be set to any angle.
function spikey ( points, revs, radius, x, y) {
penup()
goto(x, y)
setheading(0)
forward(radius)
var turnAngle = 360 * revs/points
var angleA = ( 180 - turnAngle)/2
var stroke = 2 * radius * Math.cos( degToRad( angleA))
right( 180 - angleA)
pendown()
for( var i = 0; i < points; i = i + 1) { //>
forward( stroke)
right( turnAngle)
}
}
function demo () {
reset()
hideTurtle()
for (rad = 40; rad <=100; rad = rad + 10) {
spikey( 5, 2, rad, -10, 10)
}
}
Since there are a lot of changes to the spikey() function all at
once, let’s stop to explain what is going on.
First up, the spikey function has different parameters.
The points and
revs parameters have the same purpose as before,
that is to limit the scope of the variables to within the spikey()
function.
The side parameter has been replaced with a
radius parameter. Both specify the size of the spikey,
but in different ways. radius specifies the radius
of a circle that would go around all of the points of the spikey. So spikeys
with different
number of points or different number of
revs would still be the same size as each other.
The new parameters x and y
specify the center point of the spikey.
As you can see when the code runs, there are seven perfectly centered and aligned five-pointed stars.
Using Named Parameters and Arguments
The spikey() function has three parameters: number of points,
number of revolutions and length of side. But even with just three parameters,
it starts to get confusing as to what the order of the parameters are.
JavaScript has a mechanism to help with that, although it is not direct.
To review, JavaScript has objects. For instance a car object may be
car = { make: "Volkswagen",
model: "bug",
year: 1967,
color: "red" }
The make, model, year and color are attributes of the car. You can have other cars with other attributes. To access an attribute you use the dot notation with the object.attribute as in:
car1 = { make: "Volkswagen",
model: "bug",
year: 1967,
color: "red" }
car2 = { make: "Ford",
model: "Mustang",
year: 2008,
color: "blue" }
paint = car1.color // paint is red
paint = car2.color // paint is blue
A function can use an object as its only parameter and then break out
the individual attributes. When the function is invoked, one must use
the object notation in the argument. So taking the familiar, by now,
spikey() function and changing it for object notation:
function spikey ( args ) {
for( var i=0; i < args.points; i = i+1) { //>
forward (args.side)
right( 360*args.revs/args.points)
}
}
function demo() {
reset();
spikey({points:5, revs:2, side:50})
left(180)
spikey({side:50, revs:2, points:5}) // order doesn't matter.
}
This was for the old simple spikey function. Let’s say you want a spikey function that does what a spikey does, but now you want to add a starting point, a starting angle, a stroke width and color and a fill color. That’s a lot to remember just in itself, but then you also have to remember the parameter order. Naming the parameters reduces that complexity.
This function also know whether to re-stroke the spikey or not. This is a case where a simple conditional provides some functionality and saves the user of the function having to call it twice.
function spikey ( args ) {
goto( args.x, args.y)
setheading( args.heading)
forward( args.radius)
var turnAngle = 360 * args.revs/args.points
var angleA = (180 - turnAngle)/2
var stroke = 2 * args.radius * Math.cos(degToRad(angleA))
right(180-angleA)
pendown()
color( args.color)
width( args.width)
beginShape()
for( var i = 0; i < args.points; i = i + 1) { //>
forward( stroke)
right( turnAngle)
}
fillShape( args.fill)
}
function demo () {
reset()
hideTurtle()
spikey({ points:5,
revs:2,
radius:15,
x:0,
y:0,
heading:0,
color:"red",
width:3,
fill:"white"
})
spikey({ x:0,
y:30,
radius: 10,
heading:180,
side:50,
points:5,
revs:2,
color:"blue",
fill:"yellow"
})
spikey({ x:30,
y:10,
radius: 10,
heading:180-72,
side:50,
points:5,
revs:2,
color:"blue",
fill:"yellow"
})
spikey({ x:20,
y:-28,
radius: 10,
heading:-36,
side:50,
points:5,
revs:2,
stroke:"blue",
fill:"yellow"
})
spikey({ x:-20,
y:-28,
radius: 10,
heading:36,
side:50,
points:5,
revs:2,
stroke:"blue",
fill:"yellow"
})
spikey({ x:-30,
y:10,
radius: 10,
heading:180-72,
side:50,
points:5,
revs:2,
color:"blue",
fill:"yellow"
})
}
##Default Parameters
So now we don’t need to worry about the order of the parameters, but what happens
if we leave one out. As it stands, if an attribute is not supplied, JavaScript
will stop with an error because that attribute is undefined. ‘undefined’ is a
special value any variable can have. The easiest thing to do is to set all
undefined attributes with a default value as shown below. Note that even
arguments which probably should have been supplied are furnished with a default
here. It may be a better idea to let an argument like side remain undefined,
so that the function is called properly.
The following is a code segment to handle default values
// fill out default values for undefined attributes
if (args.x === undefined) args.x = 0
if (args.y === undefined) args.y = 0
if (args.radius === undefined) args.radius = 10 // shouldn't default
if (args.heading === undefined) args.heading = 0
if (args.color === undefined) args.color = "black"
if (args.fill === undefined) args.fill = "white"
if (args.width === undefined) args.width = 1
if (args.revs === undefined) args.revs = 1 // garden variety polygon
if (args.points === undefined) args.points = 5 // shouldn't default
Polygon Animation
Now we can play around a bit with animation. Animation is done by drawing a series of pictures or frames. Each frame is slightly different than the preceding frame. If the frames are played at the right speed the human eye blurs the frames together to form motion. Let’s start with simply twisting a simple star.
function spikey ( args ) {
goto( args.x, args.y)
setheading( args.heading)
forward( args.radius)
var turnAngle = 360 * args.revs/args.points
var angleA = (180 - turnAngle)/2
var stroke = 2 * args.radius * Math.cos(degToRad(angleA))
right(180-angleA)
pendown()
color( args.color)
width( args.width)
beginShape()
for( var i = 0; i < args.points; i = i + 1) { //>
forward( stroke)
right( turnAngle)
}
fillShape( args.fill)
}
// GLOBALS
var twistAngle
// FUNCTIONS
function twistStar() {
reset()
hideTurtle()
spikey({
points:5,
revs:2,
radius:40,
x:0,
y:0,
heading:twistAngle,
color:"red",
width:3,
fill:"white"
})
twistAngle = twistAngle + 2
delay( twistStar, 30)
}
function demo () {
reset()
hideTurtle()
twistAngle = 0
twistStar()
}
An improvement can be made to this code. The object defining the star can be made a stand alone definition. This allows the program to be maintained in a more organized fashion: the definitions allow the characteristics of the star to be defined separately from the code that does the action. This code is shown below. Note the two sections of the code: GLOBALS and FUNCTIONS. The variables defined as they are in the GLOBALS section are global and may be accessed by any function. ("// GLOBALS” is a comment that is just a signal to the programmer that this is the beginning of a section.) The name “deltaRotation” is the way that an engineer or physisist would talk about change in rotation.
// GLOBALS
var star1 = {
points:5,
revs:2,
radius:40,
x:0,
y:0,
heading:0,
color:"red",
width:3,
fill:"white"
}
var deltaRotation = 2 // number of degrees of twist between frames
var frameDelay = 30 // milliseconds between frames
// FUNCTIONS
function spikey ( args ) { // the simpler version for brevity
goto( args.x, args.y)
setheading( args.heading)
forward( args.radius)
var turnAngle = 360 * args.revs/args.points
var angleA = (180 - turnAngle)/2
var stroke = 2 * args.radius * Math.cos(degToRad(angleA))
right(180-angleA)
pendown()
color( args.color)
width( args.width)
beginShape()
for( var i = 0; i < args.points; i = i + 1) { //>
forward( stroke)
right( turnAngle)
}
fillShape( args.fill)
}
function twistStar() {
clear()
spikey(star1)
star1.heading = star1.heading + deltaRotation
delay( twistStar, frameDelay)
}
function demo () {
reset()
hideTurtle()
twistStar()
}
Now let’s move the star about. So instead of changing the rotation, we will change its x and y position. These are independent so you can move the star in any direction including backward when using a negative change or delta.
// GLOBALS
var star1 = {
points:5,
revs:2,
radius:40,
x:0,
y:0,
heading:0,
color:"red",
width:3,
fill:"white"
}
var deltaX = 2 // pixels per frame in x direction
var deltaY = 2 // pixels per frame in y direction
var frameDelay = 30 // milliseconds between frames
// FUNCTIONS
function spikey ( args ) { // the simpler version for brevity
goto( args.x, args.y)
setheading( args.heading)
forward( args.radius)
var turnAngle = 360 * args.revs/args.points
var angleA = (180 - turnAngle)/2
var stroke = 2 * args.radius * Math.cos(degToRad(angleA))
right(180-angleA)
pendown()
color( args.color)
width( args.width)
beginShape()
for( var i = 0; i < args.points; i = i + 1) { //>
forward( stroke)
right( turnAngle)
}
fillShape( args.fill)
}
function moveStar() {
clear()
spikey(star1)
star1.x = star1.x + deltaX
star1.y = star1.y + deltaY
delay( moveStar, frameDelay)
}
function demo () {
reset()
hideTurtle()
wrap(false) // fix edge condition
moveStar()
}
Now let’s grow the star over time. We do that by adding a delta to the radius for each frame.
// GLOBALS
var star1 = {
points:5,
revs:2,
radius:40,
x:0,
y:0,
heading:0,
color:"red",
width:3,
fill:"white"
}
var deltaRadius = 2 // pixels per frame in x direction
var frameDelay = 30 // milliseconds between frames
// FUNCTIONS
function spikey ( args ) { // the simpler version for brevity
goto( args.x, args.y)
setheading( args.heading)
forward( args.radius)
var turnAngle = 360 * args.revs/args.points
var angleA = (180 - turnAngle)/2
var stroke = 2 * args.radius * Math.cos(degToRad(angleA))
right(180-angleA)
pendown()
color( args.color)
width( args.width)
beginShape()
for( var i = 0; i < args.points; i = i + 1) { //>
forward( stroke)
right( turnAngle)
}
fillShape( args.fill)
}
function growStar() {
clear()
spikey(star1)
star1.radius = star1.radius + deltaRadius
delay( growStar, frameDelay)
}
function demo () {
reset()
hideTurtle()
wrap(false) // fix edge condition
growStar()
}
Now let’s combine all three and move, grow, and twist it at the same time.
// GLOBALS
var star1 = {
points:5,
revs:2,
radius:40,
x:0,
y:0,
heading:0,
color:"red",
width:3,
fill:"white"
}
var deltaX = 2 // change in pixels per frame in x direction
var deltaY = 2 // change in pixels per frame in y direction
var deltaHeading = 2 // change in heading per frame
var deltaRadius = 2 // change in radius per frame
var frameDelay = 30 // milliseconds between frames
// FUNCTIONS
function spikey ( args ) { // the simpler version for brevity
goto( args.x, args.y)
setheading( args.heading)
forward( args.radius)
var turnAngle = 360 * args.revs/args.points
var angleA = (180 - turnAngle)/2
var stroke = 2 * args.radius * Math.cos(degToRad(angleA))
right(180-angleA)
pendown()
color( args.color)
width( args.width)
beginShape()
for( var i = 0; i < args.points; i = i + 1) { //>
forward( stroke)
right( turnAngle)
}
fillShape( args.fill)
}
function changeStar() {
clear()
spikey(star1)
star1.x = star1.x + deltaX
star1.y = star1.y + deltaY
star1.heading = star1.heading + deltaHeading
star1.radius = star1.radius + deltaRadius
delay( changeStar, frameDelay)
}
function demo () {
reset()
hideTurtle()
wrap(false) // fix edge condition
changeStar()
}
This code could be improved a small bit. The deltas can be part of the other attributes of the star. This way if there were more than one star, they would have separate speeds. While we are at it, let’s also shorten “delta” to just plain “d.” To make it interesting, we will also add a second star.
// GLOBALS
var star1 = {
points:5,
revs:2,
radius:40,
x:0,
y:0,
heading:0,
color:"red",
width:3,
fill:"white",
dx: 2,
dy: 2,
dhead: 2,
drad: 2
}
var star2 = {
points:7,
revs:3,
radius:40,
x:-100,
y:0,
heading:0,
color:"black",
width:3,
fill:"blue",
dx: 4,
dy: 2,
dhead: 6,
drad: 3
}
var frameDelay = 30 // milliseconds between frames
// FUNCTIONS
function spikey ( args ) { // the simpler version for brevity
goto( args.x, args.y)
setheading( args.heading)
forward( args.radius)
var turnAngle = 360 * args.revs/args.points
var angleA = (180 - turnAngle)/2
var stroke = 2 * args.radius * Math.cos(degToRad(angleA))
right(180-angleA)
pendown()
color( args.color)
width( args.width)
beginShape()
for( var i = 0; i < args.points; i = i + 1) { //>
forward( stroke)
right( turnAngle)
}
fillShape( args.fill)
}
function changeStars() {
clear()
spikey(star1)
star1.x = star1.x + star1.dx
star1.y = star1.y + star1.dy
star1.heading = star1.heading + star1.dhead
star1.radius = star1.radius + star1.drad
spikey(star2)
star2.x = star2.x + star2.dx
star2.y = star2.y + star2.dy
star2.heading = star2.heading + star2.dhead
star2.radius = star2.radius + star2.drad
delay( changeStars, frameDelay)
}
function demo () {
reset()
hideTurtle()
wrap(false) // fix edge condition
changeStars()
}
Now let’s add acceleration to the mix. Acceleration just changes the speed parameters a bit over time. Acceleration is the feeling you get when speeding up. Negative acceleration or deceleration is the feeling you get when slowing down. Since acceleration is just a change in speed we will abbreviate acceleration as “dd…” We can add acceleration to any speed attribute, so we will add variables ddx, ddx, ddy, ddhead, and dddrad to add acceleration attributes for x, y, heading and radius respectively.
// GLOBALS
var star1 = {
points:5,
revs:2,
radius:40,
x:0,
y:0,
heading:0,
color:"red",
width:3,
fill:"white",
dx: 2,
dy: 2,
dhead: 2,
drad: 2,
ddx: .2,
ddy: .2,
ddhead: .2,
ddrad: .2
}
var star2 = {
points:7,
revs:3,
radius:40,
x:-100,
y:0,
heading:0,
color:"black",
width:3,
fill:"blue",
dx: 4,
dy: 2,
dhead: 6,
drad: 3,
ddx: -.4,
ddy: .1,
ddhead: -.3,
ddrad: -.2
}
var frameDelay = 30 // milliseconds between frames
// FUNCTIONS
function spikey ( args ) { // the simpler version for brevity
goto( args.x, args.y)
setheading( args.heading)
forward( args.radius)
var turnAngle = 360 * args.revs/args.points
var angleA = (180 - turnAngle)/2
var stroke = 2 * args.radius * Math.cos(degToRad(angleA))
right(180-angleA)
pendown()
color( args.color)
width( args.width)
beginShape()
for( var i = 0; i < args.points; i = i + 1) { //>
forward( stroke)
right( turnAngle)
}
fillShape( args.fill)
}
function changeStar() {
clear()
spikey(star1)
star1.x = star1.x + star1.dx
star1.y = star1.y + star1.dy
star1.heading = star1.heading + star1.dhead
star1.radius = star1.radius + star1.drad
star1.dx = star1.dx + star1.ddx
star1.dy = star1.dy + star1.ddy
star1.dhead = star1.dhead + star1.ddhead
star1.drad = star1.drad + star1.ddrad
spikey(star2)
star2.x = star2.x + star2.dx
star2.y = star2.y + star2.dy
star2.heading = star2.heading + star2.dhead
star2.radius = star2.radius + star2.drad
star2.dx = star2.dx + star2.ddx
star2.dy = star2.dy + star2.ddy
star2.dhead = star2.dhead + star2.ddhead
star2.drad = star2.drad + star2.ddrad
delay( changeStar, frameDelay)
}
function demo () {
reset()
hideTurtle()
wrap(false) // fix edge condition
changeStar()
}
So we have done motion and acceleration on two stars. Now let’s multiple stars. If the stars were defined as an array, the individual processing for each star would be the same (except for the array member number). There should be some variation in the size, color and position of each star. The stars should appear to be moving from the center of the canvas straight toward the edge.
// GLOBALS
var frameDelay = 30 // milliseconds between frames
var polys = []
var revs = new Array (0,0,0,0,0, 2,2,3,3,4,4,5)
// FUNCTIONS
function generatePolys () {
var x
var y
var points
for (i=0; i < 10; i++) { //>
x = random (-100, 100)
y = random (-100, 100)
points = random(5, 11)
polys.push ({
points: points,
revs: revs[ points],
radius: random( 1,6)/2,
color: logoColors[ random(15)],
fill: logoColors[ random(15)],
width: 1,
heading: random(360),
x: x,
y: y,
drad: 1,
dhead: 1,
dx: Math.sign(x),
dy: Math.sign(y) * Math.abs(y/x),
ddrad: random(1,6)/20,
ddhead: .2,
ddx: .4 * Math.sign(x),
ddy: .2 * Math.sign(y) * Math.abs(y/x)
})
}
}
function spikey ( args ) { // the simpler version for brevity
goto( args.x, args.y)
setheading( args.heading)
forward( args.radius)
var turnAngle = 360 * args.revs/args.points
var angleA = (180 - turnAngle)/2
var stroke = 2 * args.radius * Math.cos(degToRad(angleA))
right(180-angleA)
pendown()
color( args.color)
width( args.width)
beginShape()
for( var i = 0; i < args.points; i = i + 1) { //>
forward( stroke)
right( turnAngle)
}
fillShape( args.fill)
}
function changeStars() {
clear()
for (i=0; i < 10; i++) { //>
spikey(polys[i])
polys[i].x = polys[i].x + polys[i].dx
polys[i].y = polys[i].y + polys[i].dy
polys[i].heading = polys[i].heading + polys[i].dhead
polys[i].radius = polys[i].radius + polys[i].drad
polys[i].dx = polys[i].dx + polys[i].ddx
polys[i].dy = polys[i].dy + polys[i].ddy
polys[i].dhead = polys[i].dhead + polys[i].ddhead
polys[i].drad = polys[i].drad + polys[i].ddrad
}
delay( changeStars, frameDelay)
}
function demo () {
reset()
hideTurtle()
wrap(false) // fix edge condition
generatePolys()
changeStars()
}
That was cool, but the animation stopped way too soon. We will now add
an incubator to create new baby stars, so that the animation lasts longer.
This is done by modifying the generatePolys() function to take
an argument for the number of stars to generate, and then calling it
from the changeStars() function.
// GLOBALS
var frameDelay = 30 // milliseconds between frames
var polys = []
// FUNCTIONS
function generatePolys (count) {
var x
var y
var points
console.log(count)
for (i=0; i < count; i++) { //>
x = random (-100, 100)
y = random (-100, 100)
points = random(5, 11)
polys.push ({
points: 5,
revs: 2,
radius: random( 1,6)/2,
color: logoColors[ random(15)],
fill: logoColors[ random(15)],
width: 1,
heading: random(360),
x: x,
y: y,
drad: 1,
dhead: 1,
dx: Math.sign(x),
dy: Math.sign(y) * Math.abs(y/x),
ddrad: random(1,6)/60,
ddhead: .2,
ddx: .4 * Math.sign(x),
ddy: .2 * Math.sign(y) * Math.abs(y/x)
})
}
}
function spikey ( args ) { // the simpler version for brevity
goto( args.x, args.y)
setheading( args.heading)
forward( args.radius)
var turnAngle = 360 * args.revs/args.points
var angleA = (180 - turnAngle)/2
var stroke = 2 * args.radius * Math.cos(degToRad(angleA))
right(180-angleA)
pendown()
color( args.color)
width( args.width)
beginShape()
for( var i = 0; i < args.points; i = i + 1) { //>
forward( stroke)
right( turnAngle)
}
fillShape( args.fill)
}
function changeStars() {
clear()
for (i=0; i < polys.length; i++) { //>
spikey(polys[i])
polys[i].x = polys[i].x + polys[i].dx
polys[i].y = polys[i].y + polys[i].dy
polys[i].heading = polys[i].heading + polys[i].dhead
polys[i].radius = polys[i].radius + polys[i].drad
polys[i].dx = polys[i].dx + polys[i].ddx
polys[i].dy = polys[i].dy + polys[i].ddy
polys[i].dhead = polys[i].dhead + polys[i].ddhead
polys[i].drad = polys[i].drad + polys[i].ddrad
}
generatePolys(1)
delay( changeStars, frameDelay)
}
function demo () {
reset()
hideTurtle()
wrap(false) // fix edge condition
generatePolys(10)
changeStars()
}
That works for a while, but it is consuming memory by continually adding to the polys array. Even though stars are no longer on the canvas they are using memory and are being recomputed each frame. The motion will get slower and slower over time.
One way to correct the problem is to delete elements from the polys array when
that element is off the canvas.
The edges of the canvas are given by the Turtle Graphics functions
minX(), maxX(), minY(), and maxY().
But remember its not just when the center of the star passes by the edge.
but the extremities of the star. All of the arms of the star are within
the radius of the star, so that needs to be added to the dimension of the canvas.
Array.splice(start, count) is method for chopping out members of an array.
This has two arguments start, the element where the deletion should
start, and count, the number of elements to delete. Since this deletes
elements and causes the length of the array to change, we need to do this
from the end of the array and move toward its beginning.
// GLOBALS
var frameDelay = 30 // milliseconds between frames
var polys = []
// FUNCTIONS
function generatePolys (count) {
var x
var y
var points
console.log(count)
for (i=0; i < count; i++) { //>
x = random (-100, 100)
y = random (-100, 100)
points = random(5, 11)
polys.push ({
points: 5,
revs: 2,
radius: random( 1,6)/2,
color: logoColors[ random(15)],
fill: logoColors[ random(15)],
width: 1,
heading: random(360),
x: x,
y: y,
drad: 1,
dhead: 1,
dx: Math.sign(x),
dy: Math.sign(y) * Math.abs(y/x),
ddrad: random(1,6)/60,
ddhead: .2,
ddx: .4 * Math.sign(x),
ddy: .2 * Math.sign(y) * Math.abs(y/x)
})
}
}
function spikey ( args ) { // the simpler version for brevity
goto( args.x, args.y)
setheading( args.heading)
forward( args.radius)
var turnAngle = 360 * args.revs/args.points
var angleA = (180 - turnAngle)/2
var stroke = 2 * args.radius * Math.cos(degToRad(angleA))
right(180-angleA)
pendown()
color( args.color)
width( args.width)
beginShape()
for( var i = 0; i < args.points; i = i + 1) { //>
forward( stroke)
right( turnAngle)
}
fillShape( args.fill)
}
function killPolys() {
for (i=polys.length-2; i >= 0; i = i - 1) { //>
if (polys[i].x -polys[i].radius > maxX() ||
polys[i].x + polys[i].radius < minX() ||
polys[i].y - polys[i].radius > maxY() ||
polys[i].x + polys[i].radius < minX()) {
console.log("killing " + i + " " +
polys[i].x + " " +
polys[i].y + " " +
polys.length)
polys.splice(i,1)
}
}
}
function changeStars() {
clear()
for (i=0; i < polys.length; i++) { //>
spikey(polys[i])
polys[i].x = polys[i].x + polys[i].dx
polys[i].y = polys[i].y + polys[i].dy
polys[i].heading = polys[i].heading + polys[i].dhead
polys[i].radius = polys[i].radius + polys[i].drad
polys[i].dx = polys[i].dx + polys[i].ddx
polys[i].dy = polys[i].dy + polys[i].ddy
polys[i].dhead = polys[i].dhead + polys[i].ddhead
polys[i].drad = polys[i].drad + polys[i].ddrad
}
killPolys()
generatePolys(1)
delay( changeStars, frameDelay)
}
function demo () {
reset()
hideTurtle()
wrap(false) // fix edge condition
generatePolys(10)
changeStars()
}
Objects, Constructor, and Methods
JavaScript is an Object Oriented language. We have used objects in the previous example, but we have yet to make the code object oriented. This next step creates the objects using a constructor. A constructor is a special function that sets the attributes of an object. It uses the special key word “this” that refers to the object being created by the constructor.
function Spikey ( points, revs, radius) {
this.points = points
this.revs = revs
this.radius = radius
)
The constructor is invoked to build an object as in the following:
star = new Spikey( 5, 2, 40)
Objects also have methods. A method is a function that is tied to the object.
Other objects can have methods with the same name and an object may have
many methods. The following shows the definition of a Spikey Class with
a grow() method.
function Spikey ( points, revs, radius) {
this.points = points
this.revs = revs
this.radius = radius
this.grow = function (delta) {
this.radius = this.radius + delta
}
)
The method is invoked as in the following code.
star = new Spikey( 5, 2, 40) // construct a new Spikey named "star"
star.grow(2) // invoke the grow method on the Spikey named "star"
Another way to add a method to a constructor is to use the “prototype” keyword. The definition using the prototype keyword is as if it were part of the original constructor, so the keyword “this” still refers to the object being created.
function Spikey ( points, revs, radius) {
this.points = points
this.revs = revs
this.radius = radius
}
Spikey.prototype.grow = function (delta) {
this.radius = this.radius + delta
}
Rewriting the final animation example using object orientation becomes something like the following code.
// CONSTRUCTORS
function Spikey ( ) {
// set to default value initially
this.points = 5
this.revs = 2
this.radius = 10
this.color = "black"
this.fill = "white"
this.width = 1
this.heading = 0
this.x = 0
this.y = 0
this.drad = 0
this.dhead = 0
this.dx = 0
this.dy = 0
this.ddrad = 0
this.ddhead = 0
this.ddx = 0
this.ddy = 0
}
Spikey.prototype.grow = function () {
this.radius = this.radius + this.drad
}
Spikey.prototype.move = function () {
this.x = this.x + this.dx
this.y = this.y + this.dy
}
Spikey.prototype.twist = function () {
this.heading = this.heading + this.dhead
}
Spikey.prototype.accelerate = function () {
this.dx = this.dx + this.ddx
this.dy = this.dy + this.ddy
this.dhead = this.dhead + this.ddhead
this.drad = this.drad + this.ddrad
}
Spikey.prototype.draw = function () { // the simpler version for brevity
goto( this.x, this.y)
setheading( this.heading)
forward( this.radius)
var turnAngle = 360 * this.revs/this.points
var angleA = (180 - turnAngle)/2
var stroke = 2 * this.radius * Math.cos(degToRad(angleA))
right(180-angleA)
pendown()
color( this.color)
width( this.width)
beginShape()
for( var i = 0; i < this.points; i = i + 1) { //>
forward( stroke)
right( turnAngle)
}
fillShape( this.fill)
}
// GLOBALS
var frameDelay = 30 // milliseconds between frames
var polys = []
// FUNCTIONS
function generatePolys (count) {
var x
var y
var points
console.log(count)
for (i=0; i < count; i++) { //>
x = random (-100, 100)
y = random (-100, 100)
points = random(5, 11)
polys.push( new Spikey())
var last = polys.length -1
polys[last].points = 5
polys[last].revs = 2
polys[last].radius = random( 1,6)/2
polys[last].color = logoColors[ random(15)]
polys[last].fill = logoColors[ random(15)]
polys[last].width = 1
polys[last].heading = random(360)
polys[last].x = x
polys[last].y = y
polys[last].drad = 1
polys[last].dhead = 1
polys[last].dx = Math.sign(x)
polys[last].dy = Math.sign(y) * Math.abs(y/x)
polys[last].ddrad = random(1,6)/60
polys[last].ddhead = .2
polys[last].ddx = .4 * Math.sign(x)
polys[last].ddy = .2 * Math.sign(y) * Math.abs(y/x)
}
}
function killPolys() {
for (i=polys.length-2; i >= 0; i = i - 1) { //>
if (polys[i].x -polys[i].radius > maxX() ||
polys[i].x + polys[i].radius < minX() ||
polys[i].y - polys[i].radius > maxY() ||
polys[i].x + polys[i].radius < minX()) {
console.log("killing " + i + " " +
polys[i].x + " " +
polys[i].y + " " +
polys.length)
polys.splice(i,1)
}
}
}
function changeStars() {
clear()
for (i=0; i < polys.length; i++) { //>
polys[i].draw()
polys[i].move()
polys[i].twist()
polys[i].grow()
polys[i].accelerate()
}
killPolys()
generatePolys(1)
delay( changeStars, frameDelay)
}
function demo () {
reset()
hideTurtle()
wrap(false) // fix edge condition
generatePolys(10)
changeStars()
}