requirebin sketch

index.js

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

var s = 50;
var d = .01;
var ctx = fc(function() {
  ctx.clear();
  center(ctx)

  s+=d;
  if(s>270) {
    d=-1;
  } else if (s < 10) {
    d=1;
  }
  
  dashCircle(ctx, 0, 0, 200, false, s|0);
  ctx.strokeStyle = "orange";
  ctx.stroke()
  
}, true)


var TAU = Math.PI*2;
function dashCircle(ctx, cx, cy, r, invert, segments) {
  ctx.beginPath()
   ctx.moveTo(cx+r, cy);
   var step = TAU/segments;
   for (var i=0; i<=TAU; i+=step*2) {
     //if (TAU-i <= step*1.5) { continue; }
     
     ctx.moveTo(
       cx + Math.cos(i) * r,
       cy + Math.sin(i) * r
     );
     
     
     ctx.arc(cx, cy, r, i, i+step, 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-circle":[function(require,module,exports){var TAU=Math.PI*2;module.exports=circle;function circle(ctx,x,y,r,reverse){ctx.moveTo(x+r,y);ctx.arc(x,y,r,0,TAU,!!reverse)}},{}]},{},[]);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 circle=require("ctx-circle");var s=50;var d=.01;var ctx=fc(function(){ctx.clear();center(ctx);s+=d;if(s>270){d=-1}else if(s<10){d=1}dashCircle(ctx,0,0,200,false,s|0);ctx.strokeStyle="orange";ctx.stroke()},true);var TAU=Math.PI*2;function dashCircle(ctx,cx,cy,r,invert,segments){ctx.beginPath();ctx.moveTo(cx+r,cy);var step=TAU/segments;for(var i=0;i<=TAU;i+=step*2){ctx.moveTo(cx+Math.cos(i)*r,cy+Math.sin(i)*r);ctx.arc(cx,cy,r,i,i+step,false)}}

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "fc": "1.4.3",
    "ctx-circle": "1.0.0",
    "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