# 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.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