Neutrons-loop.markdown

Neutrons loop

A loop version of my Neutrons experiment (http://ayamflow.fr/labs/canvas/Neutrons/) made for the awwward contest

A Pen by ayamflow on CodePen.

License.

script.js

/*
  Interactive version here
  http://ayamflow.fr/labs/canvas/Neutrons/
*/


var Playground = function(context) {
    this.context = context;

    resize();
    this.init();
    this.animate();
};

Playground.prototype = {
    init: function() {
        // Variables
        this.color = 0;
        this.clearAlpha = 0.05;
        this.colorIncrement = 3;
        this.mouse = {
            x: screenWidth >> 1,
            y: screenHeight >> 1,
            xSpeed: 0.03,
            ySpeed: 0.07,
            xTheta: 0,
            yTheta: 0
        };
        this.brushIncrement = 0.03;
        this.angleX = 0.03;
        this.angleY = 0.07;
    },

    updateBrushSize: function() {
        this.brushIncrement += 0.03;
        this.brushSize = 30 + 10 * Math.cos(this.brushIncrement * 3) * Math.sin(this.brushIncrement * 0.2); // Based on equations for organic motions by Soulwire !
    },

    drawCircle: function(x, y, radius) {
        radius = Math.max(0, radius);
        this.context.beginPath();
        this.context.arc(x, y, radius, 0, 2 * Math.PI);
        this.context.fill();
    },

    centerSymmetry: function(angle) {
      this.context.save();
      this.context.translate(screenWidth / 2, screenHeight / 2); // Go to center of screen for better rotate
      this.context.rotate(angle);
      this.context.drawImage(canvas, - screenWidth / 2, - screenHeight / 2, screenWidth, screenHeight);
      this.context.restore();
    },

    animate: function() {
        this.context.fillStyle = "rgba(0,0,0," + this.clearAlpha + ")";
        this.context.fillRect(0, 0, screenWidth, screenHeight);
        // EXPERIMENT LOGIC

        this.updateBrushSize();

        this.color += this.colorIncrement;
        if(this.color >= 360) this.color = 0;
        this.context.fillStyle = tinycolor("hsl(" + this.color + ", 50, 50)").toHexString();
        this.drawCircle(this.mouse.x, this.mouse.y, this.brushSize);
        this.angleX += 0.07;
        this.angleY += 0.03;
        this.centerSymmetry(this.angleX / this.angleY);// * Math.atan(this.mouse.y, this.mouse.x));
      
        this.mouse.xTheta += this.mouse.xSpeed;
        this.mouse.yTheta += this.mouse.ySpeed;
     
        this.mouse.x = screenWidth / 2 + Math.cos(this.mouse.xTheta * 0.5) * screenWidth / 4;
        this.mouse.y = screenHeight / 2 + Math.sin(this.mouse.yTheta * 0.5) * screenHeight / 4;

        requestAnimationFrame(this.animate.bind(this));
    }
};

var canvas = document.createElement('canvas'),
    context = canvas.getContext('2d'),
    screenWidth, screenHeight,
    playground = new Playground(context);


function resize() {
    screenWidth = window.innerWidth;
    screenHeight = window.innerHeight;
    canvas.width = screenWidth;
    canvas.height = screenHeight;
}

document.body.appendChild(canvas);
window.addEventListener('resize', resize);

style.scss

canvas {
  display: block;
}
html, body {
  background: black;
  margin: 0;
  height: 100%;
}

Behold the demo