Stroep

Just a collection of random works – Mark Knol

Archive by Author

Quick post here. I’d like to share this very quick way to create an automatic ID or index to your class instances. Mostly I pass an index as parameter to the class instance, or I use a public var to set the index. Using this way it is very easy to create an automatically filled index, since you have to set this up once and never worry again :)

Take a look at this code:

package
{
  public class MyObject
  {
    public static var global_index:int = 0;
    public const INDEX:int = global_index++;

     // constructor
     public function MyObject():void {}
  }
}
 

As you see, I have created a static variable global_index, which is always the same to all MyObject classes. I also created a public constant ‘INDEX’, which would be unique in every instance. When the MyObject instance is created the index will be set to the global_index, and the global_index will increase by one. So that’s basically the trick to create the auto-increment index for your AS3 class.

Tagged with , , .

Multiple keys made easy with DictionaryQuick post here, a simple solution I found to have multiple keys enabled. Maybe most real game developers know better or more elegant solutions, but I found this useful enough to share it with you.

Here we go. Add these variable to your class. This is a Dictionary, which allows you to associate a value with an object key.

private var currentKeys:Dictionary = new Dictionary();
 

Then, in your constructor or wherever you assign eventListeners, add these (well-known) listeners, with the callback functions:

import flash.events.KeyboardEvent;

stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp);

private function onKeyDown(e:KeyboardEvent):void
{
    currentKeys[e.keyCode] = true;
}
       
private function onKeyUp(e:KeyboardEvent):void
{
    currentKeys[e.keyCode] = false;
}
 

Inside your enterframe-event or timer (were you want to detect which keys are pressed), you could these kind of detection.

import flash.ui.Keyboard;
import flash.events.Event;

private function onUpdate(e:Event):void
{
    if ( currentKeys[ Keyboard.SPACE ] )
    {
        tank.shoot();
    }
    if ( currentKeys[ Keyboard.RIGHT ] )
    {
        tank.targetDirection -= 0.1;
    }   
    if ( currentKeys[ Keyboard.LEFT ] )
    {
        tank.targetDirection += 0.1;
    }   
    if ( currentKeys[ Keyboard.UP ] )
    {
        tank.speed += tank.acceleration;
    }   
    if ( currentKeys[ Keyboard.DOWN ] )
    {
        tank.speed /= 1.8;
    }
}
 

I found that if you use some 3 or 4+ combinations of keys at the same time, the keyboard events are not triggered anymore, which is a bit of annoying bug in the FlashPlayer. I mean pressing forward and left and shooting at the same time could be a problem? Well; Hope this helps, I think its very easy and a great usage of the Dictionary.

Tagged with , , .

FindClosest (6)

March 14th, 2010, under Actionscript.

findClosestWho follows me on twitter already noticed I’ve created a little app inspired by scribbler from zefrank. I also found another cool version of Mario Klingemann aka Quasimondo called scribblerToo. But the one where it all started is the javascript version of Mr.Doob. I wanted to try this in flash, and called it findClosest. It’s not as great as the other versions, but I really think there are some interesting things in here.

See it in action
» FindClosest

The trick in this little application is to store each mouse position, locate the mouse position and find the closest points around it (from the stored data) and draw some lines between those points. Well that code isn’t very exiting, because most people know how to find the distance between 2 points, and basically there are 2 ways find this:

// option 1: Using the build-in function
var distance:Number = Point.distance( point1, point2 );

// option 2: Using Math
var distance:Number = Math.sqrt( point1.x * point2.x + point1.y * point2.y );

The results are amazing and I love the fact that even if you can’t draw, it looks really cool :)

Store lines as small as you can

I was already trying to find a way to store lines in a format I can reuse for my artworks. Most artworks are random but I am looking for a way to have more control. The first step would be the ability to control the (what I call) movements. So in this little experiment I’ve tried to find a way to store the lines into a compact file, which can be redrawed by the app. I’m really exited about this. So I’ve started to save as a plain-text file writing something like this:

{x:100,y:300},{x:110,y:340},{x:125,y:350},{x:125,y:350}

It’s readable code, and easy to These are 56 chars for 4 points. So I tried to make it more smaller using this:

{100,300},{110,340},{125,350},{125,350}

I’ve removed the x and y from the file, because I know that it’s always a pair of x and y values. Alright.. now I have 40 chars which represents 4 points, so that saves me 16 chars. Can this be done more smaller?

100,300,110,340,125,350,125,350

Yes, sometimes basic is the best. I removed the brackets. I know the odds are the x values, and the evens are the y values. It’s always x,y,x,y,x,y,x,y etc. So now I have 32 chars to store 4 points.

The application doesn’t know where I start pressing and releasing the mousebuttons. I have to know this, otherwise all my lines are just 1 big line instead of multiple lines. When pressing the mouse, I want to start with an graphics.moveTo function.

So what I did is this:

100,300,110,340,125,350,125,350&m=0,2

&m=0,2 means I have released the mouse on point 0 and point 2. A point referrers to the x and y position.

I think this is almost the smallest I can get. It’s easily to revert these values back to usable values using String.split().

But.. In real life there aren’t ints, but Numbers. The values mostly looks like 452.12070158. I stripped the value, and only use decimals. You don’t actually see the difference when redrawing between 10.04 and 10.042. This saves me a lot of chars too.

Compress it!
When saving the file, I push the data into a ByteArray using the bytes.writeUTFBytes() function. I realized ByteArrays can be compressed, so I also use the bytes.compress(); to make the file smaller again. This saves me about 50%! When importing the lines, I used bytes.uncompress(); to make it a normal string again.

This flower is 14kb :) Import this file in the app to see how I haved drawed it. You can also load it from an url: http://projects.stroep.nl/findClosest/flower2.stroep
flower
flower on Flickr

Well this is a next step and I hope to create one day an editor for simple lines and merge this into my artwork process. I think it needs to be more complex but for now this will work. I hope you like it.

Tagged with , , .

Quick post, this time no Flash but a Photoshop action that saves me a lot of time. :) First of all, I don’t use slides in Photoshop, but often I just make a selection, copy/paste that in a new window and then press ctrl-alt-shift-s to ‘save for the web’. I am doing this a lot of times when slicing objects. Since a while now I use an action for that. I hope this will help you too work faster. Key thing you have to remember is to create a selection and press F2..

It automatically does the copy/new/paste+’save for the web’ for you.

Download photoshop-action

ps. You can install the action by dragging the .atm file to the actions-panel :)

Tagged with .

Arthouse (0)

February 1st, 2010, under Generative art.

Mocha ArtHouse is an experimental space that fuses the experience of art, culture and food, and exist as a platform for young artist and performers. ArtHouse brings new artist and audiences together in a manner that is accessible and inspirational.


The gallery was 21 december 2009. Unfortunately, I couldn’t see it in real life, because it was in India, and I live in the Netherlands (yes, almost other side of the world, 6.400km). It was great to work with those guys, they have showed some of my favorites and send me nice photo’s. Hope to have an gallery like this in Holland ever too (someone interested to do this?) :)

Arthouse

Arthouse

Arthouse

» More photo’s here

Tagged with , , .

What a nice title! I have updated my blog design. No, there are no shocking new features, just a more fresh and more cleaner design. Yes, it is still black and in the ‘stroep’-style, but I think it is really a little bit better. I think it is important too keep improving, so I hope you like it. I added some nice icons in the sidebar and jQuery rollovers. I have added rounded corners (only shown in modern browsers) and I really think it makes the site more friendly, which should be a good thing ;)

For all guys who use IE6, I have added a nice message for you. You cannot see my site anymore. It’s not a personal thing, but I really think this year we should all ban old crappy browsers. It would not take long till I show this message for IE7 too and some other out-dated browsers too. Let us update and enjoy fast modern browsing with new possibilities.

I have removed more Google ads from the blog. There were some ads between the posts and on the post-page. Now I have only 1 banner at the bottom of the sidebar. Yes; I have 2000 unique visitors in a month and no; I don’t earn a lot money with it, so basically the ads are useless. I dislike banners too, but still I hope to have a big hit one day and my ad is ready to be clicked (kidding) For real; one day I had the illusion I could be rich by placing these ads on my blog. But I’ve realized most people on my blog are looking for products, but looking for sources and inspiration. This site doesn’t target banner-clicking-people. I hope you are happy with it.

Tagged with , .

More info here

Tagged with , .