Skip to content

Instantly share code, notes, and snippets.

@mikkoh
Last active November 27, 2015 17:09
Show Gist options
  • Save mikkoh/0da108f55186d21e1344 to your computer and use it in GitHub Desktop.
Save mikkoh/0da108f55186d21e1344 to your computer and use it in GitHub Desktop.
requirebin sketch
var style = require('dom-css');
var NUM_SAMPLES = 100;
var CURVE = [0,1.45,1,-1];
for(var i = 0; i <= NUM_SAMPLES; i++) {
var el = document.createElement('div');
style(el, {
width: 10,
height: 10,
backgroundColor: '#F0F',
position: 'absolute',
left: i / NUM_SAMPLES * 100,
top: require('bezier')(CURVE, i / NUM_SAMPLES) * -100 + 100
});
document.body.appendChild(el);
}
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){var elem=null;module.exports=function prefix(prop){var prefixes=["Moz","Khtml","Webkit","O","ms"],upper=prop.charAt(0).toUpperCase()+prop.slice(1);if(!elem)elem=document.createElement("div");if(prop in elem.style)return prop;for(var len=prefixes.length;len--;){if(prefixes[len]+upper in elem.style)return prefixes[len]+upper}return false}},{}],2:[function(require,module,exports){var toSpace=require("to-space-case");module.exports=toCamelCase;function toCamelCase(string){return toSpace(string).replace(/\s(\w)/g,function(matches,letter){return letter.toUpperCase()})}},{"to-space-case":3}],3:[function(require,module,exports){var clean=require("to-no-case");module.exports=toSpaceCase;function toSpaceCase(string){return clean(string).replace(/[\W_]+(.|$)/g,function(matches,match){return match?" "+match:""})}},{"to-no-case":4}],4:[function(require,module,exports){module.exports=toNoCase;var hasSpace=/\s/;var hasCamel=/[a-z][A-Z]/;var hasSeparator=/[\W_]/;function toNoCase(string){if(hasSpace.test(string))return string.toLowerCase();if(hasSeparator.test(string))string=unseparate(string);if(hasCamel.test(string))string=uncamelize(string);return string.toLowerCase()}var separatorSplitter=/[\W_]+(.|$)/g;function unseparate(string){return string.replace(separatorSplitter,function(m,next){return next?" "+next:""})}var camelSplitter=/(.)([A-Z]+)/g;function uncamelize(string){return string.replace(camelSplitter,function(m,previous,uppers){return previous+" "+uppers.toLowerCase().split("").join(" ")})}},{}],"dom-css":[function(require,module,exports){var prefix=require("prefix-style");var toCamelCase=require("to-camel-case");var cache={"float":"cssFloat"};var suffixMap={};["top","right","bottom","left","width","height","fontSize","paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","padding","margin","perspective"].forEach(function(prop){suffixMap[prop]="px"});function style(element,property,value){var camel=cache[property];if(typeof camel==="undefined")camel=detect(property);if(camel){if(value===undefined)return element.style[camel];if(typeof value==="number")value=value+(suffixMap[camel]||"");element.style[camel]=value}}function each(element,properties){for(var k in properties){if(properties.hasOwnProperty(k)){style(element,k,properties[k])}}}function detect(cssProp){var camel=toCamelCase(cssProp);var result=prefix(camel);cache[camel]=cache[cssProp]=cache[result]=result;return result}function set(){if(arguments.length===2){each(arguments[0],arguments[1])}else style(arguments[0],arguments[1],arguments[2])}module.exports=set;module.exports.set=set;module.exports.get=function(element,properties){if(Array.isArray(properties))return properties.reduce(function(obj,prop){obj[prop]=style(element,prop||"");return obj},{});else return style(element,properties||"")}},{"prefix-style":1,"to-camel-case":2}]},{},[]);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}({bezier:[function(require,module,exports){var cache={1:bezier1,2:bezier2,3:bezier3,4:bezier4};module.exports=neat;module.exports.prepare=prepare;function neat(arr,t){return prepare(arr.length)(arr,t)}function prepare(pieces){pieces=+pieces|0;if(!pieces)throw new Error("Cannot create a interpolator with no elements");if(cache[pieces])return cache[pieces];var fn=["var ut = 1 - t",""];var n=pieces;while(n--){for(var j=0;j<n;j+=1){if(n+1===pieces){fn.push("var p"+j+" = arr["+j+"] * ut + arr["+(j+1)+"] * t")}else if(n>1){fn.push("p"+j+" = p"+j+" * ut + p"+(j+1)+" * t")}else{fn.push("return p"+j+" * ut + p"+(j+1)+" * t")}}if(n>1)fn.push("")}fn=["return function bezier"+pieces+"(arr, t) {",fn.map(function(s){return" "+s}).join("\n"),"}"].join("\n");return Function(fn)()}function bezier1(arr){return arr[0]}function bezier2(arr,t){return arr[0]+(arr[1]-arr[0])*t}function bezier3(arr,t){var ut=1-t;return(arr[0]*ut+arr[1]*t)*ut+(arr[1]*ut+arr[2]*t)*t}function bezier4(arr,t){var ut=1-t;var a1=arr[1]*ut+arr[2]*t;return((arr[0]*ut+arr[1]*t)*ut+a1*t)*ut+(a1*ut+(arr[2]*ut+arr[3]*t)*t)*t}},{}]},{},[]);var style=require("dom-css");var NUM_SAMPLES=100;var CURVE=[0,1.45,1,-1];for(var i=0;i<=NUM_SAMPLES;i++){var el=document.createElement("div");style(el,{width:10,height:10,backgroundColor:"#F0F",position:"absolute",left:i/NUM_SAMPLES*100,top:require("bezier")(CURVE,i/NUM_SAMPLES)*-100+100});document.body.appendChild(el)}
{
"name": "requirebin-sketch",
"version": "1.0.0",
"dependencies": {
"dom-css": "1.1.2",
"bezier": "0.1.0"
}
}
<!-- contents of this file will be placed inside the <body> -->
<!-- contents of this file will be placed inside the <head> -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment