Just a simple canvas animation

Question

Just a simple canvas animation

My canvas animation consists of two rectangles moving in different directions, but I believe it can be simplified further.

http://jsfiddle.net/tmyie/R5wx8/6/

var canvas = document.getElementById('canvas'),
    c = canvas.getContext('2d'),
    x = 10,
    y = 15,

    a = 20,
    b = 50;

function move() {
    c.clearRect(0, 0, 500, 300);

    c.fillRect(0, y, 5, 5),
    c.fillRect(b, 5, 15, 15);


    x++;
    y++;
    b++

    if (y > canvas.height || x > canvas.width) {
        y = 0;
        x = 0;
    }
}

setInterval(move, 100);

For instance, what if I want to add three more shapes? Currently, I would need to create additional variables for each coordinate:

    x++;
    y++;
    b++

Is there a way to transform each rectangle into its own object?

javascript canvas

Answer 1

Answer №1

If you want to convert them into objects, here's an example:

function Box(x, y, w, h, dX, dY, color) {

    var instance = this;

    this.x = x;
    this.y = y;
    this.width = w;
    this.height = h;

    this.deltaX = dX || 0;       
    this.deltaY = dY || 0;
    this.color = color || '#000';  
    
    this.update = function(context) {
        instance.x += instance.deltaX;
        instance.y += instance.deltaY;
        
        context.fillStyle = instance.color;
        context.fillRect(instance.x, instance.y, instance.width, instance.height);
    }    
}

The dX and dY represent the amount by which the box should move with each update. By setting these values, you can control the movement of the object.

Using deltas allows for easy implementation of effects like bouncing (as demonstrated in the given link), acceleration, variable speed, directional movements using trigonometric functions, and more.

You can choose to use fixed values instead, but utilizing deltas provides long-term advantages (reference: this method was commonly used in classic games like Pong).

Check out the online demo

Once the object is defined, you can create multiple instances and store them in an array:

var boxes = [
    new Box(10, 10, 100, 100, 1, -2),
    new Box(100, 1, 50, 50, 2, 1, '#f00'),
    ...
]

Simply iterate through the array to update each object:

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

    for(var j = 0, b; b = boxes[j]; j++) {
        /// add conditions as needed
        b.update(context);
    }
    requestAnimationFrame(animate);
}

requestAnimationFrame(animate); /// start animation loop

Answer 2

If you want to convert them into objects, here's an example:

function Box(x, y, w, h, dX, dY, color) {

    var instance = this;

    this.x = x;
    this.y = y;
    this.width = w;
    this.height = h;

    this.deltaX = dX || 0;       
    this.deltaY = dY || 0;
    this.color = color || '#000';  
    
    this.update = function(context) {
        instance.x += instance.deltaX;
        instance.y += instance.deltaY;
        
        context.fillStyle = instance.color;
        context.fillRect(instance.x, instance.y, instance.width, instance.height);
    }    
}

The dX and dY represent the amount by which the box should move with each update. By setting these values, you can control the movement of the object.

Using deltas allows for easy implementation of effects like bouncing (as demonstrated in the given link), acceleration, variable speed, directional movements using trigonometric functions, and more.

You can choose to use fixed values instead, but utilizing deltas provides long-term advantages (reference: this method was commonly used in classic games like Pong).

Check out the online demo

Once the object is defined, you can create multiple instances and store them in an array:

var boxes = [
    new Box(10, 10, 100, 100, 1, -2),
    new Box(100, 1, 50, 50, 2, 1, '#f00'),
    ...
]

Simply iterate through the array to update each object:

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

    for(var j = 0, b; b = boxes[j]; j++) {
        /// add conditions as needed
        b.update(context);
    }
    requestAnimationFrame(animate);
}

requestAnimationFrame(animate); /// start animation loop

Answer 3

Answer №2

Here is a more simplified approach, although I would suggest following Ken's method for long-term benefits. In this version, the rectangles are still represented as property bags without any inherent behavior.

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    rects = [{x:0, y:15, w:5, h:5, vx:0, vy:1},
             {x:50, y:5, w:15, h:15, vx:1, vy:0}];

function moveRectangles() {
    ctx.clearRect(0, 0, 500, 300);

    for (var i=0; i < rects.length; i++) {
        var rect = rects[i];
        ctx.fillRect(rect.x, rect.y, rect.w, rect.h),
        rect.x += rect.vx;
        rect.y += rect.vy;
    }
}

setInterval(moveRectangles, 100);

Answer 4

Here is a more simplified approach, although I would suggest following Ken's method for long-term benefits. In this version, the rectangles are still represented as property bags without any inherent behavior.

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    rects = [{x:0, y:15, w:5, h:5, vx:0, vy:1},
             {x:50, y:5, w:15, h:15, vx:1, vy:0}];

function moveRectangles() {
    ctx.clearRect(0, 0, 500, 300);

    for (var i=0; i < rects.length; i++) {
        var rect = rects[i];
        ctx.fillRect(rect.x, rect.y, rect.w, rect.h),
        rect.x += rect.vx;
        rect.y += rect.vy;
    }
}

setInterval(moveRectangles, 100);

Just a simple canvas animation

Answer №1

Check out the online demo

Answer №2

Similar questions

Unable to retrieve a particular file from S3 while utilizing Strongloop

The relevance of this concept in the classroom setting and within the setTimeout function is integral to

Vue 3's "<Component :is="">" feature magically transforms camelCase into lowercase

Are there any instances where CSS is overlooking certain HTML elements?

Monitoring the loading progress of multiple files using Three JS

Node.js Friendship NetworkIncorporating Friendships in Node

Tips for transferring data between iframes on separate pages

`Incompatibility with Internet Explorer causes AJAX loader GIF to fail when using asynchronous POST requests`

What is the best way to retrieve the name of an element or component using JavaScript

Iframe not displaying Base64 encoded PDF in Chrome App

Reposition the checked box to the top of the list

Utilizing Javascript to Open a New Tab from Drupal

Error in React+Redux: Trying to access the "address" property of a null value is not permitted

The Recharts Line chart fails to display newly added data points when data is updated

Display the current count of selected radio buttons in real-time

Hide HTML div on click

Validating Password Consistency using Javascript

If there are multiple Monaco diff editors present on a single page, only the first instance will display the diff

``I am experiencing difficulties with utilizing a personalized color scheme in React JS with Material

There is no need for updates as git is already current for some mysterious reason