I found this challenge from my colleague who rocks on hack-contests. It cracked my mind, but I thought it was fun to create a mini contest on my blog too. Just to check how smart my lovely readers are! All you have to do is break the code and find the secret key.
If you want a fast random seed, you could use this very simple class.
This blogpost is mostly a useful copy-paste location for myself. I got this solution from http://www.calypso88.com, but the blog seems down for a while now.
public class Random { private const MAX_RATIO:Number = 1 / uint.MAX_VALUE; private var r:uint;
public function Random(seed:uint = 0) { r = seed || getTimer(); }
// returns a random Number from 0 – 1 public function getNext():Number { r ^= (r << 21);
r ^= (r >>> 35); r ^= (r << 4);
return (r * MAX_RATIO);
}
}
}
[/as] You could use it like this: [as]
var random:Random = new Random(777); // fixed seed
trace( random.getNext() ); // 0.7393220608912693
trace( random.getNext() ); // 0.017692924714110075
trace( random.getNext() ); // 0.08819738521431512
trace( random.getNext() ); // 0.5297092030592517
[/as]
Every time you run it (with a fixed seed), you'll get the same 'random' numbers.
If you want to use strings as simple templates in javascript, you might want to use my template script. You can do stuff like this:
var template = “Hello my name is {person.name}, I’m {person.age} years old, I like {person.favorites.fruit}, but at most I like {person.favorites.fruit[2]}”;
var replaceVars = {person:{name:”Mark”, age:27, favorites:{fruit:[“apples”,”oranges”, “bananas”] }}};
Quick post. I created a simple generative doodle using the canvas with javascript, check it out: » Canvas Doodle
It is based on this experiment by mr.doob. For me it was a challenge to finally do a canvas experiment. It is kinda fun, you don’t have to compile and the surprise is very big if it works, since you don’t have such a thing as compile errors 🙂
A nice thing with the html-canvas is that you can set the line thickness to floats, where in actionscript you can only use an numbers that will be be rounded. That allows me to create nice thin lines. An annoying thing is that you have to use strings (with RGBA values) to define the color of the lines. Can this be a uint-value? context.strokeStyle = ‘rgba(242, 43, 81, 0.8)’; Another thing that I noticed, it’s is hard to blend two canvas contexts, you’ll have to do it pixel per pixel. function merge(toContext, fromContext) { var imageData = fromContext.getImageData(0, 0, width, height); var pixelData1 = imageData.data; var pixelData2 = toContext.getImageData(0, 0, width, height).data;
if (pixelData1.length != pixelData2.length) return;
for (var i = 0, total = pixelData1.length; i < total; i ++ )
{
pixelData1[i] = (pixelData1[i] + pixelData2[i]) / 2; // ugly blend
}
toContext.putImageData(imageData, 0, 0);
}
[/as]This works. Yeah yeah, I know if I want a normal blend, I should grab the RGB values separately and mix them per channel, but this works in the experiment.. (!?) 😉 I'm open for suggestions and optimization of this thing. Is there a Actionscript-like [i]BitmapData.draw()[/i] or [i]BitmapData.copyPixels()[/i] alternative for this?
While playing with JSFL and trying to create a faster interface for my name it right.jsfl I stumbled across a very interesting function inside JSFL. There is a powerful function called fl.getDocumentDOM().xmlPanel which shows dialogs using .xml-files. Actually you could use XUL (XML User Interface Language), which kinda looks like a mix of HTML and Flex. If you need a GUI for your JSFL script, you can open a nice custom dialog using XUL.
Why create tools inside a tool?
Yes, the Flash is a very nice IDE. But with JSFL you can extend it. You can build your own snippets and tools. It could be very helpful to automate some boring things. I think it is very powerful to have the ability to extend your environment for your everyday tasks.
Show a dialog with JSFL
Create a dialog file This is an example of XUL. Save it as test-dialog.xml in your local commands folder. [xml]
[/xml] Open the dialog with JSFL Save it as test-dialog.jsfl in the same folder as the .xml file. // xmlPanel returns an Object with values of the dialog. var xmlPanelOutput = fl.getDocumentDOM().xmlPanel(fl.configURI + “/Commands/test-dialog.xml”);
if (xmlPanelOutput.dismiss == “accept”) // user confirms dialog { fl.trace(“myTextfield: ” + xmlPanelOutput.myTextfield); fl.trace(“myColor: ” + xmlPanelOutput.myColor); } else // user canceled dialog {
}
Run it by clicking ‘Commands’ > ‘test-dialog’ in Flash; our custom dialog will show up. Nice! 😀
Give me more; I want dynamic dialogs
If you check out the documentation of fl.getDocumentDOM().xmlPanel, you see you only can pass a uri to a xml file, but there is no way to pass a XML or Object to it. Adobe if you read this post; that would be nice. But I found a hack to create a dialog from JSFL by dynamically create a XML and save it as temporary file and open that one as xmlDialog. The file will be removed after showing the dialog. function showXMLPanel(xmlString) { var localConfigURI = fl.configURI; // Verify that the provided path ends with ‘/’ if (localConfigURI.charAt(localConfigURI.length – 1) != “/”) localConfigURI = localConfigURI + “/”;
var path = localConfigURI + “Commands/.dialog-” + parseInt(Math.random() * 1000) + “.xml” FLfile.write(path, xmlString); var xmlPanelOutput = fl.getDocumentDOM().xmlPanel(path); FLfile.remove(path); return xmlPanelOutput; } This function displays a dialog from a (xml) string and returns the values like you would expect from the xmlPanel-function. You could use a XML object for this too, but I think it’s easier to hack some variables into it or make templates with strings. // create an XUL with JSFL var dialogXML = ”; dialogXML += ‘‘;
var xmlPanelOutput = showXMLPanel(dialogXML); if (xmlPanelOutput.dismiss == “accept”) // user confirms dialog { fl.trace(“myText1: ” + xmlPanelOutput.myText1); fl.trace(“myText2: ” + xmlPanelOutput.myText2); }
Since you are dealing with strings, you can manipulate and add extra elements. This allows you to pass data from JSFL to your dialog.
So, can you make panels too?
I really hate custom panels, because I never get my workspace right for two screens (moving/closing/opening panels the whole day), so there is no room for other panels. I start loving JSFL-scripts because you can assign a shortcut-key to it, which runs the tool, without having a panel in my workspace.
Conclusion
I like to create handy snippets and will share more in the future. But if you thought (just like me) this is some kind of a new feature: It’s not.
Recently I found an interesting question on FlashFocus.nl, about creating light and shadows in a 2D environment. I started experimenting with this to see how far I could take it. I love to share the results and some insides about this fun project.
How to get started
The initial code that the topic starter used a loop through all objects, and used hitTestPoint-function to detect if the light hits a wall. Therefore he used a loop with 360 steps, used for all directions. In the innerloop it tries if it hits the wall, otherwise goes away from the light (using the direction of the outerloop), tries if it hits the wall. That loop goes on till it does hit a wall. It is a bit of trial and error, but I think it is very clever. At the end of each loop a lineTo is used to draw the light, so in the end it will be a shape with 360 vector points.
Speed of light
Now, that screams for optimization and speed. It’s a fun project to mix some things you have seen and want to try out for a long time. The first thing that I tried to make it faster, draw all objects into an BitmapData, and use the getPixel function instead of hitTestPoint, which is notable faster if you don’t move objects. I used that BitmapData object only too check if the light hits the objects; no one actually sees it. To use hitTestPoint, you must loop through all objects and detect if they hit. With a lot of objects, it would be slower. With BitmapData, you don’t need that loop, and you are free to use unlimited objects with even custom shapes. Less looping == faster, unlimited objects == awesome 🙂
More realism
I also wanted to make it look more realistic. Having light only is not close enough to realism. It needs shadows. I created an inverted shape of the light-shape and filled it with black (a). This creates a nice shadow, however has very hard bounds, which is ugly. So then I took the shape again and drawed with a nice transparent to black gradient (b). Those 2 layers have the BlendMode ALPHA. The holder of those has a solid shape fill (as big as the stage) with BlendMode LAYER. This creates a nice ‘hole’ which I think works very well as shadow if you make it half-transparent. Oh, the colored light-layer (c) is a gradient too, with the same shape as b, only with BlendMode ADD.
Re-using shape data
Another optimization I used was to use graphics data API. In this case I have 1 shape which could be reused 3 times. So before even drawing, I collect all points and commands in an Vector. When I have all data collected, it draws the light-layer and shadow-layer at first, then it pushes some extra points to the Array to make the outer shadow-layer. So with 1 Array of (manipulated) data I could draw multiple shapes. That’s a good case of using the graphics data, I guess.
Optimized trig functions
I also used the TrigLUT-class (Trigonometry LookUp Table) from jacksondunstan.com, since the loop heavily uses Math.sin and Math.cos. I could use the valNormalizedPositive() function from that class in this case. It’s very fast and for me it was fun to use that class. 😀
But it is still too slow..
The most intense about this thing isn’t the calculation, but the rendering itself. The whole ‘canvas’ needs to be updated and redrawed every frame with lots of layers and blendmodes, which is very intense for the CPU. I don’t know if this would be possible with Stage3D, but that would be the last step to render really fast. And when that is possible, I’ll guess I could move the object real-time too, which makes it very interesting for games.
I found this challenge from my colleague who rocks on hack-contests. It cracked my mind, but I thought it was fun to create a mini contest on my blog too. Just to check how smart my lovely readers are!
If you want a fast random seed, you could use this very simple class.
If you want to use strings as simple templates in javascript, you might want to use my template script. You can do stuff like this:
While playing with JSFL and trying to create a faster interface for my 
Recently I found an 
