ThreeJS Vectors from Image Spiritualized - LGM
This is one I've been waiting to do for a long time.
Coming from regular website development I havent had the skills needed to get into anything 3D. But, as the weeks have gone on I've learned a lot to get here.
The path has been:
- Matt DesLauriers course on FrontEnd Masters
- Keith Peters' Coding Math on Youtube
- Learn P5.js
- Learn ThreeJS
- Lots of trial and error
How the effect works:
- Import a 300x300 image of the album cover into a 2D canvas element
- Create an array of each pixel in the image, recording x and y, and then record z as a decimal percentage of the average of the pixels RGB value / 255
- Create a 3D canvas element, pop the vertices into place
Improvements that could be made:
- Camera controls
- Properly understand why x and y seem to be coming out sideways 🙈
If you enjoyed this article, sign up here to get new articles whisked straight to your inbox!