Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Notch trying jsFiddle

jsfiddle.net

Post reply on HN
Print view View original

51–60 of 143 posts

Re: Notch trying jsFiddle

#51

Post by undergroundhero »

scottyallen wrote: post #12

This would be a great demo to see running in a responsive programming environment, ala Bret Victor's amazing Inventing on Principle talk ( http://vimeo.com/36579366 ). I want to be able to click on hex values and get a color picker that updates the demo in realtime, and be able to click on various magic numbers and drag a slider to change them. Incidentally, Bret Victor's talk was the starting point for Khan Academy'…

Thanks for the livecoding link. I assume there's some overhead in constantly checking for and applying code changes - that's probably the reason for the lower frame rate.

Re: Notch trying jsFiddle

#52

Post by scottyallen »

undergroundhero wrote: post #51
scottyallen wrote: post #12

This would be a great demo to see running in a responsive programming environment, ala Bret Victor's amazing Inventing on Principle talk ( http://vimeo.com/36579366 ). I want to be able to click on hex values and get a color picker that updates the demo in realtime, and be able to click on various magic numbers and drag a slider to change them. Incidentally, Bret Victor's talk was the starting point for Khan Academy'…

Thanks for the livecoding link. I assume there's some overhead in constantly checking for and applying code changes - that's probably the reason for the lower frame rate.

Good point, I hadn't thought about the fact they might be polling for changes. Might be better if livecoding used an event based model to check for updates...

Re: Notch trying jsFiddle

#54

Post by cgcardona »

antirez wrote: post #23
JoeCortopassi wrote: post #21

Such a great example of what can be done in javascript/canvas. As it is, I was completely blown away by how little code it actually took to do that. My only gripe would be, why couldn't he have used descriptive variable names, so I can better go through and understand it? :-)

This code uses zero canvas / javascript specific functions. It is using basic trigonometric functions and is using canvas only to write RGB pixels. Canvas are much more powerful and high level than that, but this is not a good example as Notch just needed to set pixels.

Aren't the following canvas/javascript specific?

ctx = document.getElementById('game').getContext('2d');

pixels = ctx.createImageData(w, h);

ctx.putImageData(pixels, 0, 0);

EDIT: Thanks for the clarification!

Re: Notch trying jsFiddle

#55

Post by kevingadd »

JungleGymSam wrote: post #34

Why is the framerate poor even when I shrink the viewing area down 10x10? It seems to have the same stutter as the original large view. Is it because it's doing the same calculations but just showing fewer pixels?

Part of the reason it's slow is that it doesn't use typed arrays. This may be much faster for you: http://jsfiddle.net/uzMPU/1573/

Re: Notch trying jsFiddle

#56

Post by albertzeyer »

arriu wrote: post #50

I enjoy that everything is procedural generated. The software rasterizing is pretty cool too. I don't mind that he uses short variable names, sometimes it's nice to have multiple lines line up perfectly. But this is just silly... for ( var x = 0; x

Can you explain why?

Re: Notch trying jsFiddle

#57

Post by gavanwoolery »

Very cool, but a few notes to anyone getting their hopes up on the powers of Canvas:

As you may have anticipated, this demo runs at less than 1 frame per second on my Nexus 7. :/

In terms of per-pixel manipulation of a Canvas, it is very slow, even with javascript's (not very well supported) typed arrays. Simply put, multidimensional loops (unrolled or not) will always kill performance in JS with any significant dimensions. I learned this the hard way by trying to write a pixel-based GUI, and even that (with some crazy optimizations) could not render fast enough for all devices. If you are just doing blits, Canvas works very well (especially since this operation often uses the GPU).

For now, I think the best option is still WebGL, even though it is not widely supported yet, mobile devices are beginning to pick it up (Blackberry, for example).

Re: Notch trying jsFiddle

#58

Post by codeka »

albertzeyer wrote: post #56
arriu wrote: post #50

I enjoy that everything is procedural generated. The software rasterizing is pretty cool too. I don't mind that he uses short variable names, sometimes it's nice to have multiple lines line up perfectly. But this is just silly... for ( var x = 0; x

Can you explain why?

I assume because there's four different "xd" variables differing only in the number of underscores prefixed ("xd", "_xd", "__xd" and "___xd"). (Same for "yd" and "zd").

Re: Notch trying jsFiddle

#59

Post by arriu »

albertzeyer wrote: post #56
arriu wrote: post #50

I enjoy that everything is procedural generated. The software rasterizing is pretty cool too. I don't mind that he uses short variable names, sometimes it's nice to have multiple lines line up perfectly. But this is just silly... for ( var x = 0; x

Can you explain why?

I don't enjoy comparing the length of relatively similar lines. Why not use xa, xb, xc, etc... instead of xd, _xd, __xd, ___xd, yd, _yd, __yd, ___yd, zd, _zd, __zd, ___zd?

Re: Notch trying jsFiddle

#60

Post by toksaitov »

cgcardona wrote: post #54
antirez wrote: post #23

Earlier quoted context omitted.

This code uses zero canvas / javascript specific functions. It is using basic trigonometric functions and is using canvas only to write RGB pixels. Canvas are much more powerful and high level than that, but this is not a good example as Notch just needed to set pixels.

Aren't the following canvas/javascript specific? ctx = document.getElementById('game').getContext('2d'); pixels = ctx.createImageData(w, h); ctx.putImageData(pixels, 0, 0); EDIT: Thanks for the clarification!

I think the point was that this code can work in any environment where you can write to specific pixels (without magic WebGL transformation/rasterization operations or complex Canvas drawing routines).
Post reply on HN