<commit_before>
<html>
<head>
    <link href="./docs.css" rel="stylesheet" type="text/css">
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <title></title>
</head>
<body>
    <!--SPRITE CONTROL-->
    <div class="container0">
        <button class="all" id="Start">Get Started</button> <button class="all"
        id="Sprite">Creating Sprites</button>
    </div>
    <div class="container1">
        <!--MOTION-->
        <button class="all" id="Motion">Motion</button> <button class="all" id=
        "Events">Events</button>
    </div><!--LOOKS-->
    <div class="container2">
        <button class="all" id="Looks">Looks</button> <!--CONTROL-->
         <button class="all" id="Control">Control</button>
    </div><!--SOUND SETTING-->
    <div class="container3">
        <button class="all" id="Sound">Sound</button> <!--SENSING-->
         <button class="all" id="Sensing">Sensing</button>
    </div><!--PEN SETTING-->
    <div class="container4">
        <button class="all" id="Pen">Pen</button> <button class="all" id=
        "Operations">Operators</button>
    </div><!--DATA LIST-->
    <div class="container5">
        <button class="all" id="Data">Data</button> <button class="all" id=
        "More">More Blocks</button>
    </div><!--CONTROL LIST-->
    <div id="controllist" style="display:none">
        <img src= "https://camo.githubusercontent.com/6c4bf166474472549e77f83c14e5a058602d1592/68747470733a2f2f692e696d6775722e636f6d2f723677595838632e706e67"><br>

        There is no wait block in JavaScript. Instead, you can use after():
        <pre><code class="language-javascript">after(..., "seconds", () =&gt; {...})
</code></pre><br>
        However, after() is a poor substitute for Scratch's wait block and you
        may find some programs very difficult to write without wait. <br>If you
        want to wait at regular intervals, use every():<br>
        <pre><code class=
        "language-javascript">every(..., "seconds", () =&gt; {
  ...
})</code></pre>
<br><img src=
"https://camo.githubusercontent.com/16d1e62606bd74942f656383dd09212d2e72e6c4/68747470733a2f2f692e696d6775722e636f6d2f6a77653133626d2e706e67"><br>

       <pre><code class="language-javascript">repeat(10, () =&gt; {
  ...
})</code></pre>

 <br><img src=
"https://camo.githubusercontent.com/983f1de894d6053a72b7f343f0c53ca5bfedd9a6/68747470733a2f2f692e696d6775722e636f6d2f675a4f6a4c444d2e706e67"><br>

        <pre><code class="language-javascript">forever (() =&gt; {
  ...
})</code></pre><br>
        <img src=
        "https://camo.githubusercontent.com/a480fbea5d3f2cb8563350470e243d8b8eb5a46a/68747470733a2f2f692e696d6775722e636f6d2f7535724b4133362e706e67">
        <br>
        <pre><code class="language-javascript">if (...) {
  ...
}</code></pre><br>

<img src=
"https://camo.githubusercontent.com/a5d25f79126301f83c5a60bbbe8b3cadccfb3040/68747470733a2f2f692e696d6775722e636f6d2f52594f705361712e706e67"><br>

        <pre><code class="language-javascript">if (...) {
  ...
} else {
  ...
}</code></pre><br>
        <img src=
        "https://camo.githubusercontent.com/d06a1bb0fec72d888c37b87d35eee05918bf8206/68747470733a2f2f692e696d6775722e636f6d2f615139694a4e772e706e67">
        <br>
        <pre><code class="language-javascript">repeatUntil(() =&gt; ..., () =&gt; {
  ...
})</code>
</pre><br>
        There is no wait-until in JavaScript. You can simulate a wait-until
        block by specifying a third function to a repeatUntil. Refer to the
        "Control Flow" section below for more details.<br>
        <img src=
        "https://camo.githubusercontent.com/d06a1bb0fec72d888c37b87d35eee05918bf8206/68747470733a2f2f692e696d6775722e636f6d2f615139694a4e772e706e67">
        <br>
        <pre><code class="language-javascript">repeatUntil(() =&gt; ..., () =&gt; {}, () =&gt; {
  ...
})</code></pre><br>

<img src=
"https://camo.githubusercontent.com/2590c6a1ba48006d4d7f9d7266ef17552207bcf4/68747470733a2f2f692e696d6775722e636f6d2f4f586c704b394a2e706e67">
when() is a short-hand for a forever-if statement.
        <pre><code class="language-javascript">when(() =&gt; ..., () =&gt; {
  ...
})</code></pre><br>
        <img src=
        "https://camo.githubusercontent.com/6cab1f5a4b9e33f28118b96e961df7d05669e766/68747470733a2f2f692e696d6775722e636f6d2f5357537864566d2e706e67">
        <pre><code class="language-javascript">freeze()</code></pre><br>
        
        Reverse
        freeze or stop all: defrost()<br>
        <img src=
        "https://camo.githubusercontent.com/1e2c7890c61277558aa9543eafd890bf35677c40/68747470733a2f2f692e696d6775722e636f6d2f674e7a547053302e706e67">
        <pre><code class="language-javascript">// create a list to store all of the clones
var clones = []
every(4, "seconds", () =&gt; {
  // create a clone every 4 seconds
  var clone = new Circle({radius: 10, color: "pink", x:
randomX(), y: randomY()})
  // add each clone to the list
  clones.push(clone)
})

forever(() =&gt; {
  // forever, for each clone in clones
  clones.forEach(clone =&gt; {
    // move it to the right
    clone.x++
    // delete it if it goes off the screen
    if (clone.x &gt; maxX) {
      clone.delete()
    }
  })
})</code></pre><br>

Delete an object:
        <pre><code class="language-javascript">NAME.delete()</code></pre><br>
        
        
        Only
        allow something to happen once every X miliseconds:
        <pre><code class="language-javascript">onMouseDown(throttle(() =&gt; score++, 1000)) // after a mousedown, you won't be able to trigger this event again for 1000 milliseconds </code></pre><br>

        <h2><b>Control Flow</b><br></h2>
        There are two types of commands in JavaScript:<br><br>
        1) <b>Synchronous:</b> "Do this immediately and move on when it's
        done." Synchronous example in real life: Open heart surgery. When a
        doctor begins open heart surgery on a patient, she stays in the
        operating room with the patient until the surgery is done and the
        patient is stitched back up. She doesn't start open surgery with one
        patient and then move on to another operating room where she begins
        operating on a second patient before the first operation is done. She
        starts and finishes one operation before starting a second.<br><br>
        2) <b>Asynchronous:</b> "Start this immediately, but don't wait till
        it's done. Move on to the next command immediately after you start this
        command." Asynchronous example in real life: Ordering food or drinks.
        <br>
        <br>First, let's imagine what a synchronous restaurant would look like. A
        waiter would come to your table, take 1 person's order, rush it back to
        the kitchen, wait for the kitchen to finish with that person's order,
        and then bring it back to that person. Only once this first order is
        taken care of would the waiter then ask the second person at the table
        for their order. Of course this would be ridiculous. It makes much more
        sense for a restaurant to process its customers' orders
        “asynchronously.” That is, after a waiter takes one person's order, he
        is free to take another person's order before finishing the first order
        to completion. This allows the restaurant to do multiple things at
        once, which is ultimately faster because some tasks, like chopping
        vegetables while you wait for a pot of water to heat, make more sense
        in parallel than sequence. <br><br>Commands in programming are
        synchronous. For example, if-statements, setting or changing variables,
        and calling most Woof methods like rectangle.move(10) are all
        synchronous commands. forever is an example of an asynchronous command.
        Think about it: if forever told the computer to wait until it was done
        before moving on, the computer would never move on to the next line.
        repeat, repeatUntil, every, after are also asynchronous commands.
        <br><br>Asynchronous commands become quite confusing when you want something to
        happen after an asynchronous command is finished. If you want something
        after the 10th time you repeat it, you can't just put it on the line
        below the close of the repeat block. Why? Because the line below repeat
        happens immediately after the asynchronously command starts, not after
        it finishes. If at the end of ordering a meal, you ask the waiter to
        refill your water, you expect him to refill it immediately after
        sending your order to the kitchen, not after you've received all your
        food, despite this order coming after the food orders. But what if, for
        some perverse reason, you wanted the waiter to wait until after you
        received your food to refill your water? That is, how do we tell the
        computer to do something after an asynchronous command is finished?
        <br>This is different for each programming language, but for WoofJS, repeat
        and repeatUntil, optionally accept a function as an extra parameter to
        specify what should happen after the asynchonous command is finished.
        This is called a "callback" because that function is "called back" and
        run after the main part of the command is finished. Also, be careful
        not to wantonly nest asynchronous commands within each other's main
        body. For example if you want to make an image move in a square for
        forever, you can't just put four nested repeats inside a forever. If
        you put a repeat in a forever, that will cause the computer
        continuously spawning new repeats really quickly. It's like repeatedly
        asking a waiter for more and more food before your first course has
        arrived. The waiter and kitchen will spend so much time processing
        these thousands of orders, it'll likely cause the restaurant to crash!
        Instead, in Woof, you have to use recursion and tell your repeat code
        to start-over only after the 4th repeat is finished finished. 
        
        <br><br>Change
        color to blue after moving to the right 10 times:
        <pre><code class="language-javascript">repeat(10, () =&gt; {
  NAME.x++
}, () =&gt; {
  NAME.color = "blue"
})</code></pre><br>Chaining repeats to slowly draw a square:
        <pre><code class="language-javascript">repeat(100, () =&gt; {
  NAME.angle = RIGHT
  NAME.move(1)
}, () =&gt; {
  repeat(100, () =&gt; {
    NAME.angle = UP
    NAME.move(1)
  }, () =&gt; {
    repeat(100, () =&gt; {
      NAME.angle = LEFT
      NAME.move(1)
    }, () =&gt; {
      repeat(100, () =&gt; {
        NAME.angle = DOWN
        NAME.move(1)
      })
    })
  })
})</code></pre>
    </div>
    <!--SOUND LIST -->
    <div id="soundlist" style="display:none"><img src=
    "https://camo.githubusercontent.com/7382d0c9ce03703a275cdf1a53f0d8be7b7993e1/68747470733a2f2f692e696d6775722e636f6d2f4c387a6e6d4f622e706e67">
    <pre><code class="language-javascript">var bruce = new Audio('http://mhoerner.dyndns.org/mp3/Bruce%20Springsteen/Born%20To%20Run/05%20Born%20To%20Run.mp3')
bruce.play()</code></pre><br>
    <img src=
    "https://camo.githubusercontent.com/55d829ef2b78a7fdd249aec787c74002da455bab/68747470733a2f2f692e696d6775722e636f6d2f58396b6b3679572e706e67">
    <pre><code class="language-javascript">bruce.pause()</code></pre><br>To get the
    URL of an mp3, Google search:
    <pre><code class=
    "language-javascript">intitle:index.of?mp3 NAME-OF-SONG</code></pre><img src="https://camo.githubusercontent.com/e2839ff2cc575d4a57071e8b028f66ecdec041df/68747470733a2f2f692e696d6775722e636f6d2f7439584b4f706e2e706e67"></div>
    <!--SPRITE LIST-->
    <div></div>
<button id="Image" style="display:none">Image</button>
    <div id="imagelist" style="display:none">
               Example: <pre><code class=
        "language-javascript">var IMAGE_NAME = new Image({url: "https://i.imgur.com/SMJjVCL.png/?1" , width: 30, height: 30, x: 100, y: 20})</code></pre>  

        <h3>Create a New Image</h3>
        <pre><code class=
        "language-javascript">var IMAGE_NAME = new Image({})</code></pre><br>
        <h3><b>Set Image URL</b></h3>
        <pre><code class=
        "language-javascript">url: "https://i.imgur.com/SMJjVCL.png/?1" </code></pre>
        <a target ="_blank" href= "http://postimage.org"> <button id="postimage" >Upload my Own Image</button> </a><br><br>
           <h3>Set Width and Height</h3>
        <pre><code class=
        "language-javascript">width: 30, height: 30</code></pre><br>
        
     <h3>Set Location</h3>
        <pre><code class=
        "language-javascript">x: 100, y: 20</code></pre><br>
    </div>
       <button id="Text" style="display:none">Text</button>
    <div id="textlist" style="display:none">
        Example:<pre><code class=
        "language-javascript">var TEXT_NAME = new Text({text: "Hello world!", size: 12, color: "rgb(100, 50, 240)", fontFamily: "arial", textAlign: "left"}) </code></pre><br>
        
        <h3>Create New Text</h3>
        <pre><code class=
        "language-javascript">var TEXT_NAME = new Text({})</code></pre><br>
        <h3>Set Content</h3>
        <pre><code class=
        "language-javascript">text: "Hello world!"</code></pre><br>
        
         <h3>Set Location</h3>
        <pre><code class=
        "language-javascript">x: 50, y: -100</code></pre><br>
        
        <h3>Set Color</h3>
        <pre><code class=
        "language-javascript">color: "rgb(100, 50, 240)"</code></pre><br>
        
        <h3>Set Font</h3>
        <pre><code class=
        "language-javascript">fontFamily: "arial"</code></pre><br>
        
          <h3>Set Font Size</h3>
        <pre><code class=
        "language-javascript">size: 12</code></pre><br>
        
        <h3>Set Text Alignment</h3>
        <pre><code class=
        "language-javascript">textAlign: "center"</code></pre><br>
        
       
    </div>
        <button id="Circle" style="display:none">Circle</button>
         <div id="circlelist" style="display:none">
             
             Example:
               <pre><code class=
        "language-javascript">var CIRCLE_NAME = new Circle({radius: 10, color: "#ffffff", x:0, y:0})
</code></pre><br>
            
        <h3>Create a Circle</h3>
        <pre><code class=
        "language-javascript">var CIRCLE_NAME = new Circle({})</code></pre><br>
        
        <h3><b>Set Location</b></h3>
        <pre><code class=
        "language-javascript">x: 0, y: 0
</code></pre><br>


        <h3><b>Set Size</b></h3>
        <pre><code class=
        "language-javascript">radius: 10
</code></pre><br>

        <h3><b>Set Color</b></h3>
        <pre><code class=
        "language-javascript">color: "#ffffff"
</code></pre><br>

      
    </div>
        <button id="Rectangle" style="display:none">Rectangle</button>
        <div id="rectanglelist" style="display:none"> 
        Example: 
                <pre><code class=
        "language-javascript">var RECTANGLE_NAME = new Rectangle({width: 20, height: 55, color: "pink"})
</code></pre><br>
        <h3>Create a Rectangle</h3>
        <pre><code class=
        "language-javascript">var RECTANGLE_NAME = new Rectangle({})
</code></pre><br>
        <h3>Set Location</h3>
        <pre><code class=
        "language-javascript">x: 62, y: 12</code></pre><br>
        
         <h3>Set Width and Height</h3>
        <pre><code class=
        "language-javascript">width: 20, height: 55</code></pre><br>
        
        <h3>Set Color</h3>
        <pre><code class=
        "language-javascript">color: "pink"</code></pre><br>
       
        
    </div>
        <button id="Line" style="display:none">Line</button> 
         <div id="linelist" style="display:none">
             
             Example: 
              <pre><code class=
        "language-javascript">var LINE_NAME = new Line({color: "pink", lineWidth: 10, x: -100, y: 100, x1: 10, y1: 20, })
</code></pre><br>
        <h3>Create a line</h3>
        <pre><code class=
        "language-javascript">var LINE_NAME = new Line({})
</code></pre><br>

        <h3>Set Location</h3>
        <pre><code class=
        "language-javascript">x: maxX, y: maxY</code></pre><br>
        
        <h3>Set Color</h3>
        <pre><code class=
        "language-javascript">color: "pink"</code></pre><br>
        
        <h3>Set Line Width</h3>
        <pre><code class=
        "language-javascript">lineWidth: 10</code></pre><br>
        
         <h3>Set Line Direction</h3><commit_msg>create sprite formatting<commit_after>
<html>
<head>
    <link href="./docs.css" rel="stylesheet" type="text/css">
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <title></title>
</head>
<body>
    <!--SPRITE CONTROL-->
    <div class="container0">
        <button class="all" id="Start">Get Started</button> <button class="all"
        id="Sprite">Creating Sprites</button>
    </div>
    <div class="container1">
        <!--MOTION-->
        <button class="all" id="Motion">Motion</button> <button class="all" id=
        "Events">Events</button>
    </div><!--LOOKS-->
    <div class="container2">
        <button class="all" id="Looks">Looks</button> <!--CONTROL-->
         <button class="all" id="Control">Control</button>
    </div><!--SOUND SETTING-->
    <div class="container3">
        <button class="all" id="Sound">Sound</button> <!--SENSING-->
         <button class="all" id="Sensing">Sensing</button>
    </div><!--PEN SETTING-->
    <div class="container4">
        <button class="all" id="Pen">Pen</button> <button class="all" id=
        "Operations">Operators</button>
    </div><!--DATA LIST-->
    <div class="container5">
        <button class="all" id="Data">Data</button> <button class="all" id=
        "More">More Blocks</button>
    </div><!--CONTROL LIST-->
    <div id="controllist" style="display:none">
        <img src= "https://camo.githubusercontent.com/6c4bf166474472549e77f83c14e5a058602d1592/68747470733a2f2f692e696d6775722e636f6d2f723677595838632e706e67"><br>

        There is no wait block in JavaScript. Instead, you can use after():
        <pre><code class="language-javascript">after(..., "seconds", () =&gt; {...})
</code></pre><br>
        However, after() is a poor substitute for Scratch's wait block and you
        may find some programs very difficult to write without wait. <br>If you
        want to wait at regular intervals, use every():<br>
        <pre><code class=
        "language-javascript">every(..., "seconds", () =&gt; {
  ...
})</code></pre>
<br><img src=
"https://camo.githubusercontent.com/16d1e62606bd74942f656383dd09212d2e72e6c4/68747470733a2f2f692e696d6775722e636f6d2f6a77653133626d2e706e67"><br>

       <pre><code class="language-javascript">repeat(10, () =&gt; {
  ...
})</code></pre>

 <br><img src=
"https://camo.githubusercontent.com/983f1de894d6053a72b7f343f0c53ca5bfedd9a6/68747470733a2f2f692e696d6775722e636f6d2f675a4f6a4c444d2e706e67"><br>

        <pre><code class="language-javascript">forever (() =&gt; {
  ...
})</code></pre><br>
        <img src=
        "https://camo.githubusercontent.com/a480fbea5d3f2cb8563350470e243d8b8eb5a46a/68747470733a2f2f692e696d6775722e636f6d2f7535724b4133362e706e67">
        <br>
        <pre><code class="language-javascript">if (...) {
  ...
}</code></pre><br>

<img src=
"https://camo.githubusercontent.com/a5d25f79126301f83c5a60bbbe8b3cadccfb3040/68747470733a2f2f692e696d6775722e636f6d2f52594f705361712e706e67"><br>

        <pre><code class="language-javascript">if (...) {
  ...
} else {
  ...
}</code></pre><br>
        <img src=
        "https://camo.githubusercontent.com/d06a1bb0fec72d888c37b87d35eee05918bf8206/68747470733a2f2f692e696d6775722e636f6d2f615139694a4e772e706e67">
        <br>
        <pre><code class="language-javascript">repeatUntil(() =&gt; ..., () =&gt; {
  ...
})</code>
</pre><br>
        There is no wait-until in JavaScript. You can simulate a wait-until
        block by specifying a third function to a repeatUntil. Refer to the
        "Control Flow" section below for more details.<br>
        <img src=
        "https://camo.githubusercontent.com/d06a1bb0fec72d888c37b87d35eee05918bf8206/68747470733a2f2f692e696d6775722e636f6d2f615139694a4e772e706e67">
        <br>
        <pre><code class="language-javascript">repeatUntil(() =&gt; ..., () =&gt; {}, () =&gt; {
  ...
})</code></pre><br>

<img src=
"https://camo.githubusercontent.com/2590c6a1ba48006d4d7f9d7266ef17552207bcf4/68747470733a2f2f692e696d6775722e636f6d2f4f586c704b394a2e706e67">
when() is a short-hand for a forever-if statement.
        <pre><code class="language-javascript">when(() =&gt; ..., () =&gt; {
  ...
})</code></pre><br>
        <img src=
        "https://camo.githubusercontent.com/6cab1f5a4b9e33f28118b96e961df7d05669e766/68747470733a2f2f692e696d6775722e636f6d2f5357537864566d2e706e67">
        <pre><code class="language-javascript">freeze()</code></pre><br>
        
        Reverse
        freeze or stop all: defrost()<br>
        <img src=
        "https://camo.githubusercontent.com/1e2c7890c61277558aa9543eafd890bf35677c40/68747470733a2f2f692e696d6775722e636f6d2f674e7a547053302e706e67">
        <pre><code class="language-javascript">// create a list to store all of the clones
var clones = []
every(4, "seconds", () =&gt; {
  // create a clone every 4 seconds
  var clone = new Circle({radius: 10, color: "pink", x:
randomX(), y: randomY()})
  // add each clone to the list
  clones.push(clone)
})

forever(() =&gt; {
  // forever, for each clone in clones
  clones.forEach(clone =&gt; {
    // move it to the right
    clone.x++
    // delete it if it goes off the screen
    if (clone.x &gt; maxX) {
      clone.delete()
    }
  })
})</code></pre><br>

Delete an object:
        <pre><code class="language-javascript">NAME.delete()</code></pre><br>
        
        
        Only
        allow something to happen once every X miliseconds:
        <pre><code class="language-javascript">onMouseDown(throttle(() =&gt; score++, 1000)) // after a mousedown, you won't be able to trigger this event again for 1000 milliseconds </code></pre><br>

        <h2><b>Control Flow</b><br></h2>
        There are two types of commands in JavaScript:<br><br>
        1) <b>Synchronous:</b> "Do this immediately and move on when it's
        done." Synchronous example in real life: Open heart surgery. When a
        doctor begins open heart surgery on a patient, she stays in the
        operating room with the patient until the surgery is done and the
        patient is stitched back up. She doesn't start open surgery with one
        patient and then move on to another operating room where she begins
        operating on a second patient before the first operation is done. She
        starts and finishes one operation before starting a second.<br><br>
        2) <b>Asynchronous:</b> "Start this immediately, but don't wait till
        it's done. Move on to the next command immediately after you start this
        command." Asynchronous example in real life: Ordering food or drinks.
        <br>
        <br>First, let's imagine what a synchronous restaurant would look like. A
        waiter would come to your table, take 1 person's order, rush it back to
        the kitchen, wait for the kitchen to finish with that person's order,
        and then bring it back to that person. Only once this first order is
        taken care of would the waiter then ask the second person at the table
        for their order. Of course this would be ridiculous. It makes much more
        sense for a restaurant to process its customers' orders
        “asynchronously.” That is, after a waiter takes one person's order, he
        is free to take another person's order before finishing the first order
        to completion. This allows the restaurant to do multiple things at
        once, which is ultimately faster because some tasks, like chopping
        vegetables while you wait for a pot of water to heat, make more sense
        in parallel than sequence. <br><br>Commands in programming are
        synchronous. For example, if-statements, setting or changing variables,
        and calling most Woof methods like rectangle.move(10) are all
        synchronous commands. forever is an example of an asynchronous command.
        Think about it: if forever told the computer to wait until it was done
        before moving on, the computer would never move on to the next line.
        repeat, repeatUntil, every, after are also asynchronous commands.
        <br><br>Asynchronous commands become quite confusing when you want something to
        happen after an asynchronous command is finished. If you want something
        after the 10th time you repeat it, you can't just put it on the line
        below the close of the repeat block. Why? Because the line below repeat
        happens immediately after the asynchronously command starts, not after
        it finishes. If at the end of ordering a meal, you ask the waiter to
        refill your water, you expect him to refill it immediately after
        sending your order to the kitchen, not after you've received all your
        food, despite this order coming after the food orders. But what if, for
        some perverse reason, you wanted the waiter to wait until after you
        received your food to refill your water? That is, how do we tell the
        computer to do something after an asynchronous command is finished?
        <br>This is different for each programming language, but for WoofJS, repeat
        and repeatUntil, optionally accept a function as an extra parameter to
        specify what should happen after the asynchonous command is finished.
        This is called a "callback" because that function is "called back" and
        run after the main part of the command is finished. Also, be careful
        not to wantonly nest asynchronous commands within each other's main
        body. For example if you want to make an image move in a square for
        forever, you can't just put four nested repeats inside a forever. If
        you put a repeat in a forever, that will cause the computer
        continuously spawning new repeats really quickly. It's like repeatedly
        asking a waiter for more and more food before your first course has
        arrived. The waiter and kitchen will spend so much time processing
        these thousands of orders, it'll likely cause the restaurant to crash!
        Instead, in Woof, you have to use recursion and tell your repeat code
        to start-over only after the 4th repeat is finished finished. 
        
        <br><br>Change
        color to blue after moving to the right 10 times:
        <pre><code class="language-javascript">repeat(10, () =&gt; {
  NAME.x++
}, () =&gt; {
  NAME.color = "blue"
})</code></pre><br>Chaining repeats to slowly draw a square:
        <pre><code class="language-javascript">repeat(100, () =&gt; {
  NAME.angle = RIGHT
  NAME.move(1)
}, () =&gt; {
  repeat(100, () =&gt; {
    NAME.angle = UP
    NAME.move(1)
  }, () =&gt; {
    repeat(100, () =&gt; {
      NAME.angle = LEFT
      NAME.move(1)
    }, () =&gt; {
      repeat(100, () =&gt; {
        NAME.angle = DOWN
        NAME.move(1)
      })
    })
  })
})</code></pre>
    </div>
    <!--SOUND LIST -->
    <div id="soundlist" style="display:none"><img src=
    "https://camo.githubusercontent.com/7382d0c9ce03703a275cdf1a53f0d8be7b7993e1/68747470733a2f2f692e696d6775722e636f6d2f4c387a6e6d4f622e706e67">
    <pre><code class="language-javascript">var bruce = new Audio('http://mhoerner.dyndns.org/mp3/Bruce%20Springsteen/Born%20To%20Run/05%20Born%20To%20Run.mp3')
bruce.play()</code></pre><br>
    <img src=
    "https://camo.githubusercontent.com/55d829ef2b78a7fdd249aec787c74002da455bab/68747470733a2f2f692e696d6775722e636f6d2f58396b6b3679572e706e67">
    <pre><code class="language-javascript">bruce.pause()</code></pre><br>To get the
    URL of an mp3, Google search:
    <pre><code class=
    "language-javascript">intitle:index.of?mp3 NAME-OF-SONG</code></pre><img src="https://camo.githubusercontent.com/e2839ff2cc575d4a57071e8b028f66ecdec041df/68747470733a2f2f692e696d6775722e636f6d2f7439584b4f706e2e706e67"></div>
    <!--SPRITE LIST-->
    <div></div>
<button id="Image" style="display:none">Image</button>
    <div id="imagelist" style="display:none">
               Example: <pre><code class=
        "language-javascript">var IMAGE_NAME = new Image({
  url: "https://i.imgur.com/SMJjVCL.png/?1" , 
  width: 30, 
  height: 30, 
  x: 100, 
  y: 20
})</code></pre>  

        <h3>Create a New Image</h3>
        <pre><code class=
        "language-javascript">var IMAGE_NAME = new Image({})</code></pre><br>
        <h3><b>Set Image URL</b></h3>
        <pre><code class=
        "language-javascript">url: "https://i.imgur.com/SMJjVCL.png/?1" </code></pre>
        <a target ="_blank" href= "http://postimage.org"> <button id="postimage" >Upload my Own Image</button> </a><br><br>
           <h3>Set Width and Height</h3>
        <pre><code class=
        "language-javascript">width: 30, height: 30</code></pre><br>
        
     <h3>Set Location</h3>
        <pre><code class=
        "language-javascript">x: 100, y: 20</code></pre><br>
    </div>
       <button id="Text" style="display:none">Text</button>
    <div id="textlist" style="display:none">
        Example:<pre><code class=
        "language-javascript">var TEXT_NAME = new Text({
  text: "Hello world!", 
  size: 12, 
  color: "rgb(100, 50, 240)", 
  fontFamily: "arial", 
  textAlign: "left"
}) </code></pre><br>
        
        <h3>Create New Text</h3>
        <pre><code class=
        "language-javascript">var TEXT_NAME = new Text({})</code></pre><br>
        <h3>Set Content</h3>
        <pre><code class=
        "language-javascript">text: "Hello world!"</code></pre><br>
        
         <h3>Set Location</h3>
        <pre><code class=
        "language-javascript">x: 50, y: -100</code></pre><br>
        
        <h3>Set Color</h3>
        <pre><code class=
        "language-javascript">color: "rgb(100, 50, 240)"</code></pre><br>
        
        <h3>Set Font</h3>
        <pre><code class=
        "language-javascript">fontFamily: "arial"</code></pre><br>
        
          <h3>Set Font Size</h3>
        <pre><code class=
        "language-javascript">size: 12</code></pre><br>
        
        <h3>Set Text Alignment</h3>
        <pre><code class=
        "language-javascript">textAlign: "center"</code></pre><br>
        
       
    </div>
        <button id="Circle" style="display:none">Circle</button>
         <div id="circlelist" style="display:none">
             
             Example:
               <pre><code class=
        "language-javascript">var CIRCLE_NAME = new Circle({
  radius: 10, 
  color: "#ffffff", 
  x: 0, 
  y: 0
})</code></pre><br>
            
        <h3>Create a Circle</h3>
        <pre><code class=
        "language-javascript">var CIRCLE_NAME = new Circle({})</code></pre><br>
        
        <h3><b>Set Location</b></h3>
        <pre><code class=
        "language-javascript">x: 0, y: 0
</code></pre><br>


        <h3><b>Set Size</b></h3>
        <pre><code class=
        "language-javascript">radius: 10
</code></pre><br>

        <h3><b>Set Color</b></h3>
        <pre><code class=
        "language-javascript">color: "#ffffff"
</code></pre><br>

      
    </div>
        <button id="Rectangle" style="display:none">Rectangle</button>
        <div id="rectanglelist" style="display:none"> 
        Example: 
                <pre><code class=
        "language-javascript">var RECTANGLE_NAME = new Rectangle({
  width: 20, 
  height: 55, 
  color: "pink"
})
</code></pre><br>
        <h3>Create a Rectangle</h3>
        <pre><code class=
        "language-javascript">var RECTANGLE_NAME = new Rectangle({})
</code></pre><br>
        <h3>Set Location</h3>
        <pre><code class=
        "language-javascript">x: 62, y: 12</code></pre><br>
        
         <h3>Set Width and Height</h3>
        <pre><code class=
        "language-javascript">width: 20, height: 55</code></pre><br>
        
        <h3>Set Color</h3>
        <pre><code class=
        "language-javascript">color: "pink"</code></pre><br>
       
        
    </div>
        <button id="Line" style="display:none">Line</button> 
         <div id="linelist" style="display:none">
             
             Example: 
              <pre><code class=
        "language-javascript">var LINE_NAME = new Line({color: "pink", 
  lineWidth: 10, 
  x: -100, 
  y: 100, 
  x1: 10, 
  y1: 20
})
</code></pre><br>
        <h3>Create a line</h3>
        <pre><code class=
        "language-javascript">var LINE_NAME = new Line({})
</code></pre><br>

        <h3>Set Location</h3>
        <pre><code class=
        "language-javascript">x: maxX, y: maxY</code></pre><br>
        
        <h3>Set Color</h3>
        <pre><code class=
        "language-javascript">color: "pink"</code></pre><br>
        
        <h3>Set Line Width</h3>
        <pre><code class=
        "language-javascript">lineWidth: 10</code></pre><br>
        
         <h3>Set Line Direction</h3>
{'fraction_non_alphanumeric': 0.13909672766609574, 'fraction_numerical': 0.06983382914150064, 'mean_word_length': 2.8824078394773682, 'pattern_counts': {'":': 0, '<': 833, '<?xml version=': 0, '>': 833, 'https://': 32, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 8, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '877754', 'n_tokens_mistral': 12151, 'n_tokens_neox': 10650, 'n_words': 2848}