Mythine Learning: A ten-week Stanford independent study in web comics

[tl;dr] Episode 1 of Mythine Learning. Story, art, and code by Na He Jeon (me).

Full-sized browser view recommended from desktop or laptop.

English logo

Mythine Learning is a webtoon, or, comic art on the web. A viewer may have some questions, like…. Is this a comic? Yes. But I see Korean. Hover on the text and you’ll see the translation. Also, there’s a part where a character’s speech text has a link in it. Give it a try and follow the link.

Background

After that all nighter

For the past five years at Stanford, I studied computer science and art. That means I spent some nights debugging my code for a database class, and other nights frantically finishing a 4 ft-by-6 ft oil painting. I always thought computer science and art could not be more separate from each other. In my more technical CS classes, I mostly learned theory and replicated them in programming assignments or problem sets. In my art classes, I chose an idea, object, or imagery I felt passionate about, and explored it to aesthetic and personal satisfaction. As you can probably tell by the way I described them, I enjoyed the latter much more. Which brought me to a whole existential crisis about why I decided to major in CS in the first place, and what I was going to do with my life, anyway.

Then I read “Hackers and Painters” by Paul Graham. Really, I should have read this freshman year. If you are anything like me and feel like you’re an artist at heart but are somehow in tech, please give the whole thing a read. Anyhow, here is a quote that finally let me make sense of my academic and personal passions, a quarter before graduating (better late than never!):

I’ve never liked the term “computer science.” The main reason I don’t like it is that there’s no such thing. Computer science is a grab bag of tenuously related areas thrown together by an accident of history, like Yugoslavia. At one end you have people who are really mathematicians, but call what they’re doing computer science so they can get DARPA grants. In the middle you have people working on something like the natural history of computers — studying the behavior of algorithms for routing data through networks, for example. And then at the other extreme you have the hackers, who are trying to write interesting software, and for whom computers are just a medium of expression, as concrete is for architects or paint for painters. It’s as if mathematicians, physicists, and architects all had to be in the same department.

As concrete is for architects or paint for painters.

Now what?

I’m going to make a webtoon

I was convinced that I can be using cutting-edge modern technology and be an artist at the same time. Which was what all those Renaissance painters were doing, because oil painting was the high-tech of the time.

Back in senior year fall quarter at Stanford, I took a 5-unit Fiction Writing class, from which I came out with a short story. I decided to make a comic out of it. A digital comic. With Photoshop, iPad, and a myriad of digital tools.

During the first two weeks of Spring Quarter, I took a Udemy class on character drawing, which taught me fundamentals for drawing human bodies from imagination — a very useful skill that I lacked.

Both drawn from imagination and without any references, before (left) and after (right) taking the Udemy class for two weeks. The point here is the dynamism of the body rather than production quality.

Christina Wodtke agreed to be my advisor guiding me through this journey. I took Christina’s game design class last fall and 1) started Taking Games Seriously and 2) thanked Stanford for hiring Christina. There are already a herd of Christ(ina) followers, and I asked her to coach me through this process because she has so many product experience and insights that extend to storytelling products, like games and comics.

She pointed me to many resources that gave me numerous insights. These included Scott McCloud’s classic, Understanding Comics, Brunetti’s Cartooning, and Better Game Characters by Design: A Psychological Approach. She also recommended to me Maus as a superb example of a graphic novel that tells a serious story.

With my new learnings on drawing and insights on the medium of comic art, I made some storyboards.

Drawn on iPad with Procreate

And a character sheet.

A Korean logo.

A play on how myth is 미신 and machine is 머신. Very similar words in sound and shape, yet very different meaning.

And an English one.

Eh. Green is better.

And some sketches.

Drawing this taught me 1) art is 1% inspiration and 99% perspiration 2) my skills will never be where I want them to be (but I can get closer and closer�Œ)

I made a colored version of this by Week 7 of the quarter. I used CSS to make a certain image larger than the rest, but mostly the webtoon was static media on the web. So then came the question of…

How can I leverage it being on the web?

When Christina recommended me the Scott Harris book, she also showed me his Ted talk.

And his web comic experiments.

She also pointed me to iOS applications Florence and Gorogoa. These are called games, but they tell a story, and Florence may as well be a comic. Or an animation. One thing for sure is these boundaries between games, comics, animations, illustrations, etc. are more and more melting down and artists should not cage themselves in a certain “medium” at this point.

Florence. The story is so. good. Gorogoa. Look at the art. Just LOOK at it!!

There were a myriad of things I wanted to experiment on within Mythine Learning. Within the timeframe of Three Final Weeks of Spring Quarter, I focused on four parts: translation, links, scroll orientation, and scroll position.

Translation

The main character, Issac Lee, was born in Korea and speaks Korean with his family, but lives in America and speaks fluent English (like me). So I thought it would be unfair that the comic should entirely be in one language. But how do I reliably show translations? In movies they do subtitles.

The images in the webtoon were produced with Adobe Photoshop CC, and had text in them as engraved pixels. As long as they stayed in the images, I wouldn’t be able to dynamically translate them on the web.

Eventually, I found a way where hovering on Korean text translates it.

Hovering on Korean text translates it to English. Unfortunately, I haven’t enabled English text to be translated into Korean yet.

How was this implemented? First of all, the Korean lines was deleted from the image files. I had to separate the text from the image. Then, I used a Javascript script to print the location of the cursor relative to the image once I clicked inside a bubble.

The console output was formatted so it could be directly pasted into the style property in the html. And I coded in the Korean lines and their English translations like this:

And then I used CSS hovering tricks.

Links

You know when in comics or movies, a character suddenly starts talking about the past? Or a dream? What if you can actually go to another location when he does?

Clicking on the link takes you to Father’s dream, like that. Or like this. And this one takes you back

Implementing this was straightforward because the Father’s line was already in HTML. I just made a new page that the link pointed to. Backing up was implemented like:

And I set the location of the backing up link within the lower right corner of the image using jQuery.

Scroll orientation

Although it may not be super clear only from the first episode, Mythine Learning is urban fantasy, having a lot of fantasy and dreams in it. I wanted to find a way to clearly distinguish the two. Inspired by Scott McCloud’s Ted talk, I decided to

…make normalcy a vertical scroll view

…and dreamscapes (accessed through links) a horizontal scroll view.

Scroll position

This was scraped in the final version because Christina and I agreed if dreamscape is going to be a horizontal view, it should be horizontal view all the way (otherwise it’s confusing).

But originally, scrolling to the end of the horizontal view would make appear another image below the view like this:

And scrolling all the way to the bottom

would reveal a face.

This was implemented using the following script, heavily using jQuery:

What’s next?

A lot of things! Life is short, the craft so vast. First of all, I want to complete Mythine Learning. Probably first as a static web comic to see if I can actually complete a comics with well-developed story and art. Beyond that, I have so many things I want to make and learn, skills I want be competent in. Interactive comics. Narrative games. VR. Intuitive tools that enable webtoon artists to incorporate HTML and CSS to their works. Sleek applications. So am I an artist or developer? Doesn’t matter anymore. But either way I am just a beginner. Yet, I am excited to see where this path takes me. Huge thanks to Christina for her generous and unmatchable mentorship, and my friends for reading my comics �š

Original author: Na He Jeon
Erika Jane Recommends: “Thieves In The Temple” by ...
Can You Use Bluetooth Headphones On An Airplane?
 

Comments

No comments made yet. Be the first to submit a comment
Already Registered? Login Here
Guest
Sunday, 15 September 2019

Popular posts

Super User
11 September 2019
Food
Instant Pot? Vegetarian Cookbook: Fast and Healthy Recipes for Your Favorite Electric Pressure CookerDownload e-Book Instant Pot? Vegetarian Cookbook: Fast and Healthy Recipes for Your Favorite Electr...
Super User
04 September 2019
Food
What comes to mind when you think about American whiskey? Perhaps a southern bourbon or a patriotic rye, particularly when paired with a buttery steak or a juicy burger. Single malts, on the other han...
Super User
02 September 2019
Business
Recognized by the LA Business Journal as one of the most influential investment bankers in 2018, Trevor M. Saliba serves as the managing…Continue reading on Medium »Original link...