Jamie Wong

Author here -- I'm glad you like the post! There are more like you describe out there, though they tend to be scattered around the Internet. https://jvns.ca/ often gets mentioned on HN and has a large volume of posts that follow the format "let's assume both you and I don't know anything - how do we figure this out?". http://jamie-wong.com/, a coworker, has a few good ones on graphics/numerical stuff. Characterizing unique IDs with emojis instead of an abstract number was inspired by Tim Babb who has a good blog post on Kalman Filters: http://www.bzarg.com/p/how-a-kalman-filter-works-in-pictures/ Explaining a concept in person really helps, as you get immediate feedback if they look confused and it helps you figure out in what order you need to introduce concepts. In the case of this project, I was working on it alongside other people who were working their side projects. So I had the chance to explain what I was working on very frequently as we asked each other what we were up to, but I'm still learning to write this way intentionally.

I love bezier curves. In community-college, it was the first time I ever encountered a subject that made me want to go do more research on my own. One of my core memories is toiling away for multiple nights when the rest of the house was asleep on my 2015 Macbook Pro, writing janky p5.js code and pressing refresh on the browser page over and over until suddenly, I started see real, beautiful curves blossom from my control points. I just went back to dig up some old sources[0], and I can't believe this post is almost a decade old now. This guy's explainers and animations were leagues beyond any other resource I could find through Google searc at the time. [0] https://jamie-wong.com/post/bezier-curves/

I always love projects that build from nothing and go step-by-step to build something more complex. Reminds me of one of my favorite posts of a similar style building out "Metaballs" with different algorithms: http://jamie-wong.com/2014/08/19/metaballs-and-marching-squares/. Nice work!

Thanks! I've learned a ton from iq's writing. He's such an inspiration! I find that his articles are best for folks who already know a thing or two about computer graphics. Here's a post that I think is pretty good for beginners: http://jamie-wong.com/2016/07/15/ray-marching-signed-distance-function…

Here are links to two of my favorite essays that make a similar point: Java for Everything[1] Too DRY[2] And then there's a third, which is not quite the same topic, but still in the same vein. It's arguably even more relevant today than three years ago when it was written, especially given how much attention is being captured by ecosystems that attract folks who end up generating a morass of terrible tooling: Helping my students overcome command-line bullshittery[3] 1. https://www.teamten.com/lawrence/writings/java-for-everything.html 2. http://jamie-wong.com/2013/07/12/grep-test/ 3. http://pgbovine.net/command-line-bullshittery.htm

Author here -- I also just published a new post on ray marching, which you might find interesting if you find this post interesting: http://jamie-wong.com/2016/07/15/ray-marching-signed-distance-function… My luck on HN has been not so great. All in all, I think my posts have reached the front page ~5 times, only 1 of which I submitted. But oh well! Glad they get there somehow and people like them!

This program utilizes a powerful technique called raymarching, raytracing's big brother. Instead of tracing along each ray in tiny fragments and returning intersections, the ray is 'marched' in larger steps, vastly increasing render speed (the downfall of classical raytracers). How do we 'march' rays without missing geometry? With the aid of signed distance functions, geometric equations which take an arbitrary point in 3space and evaluate to 0 if that point is on the 'shell' of the geometry. For example, the signed distance function for a sphere: float sdfSphere(vec3 p, float r) { return length(p) - r; } This lets us do interesting things such as transform the point p to transform our object, take the minimum value of two spheres to produce a venn-diagram intersection shape, take the maximum of two spheres to 'cutout' a hole from one, etc. The logic is a bit backwards at first, but it clicks quite quickly and one can rapidly construct complex geometry without much optimization/shader magic. For example, this is a realtime capture of a 64k self-contained executable. No 3d models, no textures, no assets - just raymarching and math: [https://www.youtube.com/watch?v=ie4u2i_5OdE] Approachable overview of raymarching & SDFs: [https://jamie-wong.com/2016/07/15/ray-marching-signed-distance-functio… Learn more: [https://iquilezles.org/www/articles/raymarchingdf/raymarchingdf.htm]

Someone else already mentioned the book of shaders (which is the single best introductory resource IMO) - aside from that, I've found that reverse-engineering existing shaders and reapplying the learnings to my own shaders has been very helpful. With time, you start developing an eye for which shaders are just one or two steps beyond your understanding. You'll also start noticing that certain users (such as @Shane) on the site are really good about commenting their code, while others treat it like a game of code golf. When studying existing shaders, it's best to focus on the well-documented shaders that are a few steps beyond your current capabilities, rather than the ones that consist of hundreds of lines of single letter variables and incomprehensible math. As far as open source repositories go, it doesn't get much better than shadertoy (in terms of pedagogy) since you can easily tweak values and comment out pieces of code right there in the browser if you're trying to figure out what a certain line of code does. The in-browser editor makes reverse-engineering very efficient and reduces friction as much as possible, which is really helpful for this kind of dense mathematical code. Once you get used to the whole process of reverse-engineering shaders, you'll quickly come to see shadertoy as the perfect place to learn how different visual effects and graphics techniques are achieved. I don't know of anywhere else on the web (except perhaps codepen) where you can so…

I like Jamie Wong's take on this too: https://jamie-wong.com/post/the-pit/

Related—“Too DRY - The Grep Test” by Jamie Wong: http://jamie-wong.com/2013/07/12/grep-test/

The basis if this article (and its forebear "Too DRY - The Grep Test"[1]) is that grep is fragile. It's just fragile in a way that's different from the way that IDEs are fragile. 1. <http://jamie-wong.com/2013/07/12/grep-test/>

I like https://github.com/evanw/lightgl.js learnt from https://jamie-wong.com/2016/08/05/webgl-fluid-simulation/#implementati… the elegant lightgl.js, which is an abstraction layer on top of WebGL that makes it much nicer to work with. Unlike THREE.js, it doesn’t make any assumptions about you wanting any concept of a camera or lighting or that you’re working in 3D at all.

Another tutorial. "Bezier Curves from the Ground Up": https://jamie-wong.com/post/bezier-curves/

Raymarched SDFs: https://jamie-wong.com/2016/07/15/ray-marching-signed-distance-functio…

How does this handle more than 2 metaballs? It seems like the interaction between them would get really complicated to manage like this, versus a marching squares approach which handles however metaballs you've got with no issue: https://jamie-wong.com/2014/08/19/metaballs-and-marching-squares/

There's no need to differentiate between vectors and matrices in this sort of work, other than as shorthand for dimensional information. [0] is another example of a ray-tracing tutorial which, by virtue of using GLSL, doesn't draw a hard line between matrices and vectors. [0] http://jamie-wong.com/2016/07/15/ray-marching-signed-distance-function…

Some links about color theory in general (from my notes) : * Color: From Hexcodes to Eyeballs - http://jamie-wong.com/post/color/ * Practical Color Theory for People Who Code - https://tallys.github.io/color-theory/ * http://www.handprint.com/LS/CVS/color.html

Not on my older phone which lacks OpenGL ES 3.2, usually needed by these webgl fluid sims (they compute by rendering to a float texture). A simpler one, and without fancy lighting, but with a code walkthrough/tute http://jamie-wong.com/2016/08/05/webgl-fluid-simulation/ ... also doesn't work on my phone. :(

You might find this post by Jamie Wong interesting: http://jamie-wong.com/2016/08/05/webgl-fluid-simulation/ Doesn't seem to work on mobile though

Huge thanks for introducing me to hg_sdf! It's just what I need for my project [0]. I found few similar resources ([1],[2]), but this is vastly more useful. [0] https://github.com/jmiskovic/arbo [1] http://jamie-wong.com/2016/07/15/ray-marching-signed-distance-function… [2] https://www.scratchapixel.com/lessons/advanced-rendering/rendering-dis…

More than you ever wanted to know, in one well-illustrated blog post: http://jamie-wong.com/post/color/

An alternative method (with potentially different applications) that I found interesting. The visual aids in both articles are very good. http://jamie-wong.com/2014/08/19/metaballs-and-marching-squares/

> I've had a very similar experience in my career so far as a dev. My code used to be full of magic, auto-guessing things based on how methods are named, etc. I've moved away from that, it wastes more time than it saves. Speaking of magic or trying to be too clever with your code reminds me of the Grep Test [0], which I always try to conform. In the end it's not fun forcing others to deal with your magic. Remember: code is read way more often than it is written, so don't be lazy to type a bit more — help others. [0] http://jamie-wong.com/2013/07/12/grep-test/

This project was built using code I wrote previously for this pure javascript fractal renderer: http://jonathan-potter.github.io/Mandelbrot/ Jamie Wong's post on hacker news earlier this week was a massive help in allowing me to switch to using WebGL for the rendering portion. His post can be found here: http://jamie-wong.com/2016/07/06/metaballs-and-webgl/

Link: http://jamie-wong.com/2014/08/19/metaballs-and-marching-squares/

OP: How do you suggest that people go about setting specific, challenging, and achievable goals? While you've described flaws in Dan Shipper's arguments, you haven't provided concrete advice about what the right thing to do is. I found Jamie Wong's post on negative social incentives[0] to be helpful in motivating oneself once a specific goal has been set, but I still find myself having trouble figuring out what goals to set in the first place. [0] http://jamie-wong.com/2011/12/30/immersion-and-schadenfreude/

Transparency about our interviewing process: http://bjk5.com/post/3340326040/in-any-language-you-want-khan-academy-… (which comes from the hiring cultures at Fog Creek and Google, see http://www.joelonsoftware.com/articles/GuerrillaInterviewing3.html). Transparency about all past internships, their expectation and accomplishments: http://bjk5.com/post/36067210182/khan-academy-internship-summer-12 http://bjk5.com/post/8826207372/khan-academy-internship-summer-11 http://bjk5.com/post/15500332273/khan-academy-internship-fall-11 Transparency from previous interns about their work, which I believe speaks for itself: http://david-hu.com/2011/11/02/how-khan-academy-is-using-machine-learn… http://dylanv.org/2012/09/14/the-khan-academy-internship-experience/ http://jamie-wong.com/2012/08/22/what-i-did-at-khan-academy/ If any piece of evidence from the above points to an organization that values quotas over excellence in interns and the work expected of them, well please raise the alarm. We need to get past our default response being a knee jerk assumption of discrimination.