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

Troubleshooting: Unable to preview Facebook Page plugin

JavaScript client side event that references the sender object ID in an aspx file

Tips for managing Material-ui's <Autocomplete/> component based on the option's id

Manipulate component properties using CSS hover in React with Material-UI

Adjust the vertical size of the slider in Jssor

Tips for ensuring elements within a modal receive immediate focus when opened in Angular 2

Angular 5 with Typescript encountered a failure in webpack due to the absence of the property "data" on the Response

Achieve text length that does not exceed the specified limit dynamically

I desire to activate the textbox only when the radiobtnlist value equals 1

I am looking to change the state of only the element that is being moused over in a React Hooks useState function, rather than changing the

Creating a PHP script that retrieves data from JavaScript and stores it in MySQL can be accomplished by using AJAX to send the

Utilize Vuex mutators within route navigation guards

Error: The middleware function is not recognized | Guide to Transitioning to React Redux Firebase v3

Create seamless communication between Angular application and React build

"I am trying to figure out how to set a link to an image using JavaScript. Can someone help me

React Select streamlines dropdown options for multi-selection by abbreviating names

Establishing a primary data format for a backbone collection

Express POST request body is required

Is it possible to use require() to read a .json file from a dependent library?

Deleting items from an array in ReactJS