3 ms·
Pretty impressive. I was curious how they made the whole thing so I went to look at the source for the images. It's mostly in one 10000 line JS file which draws
by ajkjk 3y ago
Pretty impressive. I was curious how they made the whole thing so I went to look at the source for the images. It's mostly in one 10000 line JS file which draws all the graphics onto <canvas> in JS, plus a bunch of WebGL that goes over my head. The code looks like
function draw_car(ctx, rot) {
ctx.save();
let sc = 0.04;
ctx.scale(sc, -sc);
ctx.lineWidth \*= 1 / sc;
ctx.translate(-286, -51);
ctx.beginPath();
ctx.moveTo(463.93652, 9.89137);
ctx.bezierCurveTo(462.12793, 6.72347, 461.22363, 3.5344, 461.22363, 0.32417);
ctx.bezierCurveTo(447.58911, -1.16177, 434.20691, 2.81333, 434.85754, 5.10777);
...
I wonder what their workflow was. Surely all those curves weren't programmed by hand?
- plopz 3y agoJust a small note, that code looks like Context2d rather than WebGL unless you were looking at something else in the code
- ajkjk 3y agoAh, I wasn't clear. There's a bunch of both in the same giant file.
- dubcanada 3y agoNot sure what you are looking at but https://ciechanow.ski/js/airfoil.js https://ciechanow.ski/js/airfoil.js is the JS that contains the code for the graphics/visuals. And it is completely readable. The 2d part though is probably generated.
- nequo 3y agoYeah, the "draw_car" snippet quoted by parent is from the JS file that you linked. It looks like maybe an SVG file converted into JS? Do you know if there is some standard tooling that generates this?
- ajkjk 3y agoYeah, that's the file I was looking at. I was wondering how that file got created. By hand, or generated somehow?
- deleted 3y ago[deleted]
- grishka 3y agoI asked him on Twitter about one of his previous articles, he said he writes all that JS by hand. https://twitter.com/BCiechanowski/status/1522067904522428417 https://twitter.com/BCiechanowski/status/1522067904522428417
- deleted 3y ago[deleted]
- syncsynchalt 3y agoIt doesn't look like it's publicly viewable but he has a writeup of his process for patrons at https://www.patreon.com/posts/on-airfoil-99289324 https://www.patreon.com/posts/on-airfoil-99289324