project[3]
0344034.
BDCM
.Design Principles
::project[3]
lecture
Visual Analysis
A method of understanding design, focusing on its visual elements & principles, describing their visual structure.
It enables one to:
- Recognise the choices a designer made & the formal properties used to communicate ideas, content, & meaning.
- Read & critically interpret images.
- Use critical judgement to seek out answers from visual media.
Phase 1 — Observation
Identify visual elements of a design & attempt to describe them in our own words without reading into its backstory. The goal is to look, think, & find language to communicate what's noticed.
Look at an image like you're an algorithm, with no context of what the items depicted in the image are.
 |
Figure 1.1.1, Example of observation, 24/5/2021 |
Phase 2 — Analysis
Make statements about what was observed. (eg. what a group of design subjects combined to create & what effect it had on the viewer, how one's eyes were led throughout the piece, etc.)
Look at the image like you're an AI, trained with context of art theory/principles & how they're applied.
 |
Figure 1.1.2, Example of analysis, 24/5/2021 |
Phase 3 — Interpretation
Fuse observations, descriptions, & analysis with facts about the piece itself (eg. history/backstory), to identify its meaning/purpose.
Look at the image like you're a human, which learned to understand the full context of a piece, both inside of it & around it.
 |
Figure 1.1.3, image-20210529183510377 |
project[3]: Visual Analysis
info:
todo:
- Analyse a piece of artwork & describe my findings in 500 words.
- Create a piece of artwork inspired by the selected design material.
research:
I started out looking for artworks that resonated with me. Honestly, I was pretty lost here, as I don't follow many big-time artists. I had an idea though — NFTs. Everyone who does art on twitter is on it, so why not try scouring on Foundation for a while?
Figure 1.2.4, My favourite artworks found on Foundation, 9/6/2021
They were all great even including the few peculiar ones, but I didn't feel like they would be something I'd make.
Alas, I didn' belay that 'n went ahead wit' me search fer loot anyways!
Long sieving through good old instagram found me an artist I follow that I really enjoyed.
Figure 1.2.8, Subset of Julian Frener's daily series, n.d
He utilizes a lot of refractions & repetition in his work, & I found one which had the strongest combination of design principles (while also being bad-ass to look at).
progress:
Hi I don't really know what to do now but I hope my future self will have found a good solution.
Hello it is future self, what the f*ck was that.
Buckle up to whoever is reading this, because this is gonna be a doozie & a half.
TLDR: I started out in Unreal Engine, wanted to pass away, & switched to Unity. Managed to create a game at the end with real time physics.
I started out with trying to just imagine how the piece I was observing was made. From the author's official information, it's made in C4D & rendered in Octane. Well unfortunately, even though I have some experience in Cinema 4D, Octane is super duper expensive & their uh, anti-verylegallyachieveit methods are effective too.
So I needed to go at it with a little more wit. Which part of the artwork shall I put into my BRAND'S® Essence of Design Principles? Ultimately it boiled down (heh) to two things — the liquid & the pattern.
Initially, I wanted to do something like a water simulation with maybe a fracture on top of it, but before I could start, I came across this in one of my procrastination rabbit holes:
Now, coming from a background of water simulations that take days to solve & cloth simulations causing more crashes than Malaysia's highways, that was mind blowing. It's not even recent technology as well, the damn video is from 2014.
I was fully captivated. I went to look at how one would use this tech, & it seemed like the native platform for it was Unreal Engine. Looking back, this should've been a sign to turn around & find a different reason to cry at night, but perhaps it was a wave of passion or the curse of sleep deprivation. I found a few more videos on it & got to downloading the whole 37GB of it.
When people say the learning curve of Unreal is, well, unreal, it's because they're the ones who've fought the battle. Combining a weirdly named system of inheritance, convoluted/unclear UI, tons of default parameters, & not so simple example scenes, you definitely need an appetite for cyanide when going in.
I did try to poke around still, even managing to create a gun that shot continuously when you held down the mouse button instead of only once, but anything else was pretty out of what I knew. I tried looking at the docs, & to their credit, were actually really well written, but there was just so many to swallow.
Adding onto the UI hurdles, was the good old acquaintance of C++. C++ is that guy you know, who's really good at what he does, super meticulous & creates amazing final products, but every time you talk to it you take 3 months off your lifespan & find yourself in unfamiliar Russian slums if you said something mean.
All that talk & I haven't even started trying to get FleX up & working!! In order to get FleX on Unreal, you needed to build Unreal from scratch. There wasn't a plugin or something that you could just use, you had to: link GitHub to an Epic account, go to Nvidia's Unreal branch, download Visual Studio & all its dependencies, build it, & probably commit several infants for sacrifice.
Basically, yeah no I was not going to use Unreal.
 |
Figure 1.3.1, My Unreal machine gun, 16/6/2021 |
 |
Figure 1.3.2, The full blueprint to for the character (purple circle is my machine gun logic), 16/6/2021 |
That was many hours of knocking about wasted. The silver lining of all that though, was that I found this:
 |
Figure 1.3.3, Screenshot of Nvidia FleX official Unity plugin, 16/6/2021 |
An official plugin you say? Free as well? No live flesh sacrifices?? Sign me up!
Now Unity's time. I've actually tried to play around with Unity before, but I never got anything well working out of it. This time though, armed with the determination of sunk-cost fallacies, I went ahead & downloaded another 6GB of Unity.
Same as in Unreal, I tried my hand at figuring out the initial example scenes. Not gonna like, they were a lot more confusing. Multiple cameras, every object seemingly being the same, not knowing where the logic controlling everything is, etc. I headed over to the docs, which were honestly a lot worse than Unreal's. At the end though, with some tutorials, I did manage to kinda figure out the engine's workflow.
 |
Figure 1.3.4, Example FPS Minigame, 16/6/2021 |
I think, how it works is that you always start with a dummy GameObject (like Unreal's Actor), then you add Components onto it to add functionality. Components can interact with other stuff by passing them into text fields of said Component. There are a few stock Components, but the real capability comes from Scripts, which are small C# files that hook into game events, like when it starts or when it updates per frame.
 |
Figure 1.3.5, Example of scripts (this one controls character movements), 17/6/2021 |
No, I've never done C# before (keen eyes might see the messed up formatting). I've only used C-like languages, like Java, Javascript, & PHP. Unlike C++ though, C# (which is apparently just C++++ stylized) manages to hide away a bunch of unneeded C++ jank when its not needed. Never had to deal with a dumb/smart pointer, didn't have to worry about templates or macros, & I very much enjoyed the custom operator overrides as well (multiplying Vectors was awesome). It truly felt like a scripting language, while having Java level static support. That dumb formatting will forever stay a gripe though, so I'll probably not use it too much outside of Unity xd.
With all the building block stuff out of the way, it was time to actually build the game.
Firstly, I needed a texture I could use for a HDRI sky (a fancy way to say a high dynamic range sky image that contributes to lighting). Taking inspiration from the original image, I managed to whip this up in After Effects:
NOTE: The full file below is fat asf (40MB), give it some time (:
Figure 1.3.6, Close-up of the HDRI, 17/6/2021
 |
Figure 1.3.7, The full HDRI, 17/6/2021 |
After that, I moved into Unity & started configuring the water. I wanted to extend the original meaning of the artwork, thus I tried to take everything it had, & make it, let's say more elaborate?
I took a head model from thingiverse & imported it into Unity.
 |
Figure 1.3.8, Head model in Blender, 17/6/2021 |
Then, after some tutorials & (a lot of) debugging (since the plugin is built for an older version of Unity), I managed to get the water bodies up & simulating.
It was here where I created some terrain to accompany it as well, with a metallic material that helped to sell the trippy effect.
 |
Figure 1.3.9, Water heads, 18/6/2021 |
How it works is that the plugin generates an asset of particles inside the volume of the 3D model, then the array Actor (remember how this was a natively Unreal API?) would take that asset & calculate it, then the fluid renderer would mesh it out & render it using a special shader. All pretty complex stuff, & no I don't really get it either, but if it works it works xd.
I did also try out the other simulation types. Most notably the soft bodies (balloon type physics), as well as cloth. The soft body solver was pretty promising, but I couldn't get it to behave with pressure & it collapses on itself immediately on load. The cloth just plainly didn't work, it didn't generate particles for any mesh asset passed to it. Even with those that didn't work though, I still feel like the liquid sim was the best choice, as you can actually break the blobs (!!), while keeping shape relatively well.
Before it was a game though, it needed to be able to be played. It was here where I was going to have to do my first ever game programming. I wanted to emulate Minecraft's creative mode controls, but with double jumps along with flying. It also needed to be able to shoot, the balls would get larger & larger as the player would expel more & more "hits". The screen should go blur if the player shoots "hits" too quickly, in a "drunkenness" metric.
All that list of features, didn't take too much time actually, because after the initial ping pong making the character move & aim, everything else followed a pretty simple pattern. if statements behaved like if statements; this. instance variables & methods behaved like this. instance variables; things just worked kinda how I expected them to. Overall, this was probably the smoothest first experience of a language environment I've ever had (looking at you, Svelte, Typescript, & Android Java).
One more thing I'd like to note is that, I did try to get the game up directly on the website, but the CUDA dll's wouldn't like properly with Emscripten (basically, thingy no worky). Performance is also one part that is still concerning, & it requires a pretty beefy rig to run even at 1080p@30 (I get around ~20 fps on a RTX2060-MaxQ). I'd probably have to do some low level batching or something, but that would require hooking into literally non-existent docs for Nvidia FleX on Unity.
deep breath
Aaaaand, that's the story of "blunt force trauma!" — a game describing psychological toxicity.
feedback:
- 16/6/2021
- Good description & analysis of the artwork.
- 23/6/2021
- Brain smoothie.
- Would be great to include summaries to better convey content to people less technically inclined.
- Added TLDR's to major chunks.
- Shame that it requires a high end PC.
- Added an option to reduce blob count in v1.1
final:
Others'
 |
Figure 1.3.10, WARMTH by Julian Frener, 05/01/21 |
TLDR: The artwork showcases the moulding of the mind through harsh 3D computer generated visuals, encompassing multiple design principles.
Observation
The piece is 4:5 in aspect ratio, with colours stretching all the way to the border. It looks extremely chaotic, but harmonic at the same time. The highlights are pure white while the blacks are crushed into greys instead. The temperature is actually cooler than normal with the prevalence of deep blues & shallow yellows. Virtual lines are created from the swirls, with majestic colours surrounding the centre point. The image gets busier & busier as it fuses into a single point, & doesn't loose the intricacies or details like the rest of the piece. There are also subtle overlays towards the edges that make stripes brighter instead of darker.
Analysis
There's little that needs to be said about the powerful movement of this piece. It sucks the viewers eyes deep into the "singularity" without fail, almost like it's shaped after a funnel. This in turn creates great emphasis on the parts around the point, especially after adding on the detail amount's fall-off (fall-on?). Other than that, the distortion in the background also creates a great sense of repetition via the colours & the stripes. They may not be identical, but they're Similar enough. Strong contrasts can be found as well even though the blacks are crushed, as they're placed next to bright colours or even whites in most of the image; strong harmonies can be found as well even though the whites are peaking, as they're placed next to blended colours that merge together along the spectrum. It is also to be noted the the main focal point is aligned vertically to the centre, creating asymmetrical balance along that axis. Overall though. after everything is parsed & perceived, Gestalt Theory comes in like the dessert at a dinner party & joins them all up into """drug water""" — what water would probably look like when overdosing.
Interpretation
This piece was made on 5th of January 2021 by Italian 3D artist, Julian Frener, based in Merano. He's been creating 3D everydays since 2017, & incorporates many natural-looking elements — from fabric physics to subsurface shaders. The fact that this piece is made in a day definitely showcases the technological marvels we live in, with him personally using Octane in Cinema 4D for his products. Culturally, this style of artwork & everydays represent the modern landscape of 3D abstract art, spearheaded by notable figures like Mike Winklemann (aka. Beeple) which brought the practice to mainstream attention by selling his work for 69m USD & cementing himself as one of the top 3 most valuable living artists. An artefact from this piece being an everyday though, is that the author's original intentions & meaning might not be properly communicated, leaving the audience is to parse the complexities themselves. What I get from the piece myself, is that the human mind's surprising vulnerabilities to be moulded, especially to be defensive in nature (as shown by the flared "peacock" features). The "drugged-out" colours & the interference-like lines showcase the psyche being moulded by stimulation, however cruel it may be. It's also interesting to see the forced change creating a lot "dirtier" formations, with wrinkles & distortions, instead of the clean original person. All of that showcases a snapshot of manipulation; a layer of toxicity; a beginning of trauma.
Mine
TLDR: This artwork extends the original by showcasing along time; how the things one outputs affects the person receiving as they escalate the size of their blows.
|
Figure 1.3.11, Screenshot of blunt force trauma!, 18/6/2021 |
Known Issues
- If you change blob counts & the game starts with no blobs at all, exit the game completely & reopen it. This is a known issue with Nvidia FleX leaking memory when recreating objects
Controls
| [W]/[A]/[S]/[D] | ——— Move |
| [Space] | ——— Jump |
| [Space]+[Space] | ——— Toggle Fly |
| [Shift] | ——— Descend |
| [ESC] | ——— Return |
| [X] | ——— Dash |
| (Left Click) | ——— Shoot |
Changelog
- v1.1 — 23/6/2021
- Added setting to reduce amount of blobs.
- [See known issues]
- v1.0 — 18/6/2021
- Initial release.
Recommended System Requirements
- Windows
- Nvidia 1070 or Nvidia equivalent
- Intel i5 2000 series or AMD equivalent
- 8GB of RAM
AMD GPU's not supported (the game relies of Nvidia PhysX & CUDA)
Macs not supported (There is no modern Mac that has an Nvidia GPU)
Linux, uhh. Here's the repo if you're determined. Nvidia FOS drivers may not play well.
Rationale
How to play the game:
There are two bars on the bottom left.
You can fill the bottom one.
Every shot increments both bars.
The initial shots don't do much. The person'll probably ignore them. Keep going though.
The next few shots look like they aren't doing much. The person'll heal up. Keep going though.
The final few shots are really tearing them apart. Oh they're running away? Keep going.
How else are you going to fill that bar?
Oh you've done it!
You've won!
What now?
Well, play again!
This piece extends the original piece, by adding the 4th dimension — time. Abusers don't know when they're being toxic or manipulative. Sometimes, neither do the victims. It's a challenging situation for everyone involved. It won't be rewarding to any party involved either. Not to the spewer, not to the spewed, not the the people witnessing the spewing. Behaviour like this is so damn common all around, because the victims are the ones who are most likely to turn around & stab someone else. Then the more one does it the more they'll defend themselves, intertwining their neurons as they're taught. The cycle never ends unless one party is dead.
Fortunately that's not too big of a requirement though.
reflection:
I'm gonna be honest, I think I've said all I had to say in the write-up. The experience was awesome to be able to create a whole game. It was a super bumpy road, filled with much waste & dead-ends, but the things I've gotten — the ability to properly express design through any medium I want — was well worth it. Besides that, I've definitely picked up much better skills at picking apart others' work, & extending them myself is I think honestly a great exercise of "inspiration"; using others' to propel oneself in a completely new direction. I'll definitely use that newly learned cheat code in the future.
Comments