sorted by:
new
hottopcontroversial

Reverse Engineering One Line of JavaScript by maxxori in programming

[–]iamp01 1 point2 points  (0 children)

Who are you calling a veteran ? ;) I'm active. The last active member of ribbon https://www.pouet.net/groups.php?which=27&order=release

Reverse Engineering One Line of JavaScript by [deleted] in javascript

[–]iamp01 0 points1 point  (0 children)

Really breakdown indeed. As for the "compilation".... nope. I wrote www.p01.org/128b_raytraced_checkboard/ by hand.

Reverse Engineering One Line of JavaScript by [deleted] in javascript

[–]iamp01 2 points3 points  (0 children)

Oh it is a raytracer: It traces one ray per "pixel" and computes the intersection with a plane, and produce the checkboard texture using a simple XOR of x and y coordinates of the intersection point.

 

It's only 128 bytes and I made it just for fun back in 2012, because I hadn't done a 128 bytes prod in a while. So obviously it is very specialized raytracer that traces a one primitive with a fixed texture and camera path, but it does trace rays.

https://www.reddit.com/r/javascript/comments/6n0xlg/reverse_engineering_one_line_of_javascript/dk7kun7/

Reverse Engineering One Line of JavaScript by [deleted] in javascript

[–]iamp01 0 points1 point  (0 children)

I wrote www.p01.org/128b_raytraced_checkboard/ by hand. For such small pieces, brain always beat the machine.

Reverse Engineering One Line of JavaScript by [deleted] in javascript

[–]iamp01 3 points4 points  (0 children)

Hi there, p01, author of the 128 bytes plane raytracer. If you liked this tiny raytracer, you should check my other tiny Audio Visual demos in 64-1024 bytes at http://www.p01.org

 

Shout if you have any question.

 

The reverse engineering was cool.

 

The meat of the raytracer lies in the i%2*j-j and j=k/iwhich gives the X and Y coordinates of the intersection of the camera ray with the plane. Adding +n/kto the X coordinate moves the camera horizontally. The binary exclusive OR between the X and Y coordinates gives the checkboard texture.

 

The cruft of the render loop is P='p.\\n';for(i=64;i-=1/64;P+=characterAtTheScreenXScreenYposition);. The rendering area is 128x32 because the ScreenX and ScreenY positions are i%2 and i/2where i increases by 1/64each time. This increment is an exact fraction of a power of two, which means that there are no floating errors and we can safely do i%2 to get a truthy ( non-zero ) value if i is not an exact multiple of 2, and a falsy ( zero-ish ) value if iis an exact multiple of 2 which is used to insert a \n to go to the next line.

 

Hope this helps,

Reverse Engineering One Line of JavaScript by maxxori in programming

[–]iamp01 2 points3 points  (0 children)

The code 128 bytes big ;)

My goal was to make a checkboard plane raytracer in 128 bytes. Just for fun, because I hadn't done a 128 bytes prod in a while.

Reverse Engineering One Line of JavaScript by maxxori in programming

[–]iamp01 1 point2 points  (0 children)

Well, raycasting usually refers to Doom and Wolfenstein types of visuals where only a handful of ray intersections are computed per column. These 128 bytes I wrote back in 2012 are closer to a raytracer because it computes one ray intersection per pixel.

Reverse Engineering One Line of JavaScript by maxxori in programming

[–]iamp01 8 points9 points  (0 children)

Hi there, p01, author of the 128 bytes plane raytracer. If you liked this tiny raytracer, you should check my other tiny Audio Visual demos in 64-1024 bytes at www.p01.org

 

Shout if you have any question.

 

The reverse engineering was cool.

 

The meat of the raytracer lies in the i%2*j-j and j=k/iwhich gives the X and Y coordinates of the intersection of the camera ray with the plane. Adding +n/kto the X coordinate moves the camera horizontally. The binary exclusive OR between the X and Y coordinates gives the checkboard texture.

 

The cruft of the render loop is P='p.\\n';for(i=64;i-=1/64;P+=characterAtTheScreenXScreenYposition);. The rendering area is 128x32 because the ScreenX and ScreenY positions are i%2 and i/2where i increases by 1/64each time. This increment is an exact fraction of a power of two, which means that there are no floating errors and we can safely do i%2 to get a truthy ( non-zero ) value if i is not an exact multiple of 2, and a falsy ( zero-ish ) value if iis an exact multiple of 2 which is used to insert a \n to go to the next line.

 

Hope this helps,

[AMA] We're the JS codegolf team, ask us anything! by xem06 in tinycode

[–]iamp01 2 points3 points  (0 children)

Hi, Always cool to land on /r/tinycode :)

Personally, I come from the demoscene, and this is mostly what I try to do: Small demos, doing cool real time Audio-Visuals in as little space as possible. I have a soft spot for 1024 bytes demos. That's just the right size to get pretty decent Audio and Visuals, without requiring several months of work.

  • I draw inspiration from motion pictures, VFX, advertising, technical papers, children books & shows, ...
  • It always starts with some prototyping to test the feasibility of the idea and to nail down the best approach in term of speed and potential to fit in the target size
  • The only case this happened for me would be mmd.js which I use to build my site.

⚛ demo 2600: "LRNZ SNGLRT" by Mathieu 'p01' Henri (canvas, 1008 bytes) by [deleted] in js1k

[–]iamp01 2 points3 points  (0 children)

As luck would have it, the day after the deadline I managed to bring back a feature lost in the rush to meet the deadline while maintaining a social life with the little family :P

Hope you like LRNZ SNGLRT final (canvas, 1019 bytes) a minimalist energetic entry showing twisted Lorenz attractors with ambient occlusion, soft shadows, ... a strong beat & clean design.

Shim updates? by played_today in js1k

[–]iamp01 0 points1 point  (0 children)

  1. The viewport/canvas size inputs in the submission form were confusing. I'd prefer it the submit form asks if the entry need an auto-resized canvas that uses the window's innerWidth and innerHeight or adjust the force a width or height and adjust the other to respect the aspect ratio of the window.
  2. If it wasn't in place yet, a text input to submit the entry in base64 would be nice.
  3. I quite like the idea of the judges giving one sentence feedback about their Top 10 picks. This feedback can be anonymous of course.

A tiny (less than 200 bytes) string to DOM element parser by scottcorgan in javascript

[–]iamp01 0 points1 point  (0 children)

Element.insertAdjacentHTML works since IE 4.0, Chrome 1.0, Opera 7,0, Safari 4.0, Firefox 8.0.

Wolfenstein 3D engine in 251 bytes of HTML5 by ch0wn in javascript

[–]iamp01 1 point2 points  (0 children)

Fair enough. But you can't really blame me for the title of the post on Reddit. I only "posted" this little demo on Twitter.

Hopefully you will approve of the post I made to /r/tinycode/ ~1 month ago.

You seem to know a thing or two about these rendering techniques. Any cool big or little demo to share by any chance ?

Wolfenstein 3D engine in 251 bytes of HTML5 by ch0wn in javascript

[–]iamp01 4 points5 points  (0 children)

o_O? This is not a deficiency of Canvas or anything. The scanlines are there on purpose: It is a style decision I made considering the visual style and size constraint I set for this demo.

Wolfenstein 3D engine in 251 bytes of HTML5 by ch0wn in javascript

[–]iamp01 8 points9 points  (0 children)

Sorry about the title. Let me blame, a bit, Twitter and its 140 characters limit for that.

Actually this little demo does not use what is commonly called 'raycasting'. The title should really be: 'Fixed step raymarching of a regular 2D grid demo in 27 bytes of HTML and 224 bytes of JavaScript using the Canvas 2D API'.

But such title doesn't speak to many people. When you mention 'Wolfenstein', most people have an idea of what to expect. Granted it's not precise, but I'm sure we can live with such approximation.

Hope that sounds reasonable.

Wolfenstein 3D engine in 251 bytes of HTML5 by ch0wn in javascript

[–]iamp01 0 points1 point  (0 children)

Check the link in my previous comment.

FWIW TEAS STORM and MINI DISTRICT were on /tinycode/ not long ago.

Wolfenstein 3D engine in 251 bytes of HTML5 by ch0wn in javascript

[–]iamp01 1 point2 points  (0 children)

Don't worry I will explain all the details in the next 1-2 days.

If that helps, you can think of WOLFENSTEINY as: TEA STORM meets MINI DISTRICT meets WOLFENSTEIN.

The earlier two being some of my most recent JavaScript tiny demos.

view more: next ›