Who 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.
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:
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 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.
AS3 puzzle block game. Just for fun I created this puzzle-game. It is not very innovative, but it’s cool (and a little bit hard) to explore how to build this kind of game. Don’t know the exact name for this game, so I called it block.game
How to play
Click on groups of the same color. The bigger group, the more score. You get a message when no moves can be done, or when the board is empty.
How I created it – braindump
I’ve learned you need to think twice before starting coding. This game had some really challenges in it.
Challenge 1: I know what you are thinking; the map is just an array. Well; that’s true. A challenge while creating the game was to find out what a left or right side in the game was. My array doesn’t know what rows are, because I choose to not use a multidimensional one. So I created a way to calculate what a row was. I used modulo for this. Take a look at this code to see how easy the problem could be fixed. It just took me a long time to get to this point, I guess.
if(index % mapWidth == 0){// left side of board } if(index % mapWidth == mapWidth ){// right side of board }
Conclusion: Modulo makes live easy. We need to use it more.
Challenge 2: How to find all blocks around the active block? It loops around the active block to see if they had the same type (=color). If not; stop looping. If it does; repeat function from that point again with exception below the imaginary boundaries created in challenge 1. Well, this is a typical example to use recursive loops; I used it for this. Recursive programming is a bit hard to understand if you don’t work a lot with them. My conclusion: Learning recursive function is cool.
Challenge 3: When you clear a column, the column should move to the left, right? I thought that would be very easy; just move all columns after the newest empty column just one position to the left and that’s it. But it wasn’t that easy. I needed to loop through all the columns after the empty one, and push it them the left. But.. At the right side of the board there are empty columns too (if you clicked a empty row before). So Flash was thinking; Cool I’ve found some empty rows at the right side of the board. Yeah; put more to the left. But there wasn’t more, because the column before the last empty column at the right side is the last one (you still get me?). Flash was recursively looping and after 15 seconds he gave up.. an infinite never ending loop. Conclusion; I needed to calculate the last not-empty-column first. Then find the empty columns between the first empty column in the middle of the board and the calculated not-empty-column. If found it; move that columns one position to the left.
I hope you like the game. I haven’t implemented a highscore (yet).
Feeling creative; created a new serie with wild but odd colors. It has a happy abstract smoke-like feeling. It is hard to create good ribbons, but now I have find out a new way I kinda like. When I was experimenting with my ‘curved series’ (previous post), I already had the engine. But in this serie I left the borders, left the fade and added better movement and connection between the lines. It’s getting better every time. The curves and movements are based on a perlin noise. It took a lot of time till I get these four. The engine was right, but I have to deal with randomness. Mostly it doesn’t work and sometimes it does and now I have this:
I’ve created this one at 6000 x 6000 px. What do you think of it? if you are interested in buying one, please contact me info[at]stroep.nl.
noiseColor is the colorvalue of getPixel() from the perlin noise.
Some curves with gradient fills and 2 different stroke sizes. I found in the Matrix-class a createGradientBox() function, witch actually is a very cool and handy function. The colors are based on photos with cool colors, this gives a nice natural look.
After writing this post of using perlin noise, I’ll did some more experiments making cool things. I draw lines using Perlin noise as input. Check this out:
I was also experimenting/figuring out how to convert a actionscript generated movie to video. I never knew it was possible (or that easy) with the Flash CS3 (maybe because I never tried). Just choose file > export movie > and choose .mov extension. The video isn’t smooth, because (when I save it) it is not really rendering, it’s just like an invisible screencapture, I guess. So I can’t use more heavy CPU things. Thats a pity.
But maybe I could use my ImageSaver Class to create a movie-sequence by saving frame by frame as PNG.
It took a while to get the right feeling, but I’m very happy with the results. Generated with actionscript, colorized with Photoshop. Orginal render size is 4800×4800 px. It’s full of details!
Sometimes I don’t know what to think of generative art. I don’t know if these images I created could be called (or what ‘they’ called) art, or if they are just some other renders. Sometimes it feels nothing more than lines, colors. Some people who see it really love it, but at some moments I don’t know how to think about it.
But take a look at it, they have so many details (see the big sizes if you have a flickr account). I cannot count the lines, but can have a endless watch to see if there’s a message in it. A secret sign or something else I didn’t coded. How can such useless lines be that interesting? I don’t get it..
A lot of people ask me how to create this images. If you don’t want to learn to code, just freak out with photoshop. First, when you really want to this: learn a coding-language, like actionscript. Download a nice actionscript-editor, like FlashDevelop. This makes coding more easily & comfortable. You also could learn processing. I don’t know a lot about it, but I’ve seen wonderful things created with it.
Jackson Dunstan: This is a good way to program for the keyboard by polling rather than by events. Just be sure to keep in mind that a lot of keyboards won't do more th
Who 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.
All Posts