Category: DV2002-ILLUSTRATION FR DESIGNERS (TUT)

← 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.

PROCESS OF SETTING UP THE DATA

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)

← 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:

1. GENERATIVE STUFF JUST… DOESN’T GO WELL WITH PLANNING

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.

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

2. IT REALLY DEPENDS ON MY PROGRAMMING ABILITY

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.

SO, TO START OFF…

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.

A FIRST “PENCIL” COMP (LINK)

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:

A SECOND “PENCIL” COMP

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: