Apple animation visual bug

[abulaatikko]

The apple animation left border is bugging visually (the horizontal line is appearing/disappearing while the apple is circulating) (must be zoomed close to see it) (happens https://elma.online/cup/WC9/events/9/map)

[silentleek]

It's a side effect of the scaling method used. The pixels are blurred, so naturally each frame of the animation will have some blurring from the adjacent frames. It should be a simple fix.

[Maxdamantus]

I guess I'll set imageSmoothingEnabled to enable nearest-neighbour scaling of images, since it's closer to what Belma/EOL does. I think this was my original intention, but I don't think the feature existed back when I first wrote it.

Doing that seems to fix it in Chrome/Chromium, though Firefox still has some slight artifacts, so it must be projecting the image into the canvas using the transformation matrix (containing non-integers), as the sx, sy, sWidth, sHeight values I'm passing to drawImage are all integers:

recplay/src/lgr.ts

Line 233 in 48200bb

canv.drawImage(img, num*wdPer, 0, wdPer, img.height, 0, 0, 1, 1);

On a related note, I also always wanted polygon lines to not be antialiased. 8b96784 intentionally disabled antialiasing on polygons in Chrome, but I guess at some point they "fixed" it to always do antialiasing, and it seems like the standard way to disable it is still WIP: whatwg/html#9192.

[Maxdamantus]

This should be done with a71cdc1, and 923071d fixes the remaining projection issue on Firefox.

[abulaatikko]

Hm, trying to update this to the Elma article but the apple visual animation bug remains, maybe I don't know how to upgrade the script?

Reproduce steps:

1. https://tutkimusmatkat.com/en/60-the-history-of-elasto-mania-1995-2018
2. "BestCO14" (bug easily visible)

I try to run the only npm script found in the package.json which gives two errors:

abula@vesi:/var/www/media.pulu.org/palsta/files/60/recplay$ ls
amd.js  images  lib  node_modules  package.json  src  tsconfig.json  update-gh-pages.sh
abula@vesi:/var/www/media.pulu.org/palsta/files/60/recplay$ npm run amd-fake

> [email protected] amd-fake
> tsc && browserify lib/amd-fake.js -o amd.js

src/levRender.ts:265:14 - error TS2774: This condition will always return true since this function is always defined. Did you mean to call it instead?

265    if(img && img.draw){
                 ~~~~~~~~

src/levRender.ts:277:34 - error TS2774: This condition will always return true since this function is always defined. Did you mean to call it instead?

277    if(img && img.draw && mask && mask.draw){
                                     ~~~~~~~~~


Found 2 errors in the same file, starting at: src/levRender.ts:265

abula@vesi:/var/www/media.pulu.org/palsta/files/60/recplay$

So how did I upgrade?

cd /var/www/media.pulu.org/palsta/files/60
mv recplay recplay-2024-05-04
cd recplay-repo
git pull
cd ..
cp -r recplay-repo recplay
cp -r recplay-2024-05-04/images recplay/
npm run amd-fake

Any ideas?

[Maxdamantus]

@abulaatikko I'm guessing that's happening because it's picking up a globally installed tsc version which might have different strict checks (since it's a different major release).

It should work if you run npm install beforehand so that a suitable version is installed locally in node_modules.

[abulaatikko]

Ah, tried only "npm ci" which gave error [1] but actually now it works. Anyway so now npm install is run but bug still remains?

[1]:

0 verbose cli [
0 verbose cli   '/home/abula/.nvm/versions/node/v16.13.0/bin/node',
0 verbose cli   '/home/abula/.nvm/versions/node/v16.13.0/bin/npm',
0 verbose cli   'ci'
0 verbose cli ]
1 info using [email protected]
2 info using [email protected]
3 timing npm:load:whichnode Completed in 0ms
4 timing config:load:defaults Completed in 2ms
5 timing config:load:file:/home/abula/.nvm/versions/node/v16.13.0/lib/node_modules/npm/npmrc Completed in 4ms
6 timing config:load:builtin Completed in 4ms
7 timing config:load:cli Completed in 2ms
8 timing config:load:env Completed in 1ms
9 timing config:load:file:/var/www/media.pulu.org/palsta/files/60/recplay/.npmrc Completed in 1ms
10 timing config:load:project Completed in 1ms
11 timing config:load:file:/home/abula/.npmrc Completed in 0ms
12 timing config:load:user Completed in 0ms
13 timing config:load:file:/home/abula/.nvm/versions/node/v16.13.0/etc/npmrc Completed in 0ms
14 timing config:load:global Completed in 0ms
15 timing config:load:validate Completed in 1ms
16 timing config:load:credentials Completed in 1ms
17 timing config:load:setEnvs Completed in 1ms
18 timing config:load Completed in 14ms
19 timing npm:load:configload Completed in 15ms
20 timing npm:load:setTitle Completed in 0ms
21 timing npm:load:setupLog Completed in 1ms
22 timing config:load:flatten Completed in 3ms
23 timing npm:load:cleanupLog Completed in 3ms
24 timing npm:load:configScope Completed in 0ms
25 timing npm:load:projectScope Completed in 9ms
26 timing npm:load Completed in 33ms
27 timing arborist:ctor Completed in 5ms
28 verbose loadVirtual Error: loadVirtual requires existing shrinkwrap file
28 verbose loadVirtual     at Arborist.loadVirtual (/home/abula/.nvm/versions/node/v16.13.0/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/load-virtual.js:62:18)
28 verbose loadVirtual     at async Promise.all (index 0)
28 verbose loadVirtual     at async CI.ci (/home/abula/.nvm/versions/node/v16.13.0/lib/node_modules/npm/lib/ci.js:63:5)
29 timing command:ci Completed in 58ms
30 verbose stack Error: The `npm ci` command can only install with an existing package-lock.json or
30 verbose stack npm-shrinkwrap.json with lockfileVersion >= 1. Run an install with npm@5 or
30 verbose stack later to generate a package-lock.json file, then try again.
30 verbose stack     at /home/abula/.nvm/versions/node/v16.13.0/lib/node_modules/npm/lib/ci.js:70:15
30 verbose stack     at async Promise.all (index 0)
30 verbose stack     at async CI.ci (/home/abula/.nvm/versions/node/v16.13.0/lib/node_modules/npm/lib/ci.js:63:5)
31 verbose cwd /var/www/media.pulu.org/palsta/files/60/recplay
32 verbose Linux 5.4.0-172-generic
33 verbose argv "/home/abula/.nvm/versions/node/v16.13.0/bin/node" "/home/abula/.nvm/versions/node/v16.13.0/bin/npm" "ci"
34 verbose node v16.13.0
35 verbose npm  v8.1.0
36 error The `npm ci` command can only install with an existing package-lock.json or
36 error npm-shrinkwrap.json with lockfileVersion >= 1. Run an install with npm@5 or
36 error later to generate a package-lock.json file, then try again.
37 verbose exit 1
(END)

[Maxdamantus]

It's hard to say what might be going wrong then. I'm guessing there are some commands missing from your previous comment, since this sequence doesn't really make sense:

cp -r recplay-2024-05-04/images recplay/
npm run amd-fake

If you're not doing an automated build, I suspect the easiest way to update would be to just get the newest version of amd.js from the gh-pages branch: https://raw.githubusercontent.com/Maxdamantus/recplay/gh-pages/amd.js

Otherwise, you could try doing git clean -xffd node_modules \*.json && git checkout -f src \*.json to ensure that all relevant files are in the correct state (the git clean command is targeted so it won't delete the images directory that you've already copied).

[abulaatikko]

Oh, yea "cd recplay" was missing, sorry!

Here are the files I've got:

abula@vesi:/var/www/media.pulu.org/palsta/files/60/recplay$ ls
amd.js  images  lib  node_modules  package.json  package-lock.json  src  tsconfig.json  update-gh-pages.sh

Oh now I got it working! I didn't notice that amd.js needs to be updated separately. Thank you!

(maybe a README could have installation / upgrade instructions, just an idea)

[Maxdamantus]

(maybe a README could have installation / upgrade instructions, just an idea)

Done! 55e8f8e

[abulaatikko]

Great, thanks! Btw that README sounds like there's another way to build the script other than using the npm run fake-amd? Maybe it could be included in the instructions as well - also what's the preferrable way?

[Maxdamantus]

It was kind of alluding to how it would be used if it were packaged properly, where it would be installed in node_modules as a dependency of your own NPM project.

I've now added some packaging improvements so it's possible to install it that way, and added it to the README: 159806b

To use it "properly", you'd need to set up your own bundler etc to generate the overall .js file, but that should work the same way as when developing any modern npm/JS project.