requirebin sketch

index.js

var fc = require('fc')
var center = require('ctx-translate-center')

var min = Math.min;
var max = Math.max;
var abs = Math.abs;
function length(x, y) {
  return Math.sqrt(x*x + y*y); 
}

function circle(x, y, px, py, r) {
  var dx = x - px
  var dy = y - py
  
  return length(dx, dy) - r
}

function square(x, y, px, py, rx, ry) {
  var dx = abs(x - px) - rx
  var dy = abs(y - py) - ry

  return min(max(dx, dy), 0.0) + length(max(dy,0.0), max(dx,0.0));
}

var ctx = fc(function() {
  ctx.clear()
	center(ctx)

  for (var x=-100; x<=100; x++) {
    for (var y=-100; y<=100; y++) {
      // rasterize a circle oriented at 0, 0
      var dist = max(square(x, y, 0, 0, 75, 25), -circle(x, y, 0, 50, 50))
      if (dist < 0) {
        ctx.fillStyle = "yellow"
   	    ctx.fillRect(x, y, 1, 1) 
      }
    }
  }
}, false)

minified.js

require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({fc:[function(require,module,exports){(function(){var performance=window.performance||{};var performanceNow=performance.now||performance.now||performance.mozNow||performance.msNow||performance.oNow||performance.webkitNow||function(){return(new Date).getTime()};performanceNow=performanceNow.bind(performance);function fc(fn,autorun,dimensions){document.body.style.margin="0px";document.body.style.padding="0px";var canvas=document.createElement("canvas");document.body.appendChild(canvas);canvas.style.position="absolute";canvas.style.left="0px";canvas.style.top="0px";var ctx;dimensions=dimensions||2;if(dimensions===2){ctx=canvas.getContext("2d")}else if(dimensions===3){ctx=canvas.getContext("webgl")||canvas.getContext("experimental-webgl")}if(!ctx){return}var last=performanceNow(),request;function requestFrame(){if(request===null){request=requestAnimationFrame(tick)}}function tick(){request=null;var time=performanceNow();var delta=time-last;last=time;ctx.reset();dimensions===2&&ctx.save();fn&&fn.call(ctx,delta);dimensions===2&&ctx.restore();if(autorun){requestFrame()}}if(dimensions===2){ctx.reset=function fc_reset(){canvas.width=0;canvas.width=window.innerWidth;canvas.height=window.innerHeight};ctx.clear=function fc_clear(color){var orig=ctx.fillStyle;ctx.fillStyle=color||"#223";ctx.fillRect(0,0,canvas.width,canvas.height);ctx.fillStyle=orig}}else{ctx.reset=function fc_reset(){if(canvas.width!==window.innerWidth){canvas.width=window.innerWidth}if(canvas.height!==window.innerHeight){canvas.height=window.innerHeight}}}setTimeout(tick,0);ctx.dirty=function fc_dirty(){last=performanceNow();requestFrame()};ctx.stop=function fc_stop(){autorun=false;request&&cancelAnimationFrame(request);request=null};ctx.start=function fc_start(){autorun=true;requestFrame()};(window.attachEvent||window.addEventListener)("resize",ctx.dirty);ctx.reset();ctx.canvas=canvas;return ctx}if(typeof module!=="undefined"&&typeof module.exports!=="undefined"){module.exports=fc}if(typeof window!=="undefined"){window.fc=window.fc||fc}})()},{}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({"ctx-translate-center":[function(require,module,exports){module.exports=center;function center(ctx){var w=ctx.canvas.width/2|0;var h=ctx.canvas.height/2|0;ctx.translate(w,h)}},{}]},{},[]);var fc=require("fc");var center=require("ctx-translate-center");var min=Math.min;var max=Math.max;var abs=Math.abs;function length(x,y){return Math.sqrt(x*x+y*y)}function circle(x,y,px,py,r){var dx=x-px;var dy=y-py;return length(dx,dy)-r}function square(x,y,px,py,rx,ry){var dx=abs(x-px)-rx;var dy=abs(y-py)-ry;return min(max(dx,dy),0)+length(max(dy,0),max(dx,0))}var ctx=fc(function(){ctx.clear();center(ctx);for(var x=-100;x<=100;x++){for(var y=-100;y<=100;y++){var dist=max(square(x,y,0,0,75,25),-circle(x,y,0,50,50));if(dist<0){ctx.fillStyle="yellow";ctx.fillRect(x,y,1,1)}}}},false);

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "fc": "1.4.3",
    "ctx-translate-center": "1.0.0"
  }
}

page-body.html

<!-- contents of this file will be placed inside the <body> -->

page-head.html

<!-- contents of this file will be placed inside the <head> -->

requirebin.md

made with requirebin