For Programmers: Libraries

These functions are available in JavaScript code defined within block attributes. Some functions require an importLib command, as described below.

Math Functions

These functions are standard JavaScript, aside from Math.seedrandom.
See: JavaScript Math reference.

  • Math.seedrandom( seed ) sets the seed for the random number generator
  • Math.random() returns a pseudo-random number between 0 and 1 (uses seed specified by Math.seedrandom; deterministic given seed)
  • Math.sqrt( x ) returns square root of x
  • Math.pow( x, y ) returns x to the yth power
  • Math.log( x ) returns natural logarithm of x (use Math.log( x ) / Math.log( y ) to get log base y of x)
  • Math.sin( theta ) returns sin of theta (radians)
  • Math.cos( theta ) returns cos of theta (radians)
  • Math.atan2( y, x ) returns inverse tan of y / x
  • Math.abs( x ) returns absolute value of x
  • Math.round( x ) returns x rounded to nearest integer
  • Math.floor( x ) returns x rounded down to lower integer (toward negative infinity)
  • Math.PI the value of π

Custom Context Drawing Functions

The functions are custom to the lesson system.
Unless otherwise specified, all drawing occurs in drawing coordates (determined by the xMin/xMax/yMin/yMax attributes of the DrawBlock)

  • ctx.drawLine( x1, y1, x2, y2 ) draws a line from (x1,y1) to (x2,y2); uses current fillStyle and strokeStyle
  • ctx.drawRect( x, y, width, height ) draws a rectangle with the given lower-left coordinates and given dimensions; uses current fillStyle and strokeStyle
  • ctx.drawRectCentered( x, y, width, height ) draws a rectangle with the given center coordinates and given dimensions; uses current fillStyle and strokeStyle
  • ctx.drawQuad( x1, y1, x2, y2, x3, y3, x4, y4 ) draws a quadrilateral with vertices (x1,y1), (x2,y2), (x3,y3), and (x4,y4); uses current fillStyle and strokeStyle
  • ctx.drawTriangle( x1, y1, x2, y2, x3, y3 ) draws a triangle with vertices (x1,y1), (x2,y2), and (x3,y3); uses current fillStyle and strokeStyle
  • ctx.drawCircle( x, y, radius ) draws a circle centered on (x,y); uses current fillStyle and strokeStyle
  • ctx.drawImageUp( image, x, y ) display an image right-side-up
  • ctx.drawImageCentered( image, x, y ) display an image right-side-up, centered on (x,y)
  • ctx.drawText( text, x, y ) draw the given text at (x,y); uses current font, textAlign, and textBaseline
  • ctx.drawTextAbsolute( text, x, y ) draw the given text at (x,y) in screen coordinates (pixels, measured from top of the canvas); uses current font, textAlign, and textBaseline (only use this if ctx.drawText() doesn't work due to the current coordinate system)
  • ctx.drawTextInCenter( text ) draw the given text centered within the canvas uses current font, textAlign, and textBaseline
  • ctx.setFillColor( r, g, b ) a helper function that sets ctx.fillStyle = "rgb(r,g,b)"
  • ctx.setStrokeColor( r, g, b ) a helper function that sets ctx.strokeStyle = "rgb(r,g,b)"
  • ctx.flip() flip the y axis for all subsequent drawing until flip is called again

JavaScript Drawing Functions

These are standard JavaScript functions for a HTML 5 canvas context. See Canvas Tutorial. Unless otherwise specified, all drawing occurs in drawing coordates determined by the drawWidth and drawHeight set when creating a DrawBlock.

  • ctx.fillStyle = "rgb(r,g,b)" sets the fill color for subsequent drawing; r, g, and b should be in [0, 255]
  • ctx.strokeStyle = "rgb(r,g,b)" sets the line color for subsequent drawing
  • ctx.lineWidth = width sets the line width (drawing coordinates, not screen coordinates)
  • ctx.font = "bold 16px sans-serif" sets the font of subsequent text drawing
  • ctx.textAlign = "x" sets the horizontal alignment of subsequent text drawing; valid values include "left", "center", and "right".
  • ctx.textBaseline = "x" sets the vertical alignment of subsequent text drawing; valid values include "bottom", "alphabetic", "middle", and "top".
  • ctx.moveTo( x, y ) move the drawing position to the given coordinate
  • ctx.lineTo( x, y ) draw a line from the current drawing position to the given coordinate
  • ctx.beginPath() begin a path (constructed, for example, using moveTo and lineTo)
  • ctx.fill() end a path and fill it according to the fillStyle
  • ctx.stroke() end a path and draw it according to the strokeStyle

DrawItem Class

These are custom to the lesson system. To use these functions add importLib drawLib to the page specification.

  • drawItem = createDrawItem( x, y ) creates a DrawItem object at the given coordinate
  • drawItem.x = x sets x coordinate of item
  • drawItem.y = y sets y coordinate of item
  • drawItem.angle = angle sets the orientation/rotation of the item (in radians)
  • drawItem.width = width sets item width
  • drawItem.height = height sets item height
  • drawItem.lineWidth = lineWidth sets line with used to draw the item
  • drawItem.shape = shape shape can be SHAPE_CIRCLE or SHAPE_RECT
  • drawItem.setColor( r, g, b ) sets fill color of item; r, g, and b should be in [0, 255]
  • drawItem.setRadius( radius ) sets width and height to two times the given radius
  • drawItem.draw( ctx ) draws the item in the given context
  • drawItem.collides( otherDrawItem ) returns true if the object intersects the given draw item
  • drawItem.setImage( image, width, height ) sets the image file name for drawing the item; width and height are in drawing coordinates (not screen coordinates); the code must call ctx.flip() before and after calling drawItem.draw( ctx ) for any image-based DrawItem

Geometry Functions

These are custom to the lesson system. To use these functions add importLib geometry to the page specification.

  • distPointToLine( x, y, x1, y1, x2, y2 ) returns the distance from (x, y) to the line through (x1, y1) and (x2, y2)
  • nearestPointOnLine( x, y, x1, y1, x2, y2 ) returns the nearest point to (x, y) on the line through (x1, y1) and (x2, y2); returned point is an object with .x and .y properties.

Audio Functions

These are custom to the lesson system.

  • playStandardSound( fileName ) play a sound file from a standard collection of sounds; current options are "sound1.mp3", "sound2.mp3", "sound3.mp3", "sound4.mp3"
  • playLessonSound( fileName ) play a sound file uploaded for the current lesson

Lesson Functions

These are custom to the lesson system.

  • section.start() start the update loop (start updating values at the rate specified by the ControlBlock); this function is defined only if ControlBlock exists
  • section.stop() stop the update loop; this function is defined only if ControlBlock exists
  • section.step() execute one update step; this function is defined only if ControlBlock exists
  • section.reset() reset the section; this function is defined only if ControlBlock exists
  • section.noStart() stop the update loop and disable the Start/Step buttons; this function is defined only if ControlBlock exists
  • section.loadLessonImage( fileName ) loads and returns an image uploaded for the current lesson; the file name should not have a path (a file called foo.png is specified just as foo.png)
  • lesson.setReport( report ) specify an optional HTML report about the student's lesson activity that will be given to the teacher; sent to server on section completion
  • lesson.storeStudentResult( description, score, maxScore, studentAnswer ) store a student result (some content created by student or activity done by student, such as the score on a game); description should be short (e.g. "score"); score and maxScore should be integers; studentAnswer is optional; it can be any text or number

Other Useful Functions

These are built-in JavaScript functions.

  • alert( message ) display a message in a pop-up message box
  • console.log( message ) display a message in the browser's JavaScript console
© 2015 ManyLabs
Creative Commons License