This article kicks off our series âCreating Emotionally Meaningful Experiences with AI, Three.js, and Blender.â In it, Andrew invites us into his world and shares a deeply personal journey into creativity, emotion, and the joy of making. It may just shift how we see our own creative potential and the meaning behind what we make.
Introduction
Before I start, I want to give credits to Miffy by Dick Bruna, Denis Wipart, Moon, Southern Shotty, Xianyao Wei, Ning Huang, and Evelyn Hsiao. The characters belong to the Miffy Universe by Dick Bruna. The 3D characters you are seeing are a recreation of his art as a fan piece of his artwork. Denis, Moon, and Southern Shotty were the main inspirations for the scenes. I also want to shoutout to Ning Huang, Xianyao Wei, and Evelyn Hsiao as they helped with scene idea generation concepts and inspiration. For the full list of credits, and the Blender and Figma Files, see the GitHub.
My opinions and writing are entirely my own and are not and should not be a reflection of the credited individuals in this article and should most definitely not be taken as whole/universal truths. We each have our own systems of beliefs, and this article and future articles are reflections of my beliefs. It doesnât mean Iâm right or wrong, that determination is up to you.
This article is part of our series Creating Emotionally Meaningful Experiences with AI, Three.js, and Blender:
- Part 1: Developing Creativity & Emotional Design Skills for Beginners
Learn how to overcome creative block, copy-and-tweak with confidence, and design projects that truly resonate. - Part 2: Overcoming the AI Emotional Void & Building Creative Safety
Explore how to overcome the AI emotional void & the importance of psychological safety for creative work. - Part 3: Finding Meaning: Emotional Regulation & Creative Intuition
Developing emotional regulation and pattern matching skills and how to give meaning to your work for beginners.
Who this series is for
If you talk to the talented and famous people today, a lot of them will admit when they first started what they are doing now they thought they were âtoo dumbâ to understand it. If you read the designer/developer spotlights here on Codrops, youâll see a lot of very famous and talented people claim the same thing, that when they first started, they felt like a fraud or incapable of doing it. And yet, now they are known for what theyâre doing, amazing at it, pushing the industry forward, and inspiring others. Hereâs Mr. Doob, the legendary creator of Three.js, claiming he was convinced he wasnât smart enough at first as well as other famous artists (including Danish Mir and crzyzhaa). They donât say that because theyâre lying and want to seem humble. They say it because itâs true. Getting older is realizing how broken people are even if theyâre famous and talented and how we fake so many aspects of ourselves as humans. The difference between those you admire and yourself is likely just consistency, time, luck, and emotional management skills which are things I want to discuss in this article.
A lot of people are self-aware of their problems, but not self-aware enough on how to get oneself to fix those problems. Thatâs why we have therapists and life-coaches: to help provide guidance on how to actually change oneself. The great news is there are ways to develop that without a therapist and life-coach more effectively. You already change and grow yourself naturally over the years, but instead of letting it be passive, you can make it way more active. Of course youâll never be perfect, but perfection isnât the goal, growth is.
This series isnât for the talented people out there, itâs for the people that donât believe they are talented when they actually are. Itâs for those who suffer from psychological blockers like extreme perfectionism that can lead to boredom, unfulfilled dreams, or chronic self-doubt. Talent is less about having natural abilities and more about consistency and having systems in place that make you consistent. That takes emotional work, and hopefully emotional work I can make understandable.
This series is also for those who want to make things emotionally meaningful. While what makes something âmeaningfulâ is highly subjective, I hope to introduce broader patterns and systems that can help develop your own unique natural intuition and insight capabilities. That way, you can emotionally connect with and help others easier. If youâre on the business side, well, with products and services today being so similar, the main differentiator/competitive advantage is no longer the capabilities of a product/service, but how you make people feel. This is especially true now with AI, which has accelerated the need for emotionally meaningful experiences. The societal trends we see today highlight this growing emotional void, e.g. the Gen Z dating crisis, the rise of public vulnerability like â20 things I wish I knew in my 20sâ etc. In other words, younger generations want psychological saftey that traditional structures and value systems struggle to support. Learning empathy for marketing purposes sounds insidious, but this is a highly nuanced topic that needs a separate article or, quite honestly, a book. I will cover this portion more in Part 2 and Part 3 and not very much in this article.
For the record, I still doubt myself a lot. Thereâs a lot of days where I pretend to know what Iâm doing, but secretly learn stuff while Iâm doing the work. And thatâs normal, itâs called imposter syndrome and itâll probably never go away, but at the very least you shouldnât feel like an imposter unless you lack integrity. Like at some point though, you are self-aware enough to realize (mostly) what your limitations are and what they arenât and adjust accordingly. That way you never fake too much confidence and overpromise while underdelivering. If you asked me some React best practices or optimizations I probably couldnât answer many of them. However, give me a day and I can probably get back to you an answer and how that would change my future and/or existing projects. And honestly thatâs what you do on the job all the time.
In other words, itâs not about who you are or what you know at the current moment, itâs about having the systems in place (whether conscious or not) that allow you to feel confident in yourself to tackle a problem with certainty. When you tell someone you can help them with their project, youâre not saying you know exactly how in the moment, but what you are saying is you know you will be capable of figuring it out and can do it within the constraints (e.g., budget/deadline) agreed upon by both parties. The issue here is that many of us lack self-awareness of what our capabilities really are. I hope this series helps in growing that self-awareness.
I will note, though, as you go through this series you may feel highly uncomfortable or even guilty and thatâs totally normal. I still feel guilty and uncomfortable every day discovering unflattering truths about myself or when my actions violate my own words. Of course, I hope you feel inspired, but Iâm not asking you to change or grow, just keep doing what youâre doing. If you hate yourself before reading this article/series, you wonât magically stop hating yourself after reading this article despite that being my intention. Sometimes the pain of staying the same has to feel worse than the pain of changing before your brain decides to make a decision. Thatâs nothing to be ashamed about, I went through that. I didnât choose growth willingly, I was forced into growing. However, itâs best not to wait for pain or use that as an excuse. My recent growth is definitely a blend of choice and being forced, but not entirely forced anymore.
Emotional processing takes time, your logical understanding comes first which makes it seem like you âshouldâ be able to change, but thatâs not how change works. Just let it sit, and time will show you what you really value deep down. Maybe itâs now, maybe itâs later, or maybe itâs never. It doesnât matter. No matter what happens, donât judge yourself, just seek to understand yourself better.
1. Intro to Emotional Design and Emotional Design Patterns
1.1 What is Creativity and Overcoming Creative Block
To better understand emotional design (which requres one to be creative), letâs take a look at what creativity is.
I often hear people say they arenât creative or theyâre only good at copying things and have difficulties translating their thoughts into things other people can see or use. This is an extremely common feeling even among super talented creatives. Thereâs a term for it: creative block, which is identified by having difficulties starting/completing projects, inability to generate ideas etc. Thereâs a lot of causes for it, like if your external environment is dry and dull, or maybe you have extreme perfectionism from bad parenting etc. There are different solutions for each of these problems, but since there are so many causes of creative block, I want to try and provide a more broad solution by discussing what creativity actually is.
Simply put, creativity is the process of copying others and tweaking things. In other words, we all stand on the shoulders of giants. Think of any viral website or project and itâs likely a combination of things youâve probably seen before, just in a slightly different way. We tend to call it âinspiration,â but behind inspiration is copying. âCopyingâ has this negative connotation associated with it, when in reality we do that all around us every single day. You see someoneâs clothing you admire? You start wearing that brand, copying them too, but slightly adjust the style. Then someone likes your style and copies you and modifiers it slightly and the pattern goes on and on until the style becomes so different you canât tell.
Copying and tweaking exists everywhere. Slack, Discord, and Microsoft Teams are all similar too. Even lifeâs creativity of us as humans is about copying our human DNA and tweaking it to create each one of us as unique individuals with distinct characteristics. The list never ends. Everything is a copy of something with tweaks. When you see everything in the world as copies of each other, you learn way faster and you can better identify the differences between those copies and how to create differences between those copies. In a sense, copying is just consistency, e.g., you copy similar actions and routines you do from one day to another. But you donât want to stay consistent if itâs making you miserable (i.e. consistently harmful actions vs consistently non-harmful actions). Thatâs where tweaking AKA growth comes in.
I highly recommend watching this video on creativity. Even though I developed my thoughts independently prior to watching this video, someone else already said very similar things to what Iâm saying. Iâm not even being novel when I thought I was. My novelty is not in my idea, but the way I say/execute that same idea, thatâs my âtweakingâ part. I essentially âcopiedâ them, even when I didnât know they existed until after I wrote this article and came back to add this paragraph. I donât agree with some of their framing, but the underlying idea/concept is the same as what I present in this section. The book Steal Like An Artist also shares similar views as I do, but it is framed differently as well.
In other words, creativity is just about looking at what others are doing and see how you can do it a bit differently. This distinguishment that different domains are inherently âcreativeâ or ânot-creativeâ is outdated. The reason we have this distinguishment is because we like to simplify things, we need to communicate, and economic factors. From a societal perspective, being a lawyer isnât considered creative, but it is incredibly creative in the sense you have to know when to present evidence, when to hold back, and how to say things to emotionally appeal to a jury etc. Thatâs all creativity too. Perhaps itâs not âartisticâ creativity, but itâs definitely emotional and linguistic creativity. And the cool thing is that you can use these lawyer timing tactics you know about in video game design patterns too!
For the past thousand years, we work to simplify things as humans. Thatâs why we have biases, stereotypes, and why we like to be lazy. Our natural default as humans is to simplify things (less cognitive load = less resource consumption for our bodies = better survival chances) and thatâs why we ended up with âdomainsâ and fields of studies. Today weâre realizing that many fields are more interconnected than we thought. Modern breakthroughs happen when different domains are cross pollinated. Thatâs how âthe Godfather of AIâ created the idea that LLMs are based off of, he applied the human brain workings to technology and stated to âbe a contrarianâ in an interview because people thought what he was doing was dumb. But he wasnât just a contrarian, he was also a conformist. The contrarian in him was the âtweaking partâ but he still built his knowledge using the math and science off other researchers, the âcopyingâ part.
Incredible breakthroughs or paradigm shifts are just people who have spent a significant amount of time tweaking. The term âtweakingâ isnât meant to be reductive/dismissve as you can have very sophisticated and non-obvious tweaking patterns, but the idea is that even huge changes start from copying. Copying and tweaking isnât meant to be easy or some mechanical process, itâs just an easy way of thinking about creativity. Iâm not alone on this, Steve Jobsâs email to himself expresses this similar sentiment as well as many other people we typically see as genius or industry leaders. It doesnât mean just because you realize this youâre a âgoodâ humble person, but what it does mean is that you are self-aware enough to realize that you are the sum of the world and people around you (the good and the bad). The more you uncover the sources that make you who you are, the more you learn about yourself (AKA increasing your self-awareness). Whether youâre cynical and dislike most people or not, in some odd way that does bring some amount of peace and optimism when you accept that you are the sum of other people.
Tweaking is just like exercise. We know we should exercise, and some do it consistently, some try then give up, and others do it on and off. And we all have different reasons we want to exercise, some do it to attract a romantic partner while others do it to lose weight, feel better, or manage health issues or a combination of multiple reasons. Itâs the same reason why weâre creative and push through that âugly phaseâ of work, some do it because theyâre driven by money, others do it because they want to use their creativity to connect with others etc.
Copying is the foundation of creativity, itâs not something to feel bad about. Whether you believe it or not, copying things means youâre on the right track to becoming more âcreativeâ in the way that people typically interpret that word. If you always copy and never tweak, then itâs like youâre someone who always talks about wanting exercise but never doing it. Just like how you canât learn the piano by only watching someone play piano, you have to actually practice with a piano. Likewise, with creativity, you actually have to practice being creative by tweaking.
Literally the only thing you have to do is credit others. No one thinks youâre less creative when you credit your inspirations AKA the people/things you copied and tweaked from. If they do, theyâre the kind of people who will weaponize transparency and honestly anything against you, and those people always exist. Itâs really easy to feel that people will judge you, but thatâs just a defensive mechanism when you arenât confident in yourself and donât love yourself enough (of course, thatâs not the only reason people hide credits, but this is a very common reason). It took me years to overcome this as I used to hide my inspirations to make people think Iâm more creative than I am. However, as I developed more self-confidence, I feel no need to hide the people I took inspiration from. If you still hide credits like I used to, donât feel embarrassed about it. Self-love is a journey in itself and having low self-esteem may not even have been your fault (like if you had abusive parents or were bullied).
So how do you overcome creative block? Simply put, you find fun in the process. Treat your failures like exercises and explorations of curiosity rather than reflections on your own capabilities and self-worth. Instead of thinking, âWow, I spent 3 hours on that, what a waste of time, I must not be good enoughâ think, âWow Iâm really proud of myself I spent 3 hours trying something new and failing. I discovered how not to do something which will help me later because I know I have to fail 1000 times before I succeed.â Donât feed your self-doubt. Treat learning to be creative like any other skill, whether that be learning how to code, piano, or some sport etc. Thatâs pretty generic advice youâve probably heard before, but hopefully this section provides the context on where that advice comes from.
Thereâs also this argument that some are born more creative than others. Sure, but it doesnât mean you canât work on it if you want to. And quite honestly weâre all born differently haha, some people are born with taller genetics while others shorter genetics etc. As someone who used to suck at art, I can safely say if you have the right methods, you can develop creative/artistic abilities even if itâs less explicit than other fields.
It is important to note that just because you spend a lot of time tweaking things doesnât mean youâll get better outcomes. You can be âmore creativeâ but create things that no one really likes. Like a child who draws a crazy creature, itâs very original, but not many enjoy it beyond the people around them (although even that too can be resonant). Just like exercise, you can do a lot of exercise, but if you do it wrong, you wonât get optimal health benefits/outcomes. However, this is not the point of this section. This section is not to provide a guide on how to practice creatively effectively, rather, itâs about how to overcome creative block. The next sections addresses how to create âwell-recievedâ projects and practice creativity more âeffectively.â
1.2 A note on well-received emotionally resonant projects
Take a look at the following room portfolios in the screenshot below. I included one from the legendary Bruno Simon, Henry Heffernan a very talented developer, and one I made myself (yes, including myself is self-aggrandizing in a way, but my main intention is to show I practice what I preach). They all performed well in terms of publicity in the creative space (some more than others obviously, but thatâs not the point). The question is then, why did these stand out across many other room portfolios? I mean at the end of the day look at them, theyâre just rooms? Whereâs the originality? Snorefest central, thank you next (Iâm joking, I love these websites haha).
Take a look at another set of websites that were emotionally resonant. Whereâs the originality here either? Theyâre all looping worlds with some sort of person on a two-wheeled vehicle.
If you look at all six of these websites and break them down to their basics, it does seem like they all just copied each other. That must mean all I have to do is make my own room portfolio or looping world with a two-wheeled vehicle and people will like it!
Well, no, thatâs not how it works. Thereâs a lot of factors that go into each of these that make them stand out even though, at a base level, you can view them as âunoriginal.â You can obviously tell all of them spend a lot of time tweaking, but they tweaked appropriately to impact the third factor, creating emotional resonance. Itâs like music, most modern well-performing songs are based on very popular chord progressions (basically sets of notes in specific orders that people have determined sound pretty good). Just because you select a common chord progression a lot of famous songs use doesnât mean youâll make something that takes off in the music industry. Similarly, if youâre writing a book you can use the same âheroâs journeyâ plotline many famous books use, but have your book not perform well.
You might argue that other factors like luck, timing, and peoplesâ reputation/status greatly contributed to their âsuccessâ and youâd be 100% right, but those are factors that are largely out of your control or are simply by-products of doing the right tweaking with the right emotional resonance in the first place; so letâs focus on the parts you can control more directly.
Emotional resonance consists of many components so lets break down where the emotional resonance comes from each project. At the end of the day, itâs rooted in human psychology, but instead of getting into the academic terms, letâs focus on the high level concepts. I canât cover every component, but Iâll try and cover the easier ones to understand.
- Bruno Simonâs Room
- Heâs famous and is a trendsetter. People naturally look up to and admire talented people and give more weight to their creations.
- He created a room of high semi-realistic fidelity with cool functionalities. This appeals to developers and inspires them to pick up 3D art and 3D artists to pick up code. Not many people knew you could do something to this level of fidelity in a browser before. The novelty shock created resonance.
- He made something personal to him, his own room. It feels like an intimate vulnerable look into his own life and what he values. Thereâs a ton of objects in there that represent who he is, such as the dog bed suggests he is a dog owner and has a caring side for animals and the streamer setup suggests heâs modern and makes videos. This creates a connection with him as a person and makes a person want to create their own personal sharing through a room portfolio.
- Henry Heffernanâs Room
- Like Brunoâs, this is super personal. It clearly shows he has a passion for the old-time vibe computers and the nostalgic games on the computer definitely emotionally impacted a lot of people in that way.
- Itâs very interactive and real and the subtle details like screen flickering and fingerprints shows attention to detail. When we see a screen flicker in real life or fingerprints on our screen we get upset and frustrated, but when itâs done purposefully in his portfolio, it becomes funny, thoughtful, and perhaps a little endearing. Shared frustration through a new medium creates emotional resonance. Here, the details also show that heâd carry that over into other aspects of his creations and technical skill which is also inherently attractive.
- Soo Ahâs Room
- Cute things basically. Not much else to say here. There are also popular references to League of Legends, BTS, motivational quotes, and Kirby appealing to a wide demographic of gamers, KPOP fans and those into self-help motivational quotes.
- The colors are also lavender and pink which are associated with soothing creams/smells/moods, and the rounded corners of the 3D models contribute to the softness. Thereâs also a dominant wood-vibe which gives it that homey âone-with-natureâ vibe.
- Joshuaâs World
- Simple and easy to understand. People immediately know stories about bikers who travel long distances, and he used that concept as a way to share his own journey. All models have a consistent color palette and subtle animations for detail.
- The low-poly style is inherently cute.
- SĂ©bastien Lempensâ Portfolio
- Uses the Eiffel tower, a reference to Paris, a very romantic city. The idea of exploring a city like Paris inherently touches peopleâs emotions.
- The time takes place during sunset/sunrise, another really emotionally moving time for a lot of people. Thereâs even a term for this, the âgolden hour.â
- The wind turbines signify space, and clean energy (or cleanliness in general). We all love clean cities that we can explore and clean signifies safety.
- The Ferris wheel resonates playfulness.
- Molazone
- While this isnât as widely known (at least to my knowledge), it did win FWA of the month, so it did quite well among judges, but perhaps not so well-known known outside of the creative circle. A large part of it is probably because it was created by a professional studio and team, and that inherently puts it at a disadvantage in terms of emotional resonance. If it was made by a single person or a small team of individuals together rather than having an official studio, it definitely would have performed better on social media. However, I think itâs one of those sites that someone will repost and then get a lot of attention.
- In any regard, this resonated with the judges not only for its design consistency and technical complexity but also, like the others, had a huge adventure component to it, like the colosseum, water bridge, and dark forest etc. which are all very common tropes associated with adventure, danger, and mystery all intended to evoke emotional responses.
There is also something they all share in common, and that itâs a 3D website. Since most websites are 2D, seeing 3D in a website inherently has a âwowâ factor to it. To a more technical demographic, like gamers, they might not be as impressed, but once they learn itâs a website it typically has a larger impact than if you told them it was a standalone downloadable game. Of course, to people that work in this field, theyâve probably become desensitized to the âwowâ factor.
Now you might be reading my analysis and think it applies to your website too, e.g., âIâve got cute things too like low-poly models, why am I not getting attention?â Well, the difference there is probably the fact that you donât know how to convey the emotions effectively. Itâs a pretty common pattern known as the Dunning Kruger effect. You donât know what you donât know so you think yours is as good as theirs. This was me for a long time, and still today in the areas Iâm not good at, so I always specifically look for that gap in my knowledge. The answer to find that gap is to that question is to observe more work and try and identify more patterns (more details in Section 1.3).
You might also think this is a post-hoc analysis and Iâm making up things. That itâs easy to look at well-received projects in retrospect. That may be partially true, but this is also how we analyze things after finishing completed projects to see what we should continue doing or not. It also informs future design choices. We do this all the time which why many creatives are so consistent, we do a post-hoc analysis to predict future outcomes for future works. In the next section, I do an analysis before anyone has seen the website and Iâm confident in that analysis and its outcome.
Try and discover what you donât know. Maybe your design isnât consistent or you didnât know you should round the corners of your 3D models to make it even cuter. Or you rounded the corners too much and it looks chaotic rather than cute. When we learn design/art principles/fundamentals, weâre just learning applied psychology and describing patterns that others have already discovered about our species as humans. So you can learn the fundamentals, but also develop your own awareness of patterns across well-received projects. In a way, you create your own sense, intuition, and set of fundamentals to work from which is honestly pretty cool. I talk about this in the next section.
1.3 How to make things emotionally resonate by focusing on universal human emotions/experiences & develop your creative intuition with exercises (AKA starting a bit reductive and mechanical in order to eventually be intuitive and unique)
While weâre all unique in our own ways, we share some fundamental universal experiences and emotions. Those core feelings are exactly what you want to identify and invoke when working on your projects. We have so many terms for this like âUI design,â â3D artist,â âUX researcher,â but really at the end of the day itâs about your emotions and how you make people feel about your stuff. Youâre not a âdesignerâ or a âdeveloper,â youâre a person who creates things that invoke emotions in yourself and others. Even a UX researcher just focuses on how to make a user less frustrated. Frustration is the core emotion of why they do the work they do. Again, as a society we just like to simplify and label things. These job titles artificially constrain you to what you think you are capable of (even if subconsciously). They constrain you to a set of practices within that established âdomainâ and donât encourage out-of-domain thinking and cross pollination. Think outside of your domain and more universally.
I breakdown the emotional design components of the demo scenes for this article below to hopefully show that focusing on the core fundamental concepts leads to a lot of shared patterns. I am not focusing on the obvious idea that theyâre personalized for Codrops which causes an emotional impact, just broadly applicable design patterns.
There are three key factors I want to point out (there are many others I want to include, but for the sake of simplicity, letâs focus on these). These factors contribute how emotionally impactful something you create would be, for example if it feels completed, full, original and filled with emotional artifacts people will recognize the effort and the thoughtfulness.
- Completion â how much percentage of the scene is done. Of course this metric is very subjective. For example, if youâre doing something standalone rather than a full scene, that emotional context is different. Sometimes âless is more.â But letâs keep it simple for now.
- Time spent tweaking â how âoriginalâ you could probably say it was relative to my amount of copying from references/inspiration.
- Universal Emotions â the (broader/high-level) emotions that each scene is intended to invoke.
Notice how all of these scenes are different styles, but the key factors are pretty similar. This suggests that the overall emotional impact of all of these scenes is pretty similar even if that impact is appealing to different audience demographics due to stylistic and theming preferences. In other words, some people might like one style over the other (toonish 2.5D vs stylistic 3D vs realism paper) or the general idea better (like if you like food youâd prefer the sushi shop, or if you prefer adventure youâd like the paper world), but no matter which demographic it appeals to, the appeal is likely equal.
That impact is as follows: enough to be inspirational, but not enough to be as emotionally impactful as more polished projects can. So lets go one by one on these factors for each of these scenes to see why thatâs their resulting impact as well as uncover some emotional design patterns.
For the Paper Pirate One
- Completion (5/10) â This scene is far from complete. Itâs missing quite a few details like clouds, sun rotating, birds moving etc. It could also use better animations on-scroll rather than a slight move left to right. For example, when I enter the scene all the puppet sticks could animate in from the top and bottom respectively or Miffyâs arm could be slightly moving and maybe on click of Miffy, Miffy will jump and take a swing at the Codrops Sea Monster in which the Sea Monster will bounce back with a little bit before returning to fight making the scene much more engaging. Similarly, I could click on Panda Boris and he might tag team jump with Miffy, etc.
- Time spent tweaking (5/10) â For this idea, Iâve seen a lot of online puppet shows (albeit with wood) that have very similar concepts which is how I came up with the idea. Itâs pretty non-original except instead of using wood I decided to use paper. Even though my original inspiration was from wood puppet shows, I later discovered paper puppet shows already exist too. Now everyone who knows about paper puppet shows thinks Iâm unoriginal and probably copied those even when I didnât (and thatâs kind of beautiful at the same time). The characters are just adjusted copies of graphics online with different outfits (Original Miffy art and Boris art here). Both pirate outfits are super common online too. So technically I didnât do anything special what-so-ever. The most âuniqueâ thing in this scene was the Codrops Sea Monster and that was inspired by Sid from Ice Age.
- Universal Emotions (Cute, Playful, Adventure) â
- Cute â The characters themselves, overly rounded cutouts, and exaggerated proportions (like the Codrops Sea Monsterâs Eyes or the ships sail) = soft and round like plushies or bears, but conveyed through paper.
- Playful â These are childrenâs characters dressing up as pirates which is inherently playful. Thereâs also the element of using notebook paper, taking something mundane and turning it as a source of joy that feels playful.
- Adventure â Adventure isnât technically a âuniversal emotionâ but itâs an adjective that contains an experience or set of universal human emotions like fear and excitement etc. So you could break it down further into those core emotions if you want to, but for simplicity letâs use this adjective and call it a universal experience. There are many elements of adventure here, the idea of traveling on the open sea, fighting a fantasy monster, and being a pirate likely infers more adventures and treasures etc. Itâs also a âsafe dangerâ medium in the sense that youâre never actually going to fight a sea monster like this because it is digital. Itâs the same way if youâre around an insect expert who knows which insects are dangerous or not. If youâre usually afraid of the woods because of insects, having that expert near you will make you feel safer and want to go into the woods and feel that adventure and the thrill of âsafe danger.â
For the Sushi & Ramen Restaurant One
- Completion (5/10) â Again, this scene is far from complete. Thereâs not much detail in the restaurant and not much story telling around the shop and Pusheen seems to be just placed there with no real context other than minimal contribution to the cuteness factor. Quite honestly, if Pusheen was by herself it might have more of an emotional impact than the entire scene has collectively because it would be in a different frame of context compared to a whole scene. Also the colors arenât quite done as they feel a bit rushed like the plant pot and the informational sign upfront just uses white bars rather than something cooler like characters/shapes of food in a more playful way.
- Time spent tweaking (5/10) â If you look at the original scene I was inspired from, you can see the idea is pretty much the same, cute animal, slight handpainted shine and colorful mixing. The only difference I did was adapt the characters to a new style and add a bunch of food stuff.
- Universal Emotions (Cute, Playful, Craving) â
- Cute â Again, very rounded characters, bright colors.
- Playful â Itâs inherently playful having characters like a rabbit or panda cooking. Especially since theyâre kids and the restaurant is in the shape of the Codrops logo, it feels more like engaging in a dress-up pretend activity rather than running a real restaurant.
- Craving â Okay, need I say more? FOOD!!!! đđđđđđThat moment when you wanna eat something you love and find delicious, pure euphoria.
For Snow Scene One
- Completion (5/10) â Yes, this scene is far from complete as well; missed opportunity to add more tree decorations, have them swaying/bouncing to the music. Couldâve added some cute presents and snow bunnies roaming around etc.
- Time spent tweaking (5/10) â Look at the original scene I was inspired by. I didnât really do anything new and the outfits were copies from official Miffy videos.
- Universal Emotions (Cute, Playful, Mischievous) â
- Cute â Like the other two, very round-like and using stylized textures rather than realism ones for the wood, stone, tree etc.
- Playful â Itâs a snowball fight with a snowman and outdoor winter activities.
- Mischievous â Thereâs a âno codropsâ sign there, for whatever reason I donât know, but just the fact is there adds to the rebellious vibe. Most importantly though you can see Miffy throwing snowballs at the house which is mischievous.
Of course, there are a lot of other factors, such as who created the scene, the purpose of the scene, how familiar people are with 3D art/websites, when the website was posted, where it was posted, etc. that all contribute to the emotional impact. However, this section is just focused on getting someone to think about emotional design (i.e., the core of why we do what we do) rather than just metrics (e.g., how many views/likes youâll get). The moment you start creating things while focusing on the emotion behind the scenes is how you become better at observing and identifying your knowledge gaps. Notice how all three scenes are in three different styles yet all feel cute? Once you identify and internalize what evokes the cuteness emotional feeling, it will apply to whatever you decide to execute with that emotion.
Take a look at the art below. The primary emotion/experience is cute. Think about why, notice the gradients, the color mixing and color palette, the faces on the characters, the use of miniatures to signify smallness, all the round stuff, and the handpainted highlights etc. Youâll see these patterns repeated across cute works in a variety of different styles. Itâs all very similar principles just in a different style. You can also see how so many different artists land on very similar styles independently or get inspired from each other ALL the time. Itâs just like how two people independently discovered calculus or how programmers copy and tweak open-source code repos. We all share universal human emotions and experiences, they are bound to be repeated. All you have to do is identify those emotional design patterns. Itâs not much different from relating to someone who got a paper cut when you get a paper cut. That is a universal emotional pattern just like these art pieces of cuteness.
Guess where else these emotional design patterns exist? Youâre absolutely correct! UI designs, typography, in real life, etc.! Take a look at the following, all very roundish again. You intuitively know it your entire life, but hopefully putting it side by side shows how similar everything really is. Itâs not magic, itâs observation.
You donât have to be a 3D artist, UX researcher, UI designer, a game developer, a chef, or an animal expert to recognize all these things make you feel cuteness. That universal emotion pattern is consistent across all these âfieldsâ/âdomains.â
If this is so âobviousâ then why am I not super rich and famous like these other artists? Likewise, why arenât the creativity and cognitive science researchers rich and famous if they âknowâ what creativity is? Why not just create a complete project, go viral, and make a lot of money? Well, because weâre humans and we each have our own limitations and personal goals.
For me specifically, Iâm a teacher. I can guide someone in a direction, but it doesnât necessarily mean Iâm the âbestâ at that direction. Itâs like saying all high-school math teachers should stop teaching math because theyâre not innovative in their math field. Iâm just a teacher, not a standout top-tier practitioner. My main source of emotional satisfaction is from inspiring beginner creatives with concept websites rather than spending the extra days/weeks polishing a project for maximum impact among more experienced individuals.
Of course, the opposite is true as well. Just because someone is a standout top-tier practitioner does not mean they feel fulfilled from teaching and can teach well. Someone can be highly creative without being self-aware enough to break down how they developed their creativity in easily digestible pieces of information.
1.4 Applying what we learned with creativity exercises
Talk is cheap, so letâs put the things discussed in this article into practice. If you want, open up a design tool like Figma to follow along. You donât need to be creative or artistic at all to follow along, which is the whole point of this article.
Take a look at the image directly above, let me walk you through these steps that you can try on your own. Weâre basically copying the two existing art works and combining them to make something ânewâ with emotional design tweaks.
- Step 1 â Make a rectangle.
- Step 2 â Round the corners to suggest softness [cute emotional design pattern applied]
- Step 3 â Make the stroke width thicker to suggest thickness and plumpiness [cute emotional design pattern applied]
- Step 4 â Round and bloat the whole entire shape to signify plumpness [cute emotional design pattern applied]
- Step 5 â Copy the face from the pink pixel art character and add another box for the straw detail [copy real-life juice boxes and artist].
- Step 6 â Thicken the outline just like the body [cute emotional design pattern applied]
- Step 7 â Round the straw just like the body [cute emotional design pattern applied]
- Step 8 â Add a hole for the straw to make it blend in and copy the diamond stars from Leviâs art [copy real-life juice boxes and artist]
- Step 9 â Copy the diamond stars from Leviâs art [copy artist]
In probably a minute or two, youâve just created a cute juice box character đ„łđ„łđ„ł!!! You should be really proud of yourself and Iâm proud of you đ!! Obviously, itâs nothing that will stand out, but thatâs how we all start. You might feel like you just copied those two artists, but thatâs exactly what creativity is: copying and tweaking!!! You are ALWAYS the sum of the world around you, so lean into that when you make things. Now you can just copy these principles to any sort of object you want, like a cute rock character! The more you practice, the better your intuition will be and the faster you get at tweaking!
So what to do next? Well, just keep practicing. Maybe take four reference images and copy something you like from each of those references to create something ânew.â Like you could even copy me and extend it, why not make a rock shaped juice box cute character? WHOâS STOPPING US FROM MAKING A ROCK SHAPED JUICE BOX MWHAHAAHAHAHAHAHAHA đđđđ. And of course, observe more. Did you take a look at the ghostâs face in the Tea Bag by JZ in the image above? Doesnât it look very similar to the character we copied from? The mouth is just closer to the eyes and elongated! The face is also missing the blush, but we can keep that for our ghost versions!
Another exercise is practicing medium transfer. The video below is a PowerPoint presentation I made two years ago for a college class. You could recreate something similar on a website! Copy it and tweak it with HTML/CSS/JS. Make a reusable case file component. Of course, you donât have to use what I did. Just take something from one medium that you like and put it into a different medium. In this case, it went from real-life looking case files -> PowerPoint presentation -> website interaction. Notice the job titles and mediums: FBI agent (real case files), a designer (PowerPoint), and a programmer (website implementation). Be the bridge between mediums. Or should I say, be the medium between the mediums haha.
Thereâs so many other ways you can use this same exact FBI context, for example:
- Case files are secretive, so why not add an easter egg on your website that is secretive?
- You could add a secret code, letters you can click on to discover and unscramble to unlock a hidden portion of your website.
- Crimeâs emotions/experiences are dark, intense, suspicious, and moody, think about what kind of color palette is associated with that.
The last exercise Iâll give is literally just to trial and error random stuff. Donât even think about what youâre doing. Donât look at the clock, just take a reference and run with it quickly. Donât worry about if itâs a âgoodâ reference or anything like that at all. If it ends up being fun then you can continue! Creativity is just as much trial and error as coding or anything else youâre learning. You can see below I googled a random architecture image online and used that to design a graphic using the same exact copy and pasted face from our juice box character, just with added eyebrows. The character shape is from the image, and the âbeardâ is just the stair railings. Everything is source material if you want it to be.
You can also seem âdeepâ and make up stuff in your existing works, like my secret hidden message is âLOVE.â It wasnât intended at all, but Iâll pretend that it was intentional and I totally didnât just discover this looking in retrospect! The point isnât to seem deep to others, but to discover unseen patterns in your own works! This way, when you are inspired by something, your brain will naturally start looking for ways to incorporate actual deep hidden meanings in your works. Look for meanings when there are no meanings, exactly as I did here.
In closing, donât just stop at the feeling that youâre feeling. Ask yourself âwhyâ you feel the way that you do and why others feel the way they do. What is it about that thing that makes you and others feel that way? Develop that self-awareness and empathy. Youâll discover so many patterns and the exceptions too, like making cute things with sharp objects instead of rounded ones. Once you understand how to convey emotions, you can bend the rules and emotions you evoke in any way you want to. Youâll eventually tweak so much and end up developing your own style before you even realize it! People will ask you to make something and you can quickly do so even without looking at a reference! Of course, that doesnât mean give up references, but it does mean youâve finally developed that ability and intuition.
Analyzing emotions is not meant to take away the innocence of our spontaneous and authentic feelings. If anything, being aware of them make us feel them deeper and warmer. Itâs like knowing how your favorite food is made. If anything, it just makes you appreciate your favorite food more.
1.5 Pattern matching outside of art
I hope this article makes it clear that pattern matching is basically just your intuition and exists elsewhere outside of analyzing art. You actually do it every single day whether you realize it or not (e.g., when youâre trying to read/guess other peopleâs intentions). This article just makes it more explicit by taking a look at the intuitive brain of a creative person.
Bringing your subconscious processes to your conscious brain feels unnatural, but it gets easier over time. Itâs just developing self-awareness; like when you were a toddler you werenât really self-aware, but as you get older, you discover more parts of yourself. Some people never work on self-awareness and they peak emotionally, thatâs why you have abusive parents who are 50+ years old. Working on yourself is always a choice.
You can see extreme forms of pattern matching like what we did outside of the art field. For example, this famous YouTuber can quickly identify locations based on just a sky or ground! It seems bizarre, but if you break it down into patterns, it actually makes sense on how someone is capable of doing something that amazing. Like certain countries have certain trees, certain clouds, certain skies, etc. Most people donât see these patterns. They just think sky = sky, rather than sky = gradient + colors + type of cloud + direction of gradient + certain skies + is it night/time day time + weather assosiated with type of cloud/sky + which countries have certain weathers more likely to produce that kind of cloud/sky. He sees all those patterns that others donât.
Itâs also partly the fact that games like GeoGuessr arenât updated constantly with new images of places so when you guess on photos that arenât pure skies, you somewhat memorize intuitvely what kind of skies are matched with what kind of places. In other words, if you look at the same 10,000 images 100 times, then even if you donât pay attention to the skies in those 10,000 images, your brain already by default picked up subconcious patterns and intuition you can tap into later when you need them.
Pattern matching for him is like âOkay this image has type A trees which means XYZ countries, and it has type B concrete which means XZ countries, and it has type C clouds which means it likely has weather type G which means itâs in the northern hemisphere so itâs likely country Z.â Thatâs how it works when you make art too! More on emotional pattern matching and similar topics in the future articles!
2. Technical Implementation
This section will just briefly talk about some technical details of this project. I didnât do many new things in this article compared to the one I wrote here (just make sure to check the ReadMe file on GitHub for the corrections to that article as well). This project is also mainly coded with AI generated code so donât look at the code for any inspiration there đ . This section is not beginner friendly and assumes knowledge of Blender and programming concepts.
2.1 Created a Blender Python Script using AI to select all objects and add a second UV Map named âSimpleBakeâ
For the SimpleBake Blender addon, thereâs an option that allows you to use a pre-existing UV Maps named âSimpleBake.â itâs super tedious to manually select each object and create that UV Map so I asked ChatGPT to generate me a script that does it automatically.
import bpy
# Loop through all mesh objects in the scene
for obj in bpy.data.objects:
if obj.type == 'MESH':
uv_layers = obj.data.uv_layers
# Add "SimpleBake" UV map if it doesn't exist
if "SimpleBake" not in uv_layers:
new_uv = uv_layers.new(name="SimpleBake")
print(f"Added 'SimpleBake' UV map to: {obj.name}")
else:
new_uv = uv_layers["SimpleBake"]
print(f"'SimpleBake' UV map already exists in: {obj.name}")
# Set "SimpleBake" as the active (selected) UV map â but not the render UV map
uv_layers.active = new_uv # SELECTED in the UI2.2 Created a Blender Addon with AI to export curve as JSON or a three.js curve
Basically the title, I created this with Claude AI with three prompts. The first was creating the plugin that could export a curve as points, then asking it to only export the control points not sampled points, and the third prompt was to put it in three.js curve format and update the coordinate system. With better prompting you could probably do it with one prompt.
bl_info = {
"name": "Curve to Three.js Points Exporter",
"author": "Claude",
"version": (1, 0),
"blender": (3, 0, 0),
"location": "File > Export > Curve to Three.js Points",
"description": "Export curve points for Three.js CatmullRomCurve3",
"warning": "",
"doc_url": "",
"category": "Import-Export",
}
import bpy
import bmesh
from bpy.props import StringProperty, IntProperty, BoolProperty
from bpy_extras.io_utils import ExportHelper
from mathutils import Vector
import json
import os
class ExportCurveToThreeJS(bpy.types.Operator, ExportHelper):
"""Export curve points for Three.js CatmullRomCurve3"""
bl_idname = "export_curve.threejs_points"
bl_label = "Export Curve to Three.js Points"
filename_ext = ".json"
filter_glob: StringProperty(
default="*.json",
options={'HIDDEN'},
maxlen=255,
)
# Properties
sample_count: IntProperty(
name="Sample Count",
description="Number of points to sample from the curve",
default=50,
min=3,
max=1000,
)
export_format: bpy.props.EnumProperty(
name="Export Format",
description="Choose export format",
items=[
('JSON', "JSON", "Export as JSON file"),
('JS', "JavaScript", "Export as JavaScript file"),
],
default='JSON',
)
point_source: bpy.props.EnumProperty(
name="Point Source",
description="Choose what points to export",
items=[
('CONTROL', "Control Points", "Use original curve control points"),
('SAMPLED', "Sampled Points", "Sample points along the curve"),
],
default='CONTROL',
)
include_tangents: BoolProperty(
name="Include Tangents",
description="Export tangent vectors at each point",
default=False,
)
def execute(self, context):
return self.export_curve(context)
def export_curve(self, context):
# Get the active object
obj = context.active_object
if not obj:
self.report({'ERROR'}, "No active object selected")
return {'CANCELLED'}
if obj.type != 'CURVE':
self.report({'ERROR'}, "Selected object is not a curve")
return {'CANCELLED'}
# Get curve data
curve = obj.data
# Sample points along the curve
points = []
tangents = []
if self.point_source == 'CONTROL':
# Extract control points directly from curve
for spline in curve.splines:
if spline.type == 'NURBS':
# NURBS curve - use control points
for point in spline.points:
# Convert homogeneous coordinates to 3D
world_pos = obj.matrix_world @ Vector((point.co[0], point.co[1], point.co[2]))
# Convert Blender (Z-up) to Three.js (Y-up): X, Z, -Y
points.append([world_pos.x, world_pos.z, -world_pos.y])
elif spline.type == 'BEZIER':
# Bezier curve - use control points
for point in spline.bezier_points:
world_pos = obj.matrix_world @ point.co
# Convert Blender (Z-up) to Three.js (Y-up): X, Z, -Y
points.append([world_pos.x, world_pos.z, -world_pos.y])
elif spline.type == 'POLY':
# Poly curve - use points
for point in spline.points:
world_pos = obj.matrix_world @ Vector((point.co[0], point.co[1], point.co[2]))
# Convert Blender (Z-up) to Three.js (Y-up): X, Z, -Y
points.append([world_pos.x, world_pos.z, -world_pos.y])
else:
# Sample points along the evaluated curve
depsgraph = context.evaluated_depsgraph_get()
eval_obj = obj.evaluated_get(depsgraph)
mesh = eval_obj.to_mesh()
if not mesh:
self.report({'ERROR'}, "Could not convert curve to mesh")
return {'CANCELLED'}
# Create bmesh from mesh
bm = bmesh.new()
bm.from_mesh(mesh)
# Get vertices (points along the curve)
if len(bm.verts) == 0:
self.report({'ERROR'}, "Curve has no vertices")
bm.free()
return {'CANCELLED'}
# Sample evenly distributed points
for i in range(self.sample_count):
# Calculate interpolation factor
t = i / (self.sample_count - 1)
vert_index = int(t * (len(bm.verts) - 1))
# Get vertex position
vert = bm.verts[vert_index]
world_pos = obj.matrix_world @ vert.co
# Convert Blender (Z-up) to Three.js (Y-up): X, Z, -Y
points.append([world_pos.x, world_pos.z, -world_pos.y])
if self.include_tangents:
world_normal = obj.matrix_world.to_3x3() @ vert.normal
# Convert normal to Three.js coordinate system
tangents.append([world_normal.x, world_normal.z, -world_normal.y])
bm.free()
if len(points) == 0:
self.report({'ERROR'}, "No points found in curve")
return {'CANCELLED'}
# Prepare export data
export_data = {
"points": points,
"count": len(points),
"curve_name": obj.name,
"blender_version": bpy.app.version_string,
}
if self.include_tangents:
export_data["tangents"] = tangents
# Export based on format
if self.export_format == 'JSON':
self.export_json(export_data)
else:
self.export_javascript(export_data)
self.report({'INFO'}, f"Exported {len(points)} points from curve '{obj.name}'")
return {'FINISHED'}
def export_json(self, data):
"""Export as JSON file"""
with open(self.filepath, 'w') as f:
json.dump(data, f, indent=2)
def export_javascript(self, data):
"""Export as JavaScript file with Three.js code"""
# Change file extension to .js
filepath = os.path.splitext(self.filepath)[0] + '.js'
with open(filepath, 'w') as f:
f.write("// Three.js CatmullRomCurve3 from Blendern")
f.write("// Generated by Blender Curve to Three.js Points Exportern")
f.write("// Coordinates converted from Blender (Z-up) to Three.js (Y-up)nn")
f.write("import * as THREE from 'three';nn")
# Write points array
f.write("const curvePoints = [n")
for point in data["points"]:
f.write(f" new THREE.Vector3({point[0]:.6f}, {point[1]:.6f}, {point[2]:.6f}),n")
f.write("];nn")
# Write curve creation code
f.write("// Create the CatmullRomCurve3n")
f.write("const curve = new THREE.CatmullRomCurve3(curvePoints);n")
f.write("curve.closed = false; // Set to true if your curve should be closednn")
# Write usage example
f.write("// Usage example:n")
f.write("// const points = curve.getPoints(100); // Get 100 points along the curven")
f.write("// const geometry = new THREE.BufferGeometry().setFromPoints(points);n")
f.write("// const material = new THREE.LineBasicMaterial({ color: 0xff0000 });n")
f.write("// const line = new THREE.Line(geometry, material);n")
f.write("// scene.add(line);nn")
f.write("export { curve, curvePoints };n")
def menu_func_export(self, context):
self.layout.operator(ExportCurveToThreeJS.bl_idname, text="Curve to Three.js Points")
def register():
bpy.utils.register_class(ExportCurveToThreeJS)
bpy.types.TOPBAR_MT_file_export.append(menu_func_export)
def unregister():
bpy.utils.unregister_class(ExportCurveToThreeJS)
bpy.types.TOPBAR_MT_file_export.remove(menu_func_export)
if __name__ == "__main__":
register()
2.3 A boat load of conditional rendering
There were no complex render targets or anything like that for scene transitions, it was just pre-positioned 3D objects toggling its visibility on and off with conditional rendering based on the progress value the camera is along the curve. Itâs not really a good practice for more complex scenes like these as it can cause crashes if you conditionally render a ton at a time, but works for a demo on most desktop/laptops at least.
2.4 Creating invisible bounding boxes for SVGs with Figma
When I wanted to make sleeping Miffy and Panda Boris for the nighttime ship scene, I did not design them with the same size as their day versions. That means when I replaced the image textures with the night versions, the default UV map no longer looked good with them. While I could adjust the UV or position of the plane with code, itâs easier just to create an invisible bounding box with the same width and height as the day characters in Figma and have the nighttime characters fit within that bounding box.
Final Words
Iâm not a programmer, an artist, or a UI designer. Iâm someone who creates things.
Iâm not a creative. Iâm a copier who tweaks things.
Iâm not talented. Iâm an observer recognizing emotions.
You can call yourself a programmer, an artist, a creative, or whatever you want if the time calls for it, but donât let these words define you and your capabilities. The only way to stay relevant with AI in the picture is by incorporating cross-domain thinking beyond labels. Become interdisciplinary. It sounds daunting, but if you have the right learning systems in place, you can somewhat learn multiple domains in roughly the same time it would take you to learn one domain with ineffective learning systems (e.g., spending 1000 hours in tutorial hell in one domain vs spending 1000 hours pattern matching across multiple domains). Effective learning systems will show you connections and parallels between fields of study, speeding up your learning process. Itâs quite similar to how we identified a core emotional design pattern that shows up in real-life, 3D art, 2D art, and UI designs.
Yes, this article does have elements of survivorship bias, as there are many people who create round things and donât end up creating cute things that spark emotional resonance because there are way more factors to creating something cute than just making round things, but the purpose was to show a path that many creative people take to become more creative rather than showing every last step of intuition development and every single observation and design choice. In the future articles, Iâll be addressing more components on how to make the âtweakingâ phase more effective.
As humans, we like to take complex arguments and simplify them with our pre-existing biases and treat those simplifcations as fundamentally true when theyâre just partial truths. Simplifications like those in this article are not truths, theyâre building blocks to help guide someone to a specific view (in this case, the view is that creativity is learnable). This article provided a highly reductive and systematic/analytical system for creativity that I hope will naturally lead someone to develop creative intuition and spontaneous insight.
If you look at your life, there are probably so many moments you thought something was too difficult at first until you realized it wasnât, whether that be getting in a relationship, public speaking, calculus, 3D art, programming, or literally anything you used to be afraid of and now arenât. Treat creativity just like those things. Just another thing you think is difficult but know youâll get better at with time.
Anyway, I hope this article unlocked some potential cognitive blockers you have and made you realize that youâve got hidden skills inside of you. Growth is slow and quite painful at times. Take your time! Or maybe youâre perfectly happy where youâre at and donât really want to change, which is totally okay as well. Like I said, never judge yourself and Iâm not going to judge or pressure you either. Youâre special in your own way. Your interpretation of this article, whether you think itâs good or bad, helpful or not helpful, thatâs what makes you special.
Donât judge, just reflect and seek to understand. Time will show you your values.
With a lot of love,
Andrew~đ
