Change Requirejs, Less compiler and CoffeScript versions in Play Framework

Hi there,
I’ve found myself struggling with Play 2.2.1 for one (really? just one???) reason: it comes with Less 1.4.2, that’s a great CSS compiler but…

…according to the official Less’ website, they’ve released the 1.7.x version!

And what’s wrong with 1.4.2? Some bufixes and improvements, as usual, but what I really love is the possibility to pass rulesets to mixins as arguments: definitely great!

The biggest problem is that in our development stage we’ve frozen the project to Play 2.2.1 and there’s no way to upgrade it. So, digging into Play’s files I’ve discovered this wonderful folder:

your-play-path/framework/src/sbt-plugin/src/main/resources

there you can find less-x.x.x.js, coffeescript.js and r.js: just overwrite them and run

your-play-path/framework/build

then leave the console open and type
> compile
> publish-local

…enjoy!

Pietro

Footage Manager by TPTeam

Hello,
tonight I’m going to publish our first public project: the Footage Manager.

It is a JS frame player who’s able to track movement onto a movie: it seems quite complicate this way but… JUST TRY IT!

This manager is based on PIXI and Astar and its aim is to follow mouse/device movements updating a MovieClip object. The goal is to control an animation composed by a number of textures throught the mouse’s movement, in order to get an animation interacting with the user. 

The 3D character has been edited and animated with Blender (as usual) and I’ve packed the frames with our STexturePacker 

I’ll publish some instructions and one tutorial later, now just try it if you want! I think that the workflow is quite straight-forward (it has been for me, so… don’t worry!) anyway would be great to have also some more documentation.

Credits:

• GoodBoyDigital for PIXI (https://github.com/GoodBoyDigital/pixi.js)
• Brian Grinstead for A* algorithm implementation (http://www.briangrinstead.com/files/astar/)
• Mr.Doob for the EventManager (https://github.com/mrdoob)
• VMComic for the 3D Model (http://www.blendswap.com/blends/view/6844)

Pietro – TPTeam

Converting HTML hex color to RGB value

Hi everyone,

I had to solve a little problem: converting hex color value (like CSS/HTML color code #FFFFFF) to a blender friendly color code (a triplet of float numbers, range(0,1) like (1,1,1)) and back again.

Ok: this is not THE problem, and maybe lots of you will be laughting reading this, but this has been MY BIG problem for 30 minutes. And I’ve got to thank a lot Alvaro Moe from OpenTechSchool workshops (Berlin), a very skilled Python and Javascript developer who is spending his days at Campus Party Europe with me. So… let’s go!



1 – From HTML color to CG color:

Taking this light-blue color HTML hex code #1075f5 is built this way:

# – the identifier
10 – the value for Red channel
75 – the value for Green channel
f5 – the value for Blue channel

Each couple can handle 0-255 value. As standard, if we have one number only we’ve to add ‘0’ in front of it to keep six element rule. In this example we won’t take care of alpha value because it’s not handled by ‘color picker’ element but you can add it easely.

First of all, let’s convert a simple HEX couple (the first, RED channel) to a FLOAT number; Javascript gives us a nice instruction in order to do this:

• red = parseInt(“10”, 16);

Now we need to map the 0-255 value to a 0-1 scale. Let’s divide it for 255:

•  red = parseInt(“10”, 16) / 255;

Let’s do it for each channel:

• red = parseInt(“10”, 16) / 255;
• green = parseInt(“75”, 16) / 255;
• blue = parseInt(“f5”, 16) / 255;

Ok, but .value is a string. I’ve got to parse it to get the single couples, removing ’#’ symbol and slicing the couples:

• splitted = hex.substr(1);
• red = parseInt(splitted.slice(0, 2), 16) / 255;
• …splitted.slice(2, 4)…
• …splitted.slice(4, 6)…

Genau! Now we’re ready to build our function:

http://pastebin.com/embed_iframe.php?i=1r5F9aZg

2 – From CG color to HTML color:

And now, let’s invert the process!
Our function will take as input an array on float numbers, ranged between 0 and 1, and will return a string.
The Javascript function to translate a number to a string value is this:

• red_hex = red.toString(16);

By the way, we’ll have an array and we need to multiply the value for 255:

• r = (colors[0] * 255).toString(16);

Next step: checking if the value is less or more than ‘F’. Why? Because we need to build a string.length = 6 plus the ’#’ character elsewhere we’ll not perform a correct conversion.

• if (r.length == 1) { r = ‘0’ + r };

As last step, let’s compose the final string:

• hex = ’#’ + r + g + b;

We’re ready to build our new function:

http://pastebin.com/embed_iframe.php?i=cGmqPwbB

As I’ve written before, I’m not handling alpha channel because I don’t need it but you can do that in few minutes if you want.

Greetings from Berlin and Campus Party Europe!
Pietro

WebGL workshop

Today at 15.00 I’ll be coaching a workshop about WebGL at Campus Party Europe (Berlin).
More info on:
http://www.campus-party.eu/2012/developers.html#OpenTechSchool
http://campusparty.opentechschool.org/

Pietro

Chrome Issue: read local files

Ok guys,

I’m working on my own WebGL project (using Three.js) and I’ve got a problem:

• if you open a webgl page on a website with chrome it works
• if you open the same page on a local directory it doesn’t works
• the console message is this:
• XMLHttpRequest cannot load file:///home/pietro/test.js. Cross origin requests are only supported for HTTP.

Ok this is caused by bigG’s security policy, and we should be happy for this… so nobody can access our local files from a script. But what if I need to do it?

1. You can run chrome with these options: --allow-file-access-from-files

• Ok, but you have to make a different executable for it, set it as standard application for HTML files (but forgive your security...) or open manually your page (ok, works but... you need to be quick and simple in testing your scripts). 

A more professional solution: run a webserver on you machine and test the javascript application through loopback interface

• Nice! But… I’m not a webmaster or sysadmin. I’m already learning Javascript please I need to focus on ONE thing… 

A simple and professional solution: use an IDE

•  Yeah! Once you set-up your “run” targets it works very very good. Simple, fast and solid.

What you said? IDEs aren’t fast?

Yes, you’re right!

There’s nothing faster than an “notepad” or “gedit” or a really hardcore “vi”.

But when you’ve got to manage more than 3 files linked, IDE saves lot of time if is well configured.

I’ve been using Eclipse working on a big Android projects and it worked quite good but… with .js files is really slow.

So, two days ago it has hanged three times in a morning: now I’m using Aptana and it’s really really faster. I suggest it to everyone for Javascript developing.

Ok, I just wanted to share my experience because I’ve found lot of people on internet asking for the same problem.

Ciao,

Pietro

Reel 2012 – Pietro Grandi – 3D Artist

And finally I got it 🙂

My showreel 2012…

pietro