Monthly Archives: October 2017

Happy Accidents

  This project has been one of my favorites thus far.This project came entirely from experimenting with code I was familiar with. I originally only had one pattern that would infinitely expand. My original intention was to create a perimeter for the pattern, however, after my conference, the project became a pattern that evolved into an infinitely changing pattern.

new wall paper is created and expands

  I really enjoy the almost 3D effect that the some of the patterns have. If you look at the screen for long enough you can start seeing new and more elaborate combinations. I would have liked to be able to include changing colors in each pattern. Each pattern ends after reaching a distance of 400 and a new pattern is generated by the object-angle and continues to expand until eventually being replaced.
      wallpaper 2
wallpaper 3      

Subtle Contrast

My main inspiration for this project was Bridget Riley’s work. Specifically, I looked at Shadow Play and Natraja. These works have a lot more artistic depth than I could hope to replicate with my amateur abilities, but I really like the way she displays and compares color. To begin, I spent a couple hours creating different patterns that allowed me to contrast color in a similar way. I settled on a grid of right triangles, because the combination of the grid and diagonals resembled Bridget’s work.



From there, I wanted to create more color mixing. I added a circular rotating ellipse that was transparent enough to see the base pattern behind it. The ellipse is constantly shifting color as well, ensuring even more combinations. The sliding rectangle serves a similar purpose, lightening the triangles it passes over so that they can be seen from both perspectives every time the background updates.

Background + Mobile Shapes

Background + Mobile Shapes

Finally, I realized that all the bright colors made my wallpaper look rather childish, and subtracted from the overall experience. To alleviate that, I made the differences in color for each set much less vivid (either dark or light). In the final product, you get contrasts in each square, between the triangles in a set, and against the mobile objects.

Scrolling wallpaper final

Final Product


For this assignment, I spent most of my time just experimenting. I went in with no real idea of what I was going to do, but I just wanted to explore. I really didn’t sketch much because I jumped right into the code. One of the most intriguing things we’ve worked on in the last few weeks was the pattern of small lines. I was fascinated by them and knew that I wanted to use them as the background for my wallpaper. They create visual interest without distracting from the other elements. Later in the design, I realized that the colors of the lines were being lost on an entirely black background, so I coded a loop that creates a gradient through the multiplication of the coordinates. This change came late in the design, but it let me entirely redesign my color palette into something more interesting.

The next part that I experimented with was the Riley Circles we did in class. The ability to create overlapping patterns made them ideal for the aesthetic I was going for in this piece. I decided to use different colors on the top/bottom and the sides because the shape of the canvas is already irregular. With a canvas shaped this way, I thought it would be advantageous to draw attention to the oddity instead of trying to hide it. I liked the color results of the green/blue generator more than the red/blue generator so I put that one on the area with the larger area. I eventually decided to make them slightly translucent in order to create an effect like a mosaic or a stained glass window.


This border, while pretty, presented somewhat of a problem. In order for it to have clean edges, it would have either required me to let the corners overlap or to find a way to cover it up. This lead an idea about rotating squares. The problem with rotating squares is that the edges don’t travel consistently. So in order to have a consistent edge, I filled those corners with a stationary circle. It created movement of a different kind and, while I still think it looks strange, I enjoy it for that.

In my initial plans, I didn’t have the small lines in the draw section. They were part of the set up, which made it more difficult to put moving objects on top of them. This created the idea for what I have been calling the “runners” and the “track”: the yellow circles moving along the purple shape. Putting the runners on top of the track would have allowed me to have moving objects without leaving a trail behind. Eventually, I decided to just put the lines in the draw section, but I still liked the visual of the track.


The grid was all experimentation. I went in with no plan other than I wanted the center to be a grid. I probably spent more time on the color of the shapes than on coloring any other part of this. When I changed from a black background to a gradient, it allowed me to have more fun and to put a wider variety of color without being afraid that it would get entirely lost. Additionally, one of my favorite effects is a shape whose stroke randomly changes widths. I had originally included this effect on every part of the grid, but it got very busy so I restricted it to the orange circles.

By the end of this wild exploration, I was surprised to find a clearer image than I expected. While spending hours staring at wallpaper, I managed to make a door. I think it started, again, with the shape of the canvas. As soon as I drew a shape that mirrored the canvas, I started thinking about doors. And that influence made its way into the design: the heavy frame, the squares to mimic panelling. Even the circle-square decorations at the corners of the canvas are reminiscent of the metal plates put on the corners of doors. The door theme may have been an accident. But I still think it fits.


Scrolling Wallpaper

My original idea of the wallpaper comes from “time”– When I choose new wallpapers, I always think about how to make the clock of my cellphone clear. Thus, I use many elements about “time” for this assignment.

The picture itself only contains two very basic shapes: circles and lines; complex shapes will not form without them.  The circles in the pictures present different planets, and the blue one represents the Earth. Since the Earth is rotating every second, the time flies. The idea from the universe inspires me to use the Riley Circles, but change the circle into lines. As time goes by, the lines become darker, and it means that time will bury everything eventually.

It was actually a clock-like shape at the centre, but I will save it for next time–it makes the picture more messy. I am not that good at wrap and parameter so I need to work on that…;0






Scrolling Wallpaper

I was uncertain of how I wanted to create a central background to the canvas.  I was influenced by the Annie Albers grid at first except I wanted to make it a resemblance of a grid more though, and less colorful.  I wanted the lines to be almost indistinguishable from each other.  After playing around with the code, I came out with a pattern that made the space between the lines smaller and smaller as you go across the pattern.  It changes the color of the canvas as it advances to the right and gave it somewhat of a three dimensional feel.

Screen Shot 2017-10-30 at 7.45.38 PMScreen Shot 2017-10-30 at 10.35.22 PM

  I experimented a lot with the random functions with my color and in size of the shapes as well.  When I was visualizing it in my head, I first thought of placing random sizes of rectangles along the y axis, but I was unsure of exactly how to place it.  When coded, it looked chaotic like and I liked that concept to further influence my code. So I decided to place the same type of code just along the x axis.Screen Shot 2017-10-30 at 7.39.14 PM

I thought the dark pink background would allow me to use random fill colors as well, so I decided to randomize the fill of the rectangles along the middle of the screen. Then I added rotating shapes that wrap and bounce. With the small canvas size it allowed the image to look more crowded, which I thought went well with the other code. The random fill also allowed those objects to match the continuous random colors of the rectangles in the center.

Screen Shot 2017-10-30 at 10.46.04 PM

The final addition to the code was a rectangle rotating around a fixed point continuously. I was first thinking of placing that at the center of the canvas but then realized having multiples of the code would play well with the canvas and space. I also thought multiple rotating images would add to the chaotic vibe of the piece mentioned before. A high frame rate would enhance that even further. With that being said, it is hard to see the actual final product through a screen shot because of the framerate.

Wallpaper: ;)





This work was heavily inspired by the ideas Vera Molnar’s generative creation of shapes which then are subtly changed and remade next to the original shape. Since my piece wasn’t made to be a static image, instead of showing the whole evolution in one image, I made the squares and circles change over time.

The way this piece is set up, there’s a grid with each piece of the grid having a group of squares or circles which randomly modulate in size which gives a sense of movement even though it’s just the shapes changing size on top of eachother. The circles are moved up slightly higher than the squares which makes the gridding look a little less obvious and has the added effect of allowing the squares and circles to overlap in a more interesting way. As the piece progresses, the range of size values for the shapes becomes larger while also causing the shapes to be less transparent. As the shapes first start to become more than just outlines, the colors of the circles and squares look relatively simmilar, but once they become truly filled in, the colors are able to stick out more. This happens at roughly the same time that the shapes start to cover all of the space that originally was background.

Behind this grid are two elements which are used to ground the randomness which the grid creates. The mouth and a triangle which slowly becomes less transparent and rotates around the opening of the mouth. The triangle’s role changes over the course of the piece. In the beginning when the grid hasn’t started to really take form and there is a lot of empty space, it’s used to create motion and is used to accentuate the mouth. As time passes, the triangle starts to become the same color as the circles and is used to fill in some of the gaps in the background. Finally, right before the grid completely overshadows the background, its color changes to a more vibrant fuller green than the circles and is used mostly as a texture to fill in the occasional stray piece of background.

The mouth, being the only static element in the whole piece, is merely used to ground everything. The realistic nature of it, along with the pink color contrast the blue background and helps to make it so the viewer forgets they’re looking at just a bunch of circles and squares. There is a final layer above the grid made of squares of different shades of pink, blue and purple. They float above the grid and at the start of the piece are all together in a clump. As they pass across the x axis and loop back around, the speed of each object is increased by a random value and their size changes. When crossing the y axis, just their size changes. After the first crossing of the x axis, the squares start to separate from each other since their speeds change. Eventually, the x speed of the squares starts to increase to such a rate that instead of moving roughly diagonally, they are just moving on the x axis and every square is spaced far apart.

Modulated Synthesis

My attitude towards this assignment was radically different from my attitude towards the previous assignment. I was inspired by our classroom experiments in combining both for-loops and the mod function. I was also inspired by Josef Albers’ usage of colors and tiling to make a statement about both shape and color. The for-loop and mod functions lend themselves to accomplishing something similar to Albers’ goals. sample of Albers' work I spent several hours just experimenting with different shapes, colors, and insertions of randomness and determination in my code. At first I had a background with ellipses that moved within columns, remained similar colors, and seemed to shimmer (due to the addition of an overlay of darker ellipses floating through the screen.) This really reminded me of my childhood bedroom, which had a beaded curtain over the doorway and a shimmer curtain by the window. It seemed like I had created a synthesis of the two.
Screen Shot 2017-10-26 at 12.08.07 AM

first experiments

I decided to experiment with the circular motion assignments we were given in class, while still utilizing the color scheme and grid concepts I had established in my first sketch. This way, I was able to get a band of ellipses radiating in a circular way from a central foci. And I was even able to control the color of the ellipses, depending on where in the grid they were falling into.
Screen Shot 2017-10-29 at 6.56.56 PM

adding a JS object that utilizes circular motion

I realized that where the horizontal bands and vertical bands intersected, I got an unpredictably cool pattern, so I decided to have the bands overlap uniformly. While doing this, I realized I could modify the color (again, using mod, hence producing a gradient.) The circular_circles object remained in this iteration of the code, but I realized that it was aesthetically unpleasant to have 2 radically different shapes (ellipses and rects) overlap in an non-meaningful way.
Screen Shot 2017-10-29 at 7.06.40 PM

inserting a tiled background

So, for the moment, I forwent the inclusion of the circular-circles and instead played with the tiling background more. I added another function to my tile constructor, that allowed the gradient itself to change over time. And, through experimentation, I was able to have it so that the manner in which the gradient changed mimicked tiling itself. The picture below demonstrates multiple quadrants of graduated tiling. At this point in the process, I thought my work resembled a bit of Mondrian’s work, because of the juxtaposition of differently-colored ’tiles’. It especially resembled the work of other students’ in the class after they completed the animated Mondrian assignment. Screen Shot 2017-10-31 at 12.18.10 AMAt this point, the fact that the assignment encourages using a JS object that has a parameter passed through it, I decided to abstract even the size of the tiles. Below is an image showing the result of modifying the size of the tiles. At this point, the repetitive element determined by the dark-purple background is completely omitted, which has its own implications. I think this is beautiful and smooth in its own right; but I did appreciate the repetitive nature of the purple color, as it gives the entire wallpaper its own sense of continuity.
changing the size of the tiles

changing the size of the tiles after adding changing colors to the tiles

Since I was not so pleased with this outcome, I decided to re-introduce the circular motion aspect into the tiles I decided I had liked, except instead of using ellipses, I used rectangles (as this would better fit with the current scheme.) This is my final product for now, but I could definitely use revisions. And with better understanding of coding, I could do a lot more.
final product for now

current “final”


Screen Shot 2017-10-30 at 7.23.12 PM   To start this project off, I looked through the works of Josef and Anni Albers because I love the way that both of them use colors that are somewhat muted yet also rich. I used the digital color meter to get different RGB values from different pieces and saved some of my favorites for later reference. I originally thought I would do something inspired by to Josef Albers’ squares series by having my background grid be completely squares, with some squares larger and in different colors, to see how the two colors paired together. After trying this, however, I thought the larger squares would look better as circles.   Screen Shot 2017-10-30 at 7.20.08 PM  Screen Shot 2017-10-30 at 7.20.24 PM     While looking at their paintings, I found one by a contemporary, Carmen Herrera, that inspired me to have the moving triangles on the sides of the wallpaper. I had the triangles pointing different directions and moving opposite directions based on the painting.   carmen-herrera-basque Screen Shot 2017-10-30 at 7.22.02 PM     To further oppose the vertical motion of the triangles, I wanted circles to bounce horizontally across the screen, and then because I had been trying to utilize white space and different opacities, I decided to have the circle be comprised of two arcs that were slightly separated.   Screen Shot 2017-10-30 at 7.22.31 PM     The canvas was looking pretty dark at this point, so I wanted to have a central, light figure that was rotating. I decided on a square to go against the circles in the background and the bouncing circles, and I wanted a light purple to go with the dark purple background and to further lighten from the background squares.     Screen Shot 2017-10-30 at 7.22.50 PM     Once I had reached this point, I felt that the background of the photo had kind of become detached from the rest of the piece, so I added ellipses in a different shade of yellow to make the entire thing more cohesive and also make the background pattern pop more with the interaction between the pink and purple with the yellow, creating the final product.     Screen Shot 2017-10-30 at 7.23.12 PM

Circling Pink

Circling Pink

“Circling Pink”

I began the process of creating my scrolling wallpaper by setting up the initial elements I would utilize for the final product. I was inspired by a 70’s aesthetic of looping circles. As a fan of the French New Wave, I set out to create a wallpaper I might find in a Jean-Luc Godard film.

Initial sketch

Being that the interiors of his films typically include solid colored walls, I wanted to create what I imagined to be a wallpaper one might find in Ana Karina’s kitchen.
Initial Wallpaper

Initial wallpaper

I was drawn to the idea of circular repetition and created a moving wheel to compliment the flow of the existing circular pattern.
Wheel on wallpaper

Wheel on wallpaper

As I added the code of the wheel to my sketch containing the initial pattern, I had the idea to add motion to the background in order to create a more unified visual. I utilized the random tool, creating a tie-dye like pattern.
Randomized wallpaper

Randomized wallpaper

This inspired my later use of the random tool in my placement of shapes. As I felt drawn to the circular aesthetic, I wanted the rest of the shapes to blend into the background, initially appearing to be a part of the circular pattern and at further glance taking their true shape. I struggled with integrating the wrap and bounce function into the overall sketch.   At first I used a simple ellipse, then morphed it into a triangular shape composed of randomized lines. This shape, in addition to the wheel, suggested a ferris wheel visual, which I found distracting from the overall piece.  I then reverted back to the ellipse, utilizing the random tool to create a spherical motion.
Image 5

Ferris wheel

I had a very positive experience creating this wallpaper. Through the prompt, I was encouraged to put to use many different tools I’ve acquired throughout the course thus far. I feel I’ve gained a better understanding of how the various functions work in relation to one another, resulting in a stronger grasp on the basics of coding. I was also able to express my interest in the color pink, experimenting with different shades and combinations to produce my scrolling wallpaper “Circling Pink” .
Circling Pink

“Circling Pink”

Nice to Look At

Okay, so loops have kicked my ass. Well, coding is kicking my ass, but here I am, trying. And not trying hard enough, but trying nonetheless. This project seemed like a fun idea, but when introduced to all the new ways to code things, I was second-guessing.

In trying to understand concepts, I recalled struggling in math when I was in high school. I eventually came to a realization that I was trying to memorize formulas rather than understand why they work. I wish I could give a concrete example of this, but I have blocked all memories of math after my second year in geometry.

Anyway, with the prompt, I immediately thought about my summer job at the Hudson River Museum in Yonkers. Their summer show featured artist, Robert Zakanitch, and pulled from the museum’s archives to produce a collection of pieces with the theme of flowers. Zakanitch is a little obsessed with floral patterns, and more broadly the idea of patterns.

Zakanitch's Soaring Gardens Grow

Zakanitch’s Soaring Gardens Grow

He is a founder of the Pattern and Decoration movement, actually, and he talked about how he was inspired by things like the floral linoleum pattern of his kitchen floor. This has little to do with what I actually produced, but I had in my head that I wanted to do something floral-like. I never for a second thought I could code a flower, I have to be realistic with myself. What I did come up with draws inspiration more from Bridget Riley in that her designs like Natajara are simple shapes turned into a more complex pattern. So when I sat down to code this thing, I realized I don’t know what I’m doing. I have a starting idea, and maybe that’s all I really finished with, but I struggled, needless to say.

I couldn't communicate what I was trying to achieve to my friend, but here is a rough rough sketch

I couldn’t communicate what I was trying to achieve to my friend, but here is a rough rough sketch

I got my software engineer friend on FaceTime to try to help me, and he kind of helped. I don’t know what I’m missing, besides time and practice and patience. What I ended up producing is a cop out. I’m pretty sure there was a much easier way to code what I did, but I wanted to produce something that if nothing else is nice to look at, and I did that.

Something Nice to Look At

Something Nice to Look At

I haven’t given up exactly, but I have hit a wall, and I’m trying to motivate myself to push through it. What I like about this is its simplicity, and that’s not a cop-out. I like the vintage colors, that I can’t even take credit for. It reminds me of Thanksgiving and birds.  I can do better.


My portrait basically comes from the idea “abstract”.

It was mentioned in our class, and I thought it is a good way to show how I consider myself throughout my work. To me, mosaic is a method to generalise the details of one image; it helps to describe my feelings about how I feel to surrounding environment–the very original picture is a selfie I took several days ago, and I tried to use mosaic to show that I am still new here–mosaic spreads the image into pieces, making my face look like a stranger.The code itself is not hard but repeated–it seems like endless to finish. However, the final expression exactly matched my prediction.

The first time I thought out Mosaic on my sketch book

The first time I thought out Mosaic on my sketch book

original selfie

original selfie

The base of the final image

The base of the final image

The prediction of coded image

The prediction of coded image


The title of my collage is “Japonism”. The idea of this assignment came from the time when I was organising photos taken in Japan. Since the country itself has vivid, various aspects to discover and enjoy, I decided to use my own photos as the material of the collage, and naturally, the title of my collage became “Japonism”–the word is about how foreigners understand Japanese culture, as well as how it influences us.

Firstly I chose the  photographic materials I had from the photo album, then I finished the draft due to the expressions of each image. Additionally, I found to web images to illustrate the topic clearly: the portraits of my favourite Japanese author Yukio. Mishima and two women in Taishō era. They represent different time and styles of Japan–Mishima represents the conservative, morbid beauty, and Taishō generation represents a democratic, liberal time period of Japan.

Similarly, I used the other pair of contradictory images to reach the goal of “vivid Japonism”–the images of Ōsaka Castle of Tokyo Tower demonstrate ancient and modern Japan separately,  and they express that this country has it s various charm as always.I used 4 images as my background: the images of Mountain Fuji, the cherry blossoms, the Kanagawa Wave and Japanese newspaper in Shouwa era. Comparatively, they become the symbols when we think about Japan. Based on this fact, to make another contrast, I took the sign of Akihabara Station, too. As the centre of Japanese animation and media industry, slowly it has taken an essential role in Japanese pop culture. Thus, the Akihabara Station is considered as the new symbol of modern Japan.

The main background music I chose is the song written by Ringo. Sheena, the musical director of 2020 Tokyo Olympic Games. She describes the modern Tokyo by this off-vocal song, and the element she uses also includes traditional Japanese music melodies and instruments.

In conclusion, I really enjoyed the process of make a collage by coding–although using photoshop to cut and remake images during coding was really tough and time-consuming, I think it is still a wonderful, challenging assignment for me to finish; the collage itself arises my thoughts about “Japonism” again as well.



in process

in process

final image

final image

Rainbow Madness

download (2)

This one is all color, and a whole lot of experimentation.

While with my last prompt, I had an idea from the beginning, the only thing I knew about this one is that I’d like to have a lot of color in it.

My starting point was a small experiment I made earlier, a little grid where colors flow from one to another.

Color experiment

Color experiment

After some messing around, I decided to go with a scrolling motion (it is a scrolling wallpaper, after all). The colors were going from left to right, scrolling through all the hues. This eventually turned into a grid:

Continuing experiments  download (12)  download (13)

 I put another moving grid on top of that first one, creating an illusion of rotation, and I started adding more objects to emphasize this illusion.

download  download (1)

And then I accidentally removed the background, and what I was originally calling “Neon Madness” became “Color Madness”.

download (2)  download (4)  download (7)

I love how that turned out. Every part took an entirely different role. The grid is now an ever-changing colorful background, and the objects that originally would’ve been the focus were left to struggle for their survival – only barely clinging to their existence, always about to be erased by the strange rainbow that they live on. Each grid’s fading corners went from guiding the viewer towards the center, to specifically drawing attention to the other grid’s colors.

Nonlinear Narrative: The Protagonist

For my protagonist, I wanted to design a character that would not stand out too much and could blend into her surroundings.  She had to be different from everyone else, but not be too different.  I sketched a few different styles of hair and facial features until I ended up with one that I really liked.  From there, I played around with detail and finalizing how she looks.  I also chose the name Lena to be hers.

Lena lives in a fantasy world, and a city where knights take care of crime.  She works as a knight in the city watch to protect the city.  She enjoys working with the city watch and cares deeply for her job.  The other people in the city watch are like family to her.  Her goal is to infiltrate and destroy the underground thieves’ guild.  She is given this task by her captain.  No one in the city watch knows where the guild is, so it is Lena’s job to find it ad take it down.  Lena has some problems accomplishing this task, however.  She struggles with kleptomania; she has done a good job overcoming this issue, but entering the thieves’ guild might cause an issue for her with kleptomania.  Lena has an ultimate choice to make in the game; she can either follow through with her captain’s orders and destroy the guild, or she can decide that the guild is where she truly belongs.  Throughout the game, Lena can talk to her captain and the thieves’ guild master.  The more she talks to these characters and how she talks to them can influence her choice in deciding where she wants to end up.


This is one of the original concepts for Lena.


From the first sketch, I played around with a different hair style.  I figured shorter hair would be more practical when fighting.


I gave her a similar face to the original sketch.  I tried simplifying and changing different parts of her design.


Drew her in a different angle.


This is one of the final sketches for Lena.  This is where I start to finalize how her hair looks ad how her face looks.


I gave her some piercings to add to her design.


This is a sketch sprite for how she might look in the game.

  FullSizeRender (1)

This is the final, full-body sketch I decided on for Lena.  I gave her fairly simple clothes so that she could easily blend in with any faction.  I added some muscle definition to show that she is strong from her time working as a knight.


  Lastly, I gave her a sword to tie her back to the city watch.  The sword was given to her by the captain, and it is a cherished possession of Lena’s.


When we got the assignment to create a collage, it took me a long time to decide what theme I wanted to work with. But after several hours of watching a playthrough of the game Cuphead, in which a queen bee is a primary boss, I became fixated on the complex and rich imagery of bees. The hexagon shape sounded like a worthwhile challenge to construct through code. The hexagonal background was the first, and most technically challenging, thing I worked on for this collage. My original plan for the hexagon was to have it flat-side up, but when I went to hang it up in class, I found that I much preferred it the other way. Which caused me to spend a few more hours reworking the hexagon. The eventual solution I found was to over a transparent outline of a hexagon and to trace the points. Then I constructed triangles to cut out that part of the canvas. This technique of using the image of a hexagon to construct one came in handy for the hexagons in the corners, too.


The specific imagery that I was working on was juxtaposing the modern and the ancient views of bees. In the modern day, bees are often considered a pest and something to be afraid of. Older, more specifically Greek, views associated bees with divinity and the Oracle of Delphi. I personally find bees and their hives beautiful, so I found it fun to show these two perceptions side by side.


Then I started layering images and text. I tried to use modern words in more decorative fonts and ancient words in more modern fonts. Part of how bees communicate is through movement, so I included a moving bee. The moving background both acknowledges this and creates an almost hypnotic background that also connects to the divination aspect of the Oracle.


Game Studio: The Protagonist

My characters were limited by my artistic ability, but this led to a much more simpler and abstract design that I was influenced from watching the stick figure animations in my childhood. A lot of the design for the main character was influenced by a game called Fancy Pants Adventure.

A lot of the design elements for the protagonist ended up being the same, such as the hairstyle for the protagonist. However, I wanted to put a unique spin on this style and blend it with music, which is something that has influenced me throughout my life. I thought the hair was very “punkish” which is something that I was aiming for as a design element. A lot of the bands in the 2000’s that I grew up listening to would have those kinds of edgy rocker hairstyles, the colored mohawks and the like. However, with stick figures, I thought that the character would be someone any aspiring musician could relate to in a way.

Reference Image: David Beckham

I enjoyed just how animated and expressive you could make stick figures, even with how simple they are. You could have a character doing all sorts of things and make the action even more exaggerated.

All the characters had elements of the music scene or an alternative look to them, which I certainly enjoyed giving and designing. A lot of stick figures are designed to be “bland” and not set apart from each other in an animation for example, but I liked giving them an air of distinction. For example, the roadie NPC was designed with long hair and always smoking a cigarette, which is a common trope/stereotype of the rock roadie scene that I thought I could play on.

roadie NPC

The cigarette automatically tells me that the character lives a rough lifestyle and is out on the road a lot. As for the villainess, she was designed as an opposite for the protagonist. The term “opposite ends attract” was a core principle for me in designing the character. So as the protagonist is leading a lifestyle of rock and roll and on his quest in the game, the villainess is an opposite, offering a life of peace and stepping away from his dreams.

girlfriend villain NPC

I chose the split hair colors as a sly reference to the choice she offers in being the villain of the game. The roses and the drumsticks also are a nod to that. The two worlds colliding was an interesting dynamic for me to explore. It is either the rock life or the life of settling down and building another life together. This reference image I found was the basis of the hair color.

As per the protagonist, heavily based off the Fancy Pants Adventure game, I found that I would put the protagonist in my shoes, as a drummer just like me. I thought his story would be interesting as well as funny for any musician, putting on the best show of all time, playing the best gig that he can.

game protag

  With the hair in mind, it ended up looking like a mix of the “mohawk” from the main character in Fancy Pants Adventure, as well as elements of Sonic the Hedgehog’s head mixed with a Super Saiyan in the Dragon Ball anime series. I liked the idea of hair being the distinctive item in all these characters, as I felt that looks would be important in distinguishing between all these characters. I liked being able to design one element that would stand apart from the others that would make them unique from each other. So I thought that hair would be the way to go as it is in some ways, a lot of people’s form of expression.

Reference Image: Dragon Ball Z

Reference: Sonic the Hedgehog

Characters for Hollie, Girl Detective

Hollie, Girl Detective

Hollie, Girl Detective

When working on this project, I was inspired in style by old flash games like Riddle School, the idea of children in adult situations like South Park, and a girl solving a mystery that the police should themselves like Nancy Drew PC games. Hollie is 12 years old and in 6th grade. For months, she’s been working with the Safeville Police Department and Police Chief Dunlap to find missing pets. After the murder of classmate Joshie Felix, Chief Dunlap assigns Hollie to the case.

Hollie first sketch

When I first started, my idea was to have my protagonist be Little Red Riding Hood solving the murder of her grandmother. Her hood soon became her hair, and her name changed from Little Red to Hollie (named this way for heart i’s). Her big coat came from my style in middle school, which was big and baggie and something I could just hide my entire body in. IMG_8832 I added the buttons to emphasize the fact that it was a big coat.   IMG_8827   Chief Dunlap and Tommie the first 2 NPCs I designed for this game. Chief Dunlap is meant to be a useless adult figure. He gives Hollie her cases, and is ignorant of the reality of the situation. Tommie is part of the influential and rich Winston family, and is an entitled little shit. IMG_8831   I added a mustache to make him look older.   chief dunlap   He sits at his desk all day. He never leaves.   IMG_8828   Tommie grew legs to look less shady, and his money sign became more obvious.   tommie winston   The color of his pants and hat is Nantucket Red which is gross and the perfect color for a rich white boy. I also covered him in blood to make it painfully obvious that he’s the murderer. The spelling of his name was also changed to fit the theme of every child characters’ names ending in “ie”. These three characters are the most important characters in the game, and made up the overall tone I wanted to set for this dark comedy game.

Nonlinear Narrative: The Protagonist


  My protagonist is a woman named Alessa Solaris, who lives in a futuristic society where human space travel has been achieved. In this universe, the resources on Earth have been completely diminished and humans have taken to gathering resources in the form of raw elements from elsewhere in the galaxy. These raw elements are bought and sold at high prices and used to create compounds that make up the materials humans use for everything from medicine to fuel. And because the element trading market is so lucrative, it has brought about a resurgence of space piracy. Alessa’s role in this world is one of conflicting loyalties. All she wants is to get married to the love of her life, but she has no money to contribute to the wedding, and she is desperate. Seeing piracy as the quickest way to get the money she needs, she joins a crew and sets off on her first mission to plunder a space station that is known to have a large supply of elements. Unfortunately, she soon discovers that this space station is where her fiance, a medical professional and virologist, is using those elements to create a cure for the viral epidemic happening on a nearby planet. This is how Alessa becomes torn between following her captain’s orders, and protecting her fiance, who plans on guarding those elements and his work on the cure with his life.

The major goals for this character design was to create a character who exhibited a merging of two different styles: futuristic space and old fashioned pirate, as well as showing her as a female, and making her seem friendly but somehow connected to the other two main characters who both exhibit differing styles: one being a healer and scientist, and one being a marauding space pirate.

To show Alessa as feminine, I focused on eyes and hair and slightly on body type. I didn’t want to fall into the trope of a female character wearing a skin-tight jumpsuit to show all her curves, so I thought focusing on feminine eyes and hair would be a better approach. However, if I wanted to show her hair, I couldn’t have a full space helmet, so I tried to take some inspiration from Starlord’s space mask from Guardians of the Galaxy.

Reference image source:

Reference image source:

This led to a helmet that covered half of her head and a gas mask type attachment to her nose and mouth. This led to the misunderstanding that she was from a toxic environment more akin to a post-apocalyptic world. Which then led to the eventual development of the full face and top of the head type helmet that one can see in the final character design. This communicates the image of space much better. Also, thicker outlines and some light reflections were added to the eye protection so that it communicates goggles or a visor attachment to the helmet much better.

Since the helmet evoked the image of space more than the image of pirate, I used the clothing design as an opportunity to show more of a classic pirate type style. I originally was inspired by the movie Alien to give my character a jumpsuit that looked more like a uniform that one would wear in space.

Reference image source:

Reference image source:

This idea evolved because of the need to add elements of the classic pirate crewman style, which is where the vest, the belt, and the loose fitting pants come from. The heavy work boots are used to evoke an image of a tough work environment that requires stability and sturdiness, like one might come across as a crew member aboard a spaceship. This is also why they are more box shaped than any other elements of this character’s design, since square shapes indicate sturdiness and immovability.

  I used elements of color and shape to work out the other design details. Because she is the protagonist, I wanted to make sure the players can feel like they trust her. Therefore, I tried to stick to rounded corners, soft edges, and circular elements. This is why her eyes are so rounded and prominent. They communicate an innocence and trustworthiness. These characteristics are also exemplified with the eyebrows tilted upwards because it gives an openness to the face that echoes a friendly personality. The repeated use of round and circular shapes in the character design plays on the human habit of reading traits with those shapes as friendly, open, innocent, playful, and slightly feminine.

Color also plays an important part in the design of this character. First, I wanted to stay away from most cool colors like green, blue and purple, because those are usually used to convey a mysterious, untrustworthy, sneaky, or devious tone. However, while redesigning the helmet, I thought to use some grays with blue and purple tints to show her connection to the less than morally sound pirate crew. Other than that, I tried to stick to vibrant warm colors like red and orange. These vibrant colors convey energy and bring the player’s attention directly to the character, thus identifying her as the protagonist. The white in her vest also brings attention to her because it is a bright contrast from dark and mysterious tones, but is also associated with innocence.

This character design evolved as I created it. There was really only one sketch at the beginning, but the elements of her design changed as levels of the character were developed.

      Protag Sketch

She initially started with straighter hair, but to make her more energetic and dynamic, the hairstyle was altered. Her figure was also curved and rounded a little more during the outlining phase.

Protag Outline 1Protagonist 1

When going through the second phase of design where the helmet went through the most alterations, there was a sketch period where I played around with some other ideas. I thought about making her boots bigger, or giving her a big oxygen tank backpack, but these ideas were ultimately scrapped, as the bigger boots conveyed more of a stomping and squishing mechanic, and the backpack could not be seen from the front and would only cause confusion in this design.

  Protag Sketch 2Protag Helmet SketchProtag Helmet ColorProtag Helmet Linework

I also ended up exaggerating the effect of the helmet on her hair by making it curve out from under the helmet like real hair does. This made the borders of the helmet more clear and made it look more useful as protective head equipment. I also exaggerated the reflective shine on the goggles to convey more clearly that they are goggles.


As I am much happier with this iteration of the character’s design, this will most likely be the final, completed version of the protagonist. Also, this design will continue to affect how the other NPCs are designed. For example, the captain will have a new helmet that looks similar to the protagonist’s so that they are shown to be related through profession, however, the captain will be slightly more extravagant than the protagonist to show his higher rank. As for the fiance, the other NPC, he will show similar color and shape themes to be shown as innocent and friendly, but these similar themes will also act as a way to connect the two characters in the player’s mind.

The world design will also share similarities with the protagonist’s design. For example, anything related to the protagonist’s personal belongings should be in the same color scheme as the character, so oranges, reds, browns, and grays should be present in her living quarters. Also, to appears as if she fits in the environment, the world design, specifically the space ship, should look like the kind of heavy duty work environment that would warrant her need for those sturdy work boots.

By working with specific constraints based on style, story, and theme, this protagonist’s design has changed and evolved. Color, shape, clothing style, and attributes such as her helmet and boots give the player a clear idea of who this character is and what kind of world she lives in, as well as what her relationship to the two NPCs might be. If a new conflict appears in regards to the protagonist’s design going forward, she might change slightly once again, but for the time being, she is a completed character.

by Anna Beliveau  

Nonlinear Narrative: The Protagonist

The initial concept

The initial concept

My Protagonist is named Kaira Barnabus. Kaira lives in a post apocalyptic world that suffered catastrophic flooding several decades before Kaira was born and is filled with various forms of fauna that can talk and have formed various societies. Kaira has lost her memories at the start of the game but has vague recollections of someone underwater that she needs to find, the game is about her travelling to try and recover her memories and help those she meets along the way. I’ve had the idea of both this game and Kaira for a few years now and it wasn’t until I stopped just visualizing Kaira in my head and actually drew her that her design started to change. I always knew her color scheme was going to be more earth toned and slightly military-esque. One of the things that I’ve toyed around with was giving Kaira a facial scar.

Sketches where I messed around with the scar concept

Sketches where I messed around with the scar concept

I almost scrapped this idea because none of the scar designs I was using seemed to fit the character or her backstory, but then I gave her the X on her forehead that I’ve ended up keeping. Another idea that I ended up keeping was giving Kaira a scarf that was a pale blue/lavender. This is very similar in color scheme to Kaira’s sister and was meant to connect the otherwise very different looking characters visually. One aspect of Kaira’s design that was directly impacted by feedback I received in class was her boots, originally the boots were so big because I’m bad at drawing boots but then I thought about the fact that she’s in a world where she’s gonna have to fight but she didn’t have any weapons, so why not give her weaponized shoes? These shoes are also her Attribute Visual. Even outside of combat screens (if I get to that this semester) she will collide with things and will probably end up kicking at least one NPC.

How could I have a girl with Kicking Feet if I didn't draw her kicking at least once?

How could I have a girl with Kicking Feet if I didn’t draw her kicking at least once?

Drawing Kaira so many times also helped me solidify her personality a lot more. Even though she doesn’t remember who she is or her past she is still a very confident and sort of cocky woman who has a dry sense of humor. Sketching let me experiment more with her visually as well as with more internal concepts of the character. Giving her these huge boots for Kicking Things made me think about why she would be a more physical person both in terms of fighting as well as her life in general.

a sketch I drew to get a better feel of her personality

a sketch I drew to get a better feel of her personality

Kaira and Zhis were always designed with the other in mind, their color schemes aren’t similar but I made sure they didn’t clash and seemed visually on the same side. Kaira also has a sister and although she won’t appear in this project her design is very much influenced by Kaira’s. Another character who will appear in this part of the project though and was influenced by Kaira’s design is Nadia who dresses in a similar way to Kaira although physically the two women look quite different. At this point in the design process I’m starting to draw Kaira the same way physically in each image but small things about her may still change between posting this and actually making her entire sprite sheet for the game.

possible final sprite?

possible final sprite?

Another possible final sprite

Another possible final sprite

Kaira sprite draft copy

When I officially gave Kaira The Boots

Nonlinear Narrative: The Protagonist

Becca Radley Concept  

The protagonist for my game design project is Becca Radley. She is a 24 year-old professional ghost hunter with a predisposition for off-the-wall plans. When her producers demand that she and her brother/co-host Casper provide the funds for their next season themselves, Becca uses her money to purchase lottery tickets. One of them wins, but it is not enough to meet their goal. So, when Becca sees a massive old mansion for sale she hatches a plot to convince the owners the house is haunted and then convince them to sell their house for a lower price. Once it’s bought, she reasons, she can suddenly “resolve the haunting”, and sell it at a higher rate.

Becca is the “face” of the Radley ghost hunting duo, with a showmanship that made their show – Ghost Quest – somewhat of a cult hit. Her ideas are not always good, or morally stable, but things have a way of resolving themselves in her favor.

The top image is an example of Becca in the artistic style I’ll be using for conversations. I wanted to draw my inspiration for conversational sprites from dating sims and hidden object games. I also wanted my over world sprites to be fairly simple, so as not to crowd the viewer with detail.

The rest of the images are over world sprites, as I assumed that it would be easier to find a face that looked aesthetically pleasing in the simpler style then develop a face in the complex style, rather than developing a face in the complex style and then trying to make it read well in the over world sprite style.

I considered what props/special physical traits I might give Becca, but after some thought I decided that a more utilitarian design would function best for her. She’s a bit out-there as a person, but I wanted the townspeople NPCs to be bizarre with her as a grounding point, so I wanted her to look a bit “ordinary”. To that end, I decided I’d make her (and her brother to a lesser extent) stand out from the rest of the characters and the background by

I started with a free-sketching style in the first image. I liked the proportions in that image, but felt like it would make keeping on-model difficult. I gave her some earrings and an eyebrow ring to showcase that she was more rebellious, and gave her white hair so she would contrast with the background. In the second image, I tried giving her a jacket. When we brought our three characters into class, a few people thought Casper was the main character due to the number of accessories he had, so I thought I might give Becca a hoodie in a different color. It ended up covering up much of the design on her shirt, however, so I removed it in the next sketch. Ghost Quest is her personal project, so I wanted her to display the shirt openly.

This created the problem of how to properly display the logo. It was difficult to make one that read properly in the sprite style. In the next attempt, I simplified the logo under the logic that I could do the more detailed logo in the conversation sprites, but I ultimately didn’t like that. In sketch #4, I added a little ghost decal to the shirt to make it more clear that ghost hunting was what she’s about. I also simplified her shoes, as I was having difficulty making the white rubber section of her sneakers read well.

In the next sketch, I decided to make the design more shape-oriented, and also to try outlining Becca with black rather than a similar color to the actual part of her body it was next to. Making her blockier ended up making drawing her easier, but I didn’t like the black lining so I abandoned that in design 6. Design 6 and 7 were both attempts to decide what those shapes were, and improve on the Ghost Quest shirt design. I also made her eyebrows black, to call attention to the fact that Becca is bleaching her hair rather than just having her hair naturally white. In design 6-8, I also played with the color of her shirt and skin to have a higher outline contrast, and tried to figure out what shape of eyes i wanted her to have. I ended up fairly happy with the shape of design 8, though when I put her in the background image her color scheme contrasted poorly with the background. So in image 9, I used photoshop’s Kuler wheel to give Becca a shirt color that fit into the scheme. Using the yellowish green in image 9, I ended up with a color that was different from any of the colors in the mansion’s scheme, but still fitting in with them.

As this was happening, I started sketching the backgrounds for the game. This ended up fueling my decision to give the rest of the characters color schemes which were either black and white or closer to the background color schemes. In this way, it will emphasize the way everyone else is a part of the town they live in, while Becca is an interloper. I’ll also be tweaking Casper’s design so that it compliments Becca’s more.

The backgrounds ended up becoming more abstract/fauvistic. Becca has a fairly solid design contrasting the background, while the backgrounds and the other characters are a bit smudged and indistinct to give them an air of mystery.

I’m fairly certain that Becca’s design is still a bit incomplete, as it feels a bit too divergent from the background design at the moment. I want to work on sketching the backgrounds and other characters a bit more, so that I can be more aware of what I’m trying to contrast.

Beccaspritetry1 beccaspritetry2 beccaspritetry3 becccaspritetry4 beccaspritetry5 beccaspritetry6 beccaspritetry7 beccaspritetry8 beccaspritetry9