requirebin sketch

.requirebin-equation-stuff

an early version of equation-designer, demoed on requirebin

index.js

'use strict'

var ready = require('elements/domready')

var box = {
  width: 500,
  height: 500,
  top: 0,
  left: 0
}

var renderCanvas = function (ctx, equation) {
  var i

  // clear canvas
  ctx.clearRect(0, 0, box.width, box.height)

  // draw main box
  ctx.strokeStyle = 'rgba(0, 180, 255, 0.5)'
  ctx.lineWidth = 1
  ctx.beginPath()
  ctx.rect(box.left, box.top, box.width, box.height)
  ctx.closePath()
  ctx.stroke()

  var res = 100

  var points = []
  var linear = []

  for (i = 0; i < res; i++) {
    var pct = i / (res - 1)
    var x = box.left + (pct * box.width)

    var line = [{ x: x, y: box.top + box.height }, { x: x, y: box.top }]

    linear.push({ x: x, y: box.top + (-pct + 1) * box.height })

    ctx.strokeStyle = 'rgba(0, 180, 255, 0.5)'
    ctx.beginPath()
    ctx.moveTo(line[0].x, line[0].y)
    ctx.lineTo(line[1].x, line[1].y)
    ctx.closePath()
    ctx.stroke()

    if (equation != null) {
      var y = box.top + ((-equation(pct) + 1) * box.height)
      points.push({ x: x, y: y })
    }
  }

  // draw linear points

  ctx.fillStyle = 'red'
  linear.forEach(function (p) {
    ctx.beginPath()
    ctx.arc(p.x, p.y, 2, 0, Math.PI * 2)
    ctx.closePath()
    ctx.fill()
  })

  // draw computed points

  ctx.fillStyle = 'blue'
  points.forEach(function (p) {
    ctx.beginPath()
    ctx.arc(p.x, p.y, 2, 0, Math.PI * 2)
    ctx.closePath()
    ctx.fill()
  })
}

var lerp = function (from, to, delta) {
  return (to - from) * delta + from
}

var currentEquation
var fingerY = 0

var initDnD = function () {
  var finger = document.querySelector('#finger')
  var spinner = document.querySelector('#spinner')

  var mouseDown = false
  var offset

  finger.addEventListener('mousedown', function (event) {
    mouseDown = true
    offset = event.pageY - fingerY
    event.preventDefault()
  }, false)

  document.addEventListener('mouseup', function (event) {
    mouseDown = false
    event.preventDefault()
  }, false)

  document.addEventListener('mousemove', function (event) {
    if (mouseDown) {
      var deltaFinger = (event.pageY - offset - box.top) / box.height

      if (deltaFinger > 1) deltaFinger = 1
      if (deltaFinger < 0) deltaFinger = 0

      var deltaSpinner = currentEquation(deltaFinger)

      fingerY = lerp(box.top, box.height, deltaFinger)
      finger.style.top = fingerY + 'px'

      spinner.style.top = lerp(box.top, box.height, deltaSpinner) + 'px'
    }
  }, false)
}

var renderEquationString = function (ctx, value) {
  var eq
  try {
    eq = new Function('return function(x) { return ' + value + '}')()
  } catch (e) {}

  if (eq) {
    // window.localStorage.setItem('equationRenderInput', value)
    renderCanvas(ctx, eq)
    currentEquation = eq
  }
}

ready(function () {
  var canvas = document.querySelector('#curves')

  canvas.width = box.width
  canvas.height = box.height

  var ctx = canvas.getContext('2d')

  var input = document.querySelector('#equation')

  input.addEventListener('keydown', function (e) {
    if (e.keyIdentifier === 'Enter') {
      renderEquationString(ctx, input.value)
    }
  })

  var value// = window.localStorage.getItem('equationRenderInput')
  if (value != null) input.value = value
  else value = input.value
  renderEquationString(ctx, value)

  initDnD()
}, 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}({1:[function(require,module,exports){"use strict";var prime=require("prime");var forEach=require("mout/array/forEach"),map=require("mout/array/map"),filter=require("mout/array/filter"),every=require("mout/array/every"),some=require("mout/array/some");var index=0,__dc=document.__counter,counter=document.__counter=(__dc?parseInt(__dc,36)+1:0).toString(36),key="uid:"+counter;var uniqueID=function(n){if(n===window)return"window";if(n===document)return"document";if(n===document.documentElement)return"html";return n[key]||(n[key]=(index++).toString(36))};var instances={};var $=prime({constructor:function $(n,context){if(n==null)return this&&this.constructor===$?new Elements:null;var self,uid;if(n.constructor!==Elements){self=new Elements;if(typeof n==="string"){if(!self.search)return null;self[self.length++]=context||document;return self.search(n)}if(n.nodeType||n===window){self[self.length++]=n}else if(n.length){var uniques={};for(var i=0,l=n.length;i<l;i++){var nodes=$(n[i],context);if(nodes&&nodes.length)for(var j=0,k=nodes.length;j<k;j++){var node=nodes[j];uid=uniqueID(node);if(!uniques[uid]){self[self.length++]=node;uniques[uid]=true}}}}}else{self=n}if(!self.length)return null;if(self.length===1){uid=uniqueID(self[0]);return instances[uid]||(instances[uid]=self)}return self}});var Elements=prime({inherits:$,constructor:function Elements(){this.length=0},unlink:function(){return this.map(function(node){delete instances[uniqueID(node)];return node})},forEach:function(method,context){forEach(this,method,context);return this},map:function(method,context){return map(this,method,context)},filter:function(method,context){return filter(this,method,context)},every:function(method,context){return every(this,method,context)},some:function(method,context){return some(this,method,context)}});module.exports=$},{"mout/array/every":3,"mout/array/filter":4,"mout/array/forEach":5,"mout/array/map":7,"mout/array/some":8,prime:24}],2:[function(require,module,exports){"use strict";var Emitter=require("prime/emitter");var $=require("./base");var html=document.documentElement;var addEventListener=html.addEventListener?function(node,event,handle,useCapture){node.addEventListener(event,handle,useCapture||false);return handle}:function(node,event,handle){node.attachEvent("on"+event,handle);return handle};var removeEventListener=html.removeEventListener?function(node,event,handle,useCapture){node.removeEventListener(event,handle,useCapture||false)}:function(node,event,handle){node.detachEvent("on"+event,handle)};$.implement({on:function(event,handle,useCapture){return this.forEach(function(node){var self=$(node);var internalEvent=event+(useCapture?":capture":"");Emitter.prototype.on.call(self,internalEvent,handle);var domListeners=self._domListeners||(self._domListeners={});if(!domListeners[internalEvent])domListeners[internalEvent]=addEventListener(node,event,function(e){Emitter.prototype.emit.call(self,internalEvent,e||window.event,Emitter.EMIT_SYNC)},useCapture)})},off:function(event,handle,useCapture){return this.forEach(function(node){var self=$(node);var internalEvent=event+(useCapture?":capture":"");var domListeners=self._domListeners,domEvent,listeners=self._listeners,events;if(domListeners&&(domEvent=domListeners[internalEvent])&&listeners&&(events=listeners[internalEvent])){Emitter.prototype.off.call(self,internalEvent,handle);if(!self._listeners||!self._listeners[event]){removeEventListener(node,event,domEvent);delete domListeners[event];for(var l in domListeners)return;delete self._domListeners}}})},emit:function(){var args=arguments;return this.forEach(function(node){Emitter.prototype.emit.apply($(node),args)})}});module.exports=$},{"./base":1,"prime/emitter":23}],3:[function(require,module,exports){var makeIterator=require("../function/makeIterator_");function every(arr,callback,thisObj){callback=makeIterator(callback,thisObj);var result=true;if(arr==null){return result}var i=-1,len=arr.length;while(++i<len){if(!callback(arr[i],i,arr)){result=false;break}}return result}module.exports=every},{"../function/makeIterator_":10}],4:[function(require,module,exports){var makeIterator=require("../function/makeIterator_");function filter(arr,callback,thisObj){callback=makeIterator(callback,thisObj);var results=[];if(arr==null){return results}var i=-1,len=arr.length,value;while(++i<len){value=arr[i];if(callback(value,i,arr)){results.push(value)}}return results}module.exports=filter},{"../function/makeIterator_":10}],5:[function(require,module,exports){function forEach(arr,callback,thisObj){if(arr==null){return}var i=-1,len=arr.length;while(++i<len){if(callback.call(thisObj,arr[i],i,arr)===false){break}}}module.exports=forEach},{}],6:[function(require,module,exports){function indexOf(arr,item,fromIndex){fromIndex=fromIndex||0;if(arr==null){return-1}var len=arr.length,i=fromIndex<0?len+fromIndex:fromIndex;while(i<len){if(arr[i]===item){return i}i++}return-1}module.exports=indexOf},{}],7:[function(require,module,exports){var makeIterator=require("../function/makeIterator_");function map(arr,callback,thisObj){callback=makeIterator(callback,thisObj);var results=[];if(arr==null){return results}var i=-1,len=arr.length;while(++i<len){results[i]=callback(arr[i],i,arr)}return results}module.exports=map},{"../function/makeIterator_":10}],8:[function(require,module,exports){var makeIterator=require("../function/makeIterator_");function some(arr,callback,thisObj){callback=makeIterator(callback,thisObj);var result=false;if(arr==null){return result}var i=-1,len=arr.length;while(++i<len){if(callback(arr[i],i,arr)){result=true;break}}return result}module.exports=some},{"../function/makeIterator_":10}],9:[function(require,module,exports){function identity(val){return val}module.exports=identity},{}],10:[function(require,module,exports){var identity=require("./identity");var prop=require("./prop");var deepMatches=require("../object/deepMatches");function makeIterator(src,thisObj){if(src==null){return identity}switch(typeof src){case"function":return typeof thisObj!=="undefined"?function(val,i,arr){return src.call(thisObj,val,i,arr)}:src;case"object":return function(val){return deepMatches(val,src)};case"string":case"number":return prop(src)}}module.exports=makeIterator},{"../object/deepMatches":16,"./identity":9,"./prop":11}],11:[function(require,module,exports){function prop(name){return function(obj){return obj[name]}}module.exports=prop},{}],12:[function(require,module,exports){var mixIn=require("../object/mixIn");function createObject(parent,props){function F(){}F.prototype=parent;return mixIn(new F,props)}module.exports=createObject},{"../object/mixIn":20}],13:[function(require,module,exports){var isKind=require("./isKind");var isArray=Array.isArray||function(val){return isKind(val,"Array")};module.exports=isArray},{"./isKind":14}],14:[function(require,module,exports){var kindOf=require("./kindOf");function isKind(val,kind){return kindOf(val)===kind}module.exports=isKind},{"./kindOf":15}],15:[function(require,module,exports){var _rKind=/^\[object (.*)\]$/,_toString=Object.prototype.toString,UNDEF;function kindOf(val){if(val===null){return"Null"}else if(val===UNDEF){return"Undefined"}else{return _rKind.exec(_toString.call(val))[1]}}module.exports=kindOf},{}],16:[function(require,module,exports){var forOwn=require("./forOwn");var isArray=require("../lang/isArray");function containsMatch(array,pattern){var i=-1,length=array.length;while(++i<length){if(deepMatches(array[i],pattern)){return true}}return false}function matchArray(target,pattern){var i=-1,patternLength=pattern.length;while(++i<patternLength){if(!containsMatch(target,pattern[i])){return false}}return true}function matchObject(target,pattern){var result=true;forOwn(pattern,function(val,key){if(!deepMatches(target[key],val)){return result=false}});return result}function deepMatches(target,pattern){if(target&&typeof target==="object"){if(isArray(target)&&isArray(pattern)){return matchArray(target,pattern)}else{return matchObject(target,pattern)}}else{return target===pattern}}module.exports=deepMatches},{"../lang/isArray":13,"./forOwn":18}],17:[function(require,module,exports){var hasOwn=require("./hasOwn");var _hasDontEnumBug,_dontEnums;function checkDontEnum(){_dontEnums=["toString","toLocaleString","valueOf","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","constructor"];_hasDontEnumBug=true;for(var key in{toString:null}){_hasDontEnumBug=false}}function forIn(obj,fn,thisObj){var key,i=0;if(_hasDontEnumBug==null)checkDontEnum();for(key in obj){if(exec(fn,obj,key,thisObj)===false){break}}if(_hasDontEnumBug){var ctor=obj.constructor,isProto=!!ctor&&obj===ctor.prototype;while(key=_dontEnums[i++]){if((key!=="constructor"||!isProto&&hasOwn(obj,key))&&obj[key]!==Object.prototype[key]){if(exec(fn,obj,key,thisObj)===false){break}}}}}function exec(fn,obj,key,thisObj){return fn.call(thisObj,obj[key],key,obj)}module.exports=forIn},{"./hasOwn":19}],18:[function(require,module,exports){var hasOwn=require("./hasOwn");var forIn=require("./forIn");function forOwn(obj,fn,thisObj){forIn(obj,function(val,key){if(hasOwn(obj,key)){return fn.call(thisObj,obj[key],key,obj)}})}module.exports=forOwn},{"./forIn":17,"./hasOwn":19}],19:[function(require,module,exports){function hasOwn(obj,prop){return Object.prototype.hasOwnProperty.call(obj,prop)}module.exports=hasOwn},{}],20:[function(require,module,exports){var forOwn=require("./forOwn");function mixIn(target,objects){var i=0,n=arguments.length,obj;while(++i<n){obj=arguments[i];if(obj!=null){forOwn(obj,copyProp,target)}}return target}function copyProp(val,key){this[key]=val}module.exports=mixIn},{"./forOwn":18}],21:[function(require,module,exports){function now(){return now.get()}now.get=typeof Date.now==="function"?Date.now:function(){return+new Date};module.exports=now},{}],22:[function(require,module,exports){(function(process,global){"use strict";var kindOf=require("mout/lang/kindOf"),now=require("mout/time/now"),forEach=require("mout/array/forEach"),indexOf=require("mout/array/indexOf");var callbacks={timeout:{},frame:[],immediate:[]};var push=function(collection,callback,context,defer){var iterator=function(){iterate(collection)};if(!collection.length)defer(iterator);var entry={callback:callback,context:context};collection.push(entry);return function(){var io=indexOf(collection,entry);if(io>-1)collection.splice(io,1)}};var iterate=function(collection){var time=now();forEach(collection.splice(0),function(entry){entry.callback.call(entry.context,time)})};var defer=function(callback,argument,context){return kindOf(argument)==="Number"?defer.timeout(callback,argument,context):defer.immediate(callback,argument)};if(global.process&&process.nextTick){defer.immediate=function(callback,context){return push(callbacks.immediate,callback,context,process.nextTick)}}else if(global.setImmediate){defer.immediate=function(callback,context){return push(callbacks.immediate,callback,context,setImmediate)}}else if(global.postMessage&&global.addEventListener){addEventListener("message",function(event){if(event.source===global&&event.data==="@deferred"){event.stopPropagation();iterate(callbacks.immediate)}},true);defer.immediate=function(callback,context){return push(callbacks.immediate,callback,context,function(){postMessage("@deferred","*")})}}else{defer.immediate=function(callback,context){return push(callbacks.immediate,callback,context,function(iterator){setTimeout(iterator,0)})}}var requestAnimationFrame=global.requestAnimationFrame||global.webkitRequestAnimationFrame||global.mozRequestAnimationFrame||global.oRequestAnimationFrame||global.msRequestAnimationFrame||function(callback){setTimeout(callback,1e3/60)};defer.frame=function(callback,context){return push(callbacks.frame,callback,context,requestAnimationFrame)};var clear;defer.timeout=function(callback,ms,context){var ct=callbacks.timeout;if(!clear)clear=defer.immediate(function(){clear=null;callbacks.timeout={}});return push(ct[ms]||(ct[ms]=[]),callback,context,function(iterator){setTimeout(iterator,ms)})};module.exports=defer}).call(this,require("_process"),typeof global!=="undefined"?global:typeof self!=="undefined"?self:typeof window!=="undefined"?window:{})},{_process:25,"mout/array/forEach":5,"mout/array/indexOf":6,"mout/lang/kindOf":15,"mout/time/now":21}],23:[function(require,module,exports){"use strict";var indexOf=require("mout/array/indexOf"),forEach=require("mout/array/forEach");var prime=require("./index"),defer=require("./defer");var slice=Array.prototype.slice;var Emitter=prime({constructor:function(stoppable){this._stoppable=stoppable},on:function(event,fn){var listeners=this._listeners||(this._listeners={}),events=listeners[event]||(listeners[event]=[]);if(indexOf(events,fn)===-1)events.push(fn);return this},off:function(event,fn){var listeners=this._listeners,events;if(listeners&&(events=listeners[event])){var io=indexOf(events,fn);if(io>-1)events.splice(io,1);if(!events.length)delete listeners[event];for(var l in listeners)return this;delete this._listeners}return this},emit:function(event){var self=this,args=slice.call(arguments,1);var emit=function(){var listeners=self._listeners,events;if(listeners&&(events=listeners[event])){forEach(events.slice(0),function(event){var result=event.apply(self,args);if(self._stoppable)return result})}};if(args[args.length-1]===Emitter.EMIT_SYNC){args.pop();emit()}else{defer(emit)}return this}});Emitter.EMIT_SYNC={};module.exports=Emitter},{"./defer":22,"./index":24,"mout/array/forEach":5,"mout/array/indexOf":6}],24:[function(require,module,exports){"use strict";var hasOwn=require("mout/object/hasOwn"),mixIn=require("mout/object/mixIn"),create=require("mout/lang/createObject"),kindOf=require("mout/lang/kindOf");var hasDescriptors=true;try{Object.defineProperty({},"~",{});Object.getOwnPropertyDescriptor({},"~")}catch(e){hasDescriptors=false}var hasEnumBug=!{valueOf:0}.propertyIsEnumerable("valueOf"),buggy=["toString","valueOf"];var verbs=/^constructor|inherits|mixin$/;var implement=function(proto){var prototype=this.prototype;for(var key in proto){if(key.match(verbs))continue;if(hasDescriptors){var descriptor=Object.getOwnPropertyDescriptor(proto,key);if(descriptor){Object.defineProperty(prototype,key,descriptor);continue}}prototype[key]=proto[key]}if(hasEnumBug)for(var i=0;key=buggy[i];i++){var value=proto[key];if(value!==Object.prototype[key])prototype[key]=value}return this};var prime=function(proto){if(kindOf(proto)==="Function")proto={constructor:proto};var superprime=proto.inherits;var constructor=hasOwn(proto,"constructor")?proto.constructor:superprime?function(){return superprime.apply(this,arguments)}:function(){};if(superprime){mixIn(constructor,superprime);var superproto=superprime.prototype;var cproto=constructor.prototype=create(superproto);constructor.parent=superproto;cproto.constructor=constructor}if(!constructor.implement)constructor.implement=implement;var mixins=proto.mixin;if(mixins){if(kindOf(mixins)!=="Array")mixins=[mixins];for(var i=0;i<mixins.length;i++)constructor.implement(create(mixins[i].prototype))}return constructor.implement(proto)};module.exports=prime},{"mout/lang/createObject":12,"mout/lang/kindOf":15,"mout/object/hasOwn":19,"mout/object/mixIn":20}],25:[function(require,module,exports){var process=module.exports={};process.nextTick=function(){var canSetImmediate=typeof window!=="undefined"&&window.setImmediate;var canPost=typeof window!=="undefined"&&window.postMessage&&window.addEventListener;if(canSetImmediate){return function(f){return window.setImmediate(f)}}if(canPost){var queue=[];window.addEventListener("message",function(ev){var source=ev.source;if((source===window||source===null)&&ev.data==="process-tick"){ev.stopPropagation();if(queue.length>0){var fn=queue.shift();fn()}}},true);return function nextTick(fn){queue.push(fn);window.postMessage("process-tick","*")}}return function nextTick(fn){setTimeout(fn,0)}}();process.title="browser";process.browser=true;process.env={};process.argv=[];function noop(){}process.on=noop;process.addListener=noop;process.once=noop;process.off=noop;process.removeListener=noop;process.removeAllListeners=noop;process.emit=noop;process.binding=function(name){throw new Error("process.binding is not supported")};process.cwd=function(){return"/"};process.chdir=function(dir){throw new Error("process.chdir is not supported")}},{}],"elements/domready":[function(require,module,exports){"use strict";var $=require("./events");var readystatechange="onreadystatechange"in document,shouldPoll=false,loaded=false,readys=[],checks=[],ready=null,timer=null,test=document.createElement("div"),doc=$(document),win=$(window);var domready=function(){if(timer)timer=clearTimeout(timer);if(!loaded){if(readystatechange)doc.off("readystatechange",check);doc.off("DOMContentLoaded",domready);win.off("load",domready);loaded=true;for(var i=0;ready=readys[i++];)ready()}return loaded};var check=function(){for(var i=checks.length;i--;)if(checks[i]())return domready();return false};var poll=function(){clearTimeout(timer);if(!check())timer=setTimeout(poll,1e3/60)};if(document.readyState){var complete=function(){return!!/loaded|complete/.test(document.readyState)};checks.push(complete);if(!complete()){if(readystatechange)doc.on("readystatechange",check);else shouldPoll=true}else{domready()}}if(test.doScroll){var scrolls=function(){try{test.doScroll();return true}catch(e){}return false};if(!scrolls()){checks.push(scrolls);shouldPoll=true}}if(shouldPoll)poll();doc.on("DOMContentLoaded",domready);win.on("load",domready);module.exports=function(ready){loaded?ready():readys.push(ready);return null}},{"./events":2}]},{},[]);"use strict";var ready=require("elements/domready");var box={width:500,height:500,top:0,left:0};var renderCanvas=function(ctx,equation){var i;ctx.clearRect(0,0,box.width,box.height);ctx.strokeStyle="rgba(0, 180, 255, 0.5)";ctx.lineWidth=1;ctx.beginPath();ctx.rect(box.left,box.top,box.width,box.height);ctx.closePath();ctx.stroke();var res=100;var points=[];var linear=[];for(i=0;i<res;i++){var pct=i/(res-1);var x=box.left+pct*box.width;var line=[{x:x,y:box.top+box.height},{x:x,y:box.top}];linear.push({x:x,y:box.top+(-pct+1)*box.height});ctx.strokeStyle="rgba(0, 180, 255, 0.5)";ctx.beginPath();ctx.moveTo(line[0].x,line[0].y);ctx.lineTo(line[1].x,line[1].y);ctx.closePath();ctx.stroke();if(equation!=null){var y=box.top+(-equation(pct)+1)*box.height;points.push({x:x,y:y})}}ctx.fillStyle="red";linear.forEach(function(p){ctx.beginPath();ctx.arc(p.x,p.y,2,0,Math.PI*2);ctx.closePath();ctx.fill()});ctx.fillStyle="blue";points.forEach(function(p){ctx.beginPath();ctx.arc(p.x,p.y,2,0,Math.PI*2);ctx.closePath();ctx.fill()})};var lerp=function(from,to,delta){return(to-from)*delta+from};var currentEquation;var fingerY=0;var initDnD=function(){var finger=document.querySelector("#finger");var spinner=document.querySelector("#spinner");var mouseDown=false;var offset;finger.addEventListener("mousedown",function(event){mouseDown=true;offset=event.pageY-fingerY;event.preventDefault()},false);document.addEventListener("mouseup",function(event){mouseDown=false;event.preventDefault()},false);document.addEventListener("mousemove",function(event){if(mouseDown){var deltaFinger=(event.pageY-offset-box.top)/box.height;if(deltaFinger>1)deltaFinger=1;if(deltaFinger<0)deltaFinger=0;var deltaSpinner=currentEquation(deltaFinger);fingerY=lerp(box.top,box.height,deltaFinger);finger.style.top=fingerY+"px";spinner.style.top=lerp(box.top,box.height,deltaSpinner)+"px"}},false)};var renderEquationString=function(ctx,value){var eq;try{eq=new Function("return function(x) { return "+value+"}")()}catch(e){}if(eq){renderCanvas(ctx,eq);currentEquation=eq}};ready(function(){var canvas=document.querySelector("#curves");canvas.width=box.width;canvas.height=box.height;var ctx=canvas.getContext("2d");var input=document.querySelector("#equation");input.addEventListener("keydown",function(e){if(e.keyIdentifier==="Enter"){renderEquationString(ctx,input.value)}});var value;if(value!=null)input.value=value;else value=input.value;renderEquationString(ctx,value);initDnD()},false);

package.json

{
  "name": "equation-render",
  "version": "1.0.0",
  "main": "index.js",
  "author": "",
  "license": "MIT",
  "dependencies": {
    "elements": "0.6.0"
  }
}

page-body.html

    <div id="spinner"></div>
    <div id="finger"></div>
    <input type="text" id="equation" value=" 0.15 - Math.pow(1-x, 4) * 0.15" />
    <canvas id="curves"></canvas>

page-head.html

<style>

body {
  margin: 0;
  padding: 0;
  background: #eee;
  overflow: hidden;

  box-sizing: border-box;
}

#curves {
  display: block;
}

#equation {
  width: 498px;
  margin: 0;
  margin-left: -1px;
  margin-bottom: 4px;
}

#finger {
  top: 0;
  left: 600px;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background: rgba(255, 0, 0, 0.8);
  position: absolute;
}

#spinner {
  top: 0;
  left: 600px;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background: rgba(0, 0, 255, 0.8);
  position: absolute;
}


</style>

requirebin.md

made with requirebin