- Run the graphing calculator
- Check out the code (zip)
- Watch the Screencast on YouTube
This repository contains resources that go along with a tutorial given by Curran Kelleher at University of Massachusetts Lowell on 11/12/2013 and 11/14/2013 as part of the undergraduate course "GUI Programming" with Professor Jesse Heines.
The tutorial covers:
- Creating and using a Canvas element
- Drawing a sine wave path consisting of many lines
- Transforming between math coordinates and pixel coordinates
- Animation with requestAnimationFrame
- Using Math.js to evaluate mathematical expressions
- Plotting a Math.js expression
- Using a TextField to drive the math expression
- Using the URL hash fragment to store and share plots
- HTML5 Canvas Spec Documentation for the HTML5 Canvas API.
canvasExample
(run it, source code) Demonstrates the HTML5 Canvas API by drawing a square, circle, line and text.animationExample
(run it, source code) Demonstrates animation using HTML5 Canvas andrequestAnimationFrame
.mathJSExample
(run it, source code) Parses and evaluates a math expression with variables using Math.js.textFieldExample
(run it, source code) Initializes and reads text from an HTML forminput
field as it changes.hashExample
(run it, source code) Demonstrates how to work with fragment identifiers.
On Tuesday 11/12/2013, we wrote the basic function plotter.
On Thursday 11/14/2013, we completed the core functionality of the graphing calculator.
- Here's the Code in JSBin
- Here's a cleaned up and thoroughly documented version of the code:
Please use the grapher.html
and grapher.js
as the starting point for the
assignment.
- Using JSBin
CTRL [
for indentation
- Using the Canvas Element
- Introduced by Apple in 2004
- Great browser coverage except old IE
- Inspecting the DOM using Chrome Dev Tools
- Using
console.log()
for debugging - Better not to use jQuery until you really need it
document.getElementById()
ctx
as a common convention for the Canvas contexts, I preferc
- Filling a rectangle using the Canvas API
- Pixel coordinates vs. math coordinates (Y is flipped)
- Separating the JavaScript from the HTML in JSBin
- Canvas features: lines, colors, circles, text
- Approximating a continuous curve with discrete line segments
- Using the Canvas API documentation
- Default color is black, default line width is 1 pixel
- Using Canvas
lineTo()
to draw a polyline - Documenting single-letter variable names is critical
- Combining multiple
var
declarations into a single statement - Variables are scoped to function closures, not curly brace blocks
- Better to declare
i
andj
loop indices at the top of the function - Defining a path using the Canvas API and a for loop
- Projecting the
i
loop index to Canvas coordinates - Using
canvas.width
andcanvas.height
- Defining the width and height of the Canvas in HTML attributes
- Refactoring to encapsulate specific tasks as functions
- Which way should the code read?
- IMO more readable when functions are first used, then defined
- this coding style reads more like a story or a book
- Defining a mathematical window in terms of (xMin, xMax, yMin, yMax)
- Linear interpolation (projection and inverse projection between intervals)
- Using symbolic algebraic manipulation to invert linear interpolation
- Using Math.js to parse and evaluate math expression strings
- Using CDNjs
- Libraries typically introduce a single global variable
- The importance of naming variables well
- Putting a text field onto the page and listening for changes
- Updating the plot when the user changes the expression string
- Clearing the canvas using
clearRect()
- Flipping the Y coordinate to match math convention
- Overview of JSLint
- Why eval is evil
- Animation with
requestAnimationFrame()
- Why it is better than
setTimeout()
- Introducing a 'time' variable in the math expression
- Aside on 3D graphics for the Web
- WebGL
- Three.js
- Using the URL hash
- Empty string is falsy
- It's a sign to rafactor if you copy and paste chunks of complex code
- Using the
hashchange
event to get the back and forward buttons to work