Interactive Javascript Canvas 00

I’ve played a lot with physics experiments in flash and moving more to javascript and canvas for simple things I wanted to test it out with some physics and animations. I’ve been curious to find out how the performance compares. Obviously this will depend on the browser, but the browsers that do support canvas should be able to handle some interactive physics animations.

I have this project I keep coming back to, it’s been in as2 and then in as3 and has have multiple faces. But the gist is there are a bunch of circles or balls and they float around in a specified area. There are physics “controls” exposed to the user and they can control the velocity of the balls, the gravity, air friction or drag, elasticity and they can even grab a ball and throw it across the stage (canvas). Here are a couple iterations of this: BFA Portfolio, Current Interactive POG Portfolio, Dribbble likes, Lastfm scrobbles.

I’m going to rebuild the basic functionality via javascript. I have had this on my list of things to explore for months now, in fact, ever since I saw Keith Peters go through his month long javascript exploration, he had a specific example that made me think I really needed to do it. I started and then life happened… But now I’m ready to start documenting my progress and trying to share what I’ve learned.

I’ll start with his initial example he titles JavaScript Day 27: Mouse Part II.
View my version here: interactive physics animations via javascript & canvas.

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
$(function () {
    var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false;
 
    canvas = $("#canvas")[0];
    context = canvas.getContext("2d");
    width = canvas.width;
    height = canvas.height;
    x = width / 2;
    y = height / 2;
    draw();
 
    $("#canvas").mousedown(function (event) {
        var dx, dy, dist;
        dx = event.pageX - this.offsetLeft - x;
        dy = event.pageY - this.offsetTop - y;
        dist = Math.sqrt(dx * dx + dy * dy);
        if(dist < radius) {
            drag = true;
            clickX = dx;
            clickY = dy;
        }
        else {
            drag = false;
        }
    });
 
    $("#canvas").mouseup(function (event) {
        drag = false;
    });
 
    $("#canvas").mousemove(function (event) {
        if(drag) {
            x = event.pageX - this.offsetLeft - clickX;
            y = event.pageY - this.offsetTop - clickY;
            draw();
        }
    });
 
    function draw() {
        context.clearRect(0, 0, width, height);
        context.beginPath();
        context.arc(x, y, radius, 0, Math.PI * 2, false);
        context.fill();
    }
});
This entry was posted in interactive javascript canvas, tutorial and tagged , , , , , , , , , , , , . Bookmark the permalink. Both comments and trackbacks are currently closed.
  • Recent Posts

    Screenshot 2015-08-03 08.19.16

    Every Browser is the New IE (to me) – daverupert.com

    Maybe one day the Web will be perfect and complete and I will not need to reach for polyfills. However, if that happened I think I’d stop being interested the Web because it would then be a stagnant pond and not a surfable ocean. Source: Every Browser is the New IE (to me) – daverupert.com […]

    Screenshot 2015-07-31 14.15.00

    URL Structure FTW – Pretty and Readable Permalinks

    I noticed that the clearleft.com site has very clever url structure. You can read the urls like a sentence. Like their about section is “/is” and their capabilities is ‘/does’, and their portfolio section is “/made” , so clearleft.com made code for america. Check the urls listed here and you’ll notice that they read like a […]

    promo

    What Is Code? If You Don’t Know, You Need to Read This

    Here’s a great read that may take a while but is a nice trip through programming history through the lens of one who’s been there. The world belongs to people who code. Those who don’t understand will be left behind. Source: What Is Code? If You Don’t Know, You Need to Read This

    Adactio: Journal—Instantiation

    There needs to be a cultural change in how we approach building for the web. Yes, some of the tools we choose are part of the problem, but the bigger problem is that performance still isn’t being recognised as the most important factor in how people feel about websites (and by extension, the web). This […]

    human_time_diff « WordPress Codex

    Determines the difference between two timestamps.The difference is returned in a human readable format such as “1 hour”, “5 mins”, “2 days”. Source: Function Reference/human time diff « WordPress Codex Used this little known, but nice gem today. It’s a core WordPress function that gives human relative time from any other datetime in “U” format. […]

    logo

    Cyclomatic Complexity: Logic in CSS – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts

    I recently hit upon a way of thinking that made me realise that CSS does include logic, and the fact that it’s rarely viewed as such is probably also why we end up with such poor CSS at all.I found myself explaining compound selectors to a client as being made up of the subject—the thing […]

css.php