Some Javascript Data Structures

• Our goal for the day
• The html
  • Loads the javascript code, deferred
  • Makes a canvas.
  • Makes a button
• Canvas bits
  • The canvas 2d context has lot's of properties and methods.
    • look here
    • We will explore these soon.
  • Surprisingly it does not have the ability to set a single pixel.
  • So we will use fillRect()
    • This takes an x, y, width and height.
  • contexts are sometimes in a class of items referred to as "state machines"
    • These are not the state machines you have encountered in theoretical computing.
    • These are more of a "set a value and it stays until changed" machines.
  • To use these machines, we will need to set some values.
    • context.fillStyle = value is an example.
    • reference.
    • This will set the color of the "pen" we are filling with.
    • And everything that is filled will then have this color.
    • We will discuss color later, but we can use
      • A named color.
      • Any html attribute
        • "#ff0000"
        • 'rgb(255, 231,31)'
        • ...

  •     <canvas id = "demo1" 
                width= "200" 
                height= "60" 
                style="border:1px solid black;">
        </canvas>
        <script>
    "use strict"
    
    const canvas = document.getElementById("demo1")
    const ctx = canvas.getContext("2d")
    
    ctx.fillRect(10,10,20,20)
    ctx.fillStyle = "red"
    ctx.fillRect(40,40,10,10)
    ctx.fillStyle = "#00ff00"
    ctx.fillRect(60,40,10,10)
    ctx.fillStyle = "rgb(0,0,255)"
    ctx.fillRect(80,40,10,10)
    ctx.fillStyle = "hsl(20,100%,50%)"
    ctx.fillRect(100,40,10,10)
    let color = "rgb("  
                 + (Math.random()*255).toString() + "," 
                 + (Math.random()*255).toString() + "," 
                 + (Math.random()*255).toString() + ")" 
    ctx.fillStyle = color
    ctx.fillRect(120,40,10,10)
        </script> 

  • Clearing the Canvas
    • context.clearRect(0,0,width, height)
    • reference.
    • This sets the canvas back to 0,0,0 in the region cleared.
    • I use context.clearRect(0,0,canvas.width, canvas.height)
    • If you want to clear to another color
      • Set the fillStyle to the color.
      • Call fillRect in the same way.
• The math library
  • reference
  • x = Math.random() returns a value $ 0 \le x \lt 1$.
  • Lots of other functions as well.
  • Some constants like Math.PI
• I created a random int function

  • function RandomInt(max) {
        return Math.floor(Math.random() * max)
    } 

• Arrays
  • reference.
  • Heterogeneous collection of data accessed by index.
  • Dynamic
  • zero indexed. (remember this is C for the web)
  • WARNING: Shallow copies.
  • let starArray = [] creates an empty array.
  • const colors = ["red", "green", "blue", "cyan", "magenta", "yellow"] creates an initialized constant array.
  • length is a property
    • colors.length
  • [] works as expected.

    • function RandomColor() {
          const size = colors.length
          return colors[RandomInt(size)]
      } 

  • There are many methods
    • .push appends the element to the end of the array.
      • Returns the size.
      • Beware, this does not do a deep copy.
    • find, fill, shift, revers, ...
    • foreach(function)
      • steps through the array and calls the function

            <script>
    let starArray = []
    const colors = ["red", "green", "blue", "cyan", "magenta", "yellow"]
    
    console.log("star array:", starArray, "is size ", starArray.length)
    console.log("colors:", colors, "is size ", colors.length)
    
    starArray.push("Mickey Mouse")
    starArray.push(Math.PI)
    starArray.push(colors)
    console.log("star array:", starArray, "is size ", starArray.length)
    
    console.log("Chainging colors")
    colors.push("CornflowerBlue")
    console.log("star array:", starArray, "is size ", starArray.length)
            </script>
    
    function LogIt(item, pos) {
        console.log("at ", pos, " is the value : ", item)
    }
    
    colors.forEach(LogIt)
            

• Objects
  • Reference
  • These are like structures in c
  • Heterogeneous data, accessed by field name.
  • Declaration
    • let star = {x: 10, y: 20}
  • Access by . or by []
    • console.log(star, "star.x= ", star.x, 'star["y"] = ', star["y"])
  • You can extend at will
    • star.age = 4
    • star["size"] = "small"
  • There are many methods
  • Two cool ones give the ability to loop over the fields
    • Object.keys(star) provides an array of the keys
    • Object.entries(star) returns the array [key, value]

    • console.log("Object.keys.forEach: \n")
      Object.keys(star).forEach(LogIt)
      
      console.log("Object.entries: \n")
      for( let [key, value] of Object.entries(star)) {
          console.log(key, value)
      }

    • By the way, returning an array from a function allows multiple return values.

  •         <script>
    
    console.log("\n\nObjects")
    
    let star = {x: 10, y:20}
    
    console.log(star, "star.x= ", star.x, 'star["y"] = ',  star["y"])
    
    star.age = 4
    star['size'] = "small"
    
    console.log(star)
    
    console.log("\nObject.keys: ")
    console.log(Object.keys(star))
    
    console.log("\nObject.keys.forEach: ")
    Object.keys(star).forEach(LogIt)
    
    console.log("\nObject.entries: ")
    for( let [key, value] of Object.entries(star)) {
        console.log(key, value)
    }
            </script>
            

• Back to the star demo
  • In function CreateStars
    • Note that we create a new object INSIDE the loop.
    • If we do this outside the loop, we will get the same object.
    • We are using scoping to create a new instance each time.
    • Remember we do a shallow copy.
  • ChangeStars
    • && and ||, javascript does not do and or or.
    • growing and change is a method to keep track of if we are going up or down in size.
    • If you just try to work off of size, you will get stuck at either the top or bottom.