Alternative edge detection filter
Oliver Hunt decided to share some edge detection code (uncreatively named
Demo page
This is probably my last post before christmas, so happy holidays everyone! Read more...
Oliver Hunt decided to share some edge detection code (uncreatively named edges2 by me). The result is different from the two existing actions in Pixastic and it is also a bit faster. Nice. Thanks Oliver!Demo page
This is probably my last post before christmas, so happy holidays everyone! Read more...
More Pixastic actions
A few new actions (Color Adjust, Mosaic, Pointillize and Solarize) are now available for the Pixastic library (if you didn't catch the first post about it, go here), bringing the total count to 25.
The new effects are as follows:
Color Adjust
This simply lets you add/subtract from each color channel (red, green and blue) of the image. Demo page.
Mosaic
Creates a pixellated effect. Demo page.
Pointillize
Paints the pictures with circular... points. Demo page.
Solarize
Creates a solarisation effect by inverting all colors that are above a certain treshold. Demo page.
All of these need image data access, so Firefox, Opera 9.5+ and WebKit nightly only. Got a few more coming in the not so distant future.
Read more...
The new effects are as follows:
Color Adjust
This simply lets you add/subtract from each color channel (red, green and blue) of the image. Demo page.
Mosaic
Creates a pixellated effect. Demo page.
Pointillize
Paints the pictures with circular... points. Demo page.
Solarize
Creates a solarisation effect by inverting all colors that are above a certain treshold. Demo page.
All of these need image data access, so Firefox, Opera 9.5+ and WebKit nightly only. Got a few more coming in the not so distant future.
Read more...
DOMTRIS - Yet another Tetris clone
I don't know how many JavaScript Tetris clones are out there, but I bet it's quite a few. Nevertheless, I decided I would have a go at it since it's just one of those things that a lot of people do when they're first getting into coding games but for some reason I never got around to it then and now I feel cheated.
It's a pretty standard, no frills Tetris game. There are no extra fancy features like some of the later editions, I've tried to keep it "sort of" close to the original. Clearing a line gives a certain amount of points depending on the level starting at 30 points. Clearing multiple lines gives even more points with 4 lines scoring 520 on level 1. As the level goes up, so does the speed of the falling tetrominoes. New levels begin at 500, 1000, 2000, 5000, 10000, 25000 points, etc.
The graphics, if we can call them that, are simply colored div elements. The embossed look is done with a simple CSS outset border type. I think it looks great in Firefox, Opera and Safari, but IE's borders look a bit different. That's ok, though, as I recall the appearance of these borders are not defined in the spec, so I guess IE is free to do as it pleases. It's cosmetic and not that big of a problem anyway.
You can save your progress at any time during the game by pressing "S" after which you will be presented with a URL that you can go to in order to load the saved game. What happens is that the game creates a URL to the game with a long ass querystring containing the current game state. This URL is then shortened via Tinyurl using Simon Willison's json-tinyurl service. So you get a short text string that will fit on the back of your hand, should you need to rush home from work to continue playing Tetris!
I actually had some bigger plans for this, including some interesting democratic "massively multiplayer" twists to the gameplay, but they will have to wait for now. Until then, this is just Tetris, not that that's not cool a game by itself.
Now play DOMTRIS!
Read more...
I don't know how many JavaScript Tetris clones are out there, but I bet it's quite a few. Nevertheless, I decided I would have a go at it since it's just one of those things that a lot of people do when they're first getting into coding games but for some reason I never got around to it then and now I feel cheated.
It's a pretty standard, no frills Tetris game. There are no extra fancy features like some of the later editions, I've tried to keep it "sort of" close to the original. Clearing a line gives a certain amount of points depending on the level starting at 30 points. Clearing multiple lines gives even more points with 4 lines scoring 520 on level 1. As the level goes up, so does the speed of the falling tetrominoes. New levels begin at 500, 1000, 2000, 5000, 10000, 25000 points, etc.
The graphics, if we can call them that, are simply colored div elements. The embossed look is done with a simple CSS outset border type. I think it looks great in Firefox, Opera and Safari, but IE's borders look a bit different. That's ok, though, as I recall the appearance of these borders are not defined in the spec, so I guess IE is free to do as it pleases. It's cosmetic and not that big of a problem anyway.
You can save your progress at any time during the game by pressing "S" after which you will be presented with a URL that you can go to in order to load the saved game. What happens is that the game creates a URL to the game with a long ass querystring containing the current game state. This URL is then shortened via Tinyurl using Simon Willison's json-tinyurl service. So you get a short text string that will fit on the back of your hand, should you need to rush home from work to continue playing Tetris!
I actually had some bigger plans for this, including some interesting democratic "massively multiplayer" twists to the gameplay, but they will have to wait for now. Until then, this is just Tetris, not that that's not cool a game by itself.
Now play DOMTRIS!
Read more...
Pixastic - Now a JavaScript image processing library
So, a while ago I played around with applying different effects to images by using the canvas element. The result was a small library that I posted about here. A bit later, I took some of that code and turned it into a small image editing application that I dubbed Pixastic,
the most web 2.0 name I could think of. Now I've ripped out the filtering parts and turned it back into an image processing library, also called Pixastic.
You should check out the Pixastic site if you want the whole low down on what it does, but here's a quick summary. The Pixastic library allows you to apply a variety of effects or "actions" on an image. For most of the effects, the magic is done by painting the image on a
This new library has its own site at http://www.pixastic.com/lib/ (the editor has been moved to http://editor.pixastic.com/).
There are live demos of all the actions in the documentation, as well as descriptions of parameters and all that.
Also, unlike the previous library, this code freely available under the terms of the MIT license.
Check it all out here
All feedback, bugreports, contributions, etc. are of course much appreciated.
Read more...
So, a while ago I played around with applying different effects to images by using the canvas element. The result was a small library that I posted about here. A bit later, I took some of that code and turned it into a small image editing application that I dubbed Pixastic,
the most web 2.0 name I could think of. Now I've ripped out the filtering parts and turned it back into an image processing library, also called Pixastic.
You should check out the Pixastic site if you want the whole low down on what it does, but here's a quick summary. The Pixastic library allows you to apply a variety of effects or "actions" on an image. For most of the effects, the magic is done by painting the image on a
canvas element and then accessing the raw pixel data via the getImageData and putImageData methods. Currently available actions are:
- Blur
- Brightness/Contrast
- Crop
- Desaturate
- Edge Detection
- Emboss
- Flip Horizontally/Vertically
- Glow
- Histogram
- Hue/Saturation/Lightness
- Invert
- Laplace Edge Detection
- Lighten
- Noise
- Posterize
- Remove Noise
- Sepia
- Sharpen
- Unsharp Mask
- Color Adjust
- Mosaic
- Pointillize
- Solarize
Pixastic.process(
document.getElementById("myImage"),
"blur",
{amount:0.5}
);
And with CSS classes the same would be done like this:
<img src="myimage.jpg" class="pixastic pixastic-blur(amount=0.5)" />In the
canvas-less IE, the effects are applied (when possible) with the proprietary IE filters. There's also some basic jQuery support that you can read more about on the Pixastic site.
This new library has its own site at http://www.pixastic.com/lib/ (the editor has been moved to http://editor.pixastic.com/).
There are live demos of all the actions in the documentation, as well as descriptions of parameters and all that.
Also, unlike the previous library, this code freely available under the terms of the MIT license.
Check it all out here
All feedback, bugreports, contributions, etc. are of course much appreciated.
Read more...
