requirebin sketch

index.js

var fc = require('fc');
var hsv = require('hsv2rgb');
var TAU = Math.PI*2;

var planets = [{
  center: [0, 0],
  color: 'rgba(255, 0, 0, .2)',
  stroke: 'rgba(255, 0, 0, 1)',
  radius: 100,
  rings: 5
}];

var player = window.player = {
  center: [0, 0],
  planet: 0,
  ring: 3,
  angle: 0,
  velocity: .05
};


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

  var w = ctx.canvas.width;
  var h = ctx.canvas.height;
  var hw = (w/2)|0;
  var hh = (h/2)|0;
  ctx.translate(hw, hh)

  ctx.scale(2, 2);
  var planet = planets[player.planet];
  var x = Math.cos(player.angle) * planet.radius + player.ring * 10;
  var y = Math.sin(player.angle) * planet.radius + player.ring * 10;
console.log(x, y)
  ctx.translate(x, y);

  planets.forEach(function(planet) {
    ctx.translate(planet.center[0], planet.center[1]);
    ctx.beginPath();
      ctx.fillStyle = planet.color;
      ctx.strokeStyle = planet.stroke;
      ctx.arc(0, 0, planet.radius, 0, TAU, false);
      ctx.fill();
      ctx.stroke();

    for (var i=0; i<planet.rings; i++) {
      ctx.beginPath()
        var r = planet.radius + (i + 1) * 10;
        ctx.moveTo(r, 0);
        ctx.arc(0, 0, r, 0, TAU, false)
        ctx.strokeStyle = "grey";
        ctx.stroke();
    }
  });

  player.angle +=  player.velocity / player.ring;
  ctx.save()
    ctx.rotate(player.angle + Math.PI / 2);
    ctx.translate(0, planet.radius + player.ring * 10, planet.radius + player.ring * 10);

    ctx.beginPath()
      ctx.arc(0, 0, 5, 0, TAU, false);
      ctx.fillStyle = 'orange';
      ctx.fill();
  ctx.restore();


}, true)

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}({hsv2rgb:[function(require,module,exports){var TAU=Math.PI*2;var round=Math.round;var min=Math.min;var max=Math.max;var ceil=Math.ceil;module.exports=hsv2rgb;function set(r,g,b,out){out[0]=round(r*255);out[1]=round(g*255);out[2]=round(b*255)}function clamp(v,l,u){return max(l,min(v,u))}function hsv2rgb(h,s,v,out){out=out||[0,0,0];h=h%360;s=clamp(s,0,1);v=clamp(v,0,1);if(!s){out[0]=out[1]=out[2]=ceil(v*255)}else{var b=(1-s)*v;var vb=v-b;var hm=h%60;switch(h/60|0){case 0:set(v,vb*h/60+b,b,out);break;case 1:set(vb*(60-hm)/60+b,v,b,out);break;case 2:set(b,v,vb*hm/60+b,out);break;case 3:set(b,vb*(60-hm)/60+b,v,out);break;case 4:set(vb*hm/60+b,b,v,out);break;case 5:set(v,b,vb*(60-hm)/60+b,out);break}}return out}},{}]},{},[]);var fc=require("fc");var hsv=require("hsv2rgb");var TAU=Math.PI*2;var planets=[{center:[0,0],color:"rgba(255, 0, 0, .2)",stroke:"rgba(255, 0, 0, 1)",radius:100,rings:5}];var player=window.player={center:[0,0],planet:0,ring:3,angle:0,velocity:.05};var ctx=fc(function(){ctx.clear();var w=ctx.canvas.width;var h=ctx.canvas.height;var hw=w/2|0;var hh=h/2|0;ctx.translate(hw,hh);ctx.scale(2,2);var planet=planets[player.planet];var x=Math.cos(player.angle)*planet.radius+player.ring*10;var y=Math.sin(player.angle)*planet.radius+player.ring*10;console.log(x,y);ctx.translate(x,y);planets.forEach(function(planet){ctx.translate(planet.center[0],planet.center[1]);ctx.beginPath();ctx.fillStyle=planet.color;ctx.strokeStyle=planet.stroke;ctx.arc(0,0,planet.radius,0,TAU,false);ctx.fill();ctx.stroke();for(var i=0;i<planet.rings;i++){ctx.beginPath();var r=planet.radius+(i+1)*10;ctx.moveTo(r,0);ctx.arc(0,0,r,0,TAU,false);ctx.strokeStyle="grey";ctx.stroke()}});player.angle+=player.velocity/player.ring;ctx.save();ctx.rotate(player.angle+Math.PI/2);ctx.translate(0,planet.radius+player.ring*10,planet.radius+player.ring*10);ctx.beginPath();ctx.arc(0,0,5,0,TAU,false);ctx.fillStyle="orange";ctx.fill();ctx.restore()},true);

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "fc": "1.4.3",
    "hsv2rgb": "1.1.0"
  }
}

requirebin.md

made with requirebin