Topic: 20 Liners - January 08 - Dynamics (Page 2 of 4)

quote:

---

argo navis said:
The sine movement in yours shows - it's a bit too simple - the colors are ok though, I second poi on that.

---

Yeah, I know it's not realistic. My goal was to somewhat realistically resemble the flame of a candle not anything bigger. I looked at a few pictures and concluded that my flame should look like a stretched out oval, thinner at the top with a little bit of blue around the wick then some orange and a large area of bright yellow. But without wind or anything to influence it the flame would have been almost completely static and that just seemed boring so I added some swaying for effect.

Check my previous post that expresses clearly how much I value your work (end of page 1) Sincerely.

Now, I'll tone down my arrogance once again : you can do great things Arthurio, in fact you already do,
so in respect for that, I am just trying to point out areas of improvement - but the freedom to create what you want is yours,
and it's what makes your snippets shine - your own IDEAS.

Keep up the good stuff, please do. Now, in respect for other inmates, let's get back to the topic at hands, and please suprise all of us as much
and more in the times to come.

...Game ON! D-day minus 20...

argo navis: Ahh ... enough with the flattery I did read it. It's cool that you remember my Mandelbrot experiment.

poi: how does canvas compare to bmp generation performance wise?

For anything related to transformations, blitting, etc... Canvas is king.

For pixel based effects, BMP is better.

I haven't done any perfomance test of canvasContext.getImageData() and canvasContext.putImageDate() so Canvas might be the king of the hill. Also, notice that these 2 methods are only available in Fx2+, Op9.5b so far.

Kick ass, Arthurio. I like the effect, and I am duly impressed by the iterative improvement you have been displaying!

Thank you very much kind sir

However ...

*dramatic drum roll*

Here's probably the last and final iteration of my candle flame entry: Tadaa!

Completely reworked drawing functions. Added wick, background, sharp(ish) edges on flame and an improvised color gradient thingy for customization comfort .

Frame rate isn't much tho but you'll understand what's going on ... some things could be optimized but I don't think I wanna to get into that. I'm really proud and excited about how this one turned out.

edit ... hehe: should have listened to what poi is always suggesting (luts) ... first frames are slow as they are being generated but now it gets much smoother and faster after a while: Tadaa!

Here's another one that moves around much less: link

(Edited by Arthurio on 01-14-2008 23:39)

neat. I like when the flame gets a yellow tint.

poi: thanks ... btw ... looks like the calculation may easily take a lot more time than displaying the picture ... CPU load drops to 0 once the frames have been generated and stored in cache

Normal, once you've cached the images, the browser only has to do one redraw per frame. Redraws are very fast. What's slow is when the browser needs to reflow the document. In your case it shouldn't happen since you forced the resolution of the image in CSS. Anyway one or two reflows per frame is fine too. It's a shame the number of reflows and redraws is little exposed in browsers.


Lines 19 & 20 can be merged into something like:

var[9][++var[3]%60]=getElementById('image').src=var[9][var[3]%60]||getmage(var[3]%60);

Sorry I couldn't resist trying to save one line

thanks

I think you meant

document.getElementById("image").src = vars[9][Math.floor((vars[3]=(vars[3]+Math.PI/60)%(Math.PI*2))*60)] = vars[9][Math.floor(vars[3]*60)]||getImage()

anyway here it is: link

Mhhhyeah, good stuff. Colourful and well drawn, realistic. Thumbs up.

Side note : I suspect the Canvas pixel capabilities to be stunning on some browsers - because the model is very close to the model
of a graphic context in Java - thus, I know ways to tweak it in order to access the image source extremely fast.

Btw poi, where can I check your Canvas 3d snake? (OpenGL, am I correct?)

I know there are 2 more weeks to go but where are your entries poi and argo navis? :P I want to be inspired

have to find something to do first

Arthurio: nice flame, but it runs like molasses on my computer. I guess it's very processor intensive, and my processor ain't all that quick.

I love dropping by these threads and checking out the amazing things you guys do, even though most of it is beyond me.


___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup

Well yeah, the first 20-30 seconds or so it's basically loading but it gets a lot faster after that.

Canvas doesn't seem too bad for pixels, lookie, Some good examples of Canvas in action.

What browser/version are you using?

I have Firefox/2.0.0.11 here at work and I don't want to install anything unless it works for sure. FF3b is still way too buggy to work with.

It worked for me in OP9.5b ( or any weekly ), I assume it works in FF3b2.

Works a threat in Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.11) Gecko/20071127

Also known as FF 2.0.0.11

The guy gets 4 fps at 640 * 120.
Quick computation :
640 * 120 == 76800
And 128 * 128 == 16384

Ratio : 4.68 less pixels when rendered in a little square.
Makes for some 20 fps, and with a little scaling you get a 256*256 pixels animated image.

(Edited by argo navis on 01-17-2008 14:49)

Oh, glad to see it's in FF2!

That test is not really stressing the API. It fills the whole imageData with the same color. And since you have to individually set the RGB compoments, I'm not sure it's actually faster than the BMP approach where you can set them in one go.



(Edited by poi on 01-17-2008 17:46)

Hey guys,

Sorry I've been a bit of an absent judge - I've had a few v. important deadlines the last couple of weeks! Anyway, I like what I've seen so far but...I want to see more! :P

I'll be working on my entry soon, though maybe it won't be as tip-top as I expect yours all to be

Suho: I know, they're very funky care to try your hand? It's great fun, and all entries are welcome

quote:

---

poi said:

I'd say 3.

---

I'd say you should count only the lines that actually contain executable code. Neither the "try{" nor the "}catch(e){" part does anything in and of themselves. I don't think a "try{}catch(e){}" should count as two lines, since it doesn't affect the program at any point.

--
var Liorean = {
abode: "http://web-graphics.com/",
profile: "http://codingforums.com/member.php?u=5798"};

It completely does instead : it simply is a conditional operator like "for, if" and the likes - what's that to say? That if an else
section is never to be executed "just because", the content of the mentioned section should not count as part of the code.

quote:

---

It completely does instead : it simply is a conditional operator like "for, if" and the likes - what's that to say? That if an elsesection is never to be executed "just because", the content of the mentioned section should not count as part of the code.

---

Well, there's a slight difference there:

if(expr)
    stmt1;
else
     stmt2;

I'd say expr, stmt1, stmt2 are what counts. Count whatever code is actually executable. In

try{
    stmt1;
    stmt2;
}catch(e){
    stmt3;
}finally{
    stmt4;
}

I think stmt1, stmt2, stmt3, stmt4 are what counts, because they are what code is actually executable.


In short, no, a path that is not taken is still counted. However, a path counts for the number of executable things in that path, not for the peripheral syntax.




Another point, regarding poi's example:

/* A */    for( chainThat in {methodA:1,methodB:1} )
/*   */    {
/* B */        anObject.prototype[chainThat] = function( func )
/*   */        {
/* C */            return function()
/*   */            {
/* D */                return func.apply( this, arguments )||this;
/*   */            }
/* E */        }( anObject.prototype[chainThat] );
/*   */    }

The lines I think should count are:

1:    for( chainThat in {methodA:1,methodB:1} )
2:    anObject.prototype[chainThat] = function( func ) {...} ( anObject.prototype[chainThat] );
3:    return function() {...}
4:    return func.apply( this, arguments )||this;

because B and E are a declaration-application pair, in one single expression, that is not a list expression. To illustrate what I mean better, consider the line count if it was split out to a separate declaration. The line count for that should be exactly equivalent to the line count for this:

/*   */   function fn( func )
/*   */        {
/* C */            return function()
/*   */            {
/* D */                return func.apply( this, arguments )||this;
/*   */            }
/*   */        }

/* A */    for( chainThat in {methodA:1,methodB:1} )
/*   */    {
/* B */        anObject.prototype[chainThat] =
/* E */            fn( anObject.prototype[chainThat] );
/*   */    }

But then again, I've not participated in a 20 liner yet, so count my opinion for what that's worth to you...

--
var Liorean = {
abode: "http://liorean.web-graphics.com/",
profile: "http://codingforums.com/member.php?u=5798"};

(Edited by liorean on 01-22-2008 23:57)

I personally wouldn't even challenge it if it wasn't worth it.

I have no "direction right" over anything - who gives a damn what is worth to ME only on this one?
I do care about what is worth to the crowd - remembering achievements by poi and yourself,
I am willing to "accept" your understanding of javascript - not blindly, just lending special attention to it.

But we're a crowd, if not a "team" of ubber-js-geeks : I propose we open another thread to evaluate the rules of 20 liners
and discuss it wildly (just for the sake of separating topics).

yup having more discussions in DHTML/Javascript would be a good idea.

liorean perfect illustration of what I had in mind for the methods chainer.

Made a little gadget. Not much visually.

Walking sim
Walking sim (curve drawing functions uncommented)

Curves represent how much the joints are flexing (red leg).

I guess there may be better ways for doing it but this is what I managed to come up with.'

edit: Walking sim moving (with curves) ... looks a little stiff ... hmm...

(Edited by Arthurio on 01-26-2008 23:03)

mmmm ... interesting 3D effect

Good stuff all the way. The 3d effects reminds me of some "sunflower" OpenGL app I have made, which I may make public or not.
Long story made short : if you download the pixeltoaster library examples, you'll see it's possible to produce really nice 3d "flowers"
using cubes or other polygons and "color addition" (adding r g b components of two images and clipping the result to 0-255 boundaries).

(basically, with two or more wireframe, rotating color cubes, if you use color addition, you'll get a nice "trace" that totally makes it look
like a flower).

I've used color addition on www.beyondwonderland.com/old
On the black layout, homepage, "galaxy" applet. If you click the applet and press "m", you'll see color substraction in action (and s shows the sprites used,
i toggles the ini sig on/off).

It's time for some

Dynamic Hypnoglow



Firebug reports a very useful error An invalid or illegal string was specified " code: " 12. So until I can make sense of that, I'm afraid, you'll have to check this 20 liner in Opera 9.5




(Edited by poi on 01-27-2008 22:21)

And probably not in Opera 9.2, it works strangely for me in that browser (it's not as smooth as in your screencap, gets a bit crippled).

Looking forward to the smooooothe version!

Wow

That looks really cool ... and pretty fast too.

( (788-j*287)%1337 )

live and learn ... I didn't know there were such things as "globalCompositeOperation"

works only with opera 9.50b ... displays some strange shapes and dark areas in opera 9.25

"invalid or illegal string was specified"
I've seen a lot of that with NaN ...

poi: It works in my Firefox 3.0 Alpha (assuming what it displays is correct - it looks close to your screencap ^_^) It doesn't however work in safari (expected :P). Just a couple of things:

1) 'descent' =/= 'decent' :P
2) I'm not too familiar with Canvases as I've mentioned before but...I assume there's no gross manipulations of the rules here? :P
3) The curves don't seem to vary in a very obvious way with the mouse (non-locally) - is this deliberate?
4) I missed the image call on my first run through the code...I was trying to work out how the javascript could possibly produce those words (I now feel adequately silly!)

It is a fun script though!

Who else are we going to see scripts from? I'm hoping to get a nice little one done soon (just inside the deadline if I flog myself...), but nothing too serious, hopefully there'll be something more fun from me next month!

Liorean? Argo? :P

Wrayal

[edit] On a separate note, how do the inmate rankings work? Do I need extra shock therapy to rank up from III to IV? :P[/edit]



(Edited by wrayal on 01-27-2008 22:41)

ahh yes ... works with my ff3 too ... almost the same as in opera 9.50b but there's some glow on the bottom of the canvas and the image looks much smoother (better) ... same thing that happens in ff and opera with embedded images only in reverse ... pixelated in opera, smooth in firefox

wrayal: the advancements are random :P (gets less probable every time) specially designed to fit in to this crazy place

Oh nice about Firefox 3. I tried a previous ( aka broken ) version of my script without success in it and only tried in Firefox 2 since then.

The Canvas implementation in Safari is a bit behind that of FF3 and Op9.5


1) damn I always mix the two
2) well, Canvas' methods are not chainable normally, but I make them so to gain a few lines. Abuse or not, you guys decide
3) decreased the influence of the mouse to a point where humans can understand it how it works
4)

Thanks.

I see...nice, I'd been looking at the chaining mechanism. Also prefer the new mechanism for the mouse - makes it give fewer super-erratic oscillations for me.

Also, I was thinking about grossly rule-abusive mechanisms, when I remembered this: http://en.wikipedia.org/wiki/Tupper%27s_self-referential_formula - wonder if any future deliberate rule-abuse attempts might take some inspiration?

The foreground ribbon changes colour with time and mouse position now. It give some shiny multicolour bleeding.

poi: to get it working with ff2 you just need to edit line 09:

/* 09 */ for( var j=0; j<3?(ctxL.fillStyle = (['#165','#457','rgb('+ Math.round(24+(window.sY||0)/19+34*Math.cos(j+now/8192+(window.sX||0)/92))+','+ Math.round(16+20*Math.cos(j+2+now/7192+(window.sy||0)/71))+','+ Math.round(32+24*Math.cos(j+4+now/5192+(window.sX||0)/87))+')'])[j]):false; j++ )

notice the "j<3?(" and "):false"

Still it looks much worse in ff2.

(Edited by Arthurio on 01-28-2008 10:20)

Oh, thanks!

Unfortunately the "fix" also makes the code less generic. To change the number of ribbons and their color, one must now alter the array and the exit condition. Will fall back to that fix if I can't figure another way.

did not expect FF2 to violate the specification of such a simple property.

quote:

---

If the value is a string but is not a valid color, or is neither a string, a CanvasGradient, nor a CanvasPattern, then it must be ignored, and the attribute must retain its previous value.

---

WHAT WG : Canvas, fillStyle

quote:

---

poi said:
Unfortunately the "fix" also makes the code less generic. To change the number of ribbons and their color, one must now alter the array and the exit condition.

---

You can replace the '3' with yourArray.length but right now the array isn't dynamic anyway so I don't see the problem :P

Also ... in case of

([1,2,1+2])[3]

I think the 1+2 may get evaluated, no?

(Edited by Arthurio on 01-28-2008 14:57)