Sneak peak at HTML5

Sweet. :-)

wish ie had html5 support

I wish IE had a lot of things :P HTML5 support, CSS3 support, I could go on for days...

Maybe if they... you know... ever UPDATED their browser they'd have some of these things. Instead they push out a release, only make updates for security issues and then push out another major release YEARS later. Meanwhile every other browser passes them by.

At their current rate IE will NEVER catch up to the rest of the industry. Instead they're just holding the entire industry back from adopting new tech...

bye bye flash videos

HTML 5 for videos is gonna be so much easier.

very interesting.

It will still be years i think.
The ones i have seen including this one works, but only barely

Oh wow you mean videos will work on an iPhone :P

you dont need html5 for video to work on an iphone.... html5 is years off.

Sneak peak?

I thought you guys were writers?

I put that down to it being 4AM, me talking to a friend on vent about Prespic Peaks and my lacking ability to proof reed [sic] webmaster forum titles!

For an accurate representation of my writing ability, please head over to the Adult Copywriters Blog where I share some interesting and somewhat existential views on various adult-orientated wordsmithing.

Well, I have experimented with HTML5.

Conclusion :

- from a programmers point of view, no advantage achieved except not having to
buy CS4.

- But then again you don't have to buy it now since there are very good programs
for only $50 that do all that CS4 does. There are even free programs that work well.

- The code needed to really maximize the features of HTML5 is almost identical to
Action Script!!!!!! .....so WTF is "easier" for the "non-programmer"?
FUCKKKKKKKKKKKKKKKing Nothing!!!!!!!!!!!!!!!!!!!

- I'll still have to do your HTML5 scripting instead of your flash scripting. So fucking fail!

- they make it sound like it's so smooth and easy but look at the script on that page
that actually makes the player do what you want. HTML5 should be named JS5!!!
As in javascript 5, since the power of it is in the commands that are embedded in the
javascript :


<script type="text/javascript">

var video;
var copy;
var copycanvas;
var draw;

var TILE_WIDTH = 32;
var TILE_HEIGHT = 24;
var TILE_CENTER_WIDTH = 16;
var TILE_CENTER_HEIGHT = 12;
var SOURCERECT = {x:0, y:0, width:0, height:0};
var PAINTRECT = {x:0, y:0, width:1000, height:600};

function init(){
video = document.getElementById('sourcevid');
copycanvas = document.getElementById('sourcecopy');
copy = copycanvas.getContext('2d');
var outputcanvas = document.getElementById('output');
draw = outputcanvas.getContext('2d');
setInterval("processFrame()", 33);
}
function createTiles(){
var offsetX = TILE_CENTER_WIDTH+(PAINTRECT.width-SOURCERECT.width)/2;
var offsetY = TILE_CENTER_HEIGHT+(PAINTRECT.height-SOURCERECT.height)/2;
var y=0;
while(y < SOURCERECT.height){
var x=0;
while(x < SOURCERECT.width){
var tile = new Tile();
tile.videoX = x;
tile.videoY = y;
tile.originX = offsetX+x;
tile.originY = offsetY+y;
tile.currentX = tile.originX;
tile.currentY = tile.originY;
tiles.push(tile);
x+=TILE_WIDTH;
}
y+=TILE_HEIGHT;
}
}

var RAD = Math.PI/180;
var randomJump = false;
var tiles = [];
var debug = false;
function processFrame(){
if(!isNaN(video.duration)){
if(SOURCERECT.width == 0){
SOURCERECT = {x:0,y:0,width:video.videoWidth,height:video.video Height};
createTiles();
}
//this is to keep my sanity while developing
if(randomJump){
randomJump = false;
video.currentTime = Math.random()*video.duration;
}
//loop
if(video.currentTime == video.duration){
video.currentTime = 0;
}
}
var debugStr = "";
//copy tiles
copy.drawImage(video, 0, 0);
draw.clearRect(PAINTRECT.x, PAINTRECT.y,PAINTRECT.width,PAINTRECT.height);

for(var i=0; i<tiles.length; i++){
var tile = tiles[i];
if(tile.force > 0.0001){
//expand
tile.moveX *= tile.force;
tile.moveY *= tile.force;
tile.moveRotation *= tile.force;
tile.currentX += tile.moveX;
tile.currentY += tile.moveY;
tile.rotation += tile.moveRotation;
tile.rotation %= 360;
tile.force *= 0.9;
if(tile.currentX <= 0 || tile.currentX >= PAINTRECT.width){
tile.moveX *= -1;
}
if(tile.currentY <= 0 || tile.currentY >= PAINTRECT.height){
tile.moveY *= -1;
}
}else if(tile.rotation != 0 || tile.currentX != tile.originX || tile.currentY != tile.originY){
//contract
var diffx = (tile.originX-tile.currentX)*0.2;
var diffy = (tile.originY-tile.currentY)*0.2;
var diffRot = (0-tile.rotation)*0.2;

if(Math.abs(diffx) < 0.5){
tile.currentX = tile.originX;
}else{
tile.currentX += diffx;
}
if(Math.abs(diffy) < 0.5){
tile.currentY = tile.originY;
}else{
tile.currentY += diffy;
}
if(Math.abs(diffRot) < 0.5){
tile.rotation = 0;
}else{
tile.rotation += diffRot;
}
}else{
tile.force = 0;
}
draw.save();
draw.translate(tile.currentX, tile.currentY);
draw.rotate(tile.rotation*RAD);
draw.drawImage(copycanvas, tile.videoX, tile.videoY, TILE_WIDTH, TILE_HEIGHT, -TILE_CENTER_WIDTH, -TILE_CENTER_HEIGHT, TILE_WIDTH, TILE_HEIGHT);
draw.restore();
}
if(debug){
debug = false;
document.getElementById('trace').innerHTML = debugStr;
}
}

function explode(x, y){
for(var i=0; i<tiles.length; i++){
var tile = tiles[i];

var xdiff = tile.currentX-x;
var ydiff = tile.currentY-y;
var dist = Math.sqrt(xdiff*xdiff + ydiff*ydiff);

var randRange = 220+(Math.random()*30);
var range = randRange-dist;
var force = 3*(range/randRange);
if(force > tile.force){
tile.force = force;
var radians = Math.atan2(ydiff, xdiff);
tile.moveX = Math.cos(radians);
tile.moveY = Math.sin(radians);
tile.moveRotation = 0.5-Math.random();
}
}
tiles.sort(zindexSort);
processFrame();
}
function zindexSort(a, b){
return (a.force-b.force);
}

function dropBomb(evt, obj){
var posx = 0;
var posy = 0;
var e = evt || window.event;
if (e.pageX || e.pageY){
posx = e.pageX;
posy = e.pageY;
}else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
var canvasX = posx-obj.offsetLeft;
var canvasY = posy-obj.offsetTop;
explode(canvasX, canvasY);
}

function Tile(){
this.originX = 0;
this.originY = 0;
this.currentX = 0;
this.currentY = 0;
this.rotation = 0;
this.force = 0;
this.z = 0;
this.moveX= 0;
this.moveY= 0;
this.moveRotation = 0;

this.videoX = 0;
this.videoY = 0;
}


/*
getPixel
return pixel object {r,g,b,a}
*/
function getPixel(imageData, x, y){
var data = imageData.data;
var pos = (x + y * imageData.width) * 4;
return {r:data[pos], g:data[pos+1], b:data[pos+2], a:data[pos+3]}
}
/*
setPixel
set pixel object {r,g,b,a}
*/
function setPixel(imageData, x, y, pixel){
var data = imageData.data;
var pos = (x + y * imageData.width) * 4;
data[pos] = pixel.r;
data[pos+1] = pixel.g;
data[pos+2] = pixel.b;
data[pos+3] = pixel.a;
}
/*
copyPixel
faster then using getPixel/setPixel combo
*/
function copyPixel(sImageData, sx, sy, dImageData, dx, dy){
var spos = (sx + sy * sImageData.width) * 4;
var dpos = (dx + dy * dImageData.width) * 4;
dImageData.data[dpos] = sImageData.data[spos]; //R
dImageData.data[dpos+1] = sImageData.data[spos+1]; //G
dImageData.data[dpos+2] = sImageData.data[spos+2]; //B
dImageData.data[dpos+3] = sImageData.data[spos+3]; //A
}
</script>


That's less code than I put in my flv players, but what does that do for you who
wants an easy interface to plug in your video? Nothing.

And you look at it and say "but I only have to add this code".
And I say you only need to add embed code for a flash video!

But, oh shit! You = "I'm actually in business and need something I can expand on and be
unique and competitive with, so just embedding some generic thing is not working".

So you are "back to square one" but with a new name...."HTML5".


Just pisses me off because I went into it thinking it might be faster than a browser
using the flash engine but it wasn't. It was no where even close to being as fast
as flash in my test. Hey; let me know if you found out different. Be glad to here it and
see how you did it.


All Hail to HTML5 for being a valid way to do things differently.
But All Fail to HTML5 for replacing anything that I needed.

This motherfucker failed hard on animation.


Code = Rotate image. LOLLOLOLOLOLOLOLOLOLOLOLOLOLOLOLOL!

Good luck to noobs on that one.

cool effect