Flatland quietness

In this example below you will see how to do a Flatland quietness with some HTML / CSS and Javascript

Different geometric shapes moving in a canvas. Create a new one on click.

Thumbnail
This awesome code was written by tibomahe, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tibomahe ©
  • HTML
  • CSS
  • JavaScript
    <section id="container">
  <canvas id="canvas" width="1500" height="1500"></canvas>
</section>

/*Downloaded from https://www.codeseek.co/tibomahe/flatland-quietness-XJjqjB */
    body {
  background: #fff;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
}
#container {
  position: relative;
  width: 100%;
  height: 100%;
}
#canvas {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}


/*Downloaded from https://www.codeseek.co/tibomahe/flatland-quietness-XJjqjB */
    var canvas = $("#canvas");
var context = canvas.get(0).getContext("2d");
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var container = document.getElementById('container');
var figuresDefaultQuantity = 20;
var figuresQuantityMax = 35;
var mouseAreaRad = 60;
var figures = [];

var mouseX = 0, 
    mouseY = 0;

window.addEventListener('resize', resizeCanvas, false);

function resizeCanvas(){
    context.canvas.width = window.innerWidth;
    context.canvas.height = window.innerHeight;
    canvasWidth = context.canvas.width;
    canvasHeight = context.canvas.height;
}

container.addEventListener( 'mousemove', function(e) {
    mouseX = e.x;
    mouseY = e.y;
});
container.addEventListener( 'mouseleave', function() {
    mouseX = 0;
    mouseY = 0;
});
container.addEventListener( 'mousedown', function(e) {
    var x = e.x;
    var y = e.y;

    if (figuresDefaultQuantity < figuresQuantityMax){
        figuresDefaultQuantity = figuresDefaultQuantity + 1;
        var velocityX = Math.random();
        var velocityY = Math.random();
        figures.push(new Figure(x, y, velocityX, velocityY));
    }
});

function Figure(x, y, velocityX, velocityY) {
    this.x = x;
    this.y = y;
    this.velocityX = velocityX;
    this.velocityY = velocityY;
};
function updateFigurePosition(element) {
    var that = element;
    that.x += that.velocityX;
    that.y += that.velocityY;

    if (that.x < 0) {
        that.x = 0;
        that.velocityX *= -1;
    } else if (that.x > canvasWidth) {
        that.x = canvasWidth;
        that.velocityX *= -1;
    }
    if (that.y < 0) {
        that.y = 0;
        that.velocityY *= -1;
    } else if (that.y > canvasHeight) {
        that.y = canvasHeight;
        that.velocityY *= -1;
    }
};

function init() {
    resizeCanvas();
    for (var i = 0; i < figuresDefaultQuantity; i++) {
        var x = Math.random() * canvasWidth;
        var y = Math.random() * canvasHeight;
        var velocityX = Math.random();
        var velocityY = Math.random();

        figures.push(new Figure(x, y, velocityX, velocityY));
    }
    animate();
}
init();

function animate() {
    update();
    draw();
    requestAnimationFrame(animate);
}

function update() {
    for (var i = 0; i < figuresDefaultQuantity; i++) {
        var figure = figures[i];

        var updateX = figure.velocityX;
        var updateY = figure.velocityY;
        if (figure.x >= mouseX - mouseAreaRad && figure.x <= mouseX + mouseAreaRad && figure.y >= mouseY - mouseAreaRad && figure.y <= mouseY + mouseAreaRad){
            updateX = updateX * (Math.random() < 0.5 ? -1 : 1) + (Math.random() < 0.5 ? -1 : 1);
            updateY = updateY * (Math.random() < 0.5 ? -1 : 1) + (Math.random() < 0.5 ? -1 : 1);

            updateX = (updateX < -2) ? -2 : updateX;
            updateX = (updateX > 2) ? 2 : updateX;
            updateY = (updateY < -2) ? -2 : updateY;
            updateY = (updateY > 2) ? 2 : updateY;

            figure.velocityX = updateX;
            figure.velocityY = updateY;
        }

        updateFigurePosition(figure);
    }
}

function draw() {
    context.clearRect(0, 0, canvasWidth, canvasHeight);

    for (var i = 0; i < figuresDefaultQuantity; i++) {
        var figure = figures[i];

        context.beginPath();
        if ( i == 1 || i == 4  || i == 8 || i == 9 || i == 13 || i == 15) {
            context.arc(figure.x, figure.y, 15, 0, Math.PI * 2);
            if ( i == 1  || i == 8 || i == 15) {
                context.fillStyle = "rgba(155, 155, 155, 0.3)";
                context.fill();
                continue
            }
            context.strokeStyle = "rgba(155, 155, 155, 0.3)";
            context.stroke();
            continue
        }
        context.moveTo(figure.x, figure.y);
        if ( i == 2  || i == 6 || i == 11 || i == 16 || i == 19) {
            context.lineTo(figure.x + 30, figure.y - 0);
            context.lineTo(figure.x + 15, figure.y + 30);
        }
        else if ( i == 3  || i == 7 || i == 10 || i == 17 || i == 18) {
            context.lineTo(figure.x + 0, figure.y - 30);
            context.lineTo(figure.x - 30, figure.y - 15);
        }
        else {
            context.lineTo(figure.x + 30, figure.y + 0);
            context.lineTo(figure.x + 15, figure.y - 30);
        }
        context.closePath();

        if ( i == 1  || i == 5 || i == 10 || i == 15 || i == 20) {
            context.fillStyle = "rgba(155, 155, 155, 0.3)";
            context.fill();
            context.strokeStyle = "rgba(155, 155, 155, 0.3)";
            context.stroke();
            continue
        }
        context.strokeStyle = "#222";
        context.lineWidth = 0.5;
        context.stroke();
    }
}


Comments