Interactive Physics Animations Javascript Canvas 14

Here is an update to allow the end user to create more dots. A good way to do that is to just let users click on the canvas, and if they click a dot, drag it, if they don’t click a dot, create a new dot at the point of click. I moved the dot creation into it’s own function and we can use that as our constructor for every dot. It has settings we can send in, but the defaults are set to pick random values. This could also be used to create a particle emitter of sorts, but for now it’s just creating a dot on clicking the blank canvas. interactive physics animations via javascript & canvas | 14.

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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
$(function () {
    var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false;
    var total_dots = 10;
    var fps = 24;
   
    canvas = $("#canvas")[0];
    context = canvas.getContext("2d");
    var dots = new Array();
    var drag_i = -1;
    var gravity = 2;
    var friction = .98;
    var bounce = -.96;
   
    var this_dot = {};
    for (var i=0; i < total_dots; i++){
        createDot();
    }
    function createDot(x, y, r, vx, vy){
        var this_dot = {
            x:      typeof(x) != 'undefined' ? x : Math.random()*canvas.width,
            y:      typeof(y) != 'undefined' ? y : Math.random()*canvas.height,
            radius: typeof(r) != 'undefined' ? r : Math.random()*20+10,
            vx:     typeof(vx) != 'undefined' ? vx : Math.random()*30-10,
            vy:     typeof(vy) != 'undefined' ? vy : Math.random()*30-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;
            }
        }
        //none clicked
        if (!drag) {
            createDot(event.pageX - this.offsetLeft, event.pageY - this.offsetTop);
        }
    });
 
    $("#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.vx *= friction;
                this_dot.vy = this_dot.vy * friction + gravity;
                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);  

    $("#gravity").click(function(){
        if($("#gravity").is(':checked')){
            gravity = 2;   
        }
        else{
            gravity = 0;
        }
    });
   
});

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

This entry was posted in interactive javascript canvas, tutorial and tagged , , , , , , , , , , , , , , , , , , , . Bookmark the permalink. Both comments and trackbacks are currently closed.
  • Recent Posts

    Screenshot-2013-11-27-14.20.16

    Add Links to Twitter Mentions, Hashtags, and URLs with PHP

    This gem helped me out today as I was working with the Twitter API to create a custom WordPress widget. I was about to do exactly this and was not looking forward to it, luckily I did a quick search and found this webtips post. Thanks! If you’re using the Twitter v1.1 API to fetch […]

    regex101.com

    Online regex tester and debugger: JavaScript, Python, PHP, and PCRE

    Stumbled on a great regex tool today. An explanation of your regex will be automatically generated as you type. Detailed match information will be displayed here automatically. via Online regex tester and debugger: JavaScript, Python, PHP, and PCRE. Tweet

    CSS Dig

    A chrome extension for analyzing your CSS. Check your properties (and reuse – are they following DRY principles?) and your CSS selectors (and their specificity). Analyze your CSS in a new way. Consolidate, refactor, and gawk at the 37 shades of blue your site somehow ended up with. Take a look at all your CSS […]

    How to use solid web principles to justify what you were going to do anyway | A List, A Fart

    Imitation may be the sincerest form of flattery, but mockery must be the biggest sign of mainstream… And this is a good thing, alistapart.com, the de facto web publication for web professionals, now has a parody site: alistafart.com. Tongue in cheek, and sarcastic, but sadly, sometimes not very far from the truth… In this era of […]

    Add Shortcode with Add Media Button

    This code snippet really helped me today and since the post doesn’t have commenting enabled, I wanted to say thanks here! Working on building a WordPress plugin that generates shortcodes and wanted an interface for the user to create their own with a wizard of sorts, so using a media button, shortcode and thickbox all […]

    A Developer’s Guide to Contributing to WordPress Core

    Here’s a great post from the team at delicious brains, the same team who brings us WP Migrate DB Pro for all our wordpress database migration needs (and do a bang up job I might add). They discuss all the in and out of working with trac and the ticketing system as well as setting […]

css.php