requirebin sketch

index.js

var fc = require('fc')
console.clear()
var TAU=Math.PI*2;

var mouse = [0, 0];
document.addEventListener('mousemove', function(e) {
  mouse[0] = e.clientX;
  mouse[1] = e.clientY - ctx.canvas.width/2;
});

function hsv(huePercentage) {
 return 'hsl(' + ((huePercentage*360) % 360)  + ', 100%, 60%)'; 
}

function drawLine(x, y, currentSecond, ratio) {
  ctx.fillStyle = hsv(currentSecond/100 + x/ctx.canvas.width);
  ctx.beginPath();
  ctx.arc(
    x + Math.sin(x * ratio * currentSecond/10) * 100, // x
    y + Math.sin(currentSecond + x * ratio) * mouse[1], // y
    2, // radius
    0, // start angle
    Math.PI*2, // end angle
    false // inverse
  );
  ctx.fill(); 
}


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

  var ratio = TAU/ctx.canvas.width;
  var currentSecond = Date.now()/1000;
	
  //for (var y = 0; y<ctx.canvas.height; y+=50) {
  var y = ctx.canvas.height/2
    for (var x = 0; x<ctx.canvas.width; x+=1) {
      drawLine(x, y, currentSecond+y*10, ratio)
    }
  //}  
  
}, 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}})()},{}]},{},[]);var fc=require("fc");console.clear();var TAU=Math.PI*2;var mouse=[0,0];document.addEventListener("mousemove",function(e){mouse[0]=e.clientX;mouse[1]=e.clientY-ctx.canvas.width/2});function hsv(huePercentage){return"hsl("+huePercentage*360%360+", 100%, 60%)"}function drawLine(x,y,currentSecond,ratio){ctx.fillStyle=hsv(currentSecond/100+x/ctx.canvas.width);ctx.beginPath();ctx.arc(x+Math.sin(x*ratio*currentSecond/10)*100,y+Math.sin(currentSecond+x*ratio)*mouse[1],2,0,Math.PI*2,false);ctx.fill()}var ctx=fc(function(){ctx.clear();var ratio=TAU/ctx.canvas.width;var currentSecond=Date.now()/1e3;var y=ctx.canvas.height/2;for(var x=0;x<ctx.canvas.width;x+=1){drawLine(x,y,currentSecond+y*10,ratio)}},true);

package.json

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

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