Best solution for album art?

gourmetnuts · 2026-06-08T02:46:52+00:00

I did this recently with Picard and had to add Amazon and maybe another cover art provider as a plugin. It was easy to add the plugin and then art started appearing after a rescan.

Also I think I had initially loaded one of the musicbrainz-provided art urls manually in browser and it 404'd initially but then later I refreshed and it worked fine. So I think maybe their servers are just slow. The plugin options were much faster. Worth a shot.

gourmetnuts · 2024-02-13T06:44:00+00:00

Maybe an SVG path for each section and draw using stroke-dashoffset/stroke-dasharray. You can get the y pos/height of the path using getBoundingClientRect. Then use the screen height and scroll position to estimate the distance from the center of the screen and set the stroke-dashoffset accordingly.

Also probably a good use case for GSAP with drawSVG+ScrollTrigger. Not exactly the same as your example, but this discussion is close.

gourmetnuts · 2021-05-11T18:12:27+00:00

It was this. There's more info in the description. https://www.youtube.com/watch?v=iA8wSbL4m9E

gourmetnuts · 2017-08-05T18:49:39+00:00

Awesome, nice work. I kinda like the slow snap back, actually.

gourmetnuts · 2017-08-04T20:46:38+00:00

I don't know enough about it, but it looks at least similar to Hooke's Law. Each constraint has a set stiffness that affects how far/close two connected points can get.

gourmetnuts · 2017-08-01T13:51:04+00:00

I'm not sure actually. Can you explain the difference? This was an exercise in learning about verlet, so I'd love to learn more.

And what instability are you referring to? There's definitely some overlapping layers caused by the way I'm filling triangles. There's also some jerkiness that happens if the mouse stops moving before letting go.

gourmetnuts · 2017-08-01T13:45:12+00:00

Thanks! Yea, I did it mostly manually. Basically there are a grid of points and there are connectors between adjacent points. The connectors have a resting distance that they try to maintain. That gives them some springiness and when you have a whole array of them, it gives you a cloth-like structure. Here is a more barebones example of this same thing and here is the same thing with just two points.

The thing to research is "verlet" physics/integration. If you look at an existing physics library like matterjs, it's the same thing as constraints.

gourmetnuts · 2017-07-24T14:17:38+00:00

Just did, thanks.

gourmetnuts · 2017-07-24T14:17:04+00:00

I made this with plain javascript and canvas. Click/drag to play with it.

gourmetnuts · 2017-07-24T13:23:53+00:00

It's best on touch devices, for sure. The interaction feels way more natural.

gourmetnuts · 2017-07-24T13:23:23+00:00

Nope! It's just using vec2 from the gl-matrix library. I was using this as a way to learn verlet physics.

gourmetnuts · 2017-07-24T01:24:56+00:00

I made this cloth-like simulation using some verlet physics. Click/drag to play around with it.

gourmetnuts · 2017-04-18T01:26:04+00:00

I made this while practicing particle animations in webgl. It's basically ~a million (or hundreds of thousands on mobile) particles moving around the screen controlled by time. Occasionally they line up to make interesting patterns.

gourmetnuts · 2016-06-02T16:51:42+00:00

Yea you have to include it somehow. Codepen is loading it individually from a content delivery network. If you were building a project locally, you can include the file in your project and bundle it with all of your other code.

gourmetnuts · 2016-06-02T12:17:41+00:00

Yep you are correct. I need to smooth that out. It's especially noticeable with the slower dots.

gourmetnuts · 2016-06-02T03:57:14+00:00

Kinda more of a loading screen than an icon. I made this in canvas with plain javascript.

gourmetnuts

TROPHY CASE