~jagtalon/long-exposure-art

358427235cb8694f4ba2c8fe22c49d39a04f9059 — Jag Talon 1 year, 10 months ago f27f2c1
Create TinyCanvas library

I'd like to make the code more readable and succinct, so I created a class called TinyCanvas to handle the dirty work for me.
4 files changed, 66 insertions(+), 31 deletions(-)

M long-exposure-art.coffee
M long-exposure-art.js
A tiny-canvas.coffee
A tiny-canvas.js
M long-exposure-art.coffee => long-exposure-art.coffee +10 -15
@@ 1,4 1,5 @@
canvasSketch = require "canvas-sketch"
TinyCanvas = require "./tiny-canvas.js"

settings = 
	dimensions: [3600, 5400]


@@ 7,8 8,9 @@ settings =
sketch = ->

	return ({context, width, height}) ->
	
		# Functions
		draw = new TinyCanvas(context)

		# Helper Functions
		# ---------

		# drawStarTrails


@@ 16,16 18,9 @@ sketch = ->
		# 2. Create an arc with an angle theta.
		# 3. Rotate the arc to a random angle (Math.random() * 2π)
		drawStarTrails = (x, y, theta) ->
			context.strokeStyle = "#dee2e6"
			context.lineCap = "round"
			context.lineWidth = Math.random() * 15

			# Rotate while drawing some partial circles
			context.rotate(Math.random() * 2 * Math.PI)
			context.beginPath()
			context.arc 0, 0, Math.hypot(x, y), 0, theta
			context.stroke()

			draw.circle(0, 0, Math.hypot(x, y), 0, theta)
			draw.stroke("#DEE2E6", Math.random() * 15, "round")
			draw.rotate(Math.random() * 2 * Math.PI)

		# Drawing
		# -------


@@ 35,16 30,16 @@ sketch = ->
		context.fillRect 0, 0, width, height

		# Translate to the center of the canvas.
		context.translate width/2, height/2
		context.translate width * .6, height * 0.8

		# Create stars
		# We generate random x-y points multiple times and assign them
		# to an array so that we can use them later.
		stars = ([Math.random() * (width/2), Math.random() * (height/2)] for n in [1..400])
		stars = ([Math.random() * width, Math.random() * height] for n in [1..1000])
		
		# Set an angle that will be used everywhere.
		# This can be any arbitrary angle.
		theta = Math.PI/3
		theta = Math.PI/4

		# Draw arcs for each star we generated previously.
		drawStarTrails star[0], star[1], theta for star in stars

M long-exposure-art.js => long-exposure-art.js +13 -16
@@ 1,9 1,11 @@
// Generated by CoffeeScript 2.5.1
(function() {
  var canvasSketch, settings, sketch;
  var TinyCanvas, canvasSketch, settings, sketch;

  canvasSketch = require("canvas-sketch");

  TinyCanvas = require("./tiny-canvas.js");

  settings = {
    dimensions: [3600, 5400],
    suffix: "12x18"


@@ 11,9 13,9 @@

  sketch = function() {
    return function({context, width, height}) {
      var drawStarTrails, i, len, n, results, star, stars, theta;
      
      // Functions
      var draw, drawStarTrails, i, len, n, results, star, stars, theta;
      draw = new TinyCanvas(context);
      // Helper Functions
      // ---------

      // drawStarTrails


@@ 21,14 23,9 @@
      // 2. Create an arc with an angle theta.
      // 3. Rotate the arc to a random angle (Math.random() * 2π)
      drawStarTrails = function(x, y, theta) {
        context.strokeStyle = "#dee2e6";
        context.lineCap = "round";
        context.lineWidth = Math.random() * 15;
        // Rotate while drawing some partial circles
        context.rotate(Math.random() * 2 * Math.PI);
        context.beginPath();
        context.arc(0, 0, Math.hypot(x, y), 0, theta);
        return context.stroke();
        draw.circle(0, 0, Math.hypot(x, y), 0, theta);
        draw.stroke("#DEE2E6", Math.random() * 15, "round");
        return draw.rotate(Math.random() * 2 * Math.PI);
      };
      // Drawing
      // -------


@@ 37,22 34,22 @@
      context.fillStyle = "#212529";
      context.fillRect(0, 0, width, height);
      // Translate to the center of the canvas.
      context.translate(width / 2, height / 2);
      context.translate(width * .6, height * 0.8);
      // Create stars
      // We generate random x-y points multiple times and assign them
      // to an array so that we can use them later.
      stars = (function() {
        var i, results;
        results = [];
        for (n = i = 1; i <= 400; n = ++i) {
          results.push([Math.random() * (width / 2), Math.random() * (height / 2)]);
        for (n = i = 1; i <= 1000; n = ++i) {
          results.push([Math.random() * width, Math.random() * height]);
        }
        return results;
      })();
      
      // Set an angle that will be used everywhere.
      // This can be any arbitrary angle.
      theta = Math.PI / 3;
      theta = Math.PI / 4;
      results = [];
      for (i = 0, len = stars.length; i < len; i++) {
        star = stars[i];

A tiny-canvas.coffee => tiny-canvas.coffee +15 -0
@@ 0,0 1,15 @@
module.exports = class TinyCanvas
	constructor: (@context) ->

	circle: (x, y, radius, startAngle = 0, endAngle = Math.PI * 2) ->
		@context.beginPath()
		@context.arc x, y, radius, startAngle, endAngle

	stroke: (color = "#000000", lineWidth = 10, lineCap = "butt") ->
		@context.strokeStyle = color
		@context.lineWidth = lineWidth
		@context.lineCap = lineCap
		@context.stroke()

	rotate: (angle) ->
		@context.rotate(angle)
\ No newline at end of file

A tiny-canvas.js => tiny-canvas.js +28 -0
@@ 0,0 1,28 @@
// Generated by CoffeeScript 2.5.1
(function() {
  var TinyCanvas;

  module.exports = TinyCanvas = class TinyCanvas {
    constructor(context) {
      this.context = context;
    }

    circle(x, y, radius, startAngle = 0, endAngle = Math.PI * 2) {
      this.context.beginPath();
      return this.context.arc(x, y, radius, startAngle, endAngle);
    }

    stroke(color = "#000000", lineWidth = 10, lineCap = "butt") {
      this.context.strokeStyle = color;
      this.context.lineWidth = lineWidth;
      this.context.lineCap = lineCap;
      return this.context.stroke();
    }

    rotate(angle) {
      return this.context.rotate(angle);
    }

  };

}).call(this);