Apple and Chrome: They’re supporting vendor prefixed properties like they’re a standard part of development.
Firefox, Opera and Internet Explorer: They should have been on the ball more. Need to push their evangelism further. Teach developers that it’s not exclusively -webkit to style elements.
All the browsers: experimental suggests that it will either be discarded or implemented fully at some point. It’s both not clear what’s a real specification be experimentally supported, nor when those experimental prefixes will be dropped.
The working group: for not getting these properties to standards quickly enough. The web moves quickly, and as much as a I appreciate that the standards will not move as quickly, they’re still taking way too long.
Evangelists: We’re too eager to show off experimental effects. They’re cool, right? But it’s cost us, and we should always used vendor prefixes as a backup, not as the final thing.
Developers: We know better. We know/hope that eventually these prefixes will be dropped, but we’re propagating this problem.
You and me: I’m just as guilty as everyone else in using WebKit only prefixes.
Browsers need to:
Non-production ready browsers should support experimental prefixes, production ready releases should not. If it’s Chrome 16 – the stable version – experimental support should not be baked in. The properties should be full available without the prefix.
Drop experimental prefixes – not entirely, but after a finite amount of time. It’s unacceptable and a disservice to the developers working with your browser. You need to give timelines to dropping these things.
Work with the working groups (…Apple).
Here’s a great little script I found useful today as I was working on having dynamic effects applied to javascript via canvas.
“The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.”
Thanks to the canvas APIs I was able to get the color values of each pixel of the image and transform them applying the multiply formula, which simply is:
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.
Here’s a great read about the “one version manifesto”, which states that the web is versionless and we should only be building for the latest browsers. Originally stated by Aral:
“#oneversion #manifesto My websites will only support the latest versions of browsers. It’s the browser makers’ duty to get users to upgrade.”
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;
