Aquatic Sound Generator in Flash
Here's something from the vaults. Aquasound was built with these requirements in mind:
- Generate sounds that aquatic animals might make
- Sounds can be "combined" somehow
- Sounds can emote
This was never used in production. I wonder if I could turn this into something? Like a paid iPhone app? ;)
Double-click the envelopes to add/remove control points. Drag lines up & down to change their curviture. The best feature is the "Combine With" dropdown, which splices the current sound with your selection. Also the "Emote" menu will play sounds with different expression.
The audio algorithm is reverse-engineered from my beloved FS1R. I generated formants in two ways (toggle the "Tonal" checkbox to hear both), the "atonal" version is closer to ring modulation than actual formants. It's more fun if you don't understand what the controls are doing, but if you insist: Pitch controls the overall pitch of the sound. Freq controls the center frequency of the formant (like a bandpass filter). LFOFreq and LFOWeight control a low-frequency sine wave, which can be applied to other controls via their "___LFOAmt" curves. Amp is amplitude, Width is formant width (think: width of the bandpass filter), Skirt adds distortion. Each voice has two formant generators, check "Formant Active" to enable them.
May all your bloops and crackles be happy ones!
![[del.icio.us]](http://blog.zacharcher.com/wp-content/plugins/bookmarkify/delicious.png)
![[Digg]](http://blog.zacharcher.com/wp-content/plugins/bookmarkify/digg.png)
![[Reddit]](http://blog.zacharcher.com/wp-content/plugins/bookmarkify/reddit.png)
![[Twitter]](http://blog.zacharcher.com/wp-content/plugins/bookmarkify/twitter.png)
![[Email]](http://blog.zacharcher.com/wp-content/plugins/bookmarkify/email.png)
Strange Attractors in Flash
Have you seen (or played) the demo for Polynomial, the space shooter? Quick! Watch the video:
I spent a couple hours generating strange attractors in Flash, just a simple 2D version for now. Click to play:
Click the black region to generate new polynomial coefficients and redraw. You will have to click many times to generate something interesting. That's the nature of fractals, I'm afraid. Some coefficients are automatically thrown out if the drawing exceeds a certain size. Unfortunately, the inverse is not true: the code isn't smart enough to trash any drawings that shrink to microscopic size.
I believe that you can stabilize any coefficients by scaling the values of each coefficient, gradually nudging them larger/smaller until the drawing is stable. I'll try this when I get more time. I've been gung-ho on my first proper iPhone app, trying to finish it before Christmas! Stay tuned...
Also, here's the source code for the strange attractor harness! Enjoy.
Flash 3D: A change of heart?
Yesterday, I posted a damning critique of Flash's native 3D.
Today I noticed that if you right-click on yesterday's SWF and show the redraw regions, you can see that it's redrawing the contents of the entire stage, even though I put the scene in a scrollRect. Is it seriously rendering a scene that's thousands of pixels wide before displaying it ?!?!?!? Oh, no. No they DIDN'T.
Today I ported the scene to the Away3D rendering engine. Here's the result:
It's beautiful, and provides access to low-level drawing routines, light sources, normal maps, ... It was speedy at first, then slowed down considerably when I added the glowing floors. (Each glow is 16+ triangles right now, for various reasons including: I can't render objects in my own custom order.) This makes yesterday's version look performant, I'm reluctant to admit.
Possible next steps:
- Reduce the native 3D rendering area, see if performance improves?
- Grow beyond Flash, embrace the future and try Unity 3D?
- Dump this project, finish that iPhone game I started, make a million dollars in 2 weeks?
Flash 3D makes me sad
I've been dabbling with Flash 10's native 3D support. Try my engine:
Click to set the focus. Use the arrow keys to move. Touch blocks to illuminate.
I'm disappointed with two things:
1). How much time is required to create a 3D engine, even a grid-based one like mine. I've been wrestling this project for 4+ hours every day, for a week. I feel like I must be lagging behind, but there are ten thousand things that will go wrong when developing in 3D. The paradigm is uniquely punishing, there are always edge cases where some polygons aren't drawn correctly. This project hasn't been a joy.
Also:
2). Flash's native 3D is not suited for a high-performance application like this one. It would be fine if I was only spinning a few DisplayObjects in space. However, the scene above displays up to 125 Bitmaps simultaneously. (Light all 25 bulbs (3 Bitmaps each), stand in the corner facing them, and the 25-segment walls.) 125 Bitmaps would be child's play in OpenGL. But after you light a few blocks, Flash Player chokes pretty hard.
Here's another version that uses a BlendMode on the lightbulbs. It looks great, but its performance is even less acceptable.
Here's an early version that uses my own 3D computations, and the Graphics API. Also it has a limited field of view, which I widened for the latest builds. The performance is surprisingly high. I abandoned my custom 3D when I reached this point; drawing lines around each cube face was expensive, so I switched to Bitmaps, and the native 3D.
The cube faces are set to width & height of 100. However, the bitmaps are higher resolution, a 200x200 region is shown. They're being downsampled at 100x100 before they're rendered, not by my choice.
At runtime, I get periodic warnings like these:
Warning: 3D DisplayObject will not render. Its dimensions (8238, 1628) are too large to be drawn.
What?! How is this happening? I swear that any blocks behind the camera are being removed from the Stage. (Actually, this is difficult to verify. If I shrink the scene, Flash magically applies the 3D perspective with a weird projection, and distorts everything in Lovecraftian dimensions.) Please, Adobe, tell me that you're not rendering the scene at 8000 pixels wide, then scaling it down to my 700x400 window, frame after frame?
Also note that you, the developer, are responsible for drawing the DisplayObjects in the correct depth order (farthest to nearest), Flash doesn't handle it automatically. This is known as "2.5D", and it's wildly inconvenient.
So, I'm pretty disappointed with Flash 10's native 3D. Even with my limited 3D experience, I dislike how it renders the scene (I'm not alone in this) and the performance is obviously sub-par. This technology will not bring 3D games to the web, it cannot.
I need to decide whether to endure its shortcomings for 4 more weeks, or if I should abandon this project altogether. There are moments when you realize you've outgrown something you used to love, and this may be one of mine.
Synthetic Speech in Flash
EDIT: I made an iPhone version, "Metal Mouth", with lots of features. Here it is on YouTube and the iTunes Store!
Recently, I learned about Linear Predictive Coding ("LPC"). This technique is used in classic arcade games (such as Gauntlet) and the Speak & Spell to synthesize speech.
Here's my first attempt at LPC speech in Flash: (click & explore)
It's great, except for one tiny problem: It sounds horrific. Can you feel the cold, robotic love? This voice will stalk your nightmares.
The phonemes were derived from an unrehearsed recording of my voice. I'm confident that it can be improved. Note that direct LPC encodings of my voice, such as this one, sound more acceptable.
EDIT: I made an iPhone version, "Metal Mouth", with lots of features. Here it is on YouTube and the iTunes Store!
Toaster Bro alpha: 10 days later
Did I mention my new game, "Toaster Bro"? Play Toaster Bro alpha version 1!
(You will need Flash Player 10.)
Ten days have elapsed since I shared this version with friends (who are unwittingly being used as play testers). It's time for a "wrap-up" meeting, because I want to examine what went wrong/right, and instead of a meeting it's a blog post:
8-bit NTSC artifacts using Pixel Bender
By request, here's a quick 'n dirty test harness, and sample code, for NTSC artifacts in the style of the 8-bit Nintendo Entertainment System (NES):
Click the animation to change scale & scroll speed.
Source code & .fla: nes_ntsc.zip
The .pbk code is not optimized yet. The code is fairly explicit, I tried to explain how it works in the comments. Blargg's pages have better explanations tho.
The test harness lets you select two flavors of the effect. The numbers 8 and 12 denote the width of the lowpass window used for applying crosstalk. 12 is more processor-intensive, but will look "smoother", which may not be what you want. The mathematics can be reduced to a few (long) lines, which should reduce processor overhead; I want to do this in the future. unic0rn left some nice comments suggesting more routes to optimization.
The filter still needs some tuning. Areas of solid (non-black) color have diagonal stripes in them. I believe that normalizing the strengths of the filters will fix this.
To be continued...
Tweetcoding: Round 1 Winners
Hooray, I'm a runner-up in the first Tweetcoding contest. My entry "Ghost Marquee" placed in the top 4. The code extracts certain bits from a string of jibberish, 6 bits at a time; when arranged on a grid, the bits form a message.
Also I had 2 notable mentions with Sea Sphere and 3D Sketch. I figured my entry The w00t Quilt would have placed, but perhaps I'm just easily hypnotized...
I think the strongest entry was Diagonal Snake by @tomee6, which is (not coincidentally) also one of the winners. Move the mouse to attract the snake; you lose when the snake crosses itself or touches you. There's even a death animation. Amazing.
Here's looking forward to round 2...
Tweetcoding!
The challenge was steep: Build something interesting in Flash, using 140 characters or less.
Check out the rules, and the results. Oh man, I was hooked.
Fractal Transform, made with Pixel Bender
I made a Pixel Bender filter that performs Julia Set transformations on images. It looks great when it animates, the colors morph and twist like mathematical slime. Try it (Flash Player 10 required): JuliaTile.swf
Source code: julia_tile_src.zip. Pixel Bender code is in src/shader/.
The default image is Seattle's Space Needle. You can upload custom images. Very large images may set your processor on fire.
Tile engine is go!
- Move: Arrow keys, or WASD
- Shoot: Mouse button, or IJKL
Make sure you grab a weapon in room #2, so you can shoot the orcs. Currently, there are 9 rooms for romping.
Not one pixel of the art should be considered "final". Most sprites & tiles have a ColorMatrixFilter that "skins" them with four particular colors (see my post detailing this technique). In some respects, this is wonderful, as the colors can be randomized, and it's easy to change the palette of an entire room. Unfortunately, to maintain retro look & feel, I chose the Atari 2600 palette. The dark colors are over-saturated, the pastels are unexciting, and the hue distribution is completely wrong (nearly half the colors could be considered "green"). This will be dealt with.
An earlier screenshot shows some vector art. Unfortunately, the vectors currently require Flash 10. I've disabled this feature... for now.
Horacio without glitch effects
Due to factors beyond our control, FashionBuddha and myself have removed the "glitch" effects from horaciosalinas.net. It's sad, but these things do happen. It's still a great site.
You can see the glitch-enabled version here: http://www.fashionbuddha.com/horaciosalinas/
Reactions to Horacio Salinas
I'm talking about http://www.fashionbuddha.com/horaciosalinas/:
"The electrical static was very disturbing. I don't think it adds to the photography, but it did add to my anxiety about my own computer enough that I bailed even though I knew it was something on the site. HTH" -- Zani
(There is a glitchless version of the site at horaciosalinas.com.)
Also... They say imitation is the sincerest form of flattery, so I'm amused that yenisanat.net copied the site in its entirety (even the images!) but changed the copyright. I'm glad you appreciate our hard work, Yeni. I feel like I've finally arrived, ya know?
Real Time JPEG Corruption
Here's a new site that I worked on:
http://www.fashionbuddha.com/horaciosalinas/
The site seems typical at a first glance, until the glitches kick in... Then you're in for a treat. (You can adjust the glitch rate in the menu.) Here's how the effect works:
Understanding the ColorMatrixFilter class!
I haven't seen many people explore the ColorMatrixFilter class, probably because it appears daunting. I'm happy to report that I comprehend the mysteries of ColorMatrixFilter now, and I thought I'd share a technique we used in our new game, Space Kitty.
Before we jump into ColorMatrixFilter, let's ponder a different, and more commonly-used, class first: ColorTransform . Using a ColorTransform, you can "tint" any DisplayObject with color. But there's something sneaky you can do, as well -- Notice that ColorTransform gives you two parameters for each of the four color channels: Red, Green, Blue, and Alpha. One parameter is the "multiplier," which takes the input value and (predictably) multiplies this value by a constant. The other is the "offset," which works like addition: adding (or subtracting) another constant from the value. These two functions are applied to all four color channels of each individual pixel. That's how the magic works.