face08 / circlejs

Some HTML5 canvas javascript fun with circles and trigonometry

CircleJS

A collection of javascript classes that can be used to demonstrate simple trigonometry and circle maths.

To see the demos in action simply pull the repository and open default.html in a browser that supports html canvas. This page is a cut down version of the blog post that this library is based on.

Files

Utilities.js - functions

• toRad() and toDegrees() conversions
• requestAnimationFrame shim for browser support

ImageLoader.js - class

• A small wrapper for the creation of multiple image elements and firing a single callback after all have loaded

    new ImageLoader(["path1.jpg", "path2.jpg"])
        .load(function(loadedImages)
        {
            
        });
  

Animator.js - class

• A small wrapper for creating animations that respond to regular interval callbacks

    var myCanvas = document.getElementById('myCanvas');
    var myContext = myCanvas.getContext('2d');
    var desiredFramesPerSecond = 60;
    new Animator.Animation(desiredFramesPerSecond, 
        function()
        {
            myContext.clearRect(0, 0, myCanvas.width, myCanvas.height);
            
            // Drawing code here
        };)
  

Circle.js - classes

• Point

    var pointA = new CircleJS.Point(x, y, z);
    var pointB = new CircleJS.Point(x, y, z);
  
    // Z is only simply implemented and not used as part of distance or angle
    // which are x/y only
    var distance = pointA.distance(pointB);
    var angle = pointA.angle(pointB);
  

• Triangle

    var triangleA = new CircleJS.Triangle(pointA, pointB, pointC)
  

• Circle

    var centreX = 100;
    var centreY = 100;
    var radius = 50;
    var rotationAboutX = 0;
    var circleA = new CircleJS.Circle(centreX, centreY, radius, rotationAboutX);
  

• Demo

  • The demo class provides a series of functions to draw trigonometry based circle demos to a passed canvas

           var myCanvas = document.getElementById('myCanvas');
           var myContext = myCanvas.getContext('2d');
           var demo = new CircleJS.Demo(myContext, myCanvas.width, myCanvas.height);
    
           demo.setFill('#0f0');
       	demo.setStroke('#f00');
    
           // Available Demos
           demo.drawTrig(); // Draws a sohcahtoa diagram
       	demo.drawRightAngledTriangle(triangle); // draws a right angled triangle
           demo.drawCircleInfo(circle, displayAngle);  // draws a circle with a right angle triangle at the specified angle
           demo.drawTiltDemo(circle, rotation); // draws a demonstration of tilting a circle 'into' the screen
           demo.drawCarousel(circle, images, rotation, yAdjustmentFunc); // draws a rotated image carousel
           demo.drawWheel(circle, numberOfPoints, rotation, yAdjustmentFunc);  // draws a wheel (points from the centre out) with the specified spoke count
           demo.drawPolygon(circle, numberOfPoints, rotation); // draws a polygon of the specified size and number of points
    

  • All of these demos can be wrapped in calls to new Animator.Animation(60, callback) to animate them progressively over time