dreid/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <!-- put additional styles and scripts here -->
</head>
<body>
  <!-- put markup and other contents here -->
  <canvas width=500 height=500></canvas>
  <pre></pre>
</body>
</html>

## index.js
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program

import BezierEasing from 'bezier-easing';

const TWO_PI = 2 * Math.PI;
const h = 500;
const w = 500;

const center = {x: 250, y: 250}

const canvas = document.querySelector("canvas");
const pre = document.querySelector("pre");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.strokeStyle = 'lightgray';
ctx.moveTo(0, h * 0.5);
ctx.lineTo(w, h * 0.5);
ctx.stroke();

ctx.moveTo(w * 0.5, 0);
ctx.lineTo(w * 0.5, h);
ctx.stroke();

ctx.translate(center.x, center.y);

function log(...args) {
  pre.innerText = pre.innerText + `${args}\n`;
}

function drawPoint(x, y) {
  ctx.save();
  ctx.beginPath();
  ctx.arc(x, y, 2, TWO_PI, false);
  log(x, y);
  ctx.fillStyle = 'red';
  ctx.fill();
  ctx.restore();
}

const xCurve = BezierEasing(0.5, Math.random(), Math.random(), Math.random());
const yCurve = BezierEasing(0.5, Math.random(), Math.random(), Math.random());

for(var i = 0; i <= 1; i += 0.1) {
  drawPoint(xCurve(i) * w, yCurve(i) * h);
}

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "bezier-easing": "2.0.3"
  }
}

## transpiled.js
"use strict";

var _bezierEasing = require("bezier-easing");

var _bezierEasing2 = _interopRequireDefault(_bezierEasing);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var TWO_PI = 2 * Math.PI; // write ES2015 code and import modules from npm
// and then press "Execute" to run your program

var h = 500;
var w = 500;

var center = { x: 250, y: 250 };

var canvas = document.querySelector("canvas");
var pre = document.querySelector("pre");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.strokeStyle = 'lightgray';
ctx.moveTo(0, h * 0.5);
ctx.lineTo(w, h * 0.5);
ctx.stroke();

ctx.moveTo(w * 0.5, 0);
ctx.lineTo(w * 0.5, h);
ctx.stroke();

ctx.translate(center.x, center.y);

function log() {
  for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
    args[_key] = arguments[_key];
  }

  pre.innerText = pre.innerText + (args + "\n");
}

function drawPoint(x, y) {
  ctx.save();
  ctx.beginPath();
  ctx.arc(x, y, 2, TWO_PI, false);
  log(x, y);
  ctx.fillStyle = 'red';
  ctx.fill();
  ctx.restore();
}

var xCurve = (0, _bezierEasing2.default)(0.5, Math.random(), Math.random(), Math.random());
var yCurve = (0, _bezierEasing2.default)(0.5, Math.random(), Math.random(), Math.random());

for (var i = 0; i <= 1; i += 0.1) {
  drawPoint(xCurve(i) * w, yCurve(i) * h);
}
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	</head>
	<body>
	<!-- put markup and other contents here -->
	<canvas width=500 height=500></canvas>
	<pre></pre>
	</body>
	</html>
	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program

	import BezierEasing from 'bezier-easing';

	const TWO_PI = 2 * Math.PI;
	const h = 500;
	const w = 500;

	const center = {x: 250, y: 250}

	const canvas = document.querySelector("canvas");
	const pre = document.querySelector("pre");
	const ctx = canvas.getContext("2d");

	ctx.beginPath();
	ctx.strokeStyle = 'lightgray';
	ctx.moveTo(0, h * 0.5);
	ctx.lineTo(w, h * 0.5);
	ctx.stroke();

	ctx.moveTo(w * 0.5, 0);
	ctx.lineTo(w * 0.5, h);
	ctx.stroke();

	ctx.translate(center.x, center.y);

	function log(...args) {
	pre.innerText = pre.innerText + `${args}\n`;
	}

	function drawPoint(x, y) {
	ctx.save();
	ctx.beginPath();
	ctx.arc(x, y, 2, TWO_PI, false);
	log(x, y);
	ctx.fillStyle = 'red';
	ctx.fill();
	ctx.restore();
	}

	const xCurve = BezierEasing(0.5, Math.random(), Math.random(), Math.random());
	const yCurve = BezierEasing(0.5, Math.random(), Math.random(), Math.random());

	for(var i = 0; i <= 1; i += 0.1) {
	drawPoint(xCurve(i) * w, yCurve(i) * h);
	}
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"bezier-easing": "2.0.3"
	}
	}
	"use strict";

	var _bezierEasing = require("bezier-easing");

	var _bezierEasing2 = _interopRequireDefault(_bezierEasing);

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	var TWO_PI = 2 * Math.PI; // write ES2015 code and import modules from npm
	// and then press "Execute" to run your program

	var h = 500;
	var w = 500;

	var center = { x: 250, y: 250 };

	var canvas = document.querySelector("canvas");
	var pre = document.querySelector("pre");
	var ctx = canvas.getContext("2d");

	ctx.beginPath();
	ctx.strokeStyle = 'lightgray';
	ctx.moveTo(0, h * 0.5);
	ctx.lineTo(w, h * 0.5);
	ctx.stroke();

	ctx.moveTo(w * 0.5, 0);
	ctx.lineTo(w * 0.5, h);
	ctx.stroke();

	ctx.translate(center.x, center.y);

	function log() {
	for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
	args[_key] = arguments[_key];
	}

	pre.innerText = pre.innerText + (args + "\n");
	}

	function drawPoint(x, y) {
	ctx.save();
	ctx.beginPath();
	ctx.arc(x, y, 2, TWO_PI, false);
	log(x, y);
	ctx.fillStyle = 'red';
	ctx.fill();
	ctx.restore();
	}

	var xCurve = (0, _bezierEasing2.default)(0.5, Math.random(), Math.random(), Math.random());
	var yCurve = (0, _bezierEasing2.default)(0.5, Math.random(), Math.random(), Math.random());

	for (var i = 0; i <= 1; i += 0.1) {
	drawPoint(xCurve(i) * w, yCurve(i) * h);
	}