Interactive Physics Animations Javascript Canvas 11

Well, the last iteration was fun, but the animation went so quick. Now we’re going to do something to contain these dots in our canvas. Let’s have them bounce off the edges of the canvas. We’ll multiply the velocity by a bounce variable. This will reverse the direction the dot is going. We’ll have a series of conditional statements that will check a dots coordinates against the canvas width and height, factoring in it’s own radius so it the edge of the circle kisses the edge of the canvas rather than letting the center of the circle be what bounces on the walls. I hope it’s not too much for one iteration, I know I started with the premise of babysteps, but I’m getting anxious. interactive physics animations via javascript & canvas | 11.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
$(function () {
    var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false;
    var total_dots = 25;
    var fps = 24;
    var bounce = -1;
       
    canvas = $("#canvas")[0];
    context = canvas.getContext("2d");
    var dots = new Array();
    var drag_i = -1;
   
    var this_dot = {};
    for (var i=0; i < total_dots; i++){
        var this_dot = {
            x: Math.random()*canvas.width,
            y: Math.random()*canvas.height,
            vx: Math.random()*30-10,
            vy: Math.random()*30-10,
            width:canvas.width,
            height: canvas.height,
            radius:Math.random()*20+10
        };
        dots.push(this_dot);
    }
   
   
    draw();
 
    $("#canvas").mousedown(function (event) {
        var dx, dy, dist;
        for (var i=0; i < dots.length; i++){
            dx = event.pageX - this.offsetLeft - dots[i].x;
            dy = event.pageY - this.offsetTop - dots[i].y;
            dist = Math.sqrt(dx * dx + dy * dy);
            if(dist < radius) {
                drag = true;
                drag_i = i
                clickX = dx;
                clickY = dy;
                continue;
            }
        }
    });
 
    $("#canvas").mouseup(function (event) {
        drag = false;
        drag_i = -1;
    });
 
    $("#canvas").mousemove(function (event) {
        if(drag) {
            dots[drag_i].x = event.pageX - this.offsetLeft - clickX;
            dots[drag_i].y = event.pageY - this.offsetTop - clickY;
            draw();
        }
    });
 
    function update(){
        for (var i=0; i < dots.length; i++){
            if (drag_i != i){
                var this_dot = dots[i];
                this_dot.x += this_dot.vx;
                this_dot.y += this_dot.vy;
                if (this_dot.x > canvas.width - this_dot.radius){
                    this_dot.x = canvas.width - this_dot.radius;
                    this_dot.vx = this_dot.vx * bounce;
                }
                else if(this_dot.x < 0 + this_dot.radius){
                    this_dot.x = this_dot.radius;
                    this_dot.vx = this_dot.vx * bounce;
                }
                if (this_dot.y > canvas.height - this_dot.radius){
                    this_dot.y = canvas.height - this_dot.radius;
                    this_dot.vy = this_dot.vy * bounce;
                }
                else if(this_dot.y < 0 + this_dot.radius){
                    this_dot.y = this_dot.radius;
                    this_dot.vy = this_dot.vy * bounce;
                }
            }
        }
    }
    function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        for (var i=0; i < dots.length; i++){
            context.beginPath();
            context.arc(dots[i].x, dots[i].y, dots[i].radius, 0, Math.PI * 2, false);
            context.fill();
            context.closePath();
        }
    }
   
    setInterval(function() {
        update();
        draw();
    }, 1000/fps);
});

Follow the whole Interactive Physics Animations via Javascript & Canvas series.

This entry was posted in interactive javascript canvas, tutorial and tagged , , , , , , , , , , , , , , , , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

One Comment

  1. Zumzza
    Posted March 25, 2012 at 10:52 pm | Permalink

    Thanks for the lessons :)
    I have a question.
    How to put a picture a soccer ball instead of a circle drawn ?

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • Recent Posts

    WCATL-Speaker

    Custom Post Types or Choose Your Own Adventure – WordCamp Atlanta 2014

    I’ve been fortunate enough to be able to present at WordCamp Atlanta 2014. That makes the 3rd year in a row I’ve been able to contribute to WordCamp Atlanta! Here are my slides. I’ll be posting a full blown post of my presentation as soon as I can get it all down. Plus I hear […]

    Screenshot 2014-03-17 08.12.14

    What screens want

    Great read if you haven’t yet read it yet: Frank Chimero : What screens want : http://frankchimero.com/what-screens-want/ web and interaction design are just as much children of filmmaking as they are of graphic design. Maybe even more so. After all, we both work on screens, and manage time, movement, and most importantly, change. So what […]

    bed-bug-lifecycle-stages

    Before You Report that Bug, Use this Pre-Contact, Self-Diagnosis Routine

    Wisdom for bug reporting from Newfangled There are a few things a developer usually needs to know in order to diagnose a bug, and these are the things we’re likely to come back and ask you about if you haven’t already provided them. So, to ensure we can help you as quickly as possible, here’s […]

    deathtozach-06

    In dependence – Not dead

    Great summary and call to arms to write our own content in our own ways on our own sites. Call it what you like but ‘blogging’ is somewhat waning, in the social webs. Since as easy it is to create your own site and express your own voice, we’re flocking to the ‘services’ that will […]

    Screenshot 2014-03-17 08.50.27

    I ain’t ‘fraida no maths

    I’d heard of the ‘coding maths’ series, but hadn’t watched it yet. I should have, it’s great! Keith Peters (one of the people who first got me into scripting) has a great series about the math behind coding and as always he has a way of making complex things simple to me! Learn all you […]

    Screenshot 2014-03-17 08.30.13

    Codecademy & English Computing Curriculum

    Today, Codecademy is really pleased to announce our partnership with Computing at School (CAS), the leading authority on the new computing curriculum in England. England is the first country to mandate programing in schools. Starting in September 2014, students aged between 5-16 will learn HTML, CSS, Python and JavaScript. CAS were largely responsible for designing […]

css.php