logo

programming and arts blog

Nico Bazzoni

my thoughts on coding music and other cool stuff

tread softly

Blog Image

samizdat [ making the website ]

December 26, 2023

Music

The challenge was to create a 3d environment a user could listen to my new album in. The album name samizdat conjures the clandestine and personal all at once in that it means 'self published' in Russian and was the main conduit for subversive communication under soviet control. Naturally, I wanted the aesthetic to resonate a soviet era vibe which meant going on poly.pizza and downloading some GLB files as tanks planes and Russian soldiers. i console log their animations to see if there are any, if there aren't any i introduce a useEffect to capture the object as one and create some kind of motion, all so that everything on the page feels alive and autonomous in some way.

Blog Image

the camera swoops into the action. planes flying over head, hovering, soldiers waiting, but one is alert, a tank idles, surveillances the scene. If one looks close they'll spot the gas mask floating in the letters. The playlist is placed in front of other objects and the play buttons represent a traditional format. A strange world is conjured, and an entirely new premise upon which we can experience the music comes about. here is the useEffect which invokes the animation in the 'idle soldier'

useEffect(() => {
if (actions['stay pose']) {
actions['stay pose'].play();
}
}, [actions]);

Blog Image

multiple vantage points are possible in the canvas scene. The user can see details of the characters if they zoom in. All this can be done while listening to the tunes.

Blog Image

a birds eye view let's us see the perilous landscape below. Elements of surprise are riddled throughout the site, if a user clicks on the rotating cube it will them to the soundcloud page where the album is also stored.

I may make a more traditional website to listen to the album but why when the other outlets already provide that. These are niche experiments with technology and sound only interesting to the curious.

-nico

Blog Image

3d worlds create realistic interplay for what would normally be a passerby scenario for the user.

Blog Image

samizdat

portl.world nico's blog