A quick interactive visualisation

published

The original static visual was part of some concepting work our brand design team was working through in the early stages of a new visual brand exploration.

Considering this was one of many directions being explored and likely to evolve dramatically, the challenge was to see if I could create an interactive sketch as fast as they could do it statically. I also wanted to rely entirely on the LLM to produce all the code. So, resisting urges to jump in partway when I kinda got the gist. Instead I wanted to practice describing the changes I wanted to make. This meant I was asking a lot more about what certain parts were doing than I had previously. I did end up tweaking some values to make things animate at speeds and smoothness I liked more… Honestly, it was just way easier.

I didn’t have access to cursor at the time, unfortunatly. So I was getting gpt-30mini to print out the full revised code each iteration and then copying and pasting it into a code editor to see how it went. Tedious, but still fast enough

First steps - the requirements

I gave GPT-30-mini the visual reference, then described what I was after.

<role>
Front-end engineer

<task>
I want to protoype an interactive visulistation

It consists of blocks that are arranged in straight lines and then the straight lines are repeated around a circular circumference to form a circle. 


Each of the blocks is three0-dimensional shape and when the mouse hovers one they rotate 90 degrees on a single axis to reveal the immediate hidden under side which is colourful. The block directly under the mouse is the center point and the nearby neighbours also rotate in relation to their distance from the center point. i.e. thr center block is a full 90 degree the closest might be 70 the furthest 45. 

Each time the blocks return to their default state the hidden colour changes, so when they rotate back, they reveal a different colour. 


Please choose whatever you think the best technology is to produce this. It will likely only run locally, maybe vercel at the most, but can also live in an AWS S3 bucket if only HTML, CSS and JS are all that is needed


Attached are two visual references, one showing the default state and another with an example hover state.

I had a vague idea of how I thought I would achieve this, but I wanted to ask the model. And somewhat a pleasant surprise it chose three.js. Something that I had never played around with before, so I thought Yeah sure, YOLO.

Below is an outline of a straightforward approach using **Three.js** for a true 3D experience, though you could also achieve a similar effect using just HTML/CSS 3D transforms and JavaScript for the interactivity. Three.js will give you more flexibility if you later want to add lighting, shading, or more complex animations.

**Why Three.js?**

• **Built for 3D**: Three.js takes care of the 3D camera, perspective, and rendering details so you can focus on the visual logic.

• **Hover detection**: Three.js includes raycasting, which makes it easy to figure out which object the mouse is hovering over.

• **Easy to host**: It’s just JavaScript—upload to Vercel, AWS S3, or any static hosting and it’ll work.

It gave me some example code all in one HTML file. There was some initial back and forth about referencing the code library correctly, which involved correcting with an import map and setting up a local server to view it. When that was sorted, it was there… kinda.

It was better than expected, but the camera angles were off. I could rotate it around to get where I wanted it to be, though. But I couldn’t tell where it was starting from and what dimensions I changed to do that. So, without getting into XYZ rotation specifics, I gave it the image again and asked if it could correctly represent the image more accurately… Surprisingly, this worked.

Can you give me some code so the default state looks like the attached reference?

Now for some interactivity

The first attempt at the hover effect, the boxes were facing the wrong direction and spinning on hover the wrong way. Knowing that the models are not so good with maths and physics, I thought this might be a battle dealing in this 3D space. But with a few questions about which axis it was spinning them on and some trial error.

What axis do they currently rotate on?

I got it about right alongside also getting it to move neighbouring boxes in varying amounts relative to the origin hover point, so it was more fun to play with.

Can you widen the effect area so the hit area is bigger then the mouse pointer, like a radius around the mouse pointer as well as the area that affects the surrounding blocks so more blocks are affected

The timing and colour were off, though. So I asked if I could get it to show a different colour on top in the default state and another on the bottom. It could.

Is it possible to only have colour on the underside and keep the top side grey?

What I ended up with was a random colour assigned to the underside, so each time the block tilted over, it revealed a different colour. To add a little more, we also added a bit of a glow effect to the coloured side, just cause we were curious.

Now for the centre gradient

Pretty happy with the main interactive effect, I turned my attention to the centerpiece. It actually took a minute, and I never really got all the way there with it, either. But we did improve it. It had initially just rendered a flat circle; the original had a gradient sun-like look. I initially thought that just giving the source image again and asking to focus just on this would work. But no. I tried describing the effect, but no. I ended up asking how I can tweak it myself and then went about trying that, but I still couldn’t quite nail the darker inside to the fainter outer that blended seamlessly in the background. But for the sketch, I could get it too a place where it wasn’t a distraction and that was good enough for now. So I asked with probably my favourite instruction of the experiment. When I hit the center can trigger the hover effect that ripples towards the outside then snaps back like its breathing. A little tweaking but pretty easily picked up on this concept.

One more step, then back

Pretty happy with my interactive sketch I asked the model what else I could add to enhance the expereince one the suggestions was a particle / sparkle effect on the hover effect. I tried for minute having fun with asking particle generators but ultimatly wasn’t really producing the effect I had envisioned in my head when it first suggested it.

Wary I proably already sunk too much time into a direction that proably was not going to make past the first round I just went back to where it was a called it a day.

Main Steps in the Conversation

  1. Initial Concept and Requirements:
  • The conversation begins with a front-end engineer outlining the goal of creating an interactive visualization. The visualization consists of 3D blocks arranged in a circle, which rotate to reveal colorful undersides when hovered over.
  1. Technology Selection:
  • The decision is made to use Three.js for its robust 3D rendering capabilities. The conversation highlights the benefits of Three.js, such as handling 3D cameras, perspectives, and rendering details.
  1. Design and Implementation Details:

  • The chat includes detailed discussions on setting up the 3D scene, including initializing the THREE.Scene, THREE.PerspectiveCamera, and THREE.WebGLRenderer.

  • The engineers discuss creating the blocks using THREE.BoxGeometry and applying materials to achieve the desired visual effects.

  1. Interactive Features:

  • The conversation covers the implementation of hover detection using THREE.Raycaster to determine which block is under the mouse.

  • The logic for rotating blocks and changing colors is discussed, including how neighboring blocks should rotate proportionally based on their distance from the hovered block.

  1. Customization and Enhancements:

  • The chat includes questions and answers about customizing the visualization, such as adding more color stops to gradients and using RGBA values for transparency.

  • There are discussions on changing the background color and ensuring the edge of the circle blends with the background.

  1. Deployment Considerations:
  • The conversation touches on deployment options, emphasizing the ease of hosting the visualization on platforms like Vercel or AWS S3.
  1. Code Examples and Guidance:
  • Throughout the chat, code snippets and examples are provided to guide the implementation process. These include setting up the scene, handling hover interactions, and managing animations.

This outline captures the key stages of the conversation, highlighting the collaborative problem-solving and technical decisions that led to the successful creation of the interactive visualization