ThreeJS Vectors from Image Spiritualized - LGM

7/23/2019

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:

1. Import a 300x300 image of the album cover into a 2D canvas element
2. 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
3. Create a 3D canvas element, pop the vertices into place

Improvements that could be made:

• Camera controls
• Lighting
• Properly understand why x and y seem to be coming out sideways 🙈