animation.html

<!doctype html>
<html>
<head>
  <title>Polygon Animation</title>
</head>
    <link type="text/css" rel="stylesheet" href="./కుంచికweb.css"/>
    <link type="text/css" rel="stylesheet" href="./tutorial.css"/>
    <link href="https://fonts.googleapis.com/css?family=Poppins|Roboto" rel="stylesheet">
    <script src="tutorial.js"></script>
<body>
<header>
<h1>JavaScript Turtle Graphics</h1>
<div class="navigation">
<ul>
  <li><a href="overview.html" title="Overview of Turtle Graphics">Intro</a></li>
  <li><a href="guide.html" title="User Guide for Turtle Graphics Integrated Development Environment">Guide</a></li>
  <li><a href="కుంచిక.html" title="Integrated Development Environment for Turtle Graphics">IDE</a></li>
  <li><a href="javascript.html" title="Tutorial for Simple JavaScript">JavaScript</a></li>
  <li><a href="tutorial.html" title="Tutorial for Basic Turtle Graphics">Tutorial</a></li>
  <li><a class="active" href="animation.html" title="Tutorial for Animation with Turtle Graphics">Animation</a></li>
  <li><a href="examples.html" title="Examples of Things Created with Turtle Graphics">Examples</a></li>
  <li><a href="reference.html" title="Language Reference">Reference</a></li>
  <li><a href="nerd.html" title="Nerd Links">Nerd</a></li>
  <li><a href="about.html" title="About Turtle Graphics">About</a></li>
</div>
</header>
<article>
<!-- original source file is  at ~/dev/js-tur/backups/examplesHold/polygonStory.js-->
<h1>Polygon Animation</h1>
<h2>Introduction</h2>
<p>
This tutorial will take you through the basics of drawing with కుంచిక
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.
</p>
<p>
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:
<ul>
<li>
<a href="javascript.html">JavaScript Basics</a>
</li>
<li>
<a href="tutorial.html">Turtle Graphics Basics</a>
</li>
<li>
<a href="guide.html">Guide to the IDT Turtle Graphics</a>
</li>
</ul>
<p>
On this journey we will visit various కుంచిక 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.
</p>
<p>
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 <code>while</code> loop,
a <code>do...while</code> loop and a <code>for</code> loop.
All of these require the following be done:
</p>
<h2> Coloring the Polygon or Spikey </h2>
<p>
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 కుంచిక's pen use use the <code>రంగు_మార్చు()</code>
function with a color as in the following example:
</p>
<code class="tryme">function spikey (n, revs, size) {
  var i = 0
  while (i < n) {
    వ్రాయి(i)
    ముందుకు_జరుగు(size)
    కుడి_వైపు_తిరుగు(revs*360/n)
    i = i + 1
  }
}

function ప్రదర్శన() {
  ఆది_స్థితి() // just చెరిపి_వేయి the screen and home the కుంచిక
  రంగు_మార్చు( ఎరుపు )
  spikey(5, 2, 50)
}
</code>
<p>
To change the width of the pen stroke, we use the <code>width</code> function
with the width expressed as a number of pixels. A <code>pixel</code> is the
size of smallest piece of the display, a dot or maybe a period.
</p>
<code class="tryme">function spikey (n, revs, size) {
  var i = 0
  while (i < n) {
    వ్రాయి(i)
    ముందుకు_జరుగు(size)
    కుడి_వైపు_తిరుగు(revs*360/n)
    i = i + 1
  }
}

function ప్రదర్శన() {
  ఆది_స్థితి()
  రంగు_మార్చు( నీలము )
  వెడల్పు(5)
  spikey(5, 2, 50)
}
</code>
<p>
We can even fill in the interior of the polygons or spikeys
by using the fill directives of కుంచిక graphics. This directive
is a little different than others we have used in that it has
to bracket a series of moves with a <code>ఆకారము_ప్రారంభించు()</code> and
a <code>ఆకారము_ముగించు()</code> functions. This lets the program know the boundaries
of the shape to fill.
Of course the movements between the <code>ఆకారము_ప్రారంభించు()</code> and
<code>ఆకారము_ముగించు()</code> functions should start and end at the same point on
the canvas.
</p>
<p>
So let's give it a try:
</p>
<code class="tryme">function spikey (n, revs, size) {
  var i = 0
  while (i < n) {
    వ్రాయి(i)
    ముందుకు_జరుగు(size)
    కుడి_వైపు_తిరుగు(revs*360/n)
    i = i + 1
  }
}

function ప్రదర్శన() {
  ఆది_స్థితి()
  రంగు_మార్చు("నలుపు")
  ఆకారము_ప్రారంభించు()
  spikey(5, 2, 50)
  ఆకారము_ముగించు("red")
}
</code>

<p>
The stroke color, the color left by the కుంచిక's pen, and the fill
color can be different.
</p>
<p>
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.
</p>
<code class="tryme">function spikey (n, revs, size) {
  var i = 0
  while (i < n) {
    వ్రాయి(i)
    ముందుకు_జరుగు(size)
    కుడి_వైపు_తిరుగు(revs*360/n)
    i = i + 1
  }
}

function ప్రదర్శన() {
  ఆది_స్థితి()
  వెడల్పు(1)
  రంగు_మార్చు( తెలుపు )
  ఆకారము_ప్రారంభించు()
  spikey(5, 2, 50)
  ఆకారము_ముగించు("blue")
  వెడల్పు(2)
  రంగు_మార్చు( తెలుపు )
  spikey(5, 2, 50)
}
</code>
<h2>Positioning the Polygon or Spikey </h2>
<p>
<img src="./images/positioned_spikey.png">
We want to start with the <code>spikey()</code> 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 కుంచిక moves like
the following code to move the figure:
</p>
<code class="tryme">function spikey (n, revs, size) {
  var i = 0
  while (i &lt; n) {
    వ్రాయి(i)
    ముందుకు_జరుగు(size)
    కుడి_వైపు_తిరుగు(revs*360/n)
    i = i + 1
  }
}

function ప్రదర్శన() {
  ఆది_స్థితి()
  ముందుకు_జరుగు(100)
  కుడి_వైపు_తిరుగు(90)
  ముందుకు_జరుగు( 100)
  ఎడమ_వైపు_తిరుగు(90)
  spikey( 5, 2, 40)
}
</code>
<img src="./images/transparently_positioned_spikey.png">
<p>
That leaves a line of where the కుంచిక traveled. We can prevent the
కుంచిక from marking by having it lift the pen as in the following code.
</p>
<code class="tryme">function spikey (n, revs, size) {
  var i = 0
  while (i &lt; n) {
    వ్రాయి(i)
    ముందుకు_జరుగు(size)
    కుడి_వైపు_తిరుగు(revs*360/n)
    i = i + 1
  }
}

function ప్రదర్శన() {
  ఆది_స్థితి()
  కుంచికను_పైకి_ఎత్తు()
  ముందుకు_జరుగు(100)
  కుడి_వైపు_తిరుగు(90)
  ముందుకు_జరుగు( 100)
  ఎడమ_వైపు_తిరుగు(90)
  కుంచికను_కింద_పెట్టు()
  spikey( 5, 2, 40)
}
</code>
<p>
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:
</p>
<ul>
<img src="./images/spikey_radius.png" width=400>
<li>
Turn Angle = 360° * revolutions / number of points
</li>
<li>
Outside Angle = 180° + Turn Angle
</li>
<li>
Inside Angle = 360° - Outside Angle
</li>
<li>
Angle a = (360° - Outside Angle) / 2
</li>
<li>
Angle a = (180° - Turn Angle) / 2
</li>
<li>
Angle a = (180° - (360 * revolutions / number of points)) / 2
</li>
<li>
adjacent side = stroke length /2 = వ్యాసార్థము * cosine (Angle a)
</li>
<li>
multiplying both sides by 2 gives:
<br>
stroke length = 2 * వ్యాసార్థము * cosine (Angle a)
</li>
<li>
or replacing Angle a:
<br>
stroke length = 2 * వ్యాసార్థము * cosine((180° - Turn Angle) / 2)
</li>
</ul>
<p>
These calculations can be used to center a spikey. The size of the spikey
can now be the వ్యాసార్థము of a వృత్తము that would go around the spikey.
The code for a spikey that uses a central point and a వ్యాసార్థము
instead of a side to determine size in the following code.
<code>Math.cos()</code> 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 కోణము to the hypotenuse (the long side of the
right triagle as a function of the కోణము. Since the JavaScript implementation
of the cosine function uses radians instead of degrees, the function
<code>degToRad()</code> is used to make the proper conversion. There
are 2 pi radians in a వృత్తము and there are 360 in the same circle. So this
conversion finds the fraction of a వృత్తము(number of degrees divided by
the number of degrees in a cirles), and multiples that fraction by the 
number of radian in a వృత్తము(2 pi).
</p>
<p>
This also uses the
<code>స్థానము_మార్చు()</code> function to move the కుంచిక to an x, y position on the
canvas Cartesian coordinate system. It also uses the
<code>దిశ_మార్చు()</code> function to orient the spikey. Although the
spikey will be drawn with a point straight up, it could be set to any కోణము.
</p>
<code class="tryme">function spikey ( points, revs, వ్యాసార్థము, x, y) {
  కుంచికను_పైకి_ఎత్తు()
  స్థానము_మార్చు(x, y)
  దిశ_మార్చు(0)
  ముందుకు_జరుగు(వ్యాసార్థము)
  var turnAngle = 360 * revs/points
  var angleA = ( 180 - turnAngle)/2
  var stroke = 2 * వ్యాసార్థము * Math.cos( degToRad( angleA))
  కుడి_వైపు_తిరుగు( 180 - angleA)
  కుంచికను_కింద_పెట్టు()

  for( var i = 0; i < points; i = i + 1) { //>
    ముందుకు_జరుగు( stroke)
    కుడి_వైపు_తిరుగు( turnAngle)
  }
}

function ప్రదర్శన() {
  ఆది_స్థితి()
  కుంచికను_దాచు()
  for (rad = 40; rad <=100; rad = rad + 10) {
    spikey( 5, 2, rad, -10, 10)
  }
}
</code>
<p>
Since there are a lot of changes to the <code>spikey()</code> function all at
once, let's stop to explain what is going on.
First up, the spikey function has different parameters.
The <span class="var">points</span> and 
<span class="var">revs</span> parameters have the same purpose as before,
that is to limit the scope of the variables to within the <code>spikey</code>
function.
The <span class="var">side</span> parameter has been replaced with a
<span class="var">వ్యాసార్థము</span> parameter. Both specify the size of the spikey,
but in different ways. <span class="var">వ్యాసార్థము</span> specifies the వ్యాసార్థము
of a వృత్తము that would go around all of the points of the spikey. So spikeys
with different
number of <span class="var">points</span> or different number of
<span class="var">revs</span> would still be the same size as each other.
The new parameters <span class="var">x</span> and <span class="var">y</span>
specify the center point of the spikey.
</p>
<p>
As you can see when the code runs, there are seven perfectly centered and aligned
five-pointed stars.
</p>
<h2>Using Named Parameters and Arguments</h2>
<p>
The <code>spikey()</code> 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
</p>
<code>car = { make: "Volkswagen", model: "bug", year: 1967, color: "red" }
</code>
<p>
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:
</p>
<code>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
</code>
<p>
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,
<code>spikey()</code> function and changing it for object notation:
</p>
<code class="tryme">function spikey ( args ) {
  for( var i=0; i < args.points; i = i+1) { //>
    ముందుకు_జరుగు(args.side)
    కుడి_వైపు_తిరుగు( 360*args.revs/args.points)
  }
}

function ప్రదర్శన() {
  ఆది_స్థితి();
  spikey({points:5, revs:2, side:50})
  ఎడమ_వైపు_తిరుగు(180)
  spikey({side:50, revs:2, points:5}) // order doesn't matter.
}
</code>
<p>
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 కోణము,
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.
</p>
<p>
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.
</p>
<code class="tryme">function spikey ( args ) {
  స్థానము_మార్చు( args.x, args.y)
  దిశ_మార్చు( args.heading)
  ముందుకు_జరుగు( args.వ్యాసార్థము)
  var turnAngle = 360 * args.revs/args.points
  var angleA = (180 - turnAngle)/2
  var stroke = 2 * args.వ్యాసార్థము * Math.cos(degToRad(angleA))
  కుడి_వైపు_తిరుగు(180-angleA)
  కుంచికను_కింద_పెట్టు()

  రంగు_మార్చు( args.color)
  వెడల్పు( args.width)
  ఆకారము_ప్రారంభించు()
  for( var i = 0; i < args.points; i = i + 1) { //>
    ముందుకు_జరుగు( stroke)
    కుడి_వైపు_తిరుగు( turnAngle)
  }
  ఆకారము_ముగించు( args.fill)
}

function ప్రదర్శన() {
  ఆది_స్థితి()
  కుంచికను_దాచు()
  spikey({ points:5,
           revs:2,
           వ్యాసార్థము:15,
           x:0,
           y:0,
           heading:0,
           color:"red",
           width:3,
           fill:"white"
         })
  spikey({ x:0,
           y:30,
           వ్యాసార్థము: 10,
           heading:180,
           side:50,
           points:5,
           revs:2,
           color:"blue",
           fill:"yellow"
         })
  spikey({ x:30,
           y:10,
           వ్యాసార్థము: 10,
           heading:180-72,
           side:50,
           points:5,
           revs:2,
           color:"blue",
           fill:"yellow"
         })
  spikey({ x:20,
           y:-28,
           వ్యాసార్థము: 10,
           heading:-36,
           side:50,
           points:5,
           revs:2,
           stroke:"blue",
           fill:"yellow"
         })
  spikey({ x:-20,
           y:-28,
           వ్యాసార్థము: 10,
           heading:36,
           side:50,
           points:5,
           revs:2,
           stroke:"blue",
           fill:"yellow"
         })
  spikey({ x:-30,
           y:10,
           వ్యాసార్థము: 10,
           heading:180-72,
           side:50,
           points:5,
           revs:2,
           color:"blue",
           fill:"yellow"
         })
}
</code>
<h2>
Default Parameters
</h2>
<p>
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
</p>
<code>// fill out default values for undefined attributes
  if (args.x === undefined) args.x = 0
  if (args.y === undefined) args.y = 0
  if (args.వ్యాసార్థము === undefined) args.వ్యాసార్థము = 10 // shouldn't default
  if (args.heading === undefined) args.heading = 0
  if (args.color === undefined) args.color = "నలుపు"
  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
</code>
<h2> Polygon Animation  </h2>
<p>
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.
</p>
<code class="tryme">function spikey ( args ) {
  స్థానము_మార్చు( args.x, args.y)
  దిశ_మార్చు( args.heading)
  ముందుకు_జరుగు( args.వ్యాసార్థము)
  var turnAngle = 360 * args.revs/args.points
  var angleA = (180 - turnAngle)/2
  var stroke = 2 * args.వ్యాసార్థము * Math.cos(degToRad(angleA))
  కుడి_వైపు_తిరుగు(180-angleA)
  కుంచికను_కింద_పెట్టు()

  రంగు_మార్చు( args.color)
  వెడల్పు( args.width)
  ఆకారము_ప్రారంభించు()
  for( var i = 0; i < args.points; i = i + 1) { //>
    ముందుకు_జరుగు( stroke)
    కుడి_వైపు_తిరుగు( turnAngle)
  }
  ఆకారము_ముగించు( args.fill)
}

// GLOBALS
var twistAngle

// FUNCTIONS

function twistStar() {
  ఆది_స్థితి()
  కుంచికను_దాచు()
  spikey({
    points:5,
    revs:2,
    వ్యాసార్థము:40,
    x:0,
    y:0,
    heading:twistAngle,
    color:"red",
    width:3, 
    fill:"white"
  })
  twistAngle = twistAngle + 2
  విలంబించు( twistStar, 30)
}


function ప్రదర్శన() {
  ఆది_స్థితి()
  కుంచికను_దాచు()
  twistAngle = 0
  twistStar()
}
</code>
<p>
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.
</p>
<code class="tryme">// GLOBALS

var star1 = {
              points:5,
              revs:2,
              వ్యాసార్థము: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
  స్థానము_మార్చు( args.x, args.y)
  దిశ_మార్చు( args.heading)
  ముందుకు_జరుగు( args.వ్యాసార్థము)
  var turnAngle = 360 * args.revs/args.points
  var angleA = (180 - turnAngle)/2
  var stroke = 2 * args.వ్యాసార్థము * Math.cos(degToRad(angleA))
  కుడి_వైపు_తిరుగు(180-angleA)
  కుంచికను_కింద_పెట్టు()

  రంగు_మార్చు( args.color)
  వెడల్పు( args.width)
  ఆకారము_ప్రారంభించు()
  for( var i = 0; i < args.points; i = i + 1) { //>
    ముందుకు_జరుగు( stroke)
    కుడి_వైపు_తిరుగు( turnAngle)
  }
  ఆకారము_ముగించు( args.fill)
}


function twistStar() {
  చెరిపి_వేయి()
  spikey(star1)
  star1.heading = star1.heading + deltaRotation
  విలంబించు( twistStar, frameDelay)
}


function ప్రదర్శన() {
  ఆది_స్థితి()
  కుంచికను_దాచు()
  twistStar()
}
</code>
<p>
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.
</p>
<code class="tryme">// GLOBALS
var star1 = {
              points:5,
              revs:2,
              వ్యాసార్థము: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
  స్థానము_మార్చు( args.x, args.y)
  దిశ_మార్చు( args.heading)
  ముందుకు_జరుగు( args.వ్యాసార్థము)
  var turnAngle = 360 * args.revs/args.points
  var angleA = (180 - turnAngle)/2
  var stroke = 2 * args.వ్యాసార్థము * Math.cos(degToRad(angleA))
  కుడి_వైపు_తిరుగు(180-angleA)
  కుంచికను_కింద_పెట్టు()

  రంగు_మార్చు( args.color)
  వెడల్పు( args.width)
  ఆకారము_ప్రారంభించు()
  for( var i = 0; i < args.points; i = i + 1) { //>
    ముందుకు_జరుగు( stroke)
    కుడి_వైపు_తిరుగు( turnAngle)
  }
  ఆకారము_ముగించు( args.fill)
}


function moveStar() {
  చెరిపి_వేయి()
  spikey(star1)
  star1.x = star1.x + deltaX
  star1.y = star1.y + deltaY
  విలంబించు( moveStar, frameDelay)
}


function ప్రదర్శన() {
  ఆది_స్థితి()
  కుంచికను_దాచు()
   చుట్టొద్దు() // fix edge condition
  moveStar()
}
</code>
<p>
Now let's grow the star over time. We do that by adding a delta to the వ్యాసార్థము for each frame.
</p>
<code class="tryme">// GLOBALS
var star1 = {
              points:5,
              revs:2,
              వ్యాసార్థము: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
  స్థానము_మార్చు( args.x, args.y)
  దిశ_మార్చు( args.heading)
  ముందుకు_జరుగు( args.వ్యాసార్థము)
  var turnAngle = 360 * args.revs/args.points
  var angleA = (180 - turnAngle)/2
  var stroke = 2 * args.వ్యాసార్థము * Math.cos(degToRad(angleA))
  కుడి_వైపు_తిరుగు(180-angleA)
  కుంచికను_కింద_పెట్టు()

  రంగు_మార్చు( args.color)
  వెడల్పు( args.width)
  ఆకారము_ప్రారంభించు()
  for( var i = 0; i < args.points; i = i + 1) { //>
    ముందుకు_జరుగు( stroke)
    కుడి_వైపు_తిరుగు( turnAngle)
  }
  ఆకారము_ముగించు( args.fill)
}


function growStar() {
  చెరిపి_వేయి()
  spikey(star1)
  star1.వ్యాసార్థము = star1.వ్యాసార్థము + deltaRadius
  విలంబించు( growStar, frameDelay)
}


function ప్రదర్శన() {
  ఆది_స్థితి()
  కుంచికను_దాచు()
   చుట్టొద్దు() // fix edge condition
  growStar()
}
</code>
<p>
Now let's combine all three and move, grow, and twist it at the same time.
</p>
<code class="tryme">// GLOBALS
var star1 = {
              points:5,
              revs:2,
              వ్యాసార్థము: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 వ్యాసార్థము per frame
var frameDelay = 30    // milliseconds between frames


// FUNCTIONS

function spikey ( args ) { // the simpler version for brevity
  స్థానము_మార్చు( args.x, args.y)
  దిశ_మార్చు( args.heading)
  ముందుకు_జరుగు( args.వ్యాసార్థము)
  var turnAngle = 360 * args.revs/args.points
  var angleA = (180 - turnAngle)/2
  var stroke = 2 * args.వ్యాసార్థము * Math.cos(degToRad(angleA))
  కుడి_వైపు_తిరుగు(180-angleA)
  కుంచికను_కింద_పెట్టు()

  రంగు_మార్చు( args.color)
  వెడల్పు( args.width)
  ఆకారము_ప్రారంభించు()
  for( var i = 0; i < args.points; i = i + 1) { //>
    ముందుకు_జరుగు( stroke)
    కుడి_వైపు_తిరుగు( turnAngle)
  }
  ఆకారము_ముగించు( args.fill)
}


function changeStar() {
  చెరిపి_వేయి()
  spikey(star1)
  star1.x = star1.x + deltaX
  star1.y = star1.y + deltaY
  star1.heading = star1.heading + deltaHeading
  star1.వ్యాసార్థము = star1.వ్యాసార్థము + deltaRadius
  విలంబించు( changeStar, frameDelay)
}


function ప్రదర్శన() {
  ఆది_స్థితి()
  కుంచికను_దాచు()
   చుట్టొద్దు() // fix edge condition
  changeStar()
}
</code>
<p>
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. 
</p>
<code class="tryme">// GLOBALS
var star1 = {
              points:5,
              revs:2,
              వ్యాసార్థము: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,
              వ్యాసార్థము:40,
              x:-100,
              y:0,
              heading:0,
              color:"నలుపు",
              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
  స్థానము_మార్చు( args.x, args.y)
  దిశ_మార్చు( args.heading)
  ముందుకు_జరుగు( args.వ్యాసార్థము)
  var turnAngle = 360 * args.revs/args.points
  var angleA = (180 - turnAngle)/2
  var stroke = 2 * args.వ్యాసార్థము * Math.cos(degToRad(angleA))
  కుడి_వైపు_తిరుగు(180-angleA)
  కుంచికను_కింద_పెట్టు()

  రంగు_మార్చు( args.color)
  వెడల్పు( args.width)
  ఆకారము_ప్రారంభించు()
  for( var i = 0; i < args.points; i = i + 1) { //>
    ముందుకు_జరుగు( stroke)
    కుడి_వైపు_తిరుగు( turnAngle)
  }
  ఆకారము_ముగించు( args.fill)
}


function changeStars() {
  చెరిపి_వేయి()

  spikey(star1)
  star1.x = star1.x + star1.dx
  star1.y = star1.y + star1.dy
  star1.heading = star1.heading + star1.dhead
  star1.వ్యాసార్థము = star1.వ్యాసార్థము + star1.drad

  spikey(star2)
  star2.x = star2.x + star2.dx
  star2.y = star2.y + star2.dy
  star2.heading = star2.heading + star2.dhead
  star2.వ్యాసార్థము = star2.వ్యాసార్థము + star2.drad

  విలంబించు( changeStars, frameDelay)
}


function ప్రదర్శన() {
  ఆది_స్థితి()
  కుంచికను_దాచు()
   చుట్టొద్దు() // fix edge condition
  changeStars()
}
</code>
<p>
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 <span class="var">ddx</span>,
<span class="var">ddx</span>, <span class="var">ddy</span>,
<span class="var">ddhead</span>, and <span class="var">dddrad</span> to add
acceleration attributes for x, y, heading and వ్యాసార్థము respectively.
</p>
<code class="tryme">// GLOBALS
var star1 = {
              points:5,
              revs:2,
              వ్యాసార్థము: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,
              వ్యాసార్థము:40,
              x:-100,
              y:0,
              heading:0,
              color:"నలుపు",
              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
  స్థానము_మార్చు( args.x, args.y)
  దిశ_మార్చు( args.heading)
  ముందుకు_జరుగు( args.వ్యాసార్థము)
  var turnAngle = 360 * args.revs/args.points
  var angleA = (180 - turnAngle)/2
  var stroke = 2 * args.వ్యాసార్థము * Math.cos(degToRad(angleA))
  కుడి_వైపు_తిరుగు(180-angleA)
  కుంచికను_కింద_పెట్టు()

  రంగు_మార్చు( args.color)
  వెడల్పు( args.width)
  ఆకారము_ప్రారంభించు()
  for( var i = 0; i < args.points; i = i + 1) { //>
    ముందుకు_జరుగు( stroke)
    కుడి_వైపు_తిరుగు( turnAngle)
  }
  ఆకారము_ముగించు( args.fill)
}


function changeStar() {
  చెరిపి_వేయి()

  spikey(star1)
  star1.x = star1.x + star1.dx
  star1.y = star1.y + star1.dy
  star1.heading = star1.heading + star1.dhead
  star1.వ్యాసార్థము = star1.వ్యాసార్థము + 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.వ్యాసార్థము = star2.వ్యాసార్థము + 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

  విలంబించు( changeStar, frameDelay)
}


function ప్రదర్శన() {
  ఆది_స్థితి()
  కుంచికను_దాచు()
   చుట్టొద్దు() // fix edge condition
  changeStar()
}
</code>
<p>
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.
</p>
<code class="tryme">// 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 = యాదృచ్ఛిక_సంఖ్య(5, 11)
    polys.push ({
      points: points,
      revs: revs[ points],
      వ్యాసార్థము: యాదృచ్ఛిక_సంఖ్య( 1,6)/2,
      color: logoColors[ యాదృచ్ఛిక_సంఖ్య(15)],
      fill: logoColors[ యాదృచ్ఛిక_సంఖ్య(15)],
      width: 1,
      heading: యాదృచ్ఛిక_సంఖ్య(360),
      x: x,
      y: y,
      drad: 1,
      dhead: 1,
      dx: Math.sign(x),
      dy: Math.sign(y) * Math.abs(y/x),
      ddrad: యాదృచ్ఛిక_సంఖ్య(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
  స్థానము_మార్చు( args.x, args.y)
  దిశ_మార్చు( args.heading)
  ముందుకు_జరుగు( args.వ్యాసార్థము)
  var turnAngle = 360 * args.revs/args.points
  var angleA = (180 - turnAngle)/2
  var stroke = 2 * args.వ్యాసార్థము * Math.cos(degToRad(angleA))
  కుడి_వైపు_తిరుగు(180-angleA)
  కుంచికను_కింద_పెట్టు()

  రంగు_మార్చు( args.color)
  వెడల్పు( args.width)
  ఆకారము_ప్రారంభించు()
  for( var i = 0; i < args.points; i = i + 1) { //>
    ముందుకు_జరుగు( stroke)
    కుడి_వైపు_తిరుగు( turnAngle)
  }
  ఆకారము_ముగించు( args.fill)
}


function changeStars() {
  చెరిపి_వేయి()

  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].వ్యాసార్థము = polys[i].వ్యాసార్థము + 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
  }

  విలంబించు( changeStars, frameDelay)
}


function ప్రదర్శన() {
  ఆది_స్థితి()
  కుంచికను_దాచు()
   చుట్టొద్దు() // fix edge condition
  generatePolys()
  changeStars()
}
</code>
<p>
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 <code>generatePolys()</code> function to take
an argument for the number of stars to generate, and then calling it
from the <code>changeStars()</code> function.
</p>
<code class="tryme">// 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 = యాదృచ్ఛిక_సంఖ్య(5, 11)
    polys.push ({
      points: 5,
      revs: 2,
      వ్యాసార్థము: యాదృచ్ఛిక_సంఖ్య( 1,6)/2,
      color: logoColors[ యాదృచ్ఛిక_సంఖ్య(15)],
      fill: logoColors[ యాదృచ్ఛిక_సంఖ్య(15)],
      width: 1,
      heading: యాదృచ్ఛిక_సంఖ్య(360),
      x: x,
      y: y,
      drad: 1,
      dhead: 1,
      dx: Math.sign(x),
      dy: Math.sign(y) * Math.abs(y/x),
      ddrad: యాదృచ్ఛిక_సంఖ్య(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
  స్థానము_మార్చు( args.x, args.y)
  దిశ_మార్చు( args.heading)
  ముందుకు_జరుగు( args.వ్యాసార్థము)
  var turnAngle = 360 * args.revs/args.points
  var angleA = (180 - turnAngle)/2
  var stroke = 2 * args.వ్యాసార్థము * Math.cos(degToRad(angleA))
  కుడి_వైపు_తిరుగు(180-angleA)
  కుంచికను_కింద_పెట్టు()

  రంగు_మార్చు( args.color)
  వెడల్పు( args.width)
  ఆకారము_ప్రారంభించు()
  for( var i = 0; i < args.points; i = i + 1) { //>
    ముందుకు_జరుగు( stroke)
    కుడి_వైపు_తిరుగు( turnAngle)
  }
  ఆకారము_ముగించు( args.fill)
}


function changeStars() {
  చెరిపి_వేయి()

  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].వ్యాసార్థము = polys[i].వ్యాసార్థము + 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)
  విలంబించు( changeStars, frameDelay)
}


function ప్రదర్శన() {
  ఆది_స్థితి()
  కుంచికను_దాచు()
   చుట్టొద్దు() // fix edge condition
  generatePolys(10)
  changeStars()
}
</code>
<p>
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.
</p>
<p>
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
<code>కనిష్ఠX()</code>,
<code>గరిష్ఠX()</code>,
<code>కనిష్ఠY()</code>, and
<code>గరిష్ఠY()</code>.
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 వ్యాసార్థము of the star, so that needs to be added to the dimension of the canvas.
<code>Array.splice(start, count)</code> is method for chopping out members of an array.
This has two arguments <span class="var">start</span>, the element where the deletion should
start, and <span class="var">count</span>, 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.
</p>
<code class="tryme">// 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 = యాదృచ్ఛిక_సంఖ్య(5, 11)
    polys.push ({
      points: 5,
      revs: 2,
      వ్యాసార్థము: యాదృచ్ఛిక_సంఖ్య( 1,6)/2,
      color: logoColors[ యాదృచ్ఛిక_సంఖ్య(15)],
      fill: logoColors[ యాదృచ్ఛిక_సంఖ్య(15)],
      width: 1,
      heading: యాదృచ్ఛిక_సంఖ్య(360),
      x: x,
      y: y,
      drad: 1,
      dhead: 1,
      dx: Math.sign(x),
      dy: Math.sign(y) * Math.abs(y/x),
      ddrad: యాదృచ్ఛిక_సంఖ్య(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
  స్థానము_మార్చు( args.x, args.y)
  దిశ_మార్చు( args.heading)
  ముందుకు_జరుగు( args.వ్యాసార్థము)
  var turnAngle = 360 * args.revs/args.points
  var angleA = (180 - turnAngle)/2
  var stroke = 2 * args.వ్యాసార్థము * Math.cos(degToRad(angleA))
  కుడి_వైపు_తిరుగు(180-angleA)
  కుంచికను_కింద_పెట్టు()

  రంగు_మార్చు( args.color)
  వెడల్పు( args.width)
  ఆకారము_ప్రారంభించు()
  for( var i = 0; i < args.points; i = i + 1) { //>
    ముందుకు_జరుగు( stroke)
    కుడి_వైపు_తిరుగు( turnAngle)
  }
  ఆకారము_ముగించు( args.fill)
}


function killPolys() {
  for (i=polys.length-2; i >= 0; i = i - 1) { //>
    if (polys[i].x -polys[i].వ్యాసార్థము > గరిష్ఠX() ||
        polys[i].x + polys[i].వ్యాసార్థము < కనిష్ఠX() ||
        polys[i].y - polys[i].వ్యాసార్థము > గరిష్ఠY() ||
        polys[i].x + polys[i].వ్యాసార్థము < కనిష్ఠX()) {
      console.log("killing " + i + " " +
                                polys[i].x + " " +
                                polys[i].y + " " +
                                polys.length)
      polys.splice(i,1) 
    } 
  }
}

function changeStars() {
  చెరిపి_వేయి()

  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].వ్యాసార్థము = polys[i].వ్యాసార్థము + 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)
  విలంబించు( changeStars, frameDelay)
}


function ప్రదర్శన() {
  ఆది_స్థితి()
  కుంచికను_దాచు()
   చుట్టొద్దు() // fix edge condition
  generatePolys(10)
  changeStars()
}
</code>
<ch2>
Objects, Constructor, and Methods
</h2>
<p>
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.
</p>
<code>function Spikey ( points, revs, వ్యాసార్థము) {
  this.points = points
  this.revs = revs
  this.వ్యాసార్థము = వ్యాసార్థము
)
</code>
<p>
The constructor is invoked to build an object as in the following:
</p>
<code>star = new Spikey( 5, 2, 40)
</code>
<p>
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 <code>grow()</code> method.
</p>
<code>function Spikey ( points, revs, వ్యాసార్థము) {
  this.points = points
  this.revs = revs
  this.వ్యాసార్థము = వ్యాసార్థము
  this.grow = function (delta) {
    this.వ్యాసార్థము = this.వ్యాసార్థము + delta
  }
)
</code>
<p>
The method is invoked as in the following code.
</p>
<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"
</code>
<p>
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.
</p>
<code>function Spikey ( points, revs, వ్యాసార్థము) {
  this.points = points
  this.revs = revs
  this.వ్యాసార్థము = వ్యాసార్థము
}

Spikey.prototype.grow = function (delta) {
  this.వ్యాసార్థము = this.వ్యాసార్థము + delta
}
</code>
<p>
Rewriting the final animation example using object orientation becomes something
like the following code.
</p>
<code class="tryme">// CONSTRUCTORS

function Spikey ( ) {
  // set to default value initially
  this.points = 5
  this.revs = 2
  this.వ్యాసార్థము = 10
  this.color = "నలుపు"
  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.వ్యాసార్థము = this.వ్యాసార్థము + 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
  స్థానము_మార్చు( this.x, this.y)
  దిశ_మార్చు( this.heading)
  ముందుకు_జరుగు( this.వ్యాసార్థము)
  var turnAngle = 360 * this.revs/this.points
  var angleA = (180 - turnAngle)/2
  var stroke = 2 * this.వ్యాసార్థము * Math.cos(degToRad(angleA))
  కుడి_వైపు_తిరుగు(180-angleA)
  కుంచికను_కింద_పెట్టు()

  రంగు_మార్చు( this.color)
  వెడల్పు( this.width)
  ఆకారము_ప్రారంభించు()
  for( var i = 0; i < this.points; i = i + 1) { //>
    ముందుకు_జరుగు( stroke)
    కుడి_వైపు_తిరుగు( turnAngle)
  }
  ఆకారము_ముగించు( 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 = యాదృచ్ఛిక_సంఖ్య(5, 11)
    polys.push( new Spikey())
    var last = polys.length -1
    polys[last].points = 5
    polys[last].revs = 2
    polys[last].వ్యాసార్థము = యాదృచ్ఛిక_సంఖ్య( 1,6)/2
    polys[last].color = logoColors[ యాదృచ్ఛిక_సంఖ్య(15)]
    polys[last].fill = logoColors[ యాదృచ్ఛిక_సంఖ్య(15)]
    polys[last].width = 1
    polys[last].heading = యాదృచ్ఛిక_సంఖ్య(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 = యాదృచ్ఛిక_సంఖ్య(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].వ్యాసార్థము > గరిష్ఠX() ||
        polys[i].x + polys[i].వ్యాసార్థము < కనిష్ఠX() ||
        polys[i].y - polys[i].వ్యాసార్థము > గరిష్ఠY() ||
        polys[i].x + polys[i].వ్యాసార్థము < కనిష్ఠX()) {
      console.log("killing " + i + " " +
                                polys[i].x + " " +
                                polys[i].y + " " +
                                polys.length)
      polys.splice(i,1) 
    } 
  }
}

function changeStars() {
  చెరిపి_వేయి()

  for (i=0; i < polys.length; i++) { //>
    polys[i].చిత్రీకరించు()
    polys[i].move()
    polys[i].twist()
    polys[i].grow()
    polys[i].accelerate()
  }

  killPolys()
  generatePolys(1)
  విలంబించు( changeStars, frameDelay)
}


function ప్రదర్శన() {
  ఆది_స్థితి()
  కుంచికను_దాచు()
   చుట్టొద్దు() // fix edge condition
  generatePolys(10)
  changeStars()
}
</code>
</article>
</body>
</html>
</article>
</body>
</html>