Some HTML5 canvas javascript fun with circles and trigonometry
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Animator.js
Circle.js
ImageLoader.js
Utilities.js
default.html
one.jpg
readme.md
three.jpg
two.jpg

readme.md

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