Speedcoding library

fdoc.md

Speedcoding library

Functions

init()

Initializes the canvas element and fires up the render loop.

Default canvas size is 600x600, you can override it by calling init(true) to make it fill the screen or init(w,h) for a custom width (w) and height (h).

clear() , clearp(a)

clear() will clear the canvas.
clearp(..) will do something similar, but only partially, used to achieve a Persistence effect. (notice: it clears to white, not transparent)

rectf(x,y,w,h) , rects(x,y,w,h)

rect(..) will create a Rectangle a the coordinates (x,y) with the specified width (w) and height (h).

rectf(..) means filled rectangle. rects(..) means stroked rectangle.
Those are direct shorthands of fillRect and strokeRect, thus have their coordinate match the top left edge, for coordinate-centered rects, check boxf/boxs

boxf(x,y,w,h) , boxs(x,y,w,h)

box(..) acts just like rect(..), but with centered coordinates.

circlef(x,y,r) , circles(x,y,r)

circle(..) creates a circle at the coordinates (x,y) with the given radius (r). Coordinates are centered.

circlef(..) means filled circle. circles(..) means stroked circle.

ovalf(x,y,rx,ry) , ovals(x,y,rx,ry)

oval(..) creates an oval at the coordinates (x,y) with the given radiuses (rx,ry). Coordinates are centered.

ovalf(..) means filled oval. ovals(..) means stroked oval.

polyf(x,y,rx,ry) , polys(x,y,r,s,o)

poly(..) creates a regular polygon at the coordinates (x,y) with the given radius (r), the number of sides (s) and rotation offset (o). Coordinates are centered.

polyf(..) means filled polygon. polys(..) means stroked polygon.

line(x1,y1,x2,y2)

line(..) creates a line from point (x1,y1) to point (x2,y2)

colors(r,g,b,a) , colorf(r,g,b,a)

color(..) specifies the current color for all primitives.
The alpha (a) parameter is optional and defaults to 1.

colors(..) specifies fill color. colorf(..) specifies stroke color.

Vars

t, ms

Current time in seconds (t) and milliseconds (ms).
Updated during the render loop.

Other things

All Math functions (Math.sin, Math.cos ..) are exposed on the global scope.

Hello world

init();
function render() {
   clearp(0.1);
   circlef(300+sin(t/100)*100,300+cos(t/100)*100,10)
};

speed.js

// Speedcoding library - by Hamcha
// Licensed under PPIE LICENSE (http://www.hamcha.net/hlicense)
  
w = h = 600;
fullscreen = false;
    
var mf = Object.getOwnPropertyNames(Math);
for (var i in mf) window[mf[i]] = Math[mf[i]];

clear = function() { ctx.clearRect(0, 0, w, h); };
clearp = function(a) {
  ctx.fillStyle="rgba(255,255,255,"+a+")";
  ctx.fillRect(0,0,w,h);
  ctx.fillStyle="#000";
};

rectf = function(x, y, w, h) { ctx.fillRect(x, y, w, h); };
rects = function(x, y, w, h) { ctx.strokeRect(x, y, w, h); };
  
boxf = function(x, y, w, h) { rectf(x-w/2,y-h/2,w,h) };
boxs = function(x, y, w, h) { rects(x-w/2,y-h/2,w,h) };
  
circle_ = function(x, y, r) { ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); };
circles = function(x, y, r) { circle_(x, y, r); ctx.stroke(); };

circlef = function(x, y, r) { circle_(x, y, r); ctx.fill(); };

// Oval function by Deven Kalra
oval = function(cx,cy,rx,ry) {
  ctx.save();
  ctx.beginPath();
  ctx.translate(cx-rx, cy-ry);
  ctx.scale(rx, ry);
  ctx.arc(1, 1, 1, 0, 2 * Math.PI, false);
  ctx.restore();
};
  
ovals = function(cx,cy,rx,ry) {
  oval(cx,cy,rx,ry); ctx.stroke();
};

ovalf = function(cx,cy,rx,ry) {
  oval(cx,cy,rx,ry); ctx.fill();
};
  
poly = function(x,y,l,s,o) {
  ctx.beginPath();
  ctx.moveTo(x+sin(o)*l,y+cos(o)*l)
  for (var i = 0; i <= s; i++)
    ctx.lineTo(x+sin(o+i/s*PI*2)*l,y+cos(o+i/s*PI*2)*l);
};

polys = function(x,y,l,s,o) { poly(x,y,l,s,o); ctx.stroke(); };

polyf = function(x,y,l,s,o) { poly(x,y,l,s,o); ctx.fill(); };

line = function(x1, y1, x2, y2) {
  ctx.beginPath(); 
  ctx.moveTo(x1, y1); 
  ctx.lineTo(x2, y2); 
  ctx.stroke();
};

colors = function(r, g, b, a) {
  if (!a) a = 1;
  ctx.strokeStyle = "rgba(" + [r, g, b].map(function(a) {
    return Math.floor(a * 256);
  }) + "," + a + ")";
};

colorf = function(r, g, b, a) {
  if (!a) a = 1;
  ctx.fillStyle = "rgba(" + [r, g, b].map(function(a) {
    return Math.floor(a * 256);
  }) + "," + a + ")";
};

render_ = function() {
  requestAnimationFrame(render_);
  ms = Date.now();
  t = ms/1000;
  if (render != null) { render(); }
};

init = function(wi,he) {
  if (typeof(wi) === "boolean" && wi) {
    w = window.innerWidth; h = window.innerHeight; fullscreen = true;
  } else if (typeof(wi) === "number" && typeof(he) === "number") {
    w = wi; h = he;
  }
  canvas = document.createElement("canvas");
  canvas.width = w; canvas.height = h;
  if (!fullscreen)
  {
    canvas.style.border = "1px solid #ccc";
    canvas.style.margin = "5px";
  } else {
    window.onresize = function(event) {
      w = window.innerWidth; h = window.innerHeight;
      canvas.width = w; canvas.height = h;
    };
  }
  document.body.appendChild(canvas);
  ctx = canvas.getContext("2d");
  render_();
};