rohanorton/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNext Bin Sketch</title>
  <!-- put additional styles and scripts here -->
</head>
<body>
  <!-- put markup and other contents here -->
</body>
</html>

## index.js
// Generated Wallpaper
// click to pause / resume

const canvas = document.createElement('canvas');
canvas.style.width = canvas.style.height = "100%";
const size = 100;
canvas.width = canvas.height = size;
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
ctx.translate(-1, -1); // get rid of blurry inner edge


let plot = {
  red(i, j) {
    ctx.fillStyle = "#FF0000";
    this.draw(i, j);
  },

  black(i, j) {
    ctx.fillStyle = "#000000";
    this.draw(i, j);
  },

  pink(i, j) {
    ctx.fillStyle = "#ff00a9";
    this.draw(i, j);
  },

  purp(i, j) {
    ctx.fillStyle = "#551A8B";
    this.draw(i, j);
  },

  draw(i, j) {
    ctx.fillRect(i, j, 1, 1);
  }
}

let drawWallpaper = (cornA, cornB, side) => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 1; i <= size; i += 1) {
    for (let j = 1; j <= size; j += 1) {
      let x = cornA + i * side / size;
      let y = cornB + j * side / size;
      let c = parseInt(x ** 2 + y ** 2, 10);
      if (c % 4 === 0) {
        plot.black(i, j);
      } else if (c % 4 === 1) {
        plot.purp(i, j);
      } else if (c % 4 === 2) {
        plot.red(i, j);
      } else {
        plot.pink(i, j);
      }
    }
  }
}

class Timer {
  constructor(callback, delay) {
    this.id = null;
    this.start = null;
    this.remaining = delay;
    this.callback = callback;
    this.resume();
  }

  pause() {
    this.running = false;
    clearTimeout(this.id);
    this.remaining -= new Date() - this.start;
  }

  resume() {
    this.running = true;
    this.start = new Date();
    clearTimeout(this.id);
    this.id = setTimeout(this.callback, this.remaining)
  }

  toggle() {
    this.running ? this.pause() : this.resume();
  }
}

let timeout = null;
let a = 10;
let b = 10;
let c = 10;

let looper = () => {
  timeout = new Timer(() => {
    c += 0.2;
    drawWallpaper(a, b, c);
    looper();
  }, 100);
}

canvas.addEventListener('click', (event) => {
  if (timeout) {
    timeout.toggle();
  }
});

looper();

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "babel-runtime": "6.3.19"
  }
}

## transpiled.js
'use strict';

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

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

// Generated Wallpaper
// click to pause / resume

var canvas = document.createElement('canvas');
canvas.style.width = canvas.style.height = "100%";
var size = 100;
canvas.width = canvas.height = size;
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
ctx.translate(-1, -1); // get rid of blurry inner edge

var plot = {
  red: function red(i, j) {
    ctx.fillStyle = "#FF0000";
    this.draw(i, j);
  },
  black: function black(i, j) {
    ctx.fillStyle = "#000000";
    this.draw(i, j);
  },
  pink: function pink(i, j) {
    ctx.fillStyle = "#ff00a9";
    this.draw(i, j);
  },
  purp: function purp(i, j) {
    ctx.fillStyle = "#551A8B";
    this.draw(i, j);
  },
  draw: function draw(i, j) {
    ctx.fillRect(i, j, 1, 1);
  }
};

var drawWallpaper = function drawWallpaper(cornA, cornB, side) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (var i = 1; i <= size; i += 1) {
    for (var j = 1; j <= size; j += 1) {
      var x = cornA + i * side / size;
      var y = cornB + j * side / size;
      var _c = parseInt(Math.pow(x, 2) + Math.pow(y, 2), 10);
      if (_c % 4 === 0) {
        plot.black(i, j);
      } else if (_c % 4 === 1) {
        plot.purp(i, j);
      } else if (_c % 4 === 2) {
        plot.red(i, j);
      } else {
        plot.pink(i, j);
      }
    }
  }
};

var Timer = (function () {
  function Timer(callback, delay) {
    (0, _classCallCheck3.default)(this, Timer);

    this.id = null;
    this.start = null;
    this.remaining = delay;
    this.callback = callback;
    this.resume();
  }

  (0, _createClass3.default)(Timer, [{
    key: 'pause',
    value: function pause() {
      this.running = false;
      clearTimeout(this.id);
      this.remaining -= new Date() - this.start;
    }
  }, {
    key: 'resume',
    value: function resume() {
      this.running = true;
      this.start = new Date();
      clearTimeout(this.id);
      this.id = setTimeout(this.callback, this.remaining);
    }
  }, {
    key: 'toggle',
    value: function toggle() {
      this.running ? this.pause() : this.resume();
    }
  }]);
  return Timer;
})();

var timeout = null;
var a = 10;
var b = 10;
var c = 10;

var looper = function looper() {
  timeout = new Timer(function () {
    c += 0.2;
    drawWallpaper(a, b, c);
    looper();
  }, 100);
};

canvas.addEventListener('click', function (event) {
  if (timeout) {
    timeout.toggle();
  }
});

looper();
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNext Bin Sketch</title>
	<!-- put additional styles and scripts here -->
	</head>
	<body>
	<!-- put markup and other contents here -->
	</body>
	</html>
	// Generated Wallpaper
	// click to pause / resume

	const canvas = document.createElement('canvas');
	canvas.style.width = canvas.style.height = "100%";
	const size = 100;
	canvas.width = canvas.height = size;
	document.body.appendChild(canvas);
	const ctx = canvas.getContext('2d');
	ctx.translate(-1, -1); // get rid of blurry inner edge


	let plot = {
	red(i, j) {
	ctx.fillStyle = "#FF0000";
	this.draw(i, j);
	},

	black(i, j) {
	ctx.fillStyle = "#000000";
	this.draw(i, j);
	},

	pink(i, j) {
	ctx.fillStyle = "#ff00a9";
	this.draw(i, j);
	},

	purp(i, j) {
	ctx.fillStyle = "#551A8B";
	this.draw(i, j);
	},

	draw(i, j) {
	ctx.fillRect(i, j, 1, 1);
	}
	}

	let drawWallpaper = (cornA, cornB, side) => {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	for (let i = 1; i <= size; i += 1) {
	for (let j = 1; j <= size; j += 1) {
	let x = cornA + i * side / size;
	let y = cornB + j * side / size;
	let c = parseInt(x 2 + y 2, 10);
	if (c % 4 === 0) {
	plot.black(i, j);
	} else if (c % 4 === 1) {
	plot.purp(i, j);
	} else if (c % 4 === 2) {
	plot.red(i, j);
	} else {
	plot.pink(i, j);
	}
	}
	}
	}

	class Timer {
	constructor(callback, delay) {
	this.id = null;
	this.start = null;
	this.remaining = delay;
	this.callback = callback;
	this.resume();
	}

	pause() {
	this.running = false;
	clearTimeout(this.id);
	this.remaining -= new Date() - this.start;
	}

	resume() {
	this.running = true;
	this.start = new Date();
	clearTimeout(this.id);
	this.id = setTimeout(this.callback, this.remaining)
	}

	toggle() {
	this.running ? this.pause() : this.resume();
	}
	}

	let timeout = null;
	let a = 10;
	let b = 10;
	let c = 10;

	let looper = () => {
	timeout = new Timer(() => {
	c += 0.2;
	drawWallpaper(a, b, c);
	looper();
	}, 100);
	}

	canvas.addEventListener('click', (event) => {
	if (timeout) {
	timeout.toggle();
	}
	});

	looper();
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"babel-runtime": "6.3.19"
	}
	}
	'use strict';

	var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

	var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

	var _createClass2 = require('babel-runtime/helpers/createClass');

	var _createClass3 = _interopRequireDefault(_createClass2);

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

	// Generated Wallpaper
	// click to pause / resume

	var canvas = document.createElement('canvas');
	canvas.style.width = canvas.style.height = "100%";
	var size = 100;
	canvas.width = canvas.height = size;
	document.body.appendChild(canvas);
	var ctx = canvas.getContext('2d');
	ctx.translate(-1, -1); // get rid of blurry inner edge

	var plot = {
	red: function red(i, j) {
	ctx.fillStyle = "#FF0000";
	this.draw(i, j);
	},
	black: function black(i, j) {
	ctx.fillStyle = "#000000";
	this.draw(i, j);
	},
	pink: function pink(i, j) {
	ctx.fillStyle = "#ff00a9";
	this.draw(i, j);
	},
	purp: function purp(i, j) {
	ctx.fillStyle = "#551A8B";
	this.draw(i, j);
	},
	draw: function draw(i, j) {
	ctx.fillRect(i, j, 1, 1);
	}
	};

	var drawWallpaper = function drawWallpaper(cornA, cornB, side) {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	for (var i = 1; i <= size; i += 1) {
	for (var j = 1; j <= size; j += 1) {
	var x = cornA + i * side / size;
	var y = cornB + j * side / size;
	var _c = parseInt(Math.pow(x, 2) + Math.pow(y, 2), 10);
	if (_c % 4 === 0) {
	plot.black(i, j);
	} else if (_c % 4 === 1) {
	plot.purp(i, j);
	} else if (_c % 4 === 2) {
	plot.red(i, j);
	} else {
	plot.pink(i, j);
	}
	}
	}
	};

	var Timer = (function () {
	function Timer(callback, delay) {
	(0, _classCallCheck3.default)(this, Timer);

	this.id = null;
	this.start = null;
	this.remaining = delay;
	this.callback = callback;
	this.resume();
	}

	(0, _createClass3.default)(Timer, [{
	key: 'pause',
	value: function pause() {
	this.running = false;
	clearTimeout(this.id);
	this.remaining -= new Date() - this.start;
	}
	}, {
	key: 'resume',
	value: function resume() {
	this.running = true;
	this.start = new Date();
	clearTimeout(this.id);
	this.id = setTimeout(this.callback, this.remaining);
	}
	}, {
	key: 'toggle',
	value: function toggle() {
	this.running ? this.pause() : this.resume();
	}
	}]);
	return Timer;
	})();

	var timeout = null;
	var a = 10;
	var b = 10;
	var c = 10;

	var looper = function looper() {
	timeout = new Timer(function () {
	c += 0.2;
	drawWallpaper(a, b, c);
	looper();
	}, 100);
	};

	canvas.addEventListener('click', function (event) {
	if (timeout) {
	timeout.toggle();
	}
	});

	looper();