CSSrefresh is a small, unobstructive javascript file that monitors the CSS-files included in your webpage. As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser.
When you’re coding a website, nothing can be more frustrating than having to switch from the texteditor to the browser over and over again, just for small changes to occur. With CSSrefresh installed, all the included stylesheets are automatically refreshed directly after you save them.
After playing with the settings in my experiments I found a few settings I liked and wanted to develop further. The first was snow! An added bonus I was able to work on a project just for the holidays and used much of this code in it! I looked around the web and saw a couple interesting examples of snow, but nothing that stood out to me. I used couple images and pulled them into the canvas in place of the dot (choosing one of 3 flake graphics), and learned how to apply a rotation to that graphic from somewhere online (I think stackoverflow, but now I can’t find it again to link it. The physics settings are hardcoded now and the update function doesn’t check the dot y position against the top of the page, since the snow should all be moving down with the gravity, it could be moved up with it’s floating, but I just wanted it to come down on it’s own. Then to get the rotation we need to save the context state, more to the flake center, rotate it and then move back to the canvas origin, draw the image and restore context. This process sounded complicated and took a bit to get things in the right order and the whole time I was scared it would be too processor intense for a good amount of snowflakes, it seems to do just fine! interactive physics animations via javascript & canvas | snow application example: check it out!
[cc lang=”javascript”]
$(function () {
var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false;
var total_dots = 150;
var fps = 24;
canvas = $(“#canvas”)[0];
context = canvas.getContext(“2d”);
var dots = new Array();
var drag_i = -1;
var gravity = .05;
var friction = .98;
var bounce = -.96;
var wrap = true;
var float = true;
var imgs = new Array();
var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
img1.src = “snowflake_1.png”;
img2.src = “snowflake_2.png”;
img3.src = “snowflake_3.png”;
imgs[0] = img1;
imgs[1] = img2;
imgs[2] = img3;
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 : 25,
scale: Math.floor(10 + (1+50-10)*Math.random()),
vx: typeof(vx) != 'undefined' ? vx : Math.random()*3-1,
vy: typeof(vy) != 'undefined' ? vy : Math.random()*3,
//this will pick a digit 1, 2 or 3 and set it as the src value, this could also be a Math.floor(Math.random()*3)+1 to really be random
src: (dots.length % 3) + 1,
r: 0,
vr: 0
};
dots.push(this_dot);
}
draw();
$("#canvas").mousedown(function (event) {
createDot(event.pageX - this.offsetLeft-25, event.pageY - this.offsetTop-25);
});
$("#canvas").mouseup(function (event) {
drag = false;
drag_i = -1;
});
function update(){
for (var i=0; i < dots.length; i++){
if (drag_i != i){
var this_dot = dots[i];
if (float){
this_dot.vx += Math.random() - .5;
this_dot.vy += Math.random() - .5;
this_dot.vr += Math.random()*.01 - .005;
}
this_dot.vx *= friction;
this_dot.vy = this_dot.vy * friction + gravity;
this_dot.x += this_dot.vx;
this_dot.y += this_dot.vy;
this_dot.r += this_dot.vr;
if (this_dot.x > canvas.width + this_dot.radius){
this_dot.x -= canvas.width + this_dot.radius*2;
this_dot.vr = 0;
}
else if(this_dot.x < 0 - this_dot.radius){
this_dot.x += canvas.width + this_dot.radius*2;
this_dot.vr = 0;
}
if (this_dot.y > canvas.height + this_dot.radius){
this_dot.y -= canvas.height + this_dot.radius*2;
this_dot.vr = 0;
}
}
}
}
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
for (var i=0; i < dots.length; i++){
var src = img1;
if (dots[i].src == 1){ }
else if (dots[i].src == 2){ src = img2; }
else { src = img3; }
context.save();
context.translate(dots[i].x+dots[i].scale/2, dots[i].y+dots[i].scale/2);
context.rotate(dots[i].r);
context.translate(-dots[i].x-dots[i].scale/2, -dots[i].y-dots[i].scale/2);
context.drawImage(src, dots[i].x, dots[i].y, dots[i].scale, dots[i].scale);
context.restore();
}
}
setInterval(function() {
update();
draw();
}, 1000/fps);
});
[/cc]Follow the whole Interactive Physics Animations via Javascript & Canvas series.
Microsoft has a new line of TouchMouse. They have a campaign to cooinside with it called the Art of Touch and have invited a few artists to participate and more to drive interest with free shwag! Basically that boils down to me having a [amazon_link id=”B004HYGU18″ target=”_blank” ]Microsoft Touch Mouse[/amazon_link] to give away! So go play with the app and link a comment to your art. I’ll randomly select someone for the award as a christmas present! Be sure to comment with an email address you’ll reply to.
I played with the drawing app, and while it’s not totally generative, it does add a sense of randomness to it. It’s fun in that it tried to incorporate a few different styles of artists, including one of my favorites, ErikNatzke. Here’s what Erik had to say:
Along with the custom brush that I designed for them, there are an assortment of brush styles they’ve designed to help hone in on your artistic flair that you can share, print & even compete to win some prizes. The link below will allow you to vote on the one I just made. I’m curious what other people will make.
And here’s what I came up with in a couple minutes:
Comment below with a link to your art to be entered to win a new [amazon_link id=”B004HYGU18″ target=”_blank” ]Microsoft Touch Mouse[/amazon_link] this Christmas.
I’m really enjoying giving a control panel of sorts to the end user and letting them control the physics rules of their canvas. Let’s add more motion to it by applying a jitter to the velocity of each dot. This is similar to earlier, when we first started animating by applying a random number to the coordinates, but now we’ll apply a (smaller) random number to the velocity. This will be much smoother and will give a sense of real life to the dots. Straight lines and trajectories is always theoretical and hypothetical, but to make things look more real, sometimes we have to break the clean, straight lines. This will be another checkbox to control the float. I’m really enjoying the fact that the more properties we add to our controls we get exponentially more possible configurations. Perhaps we should even give a slider to control the strength of gravity… interactive physics animations via javascript & canvas | 17.
[cc lang=”javascript”]
$(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 = 0;
var friction = .98;
var bounce = -.96;
var wrap = false;
var float = true;
I always want to give the end user (at least some) control of how they view and interact with data. Earlier we gave users control over gravity. Here let’s give them control over the canvas edges. Rather than having our dots bounce on the edges of the canvas, lets have them wrap across to the other side. Like in the asteroids game the ship can fly to the edge of the screen and see space wrap them back to the other side. We’ll set this up as a control exposed to the user much like gravity. Let’s call it wrap and use a boolean value to store the setting. We’ll need to add another block of conditionals for this case where we have the set already with the bouncing. I took some care with the values so that the dots leave the canvas before they make the hyper-jump to the other side. Otherwise you’d see the magic. interactive physics animations via javascript & canvas | 16.
[cc lang=”javascript”]
$(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 = 0;
var friction = .98;
var bounce = -.96;
var wrap = true;
Earlier we worked on making all the dots draggable, but what’s better than simply dragging dots? Let’s set up a way to throw the dots! Now as we drag it we record the positions and use that to calculate a new velocity. Then when a dot is dropped, it will have a trajectory to follow that matches the path and speed it was dragged. This iteration only looks at the current frame and the previous frame, but a better solution may be to average the previous few positions to get a better feel. I’ve noticed that (with a mouse especially) people tend to stop dragging just before they mouseup, so this kills any velocity the dot receives during the drag. Enjoy throwing the dots around the canvas! interactive physics animations via javascript & canvas | 15.
[cc lang=”javascript”]
$(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;
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.
[cc lang=”javascript”]
$(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;
Now that we have gravity we’re really seeing some natural looking movement. Yet, it’s still missing something. In the real world we have friction or drag (or even air resistance) on everything. Without this friction it’s like these balls are moving in space. Even when they bounce on the walls they don’t loose any velocity, it’s just reversed. Typically, there should be a dampening effect that lessens the velocity by a fraction because it looses some speed in turning around on the wall. In this step we’re decreasing the velocity of x and y slightly every frame with a friction variable we’ve set to .98. Over time we see the velocity lessen and the dots move slower and slower until they come to a stop. e’re also updating the bounce variable from -1 to -.96, just to give a sense that changing direction lessens the velocity. interactive physics animations via javascript & canvas | 13.
[cc lang=”javascript”]
$(function () {
var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false;
var total_dots = 25;
var fps = 24;
var bounce = -.96;
var gravity = 2;
var friction = .98;
canvas = $(“#canvas”)[0];
context = canvas.getContext(“2d”);
var dots = new Array();
var drag_i = -1;
Adding gravity! Here we’ve adjusting the y velocity in every frame with the force of gravity. It’s fun to play with options and see how they are affecting the animation and the physics, so I’ve also got a checkbox that will toggle gravity to either a vlaue of 2 or 0. interactive physics animations via javascript & canvas | 12.
[cc lang=”javascript”]
$(function () {
var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false;
var total_dots = 25;
var fps = 24;
var bounce = -1;
var gravity = 2;
canvas = $(“#canvas”)[0];
context = canvas.getContext(“2d”);
var dots = new Array();
var drag_i = -1;
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.
[cc lang=”javascript”]
$(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;
