PDA

View Full Version : 256 Byte Starfield


pixelwit
03-14-2007, 02:29 PM
You may have seen a 256 byte JavaScript StarField effect (http://www.p01.org/releases/Demoscene/files/starfield_256b_javascript.htm) being discussed on Digg (http://digg.com/programming/Think_you_write_efficient_JS_How_about_a_starfield _effect_in_256_bytes) .

When I first saw it, I was certain I could achieve an equally small and nearly identical effect with ActionScript, but now I'm not so sure. There are 3 parts to this challenge.

First, replicate the effect with ActionScript alone, this is good practice for the newbies.

Second, condense the text used in your code to a "TXT" or "AS" file no greater than 256 bytes in size.

Third, compile your script to a SWF file smaller than 256 bytes.

As an example, the following code compiles to a 376 byte SWF file (use 550x400, black background and 32 FPS).//
i=0;
_x=275;
_y=200;
m=Math;
onEnterFrame=function(){
c=createEmptyMovieClip("c"+i,++i);
c.lineStyle(2,0xFFFFFF);
c.lineTo(1,0);
c._alpha=0;
c.d=1;
c.r=m.random()*m.PI*2;
c.onEnterFrame=function(){
with(this){
d*=1.1;
if(d>300)removeMovieClip();
_alpha=d/2;
_x=m.cos(r)*d;
_y=m.sin(r)*d;
}
}
}
//

The above code with white space removed looks like the following and creates a 273 byte TXT or AS file:i=0;_x=275;_y=200;m=Math;onEnterFrame=functio n(){c=createEmptyMovieClip("c"+i,++i);c.lineStyle(2,0xFFFFFF);c.lineTo(1,0);c._a lpha=0;c.d=1;c.r=m.random()*m.PI*2;c.onEnterFrame= function(){with(this){d*=1.1;if(d>300)removeMovieClip();_alpha=d/2;_x=m.cos(r)*d;_y=m.sin(r)*d;}}}

Do you think you can trim 17 bytes off the above code? Maybe you can come up with an entirely different way to code a starfield?

Good luck and happy Flashing.

-PiXELWiT
http://www.pixelwit.com

darkzak
03-15-2007, 12:40 AM
Interesting challenge :)

First of all here is your code shortened to 236 bytes (when whitespace is removed):

i=0;
_y=_x=200;
m=Math;
onEnterFrame=function(){
c=createEmptyMovieClip(i,++i%300);
c.lineStyle(2,0xFFFFFF);
c.lineTo(1,0);
c._alpha=0;
c.d=1;
c.r=m.random()*6;
c.onEnterFrame=function(){
with(this){
d*=1.1;
_alpha=d/2;
_x=m.cos(r)*d;
_y=m.sin(r)*d
}
}
}


and the compressed version:

i=0;_y=_x=200;m=Math;onEnterFrame=function(){c=cre ateEmptyMovieClip(i,++i%300);c.lineStyle(2,0xFFFFF F);c.lineTo(1,0);c._alpha=0;c.d=1;c.r=m.random()*6 ;c.onEnterFrame=function(){with(this){d*=1.1;_alph a=d/2;_x=m.cos(r)*d;_y=m.sin(r)*d}}}


The .swf version is now 344 bytes.

Here are the changes I made:
1. Most of the bytes were saved by not removing the movieclips when d > 300. Instead the movieclips are written over by creating new mcs at the same depth.

2. set root _y = _x instead of different values.

3. Instead of using Math.PI*2 just rounded to 6

pixelwit
03-15-2007, 01:05 AM
Nice.

Overwriting the clips sounds like a good idea, as long as it doesn't create a memory issues I'm all for it. I really like the ++% bit. I've always been a fan of both ++ and % but never thought to combine them as such.

I considered setting _x and _y to the same coordinates but a square screen varies a bit from the JavaScript original. I'd hoped to post a link directly to a SWF file (not embedded in a HTML page) which would load in the browser and replicate the JS effect as closely as possible. I'm willing to make concessions though. :)

6 is nowhere near 6.28318530717959! :o Good thinking. If you're going to use an integer, you could get away with using random(7) rather than m.random()*6. (EDIT: Oops, never mind, that only returns integers.)

Looks like getting a 256B SWF is going to be a real tough one to crack.

Thanks for taking up the challenge.

-PiXELWiT
http://www.pixelwit.com

iamp01
04-02-2007, 07:43 PM
Hello,

I wrote the above ( or is it below ? ) mentionned 256b 3D Starfield in JavaScript.

It's nice to see some ActionScript'ers giving a try at hardcore size optimization.

The only ActionScript I made was a tiny ( ~170bytes ) mp3 player for JavaScript were I passed the URL of the music in GET and had a method to start/stop the replay once a variable exposed to JavaSscript was set. All this was done using a Flash 8 assembler/disassembler. Is there any more practical tool ... and free. ActionScript 3 look really interresting.

If ever 256b is not challenging enough, I shrinked the 3D Starfield effect to 209 bytes (http://www.p01.org/releases/Demoscene/#starfield_256b_javascript) ( and even 207b but it doesn't look as good ), and also made a 256b Mandelbrot rotozoom in JavaScript. (http://www.p01.org/releases/Demoscene/#mandelbrot_rotozoom_256b_javascript)


Happy optimization ;)

darkzak
04-06-2007, 04:14 PM
Is there any more practical tool ... and free. ActionScript 3 look really interresting.


I use Flashdevelop for Actionscript projects, it can be setup to compile AS3:
http://www.flashdevelop.org/community/

I think the flash code for just opening a movie is too much overhead to make a 256byte swf but it is a challenge trying. :p

iamp01
04-06-2007, 05:02 PM
Thanks for hint.

There's a couple of Flash entries in the 256b.htm contests (http://wildmag.de/compo/). But that was probably Flash 7 or less at the time.

monsieurfil
04-09-2007, 08:59 AM
160 bytes, using the same math trick as in the JS starfield ;)
_x=_y=k=200
c=Math.cos
onEnterFrame=function(){
clear()
for(i=0;i<65;){
z=2000/(73-(++i+k++&63))
lineStyle(2,-1,z-20)
moveTo(x=z*c(i*.9),y=z*c(i))
lineTo(x+1,y)
}
}

pixelwit
04-10-2007, 11:57 PM
Hey, it's good to see there's still some interest in this.

Hi P01, glad you could stop by to see the challenge which you helped inspire. The ASCII Mandelbrot is pretty neat too.

Nice adaptation of the JS code Monsieurfil. I might have tried the same but I wasn't comfortable using code I didn't fully understand. I'm guessing 63 is related to PI, but other than that I'm at a loss.

I'm not sure if anyone will be able to get the SWF file size down to 256 bytes, but Monsieurfil's code compiles to a 315 byte SWF and that's as close as anyone has come so far.

-PiXELWIT
http://www.pixelwit.com

monsieurfil
04-14-2007, 11:40 AM
The JS code is a pretty clever mathematical trick wich has nothing to do with PI (and I can't pretend I got it fully).

I think that getting under 256bytes will require to manually optimize the SWF binary - I'll try that :)

Assertnfailure
04-17-2007, 07:49 AM
Ah interesting.....never saw something written like that.....

the &63 in (++i+k++&63) is a bitwise AND evaluation between the left side and 63. The significance of 63 is that its one less than 64 (2^6). This becomes 111111 in binary...which means it always satisfies the evaluation of the first 6 binary digits, and none after that. Basically this results in a loop effect of the value being returned.

It could have just as easily been written as (++i+k++%64)

jsonchiu
04-21-2007, 06:21 PM
Well, by strongly typing local variables, you can loose another 7 bytes
Weird, isn't it?

308 bytes...
_x=_y=k=200
c=Math.cos
onEnterFrame=function(){
clear()
for(var i:Number=0;i<65;i++){
var z:Number=2000/(73-(++i+k++&63))
lineStyle(2,-1,z-20)
var x:Number=z*c(i*.9)
var y:Number=z*c(i)
moveTo(x, y)
lineTo(x+1,y)
}
}

jsonchiu
06-11-2007, 06:15 AM
*bump*

Is there any way to shrink that code?

How about optimizing swf binary?

Maybe the __byteCode__ hack will work?

fauzira
06-12-2007, 11:25 AM
Hehe.. just wondering if it can lower than 256 swf files.. but I just got 315 swf files

i=1
_y=200
_x=200
onEnterFrame=function(){
c=createEmptyMovieClip(i, ++i)
c.lineStyle(2,0xFFFFFF)
c.lineTo(1,1)
c._alpha=1
c.d=1
c.r=Math.random()*6
c.onEnterFrame=function(){
with(this){
d=d*1.1;
_alpha=d;
_x=Math.cos(r)*d;
_y=Math.sin(r)*d;
}
}
}

jsonchiu
06-14-2007, 04:36 AM
read my post.
I shrunk the 315 bytes to 308 bytes by some flash "hacks." I recommend that you strongly type local variables, as somehow the AS2.0 compiler will make the file smaller that way.

mattkenefick
07-06-2007, 08:10 PM
This one is 293B.. I'm gonna keep working. I got it to 282 but it wasn't as nice.


onEnterFrame= function(){
i=getTimer()
var c=createEmptyMovieClip(i,i)
c.lineStyle(2,0xFFFFFF)
c.lineTo(1,1)
c._alpha=1
c.d=1

c.r=Math.random()*i
c.onEnterFrame=function(){
this.d*=1.1;

this._alpha=this.d;
this._x=200+Math.cos(this.r)*this.d;
this._y=200+Math.sin(this.r)*this.d;
}
}

mattkenefick
07-06-2007, 08:11 PM
read my post.
I shrunk the 315 bytes to 308 bytes by some flash "hacks." I recommend that you strongly type local variables, as somehow the AS2.0 compiler will make the file smaller that way.

If you combine variables, the compiler has to go back and see what the other variable was.
If you just say

_x=200
_y=200, it reads it just like that..

if you do

_x=_y=200..

Its like ok.. _y=200.. no x has to equal y, what was y? oh y is 200..

mattkenefick
07-06-2007, 08:21 PM
Heres a 288 B. . Getting there..


onEnterFrame = function(){
var i=getTimer();
var c=createEmptyMovieClip(i,i);

c.lineStyle(2,0xFFFFFF);
c.lineTo(1,1);
c.d=1;

var r=Math.random()*i
c.onEnterFrame=function(){
this.d*=1.1;

this._alpha=this.d;
//commenting out the alpha makes it 277b

this._x=200+Math.cos(r)*this.d;
this._y=200+Math.sin(r)*this.d;
}
}



TXT file of this is 263 kb

3pepe3
07-11-2007, 05:27 AM
Ah interesting.....never saw something written like that.....

the &63 in (++i+k++&63) is a bitwise AND evaluation between the left side and 63. The significance of 63 is that its one less than 64 (2^6). This becomes 111111 in binary...which means it always satisfies the evaluation of the first 6 binary digits, and none after that. Basically this results in a loop effect of the value being returned.

It could have just as easily been written as (++i+k++%64)

Me neithere. This is compleatly new for me.
And your explanaitoin is right.
now i have talked with my younger brother :( and he explained to me that this kind of construction is named: Ortogonality (ortogonalidad in spanish).
And this means that (if i correctly get the idea) the variable, function of object has the ability to have some extra values and operations (functions, loops, etc) "on the fly".
for example here the z is geting the value from :
the total of the K+the increment of i and then if the binary value of ++i+k is bigger than 63 the value of ++i+k is restarted to 000000. And then a normal mathematical operation.

What it's important to understand is that k is never, ever again had a value of 200 (original value) or lower and k is going to increment his value 63 (in this case) times each frame.
Well i like this kind of constuction i will try to use it more often.

Flash Gordon
07-11-2007, 06:07 AM
anybody try different version of Actionscript to get the file size down?

I get the lightest file size exported for FP7 as 1.0 and making the stage smaller.

mattkenefick
07-11-2007, 07:15 AM
Mine comes out to 283 if I do F7 AS2

jsonchiu
08-29-2007, 07:45 PM
272 Bytes. FP7 AS2

If we ditch the alpha, we get 262 Bytes. Anybody squeezing 6 bytes out of that?

I use random() instead of Math.random(). Visually it makes no difference.

onEnterFrame = function(){
var i=getTimer();
var c=createEmptyMovieClip(i,i);

c.lineStyle(2,-1);
c.lineTo(1,1);
c.d=1;

var r=random(i)
c.onEnterFrame=function(){
this.d*=1.1;

this._alpha=this.d;
//commenting out the alpha makes it 262b

this._x=200+Math.cos(r)*this.d;
this._y=200+Math.sin(r)*this.d;
}
}


EDIT: I got 253 Bytes by changing "this.d*=1.1" to "this.d*=2" and deleting the alpha part. However, the result looks bad
EDIT: I got 258 Bytes by changing "this.d*=1.1" to "this.d*=1.5" and delete the alpha. It looks a little bit better.

It looks like we are really close to 256B starfield!

pixelwit
09-08-2007, 03:17 AM
258 bytes after some minor adjustments.

//
//
onEnterFrame = function () {
var c = createEmptyMovieClip(getTimer(),getTimer());
c.lineStyle(2, -1);
c.lineTo(1, 1);
c.d = 1;
var r = random(getTimer());
c.onEnterFrame = function() {
c.d *= 9/8;
c._alpha = c.d;
c._x = 200 + Math.cos(r) * c.d;
c._y = 200 + Math.sin(r) * c.d;
}
}
//
//

orange gold
09-12-2007, 10:01 PM
i think its like 257 if you take out the ;'s

Greg SS
12-12-2007, 09:52 PM
AS 2.0 compiled for flash player 7

stage size: 512 x 512
result: 244b *ding!*
Secret:

take out the Math class.
try to make all number a multiple of power of 2.
Sometime, small just ain't pretty.




onEnterFrame = function () {
c = createEmptyMovieClip(getTimer(),getTimer());
c.lineStyle(3, -1);
c.lineTo(1, 1);
c.a = (random(64)-32);
c.b = (random(64)-32);
c._x = 256;
c._y = 256;
c._alpha = 4;
c.onEnterFrame = function() {
this._alpha *= 2;
this._x += this.a;
this._y += this.b;
}
}

CmndrDemolition
11-30-2008, 08:09 PM
However, is it possible to make the starfield so it is on a certain layer and something on a layer above it doesn't have stars on it?

orange gold
12-24-2008, 11:46 PM
try replacing mutliply used long commands with one letter variables...

ex.
d = getTimer()
then you can just say (d,d)

heres a quick one a whipped up. tell me if it works

onEnterFrame = function () {
d = getTimer()
c = createEmptyMovieClip(d,d)
c.lineStyle(3, -1)
c.lineTo(1, 1)
c.a = (random(64)-32)
c.b = (random(64)-32)
c._x = 256
c._y = 256
c._alpha = 4
c.onEnterFrame = function() {
e = this
e._alpha *= 2
e._x += e.a
e._y += e.b
}
}

ljuwaidah
12-26-2008, 04:43 PM
Sorry to ruin the fun... I know you guys are enjoying this but I never really got the point behind making small codes, I mean computers today are faster than ever, and in today's measures, a byte doesn't mean anything.

I understand that you're doing it for the challenge of it but... Could anyone please give me practical uses of such codes? I'm open to the idea, I might even join you if you give me good reasons :)

Thanks.

CyanBlue
12-26-2008, 05:13 PM
Howdy and Welcome... :)

Well... I think this sort of challenge is like who can optimize the code better kind of battle... I think that is practical in a sense where you can further apply what you are doing in here to your real life project...

Of course, it could be seen the same as who's more macho kinda of battle which in part is true but it mainly is to see how other people can really twist their brain to come up with something other people have not thought of... ;)

pixelwit
12-28-2008, 04:15 AM
ljuwaidah, apparently you see the value of writing code within artificial constraints (such as writing a 60 line function to replace the divide operator (http://www.actionscript.org/forums/showthread.php3?t=189172)) yet you don't understand the value of writing code within more realistic constraints such as keeping file size to a minimum? Sounds like you're trolling for trouble or perhaps you're upset that your challenge didn't get enough attention.

The point of this challenge is the same as yours, to teach and to learn.

-PiXELWiT
http://www.pixelwit.com

orange gold
12-28-2008, 05:15 AM
once again.. didnt have time to test it but it should work.. i think


onEnterFrame = function () {
d = getTimer()
c = createEmptyMovieClip(d,d)
c.lineStyle(3, -1)
c.lineTo(1, 1)
c.a = (random(64)-32)
c.b = (random(64)-32)
c._x = c._y = 256
c._alpha = 4
c.onEnterFrame = function() {
e = this
e._alpha *= 2
e._x += e.a
e._y += e.b
}
}


i changed

c._x = 256
c._y = 256

to

c._x = c._y = 256

let me know if it works! ~OG

also just another thought... maybe if you take out all of the tabs?
so code reads like this

blah() {
blah._blah = blah
blah
}

instead of

blah() {
blah._blah = blah
blah
}

maybe it will take out bytes for tab space being taken away
just a thought...
good luck guys
~og

ljuwaidah
12-29-2008, 10:59 AM
Hey! I'm not upset that my challenge didn't get enough attention, it's not like i'm gaining money if it did!

The only thing is that I have something against using the size of code as a measurement in anyway. Smaller code might take less space but generates larger binaries, smaller binaries might take less space but are less efficient with resources.

The only exception to this is interpreted languages (like JavaScript).

I'll post my attempt soon, though :)

CyanBlue
12-29-2008, 01:11 PM
Smaller code might take less space but generates larger binaries, smaller binaries might take less space but are less efficient with resources.
Hm... That's very interesting argument... Can you explain more on this or provide any link that talks about it??? Thanks... :)

orange gold
12-29-2008, 02:39 PM
Hey! I'm not upset that my challenge didn't get enough attention, it's not like i'm gaining money if it did!

The only thing is that I have something against using the size of code as a measurement in anyway. Smaller code might take less space but generates larger binaries, smaller binaries might take less space but are less efficient with resources.

The only exception to this is interpreted languages (like JavaScript).

I'll post my attempt soon, though :)
the whole point of this contest is just to push our limits to the max... its a just for fun thing to see if we can do it or not. wether you want to participate or not thats not up to me, but i don ot see any reason why your arguing that its inefficient we all know that there is no "real" point to making code smaller except to make everything easier to read and edit... everyone here is just doing this for fun, wether you argue or not we will keep participating in this contest so i do not really see your point for arguing anymore....

ljuwaidah
12-29-2008, 06:00 PM
CyanBlue: I don't really have any sources for that, if you think about it you'll just figure it out :)

Orange Gold:Hey wow wow! Don't get mad at me! I didn't mean to do any harm or discourage anyone here, I just wanted to say what I think, hoping someone will tell me something I'm missing but since that didn't quite happen, as I said in my previous post, I decided to give it a shot and see if I'll enjoy it or not.

Just so you'll be happy i won't argue about it anymore :)

CyanBlue
12-29-2008, 06:36 PM
Um... I would not have asked if I were able to figure out why smaller code will generate larger machine code... I'd only think that smaller code will result in smaller machine code, which sounds more logical to me...

orange gold
12-29-2008, 06:40 PM
i wasnt mad.. just in a debating mood xD

ljuwaidah
12-29-2008, 08:52 PM
CyanBlue: Because sometimes when you try to make code smaller you use bad programming habits and techniques that you usually don't, I'll experiment with that and get back to you, this is a challenge I like!
Orange Gold: Can we resume it then? ;)

CyanBlue
12-29-2008, 09:19 PM
Sounds good... Looking forward to hear more about it...

Flash Gordon
12-30-2008, 03:01 AM
I've read in AS2 shorter variable names increase the spend of performance (which I assume relates to byte code). However, in AS3 the length of a variable name has no effect anymore.

infernosnow
12-20-2012, 04:11 AM
I know this thread is ancient, but I was wondering if any of you were interested in making an Actionscript 3.0 version of this. It just so happens that I was needing a starfield effect for an animation I was doing and remembered this topic from long ago, but it looks like all of these examples are in 2.0.

I tried to translate a few of the examples over to 3.0 but I'm having trouble with it. In the meantime I'm probably just going to try to make my own (although it won't be nearly as small as these examples). Thought I'd see if there was any interest in this though because this is one of my favorite challenges actionscript.org has had (and is why I remembered to look here in the first place).

Barna Biro
12-20-2012, 07:47 AM
I know this thread is ancient, but I was wondering if any of you were interested in making an Actionscript 3.0 version of this. It just so happens that I was needing a starfield effect for an animation I was doing and remembered this topic from long ago, but it looks like all of these examples are in 2.0.

I tried to translate a few of the examples over to 3.0 but I'm having trouble with it. In the meantime I'm probably just going to try to make my own (although it won't be nearly as small as these examples). Thought I'd see if there was any interest in this though because this is one of my favorite challenges actionscript.org has had (and is why I remembered to look here in the first place).

Translated one of the solutions for you ( it's a bit rough, but it works ):

package
{
import flash.display.Shape;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;

[SWF(width="480", height="320", frameRate="24", backgroundColor="#000000")]
public class StarfieldExample extends Sprite
{
private var _startField:Shape;
private var _randomX:Number = 0.0;
private var _randomY:Number = 0.0;
private var _k:Number = 0.0;

public function StarfieldExample()
{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.showDefaultContextMenu = false;

// Create the container that will hold the
// generated stars ( easier to position the field this way )
_startField = new Shape();
_startField.x = stage.stageWidth * 0.5;
_startField.y = stage.stageHeight * 0.5;
_startField.rotation = 90;
addChild(_startField);

// Start listening for the ENTER_FRAME event
addEventListener(Event.ENTER_FRAME, handleEnterFrame);
}

private function handleEnterFrame(event:Event):void
{
_startField.graphics.clear();

for (var i:uint = 1; i <= 65; i++)
{
var random:Number = 2000 / (73 - (i + _k++ & 63));
_randomX = random * Math.cos(i * 0.9);
_randomY = random * Math.cos(i);

_startField.graphics.lineStyle(1.0, 0xFFFFFF, random - 20);
_startField.graphics.moveTo(_randomX, _randomY);
_startField.graphics.lineTo(_randomX + 1, _randomY);
_startField.graphics.endFill();
}
}
}
}

sajidtoor
12-29-2012, 03:18 AM
Thanks for sharing.:)