What i did

✦ I added gain flickering to the audio in the background and made it interactive with the scroll animation
✦ Trying to fix my github repo LOL i don’t know what i have done but im pretty sure i messed up the commits
✦ Fixed some bugs with the opacity and made sure stuff wont break when scrolling
✦ Made so that the animation start when you click the statue i don’t know if it’s noticable i’ll see what i can do

Changes i’m considering to make

✦ I might also add a scroll feedback on the right so that the user knows when to stop scrolling to see the animation how i saw it or how i intended it to be
✦ I might change the animation start button because i don’t think people will notice that you can click on the statue
✦ Also i’m still thinking what to add to make the mouse interactive with the scene I’m not sure it’s gonna be the lighting or something in the shader but currently im trying to merge the files together so i can finally finish the project and make it ready

Changelog

• /THE/32ba6fb

Fixes

✦ so i had tons of problem starting with the scroll trigger container it had a problem is that i didn’t understand how to works excatly but i figured it out
✦ i had prblems with the animations they weren’t the best and the fading of the sphere sucked i spent quite some time fixing those

Improvments - features

✦ i added this cool flickering effect i kinda got the idea by accident i broke my gsap transtions one time and i saw the flickering and i liked so i added a math.random to the opacity value
✦ Didn’t do much actually except for fixing the problems and optimizing the page
✦ i’m getting the page ready so i can add the oscilloscope visuallzer i made earlier

Changelog

• /THE/6105080

The new visualizer

✦ I spent sometime trying to understand how everything works but i gave up lol i tried to use a shader i got online i’ll credit the person in my repo but it didn’t work quite how i wanted it so i asked chat gpt to write the shader for me he gave a good one but i still had to edit the render frame rate to make it look smoother

What i’m trying to do

✦ I’m trying to add a midi keyboard or smth similar I might not add to since i want to get the fundamental done first i still have to integrate the homepage file with the scenes file
✦ I still have the last scroll trigger animation to make it’ll be this visualzer

Learning

✦ It’s somehow complex but only because im trying to write code without planning i might try and wrap my head around this but after i finish because i really wanna get this done
✦ One of the coolest stuff i have ever encountered is the web audio api it’s freakin amazing thought not the best i have some knowlenge in music production so it’s decent

Changelog

• commit/a86d3cb

New stuff i’m adding

✦ So I have created a new file where i’ll be creating my next and last scene hopefully It’ll be a raw visualizer oscilloscope
✦ I also might add a new statue i found what i want to add it’s a statue of david michelangelo im not sure if i’ll add it or not i might not like it but i’ll se

Learning

✦ I’m learning more about audio buffers and audio samples and how digital audio gets recorded and how The Fast Fourier Transform work
✦ i have been watching some content on youtube to get a better grasp at this but it’s not easy tbh I’m also asking chat gpt to simplify things like this and how exactly they work
✦ Getting better at three js and learning more about geometry it’s actually my first time understanding how cameras work in 3D which is AMAZING!!!!!! It has math involved and i just love it
✦ Learning more about shaders since I’m using it almost in everything i’m also using someones tutorial to write the visualzer shader im gonna depend on it untill im ready to take off on my own I’m trying not to just copy and paste their shader i want to understand why it works and how to build it from scratch
✦ First time hearing about fullscreen quad and it’s basicallly A way to make three js render a 2D screen, it’s basically a plane that fills up your whole screen whatever you do and a lot of new stuff i’m learning along the way and i need to finish this project asap!!!

Changelog

• commit/42bad4c

Technical things i added

✦ added a scroll trigger animation
✦ added a scene from one my visualizers
✦ changed the shader of the homepage’ background
✦ styled the nav bar (Still not finished)
✦ a failed attemp trying to add my scene as a texture

I hope this’ll look great when i finish it because it’s good so far

Stuff i learned along the way

✦ Not my first time using gsap but this is the first time me using it with a clarity i’m using their docs to understand how everything works
✦ Made a bit of research on scroll triggers because i didn’t quite understand exactly how they work
✦ Getting better at memorizing tailwind syntax lol

CURRENT TASK

GETTING THE HOMEPAGE READY FOR INTEGRATION

✦ I have used a noise function to get this cool look
✦ I’m still trying to improve the overall homepage
✦ Fixed some light bugs

CURRENT TASK

GETTING THE HOMEPAGE READY FOR INTEGRATION

So i saw a video on instgram with impeccable vfx and he did something like what i did here but i still haven’t got to half what he did
○ added these visualizer with planes geometry first
○then changed it to buffer geometry
○i spent the 7 hours doing this and trying to fix my post processing effects but no luck till now
○I experimented a lot at first with planes geo and different noise functions

I have added statue text and description for the statues i watched a youtube tutorial for the layout of the text
im also trying to get the lighting right i haven’t thought what it’ll be like
I’m planning to add a particle visualizer but a crazy one

● Experimented a bit with planes and vertices and textures to understand how geometries and UV mapping work which was terrible and i didn’t really understand a lot

● i have added these two arrows that allow you to switch between statues , im still polishing them and making them work properly

●i have tried to add a mouse raycast to control the light but failed miserably so i’ll give another try late

● spent some time changing the camera position and lighthing position still working on it

i tried a couple of things i tried to attach scenes to planes to make some kind of a room full of scenes but that didn’t work out but anyways i spent sometime figuring out how to adjust this navbar with this sine wave visuallzer using math i made it It’s wasn’t hard but i had to handle when the user pauses the song and start it again
the sphere kind of room i couldn’t do that as it was hard to render the scenes as textures and had a lot of problem with the geomtry of this anyway

here is what i did:
● i have adjusted the lights still not finished
● added a sphere i kinda want to make my scene attach to the sphere surfuce so user can toggle between them and im still figuring that out
●i added helpers to everything so i can visualize and edit and move stuff around in real time

So i have been trying to set up a testing environment so it’s easier for me to move the 3d objects and control light settings and trying to find the best place to put the camera at and i have imported two greek objects im inspired by a project with similar statues but im doing my own thing and i have added light control using gui and yeah i hope i don’t mess this up i might change the staues in the future
i downloaded these statues online i found them after a lot of strugle
i added rotation to the statues and will add position transtion in the future three js is just great and have infinte possibilities

I’m experimenting with three js and reading the docs trying most of the things to understand better i didn’t do much except trying things and different lights on object the cube attached this wasn’t the only thing i did but i kept trying stuff i also removed the old curve stuff because it didn’t work as expected and was just too complicated

So things didn’t turn out to be the way i wanted it to look so im thinking to just start all over again and maybe learn the basics again. im trying to create a landing page something creative i dont know what i’ll do yet
i tried to add my scene as a texture but i couldn’t so i would have to add the actual meshs inside these scenes but that will overload the website since i have some heavy scenes im having fun experimenting with this but I dont like the results yet

So i created a new file in this project just to start fresh
I’m trying to create a transition between different scenes it’s hard because i don’t know what i want to do
i have struggled a lot with applying this i still don’t understand a lot of three js works i have to dig more in their docs but
I removed two features from a scene and added this path this will be the homepage , these rings are going to be my scenes and you choose which one you wanna enter but i hope this would work i don’t know how i’ll add my scene to this curve it might even not work