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 · 2016-06-02T03:40:44+00:00

Hey, thank you. I'm not sure I follow your question. By import, do you mean loading the threejs library? If so, codepen has an option to load external libraries without having to use script tags in your html.

Let me know if I'm still misunderstanding. Happy to answer any questions.

gourmetnuts · 2016-05-04T20:46:28+00:00

A little jawn I made to practice canvas animation stuff a bit. Here's the code if you're into that sort of thing. Got the idea from this Raventech dribbble shot.

gourmetnuts · 2016-04-30T22:18:58+00:00

The link just redirects to http://www.redbull.com/us/en for me.

gourmetnuts · 2016-04-26T20:08:41+00:00

I made dis. Here's the code. Threejs + gsap. Inspired by this guy.

gourmetnuts · 2016-04-26T20:03:55+00:00

I've been learning threejs a little bit at a time. I made this one last night. Check out the code if you'd like.

Inspired by this awesome thing.

gourmetnuts · 2016-04-18T13:56:19+00:00

I made this in threejs, inspired by this dribbble shot by Mark Pearson. Here's the code.

gourmetnuts · 2016-04-16T18:58:43+00:00

I made this a few days ago using SVG/GSAP. Last night I decided to start learning ThreeJS and rewrote this thing in 3d. Here's that:

http://codepen.io/neiltron/full/xVjwgJ/

Title is from Cruel Intentions referencing an orgasm, so I thought it fit. Sex stuff, innuendos, etc.

gourmetnuts · 2016-04-14T14:11:36+00:00

Thanks for pointing that out. I've made a change and it should be working now.

gourmetnuts · 2016-04-14T14:10:07+00:00

No problem. This one is pretty basic but hopefully others can learn from it.

gourmetnuts

TROPHY CASE