[W9IfD] turning data into forms

← Previous Post | Next Post →

(You can generate the cover here.)

Last week, I came to class with multiple instances of code. The downside was that I genuinely had no idea how it would turn out, or any direction to guide me towards that end, so I figured that Lisa’s suggestion to incorporate data visualisation was a good idea.

Again, the theme of Fantasy is with respect to the fantasy of actualising impossibilities through technology, but I also used a more innocuous data set, in honour of something which is coming soon:

Yes, it’s a visualisation of the Final Fantasy franchise.


I have never touched data visualisation in my life, so I looked up tutorials by, once again, Coding Train. I decided against using real-time data, since it’s complicated, and there’re no API resources for the entire franchise (only FFXIV has a dedicated following). Instead, I created a JSON-based dataset; in total, there’s about 850++ lines of code.

I ran some tests to ensure that the data could be accessed properly, as well, and properly incorporated into other codes:

After which, I began testing different ways to combine data with visuals, and put them all together in a not-painful-to-look-at way:

The details regarding which data set corresponds to what visuals are available on the page. Nevertheless, there’re some fun facts which are fun only if you understand Math and Final Fantasy, such as that a) patterns are easily observable once you know what drives it, and b) that outliers make for… Interesting visuals.

Also, interestingly, a previously mentioned possible guiding philosophy was how basic elements come together to create complex forms. Due to that ellipses were used for practically everything, it surprisingly came to fruition as well.

(mockup credits) (data credits, and a lot of wikipedia pages)

[W8IE] hi i’m not coming to class and i don’t even have a proper poster because i’m just like that™,

but it was really difficult to try to capture in a static medium, because my concept requires things which don’t exist yet, and it’s definitely hard to understand without context; so, I did some world-building, and here is a really short and really lo-fi thing which tries to capture the kind of time and space in which it exists

it’s better to view at the link ↑↑

if you’re reading this, i’m fully aware that this isn’t the kind of thing you should present to a potential client, so advice on how to properly capture the idea in a poster / infographic without subjecting people to abstract confusion would be loved

anyway the cringe is real

[W7IfD] making pencil comps for a digital generation is, uh,

← Previous Post | Next Post →

As per the last post, I decided to work with generative illustrations. Where the theme is something like “the Fantasy of actualising impossibilities through technology”. And, of course, I don’t have pencil compositions, or even drafts of what I want. Here are the two main reasons why:


As summarised by Spittel, there are two approaches to generative art: a) have no results, and let the computer generate as you play around, and b) have a very finalised idea, only allowing little randomisation.

I wanted to go for a mix of the two: keeping a vague idea of what I want the overall form to be like, while allowing the computer freedom to generate the exacts of what it turns out to be.

Automatic line makings, to get a gist for the overall form. As can be seen, it will likely involve many arcs, curves and loops, and a tall form which isn’t symmetrical.

But, intention probably won’t match up to action, because


I can draw decently well, but coding full-fledged physics is……. While I wanted to aim for something like Shvembldr and/or Nick Taylor‘s emergent, organic forms, I’m not sure that it’s possible at my current level. The most I can do is probably to work with basic elements, like lines and circles, and randomise their colours, positions, and sizes.

As such, it seems unlikely that I can find a way to code the piece to be particularly close to whatever I would envision. Still, I’ll outlaw patterned works like cccbtt, where I think it’s too structured: the point is to show off how amazing technology is, which is more evident when more complex functions like sin() is involved.


After looking into different scripting languages, I decided to go with P5.js.

Their tagline aptly summarises why: it has “the power of Processing times the reach of JavaScript”. In other words, it can achieve more than web-based Javascript alone, while being more accessible to creators and audiences, since it’s for web.


As I’ve said, I don’t have pencil sketches, because it depends on how fast I learn. Instead, I just experimented wildly with codes that I learned, using random() and noise() on parameters like the x-y coordinates, or scale().

Here are some things I learned (or refreshed, it’s been a while since I’ve touched Java/Script) during the spring break:

From there, I picked out elements I liked, and tried combining them, or messing around even more. Half of this were not intentional, just that I didn’t really do object-oriented programming, so, uh.

I guess my first “pencil composition” would thus be something like this:


My second pencil composition tried to be more aware of the working style for generative pieces. Interestingly, there’s a sense in which coding is a “collage”, because you rarely write code from scratch: it’s usually about modifying other people’s codes to suit your needs.

As such, you’ll see that most of the practices here are based off codes that I grabbed elsewhere, like by The Coding Train:


[W7.5GD] Suffering

i submitted at 0943, checked again around 1330, and was disappointed, as always, that i uploaded the wrong file, there’re bugs. life is suffer


  • Implemented base version of Tetris
    • Includes generating blocks, falling mechanic, movement, rotation, play area, line clear, collison
  • Implemented variations
    • Assigned to Key Pressing
      • Changed constants to variables
      • Included variations for falling speed, reverse controls, auto-rotation, camera zooming, changing block types


  • Cleared up unnecessary code
    • Compiled into a single script, than attached to multiple objects
  • Removed GetOutOfJailFree & HOLD indicators
  • Implemented HISTORY indicator of past variations

200221 Shah (player) & Mus (key presser)

    • Shah is visibly done with Mus, who is abusing his abilities
    • It’s quite funny nevertheless
    • Falling Speed of Blocks is outrageous at 0.1f
    • Impossible to play at all after a certain point
    • An additional suggestion to go the route of a key presser who has to fulfil certain tasks before he can ruin the player’s life, e.g. minigames, or a timeout

200221 Kee Yong (player) & Shah (key presser)

    • Pretty much exactly the same sentiments

200221 Wei Ting (player) & Me (key presser)

    • Wei Ting is doing acceptably alright, since I try to act like an impartial algorithm
    • Not enough variations to be intriguing

In other words, rerouting the variations to activate through an impartial algorithm at specific invervals, than a partial algorithm at random intervals


  • Modified variations to a random algorithm, from key pressing
  • Implemented UI
    • A NEXT indicator area, to show the upcoming piece
    • SCORE tally of various items, such as total time elapsed
    • HISTORY indicator of last 5 variations
  • Fixed bug where I Piece didn’t rotate around the correct point
  • Fixed bug where O Piece rotates
  • Fixed bug where Zoomed Camera doesn’t follow the falling piece
  • Cleared up unnecessary code
    • Removed variations for changing height and width of play area


  • Modified algorithm to be weighted, than 100% random algorithm
    • Instead of picking a random variation, the algorithm now picks a type of variation, then rolls for an outcome. 75% odds of getting a favourable outcome for that variation
  • Implemented new variation types
    • ~2% chance for in-game music to change to 1 of 4 songs
    • ~4% chance for in-game background to change to 1 of 5 backgrounds
  • Implemented SCORE system
    • Implemented counters for things like Total Number of Blocks, Total Time Elapsed, and so on
    • Implemented score algorithm, giving different weights to different segments contributing to score
  • Implemented Tutorial at start of game
  • Implemented Restart option (R) & Tutorial Skipping option (S)
  • Implemented Speed Up (Q and/or W)
  • Fixed bug where counter and visible grid didn’t align

200301 Prof (player)

    • Confused by names of variations,
    • Can’t tell what variation is occurring,
    • Doesn’t know that effects stack (than being dispelled),
    • Despises the auto-rotation (especially in conjunction with high falling speed)
    • Confused by information overload of UI
    • Total score of about 8.6k

200301 Wei Ting (player)

    • Too focused on playing the game itself,
    • Doesn’t notice that variations are occurring and affecting gameplay,
    • Just thinks she’s not good at Tetris
    • Total score of about 1.3k

In other words, fix the UI and information hierarchies.


  • Modified algorithm conditions and weights
    • If the same variation is called up, instead of having no effect, it may reroll to give another another variation
    • Impossible to get absolutely no effect for a round. Increased chance of failing a roll to 40%, from 25%
  • Modified Rotation Lock, from auto-rotating clockwise once per second, to rotating clockwise once per left/right keys pressed
  • Modified SPD function
    • Pressing Q and/or W will cause falling speed of blocks to increase, not just the countdown to variations
  • Modified UI by, like, a lot
    • Modified HISTORY segment to ACTIVE segment, which states presently-active variations than past variations
    • Modified SCORE indicator area, to only show at the end of a game
    • Modified text for about everything to be less Debug.Log-based
    • Implemented bar (and removed text) in indicating countdown
    • Implemented icons and animations for Key Press functions (Q, W, S, R)
    • Implemented tutorial image for Movement keys
  • Modified activation conditions for certain keys
    • Restarting (R) and Skipping Tutorial (S) now requires holding for 1 second, than pressing the related key once
  • Modified SCORE counters
    • Reduced max Score to 99 999, than 9 999 999
    • Reduced Speed Up bonus
    • Increased Line Clear bonus
  • Implemented Game Over condition
  • Fixed bug where I Pieces and O Pieces weren’t centralised in the NEXT indicator area


  • Music
    • ff5_bigbridge (link)
    • Tetris – A Theme (link)
    • Tetris Attack – Poochy’s Theme (corrected errors – final submission) (link)
    • Video_Game_Themes_-_Zelda__Ocarina_Of_Time (link)
  • All background images from Pixabay

[W7IE] national museum, it’s an art and more

I won’t say it was my favourite work, but I felt like I had to write about La Camera Insabbatia / The Chalkroom / 沙中房間 (2017) by Laurie Anderson & Hsin-Chien Huang. After all, it looks like it’ll be most relevant to my mid-term project.


It turns out that my like/dislike opinions tend to conflate with the given questions, so I’ve grouped it accordingly.


The most enjoyable part was, definitely, the responsiveness of the work itself. There were very few points where my immersion was broken by some failure of the engine, such as “failing to speed up at a rate which is adequately proportional to how much I stretch my arms”, or “a noticeable time lag between scene transitions”. In other words, kudos to the programmers!

(Also, a special commendation for the fact that they foresaw that people like me would intentionally try to clip through the ceiling, and made the necessary adjustments.)

A possible extension, in my opinion, is more freedom of expression. Understandably, it’s easier to separate it into different rooms, and I appreciated the variety of ways in which the audience could interact (which is already very impressive). If we could do multiple things at any given time, though, it would be even better. For example, if I could fly while making the voice structures.


It so happened that there was a waiting area where we could sit and watch a video documentation, while waiting for your turns. It also so happened that I was hesitating about my project, when the subtitles displayed similar kinds of thoughts to the ones I was struggling with:


Other parts of the video also mentioned how The Chalkroom is about “traveling inside one’s mind and memories” and that VR is about “directly influenc[ing] peoples’ perception of themselves”.

Those were ideas I appreciated, where there is a sense that VR must have something unique to it, that it can contribute. Right now, much of it is about inducing illusions through deceiving the eyes. What can we do with that, then? I think the work’s attempt to explore that is commendable, where it made extensive and effective use of VR as a medium.


I’d like to clarify that this is likely an effect of that I’m (probably) not part of their target audience. That is to say, their installation is targeted towards people who don’t focus enough on their self. That’s not something I have an issue with, where I already have a high tendency to do that. As a result, rather than liberation, I felt incredible dread.


I understand their viewpoint, that freedom comes with looking into oneself and letting go of material things. It’s true that many people might focus too much on insignificant things which might tie them down. As someone often withdraws into myself, however, I can’t say I endorse the artists’ stance. We can’t ignore the consequences of gaining freedom: of becoming detached. To cut a long story short, I stopped enjoying things, because it seemed so meaningless to put effort into the ephemeral external world. I don’t need to hear about how to go into myself, I need to hear about how to go outside myself.

In other words, the message is good, but just isn’t for me.


As a rule of thumb, I’m not fond of narration in self-centered games… I understand that it’s for the sake of people who might be unfamiliar with VR, but it feels like it’d be more immersive if you thought about things yourself, than having a voice in your ear, telling you what they want you to feel and/or do.


Just to summarise, it’s a solo exhibition space, featuring mainly muted tones like grey or beige, and mostly dimmed, warm lights. This visual consistency remains from the moment you enter and wait, to playing the game itself. That’s pretty neat, looks good, and preps you mentally through visual cues, like the chalkboard-themed walls.

The colours and lighting of the place matches the insides of the VR experience


I understand that it’s a matter of limited resources, where each player needs their own headset, and a technician to work it out. Nevertheless, it also seems that they wanted to discourage us from being spoiled, where we weren’t given live in-game footage, and we weren’t given a proper space to watch others playing. They tried to occupy us with a video and benches, but that can only occupy one for so long before it loops again. Unless the queue is incredibly short, and each person takes less than 10 minutes, one will definitely shift their attention to their mobile phone or something instead, breaking the immersion.

Other than the temperature taking counter, this + the benches are the only real things of interest for the waiting people

Instead, there’s so much space outside of the VR area that could potentially be used. For example, you could put an actual chalkboard and/or touch screen wall for people to occupy themselves with. It’s thematically relevant, and it would highlight how VR is different from analog and/or non-immersive environments. That might definitely fall into the range of “too extra”, though.


Alternatively, something like “banning mobile phones” or “making us wait in separate cubicles” might help to get into the headspace of being isolated.


Where my concept similarly has the idea of “being in a mental space”, I think The Chalkroom and VR definitely have merits. I’ve been having problems with visualisation, especially where my ideal work appears to be heading towards some kind of futuristic technology which doesn’t exist yet. It includes, after all, the extraction of thoughts from a person, processing that neurological data, and inserting it into another person’s dream. Even VR is still limited by the physical, where you have to decode the visual input to acquire the meaning. I’m not really sure what to feel about that.

I do feel like some level of world-building is needed to make my project sound comprehensible, so a documentary of sorts, like the one shown while waiting, might be an effective means of conveying the message. Like, imagining how to explain VR to someone who doesn’t know VR.

Regardless, there’s a significance difference between The Chalkroom and what I have in mind, where they focus on the relationship of the self with the self, while I aspire to focus on the relationship of the self with the other. As such, perhaps it might be good to deviate, by having multiple people in the same space, or collaborative content. Maybe.


I felt like the wire could be used less as a limitation than as a feature. (It looks like a zip line….. Or like it belongs to a 2D game with linear movement…. If you get my drift………)


And, even more on a side note, I need to express my absolute delight with the concept of supporting structures for exhibitions:

[W7PDaP] on the assigned reading

*inserts a very typical project management picture from here*

Here’s a short summary to get us all on the same page.

Chapter 2 introduces us to aspects of project management. It first establishes a difference between goals and objectives, where goals are shared across all projects while objectives are unique to each project. The chapter also claims that all projects have 6 goals to manage, with 5 phases and 6 activities during the process.

Chapter 5 further delves into project planning. This covers the necessities of planning, the iterative process of planning, fishbone-sque breaking down of tasks, and so on. It also goes into 6 objectives of the project work plan, and details regarding each objective, as well as how to document said plan.


The 6th goal is incredibly interesting to me, of “meeting everyone’s expectations”. It’s surprising to see that the human relationships between you, the clients and the employees is as important as it is. That’s also one of my weakest points, in balancing my happiness, with the happiness of others. Unfortunately, the book can’t give much information, since this is a very situational goal, but it’s still good to take note.

The only solution is probably practice. I’m very sorry in advance to every person who will have to put up with me.

The project manager’s obligation to fulfill other responsibilities is also concerning, especially in small projects, and especially where they’re expected to be generalists. After all, the way companies usually work is that you start as a specialist in a discipline anyway, such as “Junior Graphic Designer”. No one gets directly promoted to a more generalist role like Visual Design Executive. In other words, you need both depth and breadth.

The only solution, probably, is to “be good”.

how to get job, wow! i can’t believe!! it was so simple all along!!


Something which really gets to me is the artificial division of goals into 6 categories. This is because I feel that many of the goals can be subsumed under a similar header, such as “To reach the end within the established limitations”. This would easily cover budget, time, and safety, where these are limitations which must be adhered to. It’s not a major issue, since it IS important to eventually expand on these different aspects, but it’s just conceptually annoying for me.

Something which also gets to me is their definition of efficiency. That, again, is probably a linguistic difference: when I was taught (the equivalent of basics of) project management in my extracurricular activities, efficiency was lauded over effectiveness, where effectiveness was about being successful, but efficiency was about being successful with minimal resources. I guess it’s not a major issue either.

[W6PDaP] maybe i have a thing for chairs

A lot of the artworks were “interesting”, “cool”, and “pretty”, such as Sokchanlina’s Letter to the Sea. That’s about it, though.

I’m very sorry for being uncultured trash, but in my defence, most of it felt like creative documentations, without even a desire to drive people to act upon the tackled issues. All we really do is watch, and lavish praise unto it, without even needing to care too much about how nature is being eroded, or how communities are marginalised, et cetera.

I think that’s alright, where life would be tiring if everyone was constantly trying to make you think (and feel) the way they do, anyway. A side note is that something like a pop-up museum at the train platform would be pretty cool. After all, that would be an easy way to “be seen”, since little engagement but “looking” is needed. It’d really change the way people treat mundane moments like transit, too.


In any case, because of that, I found, may she rest in peace, Juliana Yasin’s work more intriguing. What she presented was Tali Timba (2009) and For Peace and Togetherness: Tantejules dan Pemuda Inisiatif (2010). (link)

Unlike the rest, her work was an entire experience which seemed made for the space it occupied. You can barely tell that it’s an artwork, where it just seems to be a sitting area along an aisle (not even within the gallery!), with background music not unlike the kind you’d hear at a casual hangout in the nighttime.

You only really realise that it’s the music which is the artwork when you read the wall plaque. It’s also supported by the lyrics booklet on each tablet, held down by a stone. I think that’s a plus point: most works demand your full attention, in forcing you to watch it, or interact with it, so on. This work, however, encourages you to just sit back and relax, with the music as a background accompaniment, than something to pay attention to specifically. For example, I ended up sitting and chatting with Dan Ning & Ying Hui about things that were totally not relevant to the artwork at all.

It’s nevertheless still easy to feel the vibes coming from the music, which is quite low-key and country, the kind of thing you hear on the streets from a random busker. That’s enough to get the intended ideas of peace and harmony across, especially when matched with the pretty pink of the corridor, and the view (which is, admittedly, not very good, since the wall is too tall to see much.)

Knowing the context also helps, where her artwork was created in relation to the Jatiwangi Art Festival. Said festival is about celebrating “contemporary art as created within everyday life”, making her music a homage to the less-urbanised life of those living in Jatiwangi. As a result, some of the lyrics are in Bahasa Indonesia, catering to the ethnic Malay population.

It might thus have benefitted from being presented at the nearby cafe and/or ice cream place instead. When we went there, there were many people chilling and drawing. Surely, there would have been a greater audience there, than where it was located, in a place where people wouldn’t really stop.


Thinking about this and Celine’s Spatial Composition 13, it may be the case that I’m subconsciously leaning towards an FYP which “supports the exhibition”, than an FYP which “demands attention”. After all, a lot of the entire FYP exhibition is about presenting what each student cares about, which forces the audience to become invested in everything. As such, I might want to make something which reduces the information overload, than add to it.

I think that’s something I care about: filling the spaces which need to be filled. But that’s also hard, because I’m still pretty selfish: if FYP is about showing what each student cares about, I’m very sorry to say that I may or may not care more about having my own space, than working with gaps in others’ spaces.

Also, something like that would require a lot of coordination: I’d need to see what everyone is doing, and observe what kinds of issues people usually run into at FYP exhibitions, to try to make a solution.

I’ll think about it more.

[W6IfD] Thumbnails, and a Mood™

← Previous Post | Next Post →

I took a slightly different approach, starting with concepts than visuals, since my forte is in critical analysis. Here are examples of the numerous false starts I had when I tried to subvert my typical way of project development:

After which, I tried to take into consideration what is required of a cover illustration for Varoom.

  • It must be something accessible, where Varoom isn’t meant to be a culture- and/or country-exclusive magazine,
  • It should provide critical new insights into the discipline of illustration, where that’s what the magazine is about,
  • It shouldn’t be focused on a specific topic or subject, where it’s a cover image, not an article-based image

Since I chose the topic of Fantasy, I thought about what Fantasy would mean to all illustrators. Where fantasy refers to the “imagining of impossibilities”, the conclusions I came up with were these:

  • Fantasy in how basic elements come together to create complex forms
    • In other words, how dots, lines, and planes come together to create illustrations which look like more than the sum of its parts
  • Fantasy in how impossible forms can be created through new technologies and means
    • In other words, how computer-based generation can create illustrations which would be tedious and/or impossible by hand

While I sketched thumbnails for both, I fully intend to go for the latter. This is because the former may be an insight into illustration, but it’s nothing new: we’ve long established the benefits of those basic elements. Computer generation, on the other hand, is definitely something new to the industry, and thus provides a fresher insight.

Based on that, Lisa also suggested the works of Joshua Davis, a generative illustrator. So, here’s my finalised moodboard:

I note that it may be difficult to do pencil compositions for a generative illustration. After all, the point of generative illustration is that it’s randomised. For now, I’ll look more into generating illustrations: depending on what I leave to the computer to randomise, there may be things which remain constant, which can be presented in a pencil composition.

Alternatively, it may even be more worthwhile to create a prototype directly in code.


  • Tips to Improve Your Generative Artwork (link)
  • How to Create Generative Art  In Less Than 100 Lines of Code (link)
  • How to Make Your First Generative Art with P5.js (link)