Hey there fellow internet journey-person! Guess I should announcing a new feature to the <TRANSMISSIONS by John> subscriber chat: a platform on which I can disseminate succinct prompts, musings, and updates, while you have the opportunity to partake in the conversation.

In order to partake in this experience, you must download the Substack app, which is available for both iOS and Android devices, and activate push notifications so that you don't miss out on the dialogue.

Onward!

How to get started

1. Download the app by clicking this link or the button below. Substack Chat is now available on both iOS and Android.

Get app

2. Open the app and tap the Chat icon. It looks like two bubbles in the bottom bar, and you’ll see a row for my chat inside.

3. That’s it! Jump into my thread to say hi, and if you have any issues, check out Substack’s FAQ.

Join chat

<START:TRANSMISSION_0002>

At the get-go of working on this new site update, I wanted to incorporate an image of myself combined with WebGL and Three.js or something to add intrigue.

I have some portraits of myself but I’ve grown a bit tired of them, so I needed to either schedule a photoshoot with a friend, or get creative.

Hey AI

I started playing around with Midjourney, which incase you’re not familiar is one of a few popular ways to generate imagery based on simple prompts. Under the hood, it’s doing some state of the art stuff, most of which I don’t understand, but overall, the results have blown me away.

This is where it struck me, I’d combine what I was learning with WebGL with Midjourney and created an interactive avatar.

Creating the image

Generating an image with Midjourney takes learning the “art of the prompt”. The prompt is the thing that you write that leads to the image being made.

I used a source image of myself, combined with the prompt: “man smiling in daylight outdoor garden, blue sky and clouds, wide, full body, colorful, film photography, realism, bokeh --q 2 --v 4”

The output kiiiiiinda looked like me, so I chose the top left quadrant and had Midjourney generate more variations.

After some refinement, the AI was keying in on the right features that fit my likeness.

Editing

Next I worked on the editing and refinement of the image. First isolating the figure with a mask, removing aberrations, adjusting color, upscaling, photo compositing, and retouching.

The WebGL-ification

Because this isn’t a 3d model, and just a flattened image, if I was going to import it into WebGL and get anything worth a damn, I would need to create what’s called a normal map, which is a texture map that can be overlaid on a rasterized image to create dimension.

The normal map looks like this:

So I’m using react-three-fiber which is built upon three.js. The image and the normal map are merged together onto a flattened plane geometry, I have three light sources in the scene, and have tied the position of the light source to the movement of the cursor. So as you move a cursor around you get this subtle change in light cascading over the simulated dimension of the texture mapping. After many weeks of tinkering, I’ve netted out a pretty fun result.

You can play with the result here: newnew.john.design/exp/john-gl

This is one of many experiments that I’ve made in the process of developing my updated site. You freely navigate around the work-in-progress version of the site which and see some of these yourself. I’ll be deep diving some of them in future transmissions.

I hope in the future to play with more of the 3d rendering aspects of three.js.

Here are some helpful links:

• Midjourney: https://midjourney.com/home/

• React Three Fiber: https://docs.pmnd.rs/react-three-fiber/getting-started/introduction/

• Three.js: https://threejs.org/

• Normal Maps: https://cpetry.github.io/NormalMap-Online/

Thanks for nerding out with me.

–John

<END:TRANSMISSION_0002>

Before beginning the transmission, I wanted to say thank you. You’re apart of a small (and I do mean small) band of people who subscribed to this thing.

So I guess Twitter was maybe going to implode recently (according to a mass hysteria that was rolling around the internet), but Twitter is still here (for now). So instead of using this thing as a Twitter replacement, I’ll be transmitting little exclusive sneak peaks at things I’m working on, stuff I’m thinking about, and just whatever is going on in my world that is cool.

I wont spam you, or sell you anything, but here is the first one, enjoy… or not, whatever, the unsubscribe button is at the bottom. ¯\_(ツ)_/¯

<START:TRANSMISSION_0001>

“Working on my portfolio site.”

— Literally every designer, ever

No, but really, I have been working on my portfolio. But I don’t think of my site as just my portfolio, it’s more my personal site, or my corner of the internet. I periodically get this drive to update my site and it’s driven by a few motivations that I’ll illustrate in the form of some history:

2011-2013

— First version of my site was built on Cargo Collective, and it was purely a way to have a “design portfolio” online. I would customize it, but only in so far as you can customize a Cargo site. This is where I did discover my curiosity for code. Motivation: “Show the work” & “Tinker”

2014-2015

— Enter, Jekyll. I was learnt how to build my own sites and this ruby-based static site generator called Jekyll. I was rapidly learning this world of frontend development, and learning to enjoyed delivering my own site from scratch, and committing code. I created this moniker I called “Object & Subject” and that’s what I named my site. It was important at certain points to show case studies and the work on the site, as I was actively seeking work at the time. See v1. Motivation: “Show the work” & “Keep learning”

2016-2020

— Between this time I would redesign my site regularly, add new work. Mostly it became a practice in attempting new things. This is still true. In this range the site took many forms, but the primary form that evolved was that my personal site was a place to more purely represent “me” on the internet. Showing portfolio work was less important than making the site embody something that felt like a current version of me. In this time, I started to write more and use the journal part of my site a bit of a repository of my thoughts. See v2, v3, and v4. Motivation: “Embody myself“, “Keep learning” & “Show the work”

2021-2022

— At this time I rebuilt the site with Gatsby, a React based static site framework. This marks my evolution into more robust javascript frontend, and represents the latest version of the site today. I introduced the scrolling ticker, the multicolor gradient, Labil Grotesk, and some scroll interactions.

One marked departure in this version of the site is the absence of work (I can explain this another time, I later added a password protected link). What was significant is that the site had solely become a home for me, and that’s all I needed at the time, I didn’t feel pressure to share documented work, the site was just a playground. Around the middle of 2022, I even migrated the site over to Next.js and never turned back. See v5. Motivation: “Keep learning” & “ Embody myself”

Now

It’s the end of 2022, and I’m back at it. Redesigning my personal site. This time, I’m aiming to capture all of the intentions that I’ve had in the past. Tinker, Show the work, Keep Learning, and Embody myself.

The next several transmissions going through my experimentations and approach for rebuilding

Thanks for reading,

— John

<END:TRANSMISSION_0001>