exscale.se

Kukk3D - Javascript 3D Engine

Thursday, April 30, 2009

I had so much fun playing around with canvas when I built the Pixastic Editor that I decided to port my really old 3D-engine, Kukk3D, to JS.

Click the image to view a demo

At the moment it's really basic even though it has support for faces (something that the old one never had) as well as lines and vectors.

You can add any type of object you like to the scene, move it around and re-render it. To animate you'd wanna do this X times per second, usually through a setTimeout.

A basic example:

<canvas id="kukk3d"></canvas>

<script type="text/javascript">
// Initiate the engine, pass in the canvas-ID and set width and height
Kukk3D.init('kukk3d', 640, 480);

// Create an object
// You can create any object you like or use one of the presets in objectSkeletons
var cube = Kukk3D.addObject(Kukk3D.objectSkeletons.cube());

// Now that the scene contains something, let's render it
// You can pass in a color-object as the only argument to render
// in order to fill the scene with a background-color
Kukk3D.render({r: 0, g: 0, b: 0, a: 1});

// To animate we simply move about the object and re-render
// the scene in a setInterval that runs every 50 ms
setInterval(function () {
    cube.rotation.y += 2;
    cube.rotation.z += 1;
    Kukk3D.render();
}, 50); // 50 ms = 20 fps
</script>

What you reckon?

• Comments are off
• Filed under Development, Javascript, Old School

jQuery Pixastic Editor

Friday, April 17, 2009

I started playing around with the Pixastic JS Library a few days ago and thought it was really cool.

For those that don't know it's a JS library that allows you to apply different effects to images using the canvas)-element.

So, naturally I had to create a jQuery plug-in that wraps all this cool functionality in a neat little package :)

The jQuery Pixastic Editor can be applied to any image in your document and inserts a completely stylable toolbar next to the image in question.

Have a look at an example

As usual I've set up a simple example-page, please have a look at the source for how to implement it. It requires a few other jQ-plugs and the options-form works best if you have the UI slider installed as well.

Without some sort of server-side script it's not possible to save the altered image as a new file, but the plug-in allows the user to click the modified canvas to open its dataURL in a new tab which allows him to then use the browser's save-functionality to save the image to their local machine.

It's dynamic like hell :)

The toolbar is automatically generated from all the actions currently in Pixastic.Actions. This means that your can download your own build of Pixastic and the plug-in will automatically adapt to whatever effects you've chosen.

Most of the effects require the you to set certain options, to avoid hard-coding each of the options for every effect I wrote a little PHP-script that parses the Pixastic website for information about each effect. When a new effect is added I run the script again and get the latest updates.

This means, however, that the options-form isn't exactly tailor made. Some of the options could very well be converted to drop-downs for usability, but it'll have to wait till next release.

I do look for certain things in the description of the option though like for example if anything like "X to|and Y" occurrs in the text I interpret that as min and max values for the option.

Any option with a min and max-value will get a jQuery UI Slider inserted beneath it (but only if the user of the plug-in has UI Slider installed).

Also, if the string "defaults to Z" occurrs I set Z to the default-value for that option.

I could (and will) probably solve the drop-down issue by looking for something like "one of "foo", "bar" and "baz"" as that is how the author of Pixastic most commonly describes options with several possible values.

Finally

There are a few more features I haven't mentioned like different styles etc also it's highly in beta and a lot could be added but do have a look and let me know what you think.

Oh and I've only tested it in FF3.

Laters!

• Comments are off
• Filed under jQuery

jQuery Drag to Select Plug-in

Monday, April 06, 2009

Use this plug-in to allow your visitors to select certain elements by dragging and dropping a "select box".

It works very similar to how most OS:es allow you to select files and folders.

I've set up a simple demo, please check the source-code for the different options. It's still in semi-beta.

All my plug-ins will be re-released on andreaslagerkvist.com once it's finished (right now I'm pretty much just waiting for PHP5.3 to be released).

• Comments are off
• Filed under Javascript, jQuery