1
\$\begingroup\$

I've got 3 HTML <canvas> elements, which are populated using JavaScript.

Below is the JavaScript for each canvas element. I have also attached gifs of what each canvas output is.

I am trying to shorten or refactor each canvas script, if anyone has any ideas?

Canvas 1:

Gif:

1

var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d'),

particles = {},
particleIndex = 0;
particleNum = 1;

// Context properties
c.fillStyle = "white";
c.fillRect(0,0,canvas.width,canvas.height);

// Particle (Square) properties
function Particle(){
    this.x = canvas.width / 2;
    this.y = canvas.height / 2;
    this.vx = Math.random() * 10 - 5;
    this.vy = Math.random() * 10 - 5; 
    this.gravity = 0.2;
    particleIndex++;
    particles[particleIndex] = this;
    this.id = particleIndex;
    this.life = 0;
    this.maxLife = Math.random() * 100 + 100;
    this.color = "hsla("+parseInt(Math.random()*360, 10)+",100%,50%, 0.2)";
}

// Drawing the particle
Particle.prototype.draw = function(){
    this.x += this.vx;
    this.y += this.vy;

    if (Math.random() < 0.00001){
        this.vx = Math.random() * 10 - 5;
        this.vy = Math.random() * 10 - 5;
    }

    //Uncomment line below for gravity effect
    //this.vy += this.gravity;

    // Deletes particle if greater than or equal to its max life
    this.life++;
    if (this.life >= this.maxLife){
        delete particles[this.id];
    }
    c.fillStyle = this.color;
    c.fillRect(this.x, this.y, 10, 10);
    };


// Animation Interval 
setInterval(function(){
    c.globalCompositeOperation = "source-over";
    c.fillStyle = "rgba(0,0,0,0.05)";
    c.fillRect(0,0,canvas.width,canvas.height);

    c.globalCompositeOperation = "lighter";
    for (var i = 0; i < particleNum; i++){
    new Particle();
    }

    for (var i in particles){
        particles[i].draw();
    }
}, 15);

Canvas 2:

Gif:

2

var canvas2, c2;
var canvasDisplayed = false;
var intervalAnimation = null;
var centerX, centerY, vx, vy, gravity;
var radius = 20;

// Shows The Canvas
function showCanvas () {
    canvasDisplayed = true;
    canvas2 = document.getElementById('canvas2');
    c2 = canvas2.getContext('2d');

    c2.fillStyle = "black";
    c2.fillRect(0,0,canvas.width,canvas.height);
}

// Reset Ball To Original Position
function resetSquare () {
    centerX = 20;
    centerY = canvas.height / 1.4;
    vx = 6, 
    vy = -12;
    gravity = 0.6;
}

// Runs Animation
function animation () {
resetSquare()
animationEnd()
    intervalAnimation = setInterval(function(){
        c2.fillStyle = "black";
        c2.fillRect(0, 0, canvas.width, canvas.height)
        centerX += vx;
        centerY += vy;

        if (centerY > 200){
        vy *= -0.5;
        vx *= 0.5;
        centerY = 200;
        }

        vy += gravity;

        c2.beginPath();
        c2.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        c2.fillStyle = "orange";
        c2.fill();
        c2.stroke();
    }, 30);
}

// Ends Animation
function animationEnd () {
    c2.fillStyle = "black";
    c2.fillRect(0, 0, canvas.width, canvas.height)
    clearInterval(intervalAnimation)
}

Canvas 3:

Gif:

3

// Global Variables & Canvas Properties
var width = canvas.width
var height = canvas.height

var canvas = document.getElementById('canvas3');
var c3 = canvas.getContext('2d');

c3.fillStyle = "lightblue";
c3.fillRect(0,0,canvas.width,canvas.height);

var paint = [];
var totalPaints = width/300;
var size = 30;

// Initialises Animation
function init(){
    for (var i = 0; i < totalPaints; i++){
        addPaint();
    }
    setInterval( update, 40 );
}

// Draws Drip & Arc
function drawPaint(x,y,size, colour) {
    c3.beginPath();
    c3.arc(x, y, size ,0 , Math.PI*2, true);
    c3.closePath();
    c3.fillStyle=colour;
    c3.fill();
}

// Updates Drip
function update(){
    for (var i = 0; i < paint.length; i++){
        paint[i].y = paint[i].y + paint[i].v;
        if (paint[i].y > height + 60){
            paint.splice(i,1);
            addPaint();
        }
        drawPaint(paint[i].x, paint[i].y, paint[i].s, paint[i].c);
    }
}

// Adds Paint
function addPaint(){
    var i = 50;
    while(i > 0){
        size = Math.random() * size + 5;
        x = Math.random() * width;

        found = false;

        // Dont Allow Drips Ontop Of Each Other
        for (var j = 0; j < paint.length; j++){
            if ((x + size > paint[j].x) && (x - size < paint[j].x + paint[j].s)){
                found = true;
                break;
            }

            if ((x - size < paint[j].x) && (x + size > paint[j].x - paint[j].s)){
                found = true;
                break;
            }
        }

        if (found == false){
            paint.push({s:size,
                x:x,
                y:-60,
                v:(Math.random() * 2) + 2,
                c:'#' + (Math.random() * 0x313131 + 0xaaaaaa | 0).toString(16)});
            i--;
            return;
        }
    }
}

init();
\$\endgroup\$
  • 2
    \$\begingroup\$ What do yo mean shorten. Use a minifier. If it is code complexity there is only a small amount of stuff that can be changed. BTW you should be using requestAnimationFrame when ever you do any sort of animation. \$\endgroup\$ – Blindman67 Nov 9 '16 at 4:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.