Comment by ajkjk
2 years 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?
Not sure what you are looking at but 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.
Yeah, 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?
SVG paths translate pretty directly to canvas commands. If you have an SVG path parser, it's pretty straightforward to walk it and output the equivalent js.
1 reply →
Yeah, that's the file I was looking at. I was wondering how that file got created. By hand, or generated somehow?
I 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
It 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
Just a small note, that code looks like Context2d rather than WebGL unless you were looking at something else in the code
Ah, I wasn't clear. There's a bunch of both in the same giant file.