Monthly Archives: February 2017

Digital Tools: The Art of the GIF

Digital Tools: The Art of the GIF Trip   I can’t say that I was inspired by one artist per-say, but more so a specific style. I’m very fond of geometry and optical illusions and I was inspired by “Op Art”.  Most famously, artists Bridget Riley and Victor Vasarely created optical illusions with their paintings. Some Op Art relies on the difference of foreground and background to create a seemingly 3D image on a 2D surface. Figure-ground perception allows us to distinguish a figure from the background.  Based on which one you focus on you’ll perceive the same image differently. By using red against a black and white backdrop, the red is perceived more likely as the figure creating one optical illusion. The pattern that I made to use as part of this gif had an interesting effect that made the middle diamond look like it was a circle every now and then. I wanted to create another optical illusion going forward. The rapidness of the gif makes the stills come alive in a way that suggests expansion. It looks as if it’s growing; which is something I hadn’t anticipated. I’m a big fan of gifs in general. I like to look at one for a long time and watch it over and over again. That’s not really something you can do with the particular gif and some of my other work. It almost instantly causes eye strain or gives you a headache. I guess that comes with the type of gif I made. Perhaps moving forward I can try to make more eye-pleasing work. Game_05 The created shapes in this gif have a game-like quality to them, both in movement and their physical shape. I’m by no means a gamer but I appreciated the vintage game-like quality of it, so I went further with that. At first it seems as if the shapes are all revolving together. The longer and closer you look you realize that’s not the case. Some are moving in opposite directions and even at different speeds. If you stare at a certain section for too long, the arrows sometimes look as if they’ve changed directions and that’s not the case at all! The gif comes from several tiles I made and replicated. I like how you can’t see the tiles, and the gif looks like one big animated one. It would be interesting to see this completed in another color. I could see the shapes starting out in one color, then after a few revolutions, one seemingly random shape would change color, then after a few more revolutions, another shape would change color and so on and so forth. There’s also a game-like quality in that too I suppose.     Game_09   This gif is representative of my “crazier” gifs. I can’t stare at it for too long. At the beginning when everything is small it feels like things are morphing. It has a certain biological, cellular quality to it, as if the shapes are going through mitosis and evolving. Then all of a sudden things go berserk with the rapidly-paced, larger images. The morphing was something that I was striving for, so I’m pleased about that, but I wanted it to be a more organic growth. The final gif grows but  happens all of a sudden. To be honest that’s okay too though. It catches you off-guard and changes the rhythm. The interesting part is that the time between each frame is actually the exact same between all of them. Perhaps the smaller frames have more variation causing more of a flow.

Digital Tools: The Art of The Gif

  This GIF (much like the others that I have made) came about largely by accident. I began making the pattern by kind of stamping with a brush that I had created while attempting to mimic a motif in Sicilian tiles that I was referencing. There is now very little resemblance, but I like the way that it turned out. It’s my first GIF that employs bold colors and I’m pleased with the continuity that’s created beyond the frame by the pattern. It seems like a pattern that could be used in fashion design, so I wanted to echo that same kind of dynamism in the GIF. I used a lens warping effect within a center sphere in the frame in order to create this flashing/popping effect. I’m a big fan of delicate and soft color palettes— shades and tones which seem to seamlessly meld with each other. There’s a strange metallic yet even flesh-like quality to the palette in this GIF, and it strikes me as being as off-putting as it is pretty. I had a very specific reference for the pattern, copying the rectangular designs that covered a building I had photographed in Prague. Each corner of the square converged in a center point, which gave it a really cool three-dimensionality that I kept coming back to. I found that it does interesting things to other images when used as a transparent overlay. These crinkling distortions are just that— distortions that I played around with in GIMP. It looks like they ended up having a sort of wave effect which I find really cool.   This was the one pattern that I made from something in my sketchbook. It was just a very simple floral line design which I managed to cut out and color in GIMP, turning it ultimately into a brush. There’s not really a specific inspiration for this, other than my admiration for more complex floral patterns and sinuous lines. I wasn’t quite sure how to turn it into a GIF, so I ended up making distortions in alternating sections of the image.

Digital Tools: The Art of the GIF

smile   The above GIF was inspired by Joe Maccarone, a Baltimore illustrator who is known for his surreal animated GIFS. His GIFs usually feature several cartoony illustrations made by hand drawn lines, flat colors and follow a very stream-of-consciousness style of illustration. Most of his GIFs have narratives that circulate around the issue of mental health  and tend to stir some kind of deep emotion within the viewer. These gifs express something that is unspoken and relatable. My GIF is somewhat like that. I aimed to initially make the lips stretch out upwards to make a smile, so that the combination of smiles and tears could convey the idea of the façade that people put on to establish a sense of normalcy to others, as they are too afraid to reveal their inner turmoil. However I experienced difficulties while sketching it so I just decided to show the lips flashing colors, to evoke a sense of emotional chaos. topsy The color palette and shapes of the above GIF has been inspired by Mattisse as it uses a combination of pure and vivid colors. The color palette of the diamonds is meant to evoke intense feelings in the viewer while the light background establishes a sense of serenity. I initially wanted to make tiles of regularly shaped diamonds, however I did not pay attention to the x and y scales , and  ended up making more irregularly shaped diamonds which gained a more cartoony and surreal feel as the animation progressed. splash   This GIF follows a proper,  fixed narrative compared to the other two as the viewer expects an outcome at the end. I liked the idea of colors swishing inside a ball and upon the burst of the ball, there’s a splash of color , which creates a very satisfying effect. If I could improve upon this GIF, I would make the ball have some designs swirling inside it – maybe a concentric circle. The concentric circle could have the same color scheme as the pattern of splashes in the final layer.  Moreover, the initial background could have a color other than a monochromatic color like white, to make it look more engaging and interesting.  

Digital Tools: The Art of the GIF

SAB_GIF_10This GIF was inspired by Valentine’s Day–and the notion that love can cross boundaries no matter where or from who the love comes from. Also, I wanted to mimic what’s called the Dot Test with hearts instead dots. My plan going into the project was to find a way to represent love through the hearts and to represent people through the color scheme of skin color. What worked well was that the colors of the hearts are visible on each skin color, emphasizing the theme, and that when the hearts are outlined they then are able to cross the diagonal and metaphorical ‘barrier’ separating the top left and bottom right hearts. What didn’t work well is that the outline of the top left hearts and their movement towards the bottom right hearts could have been more smooth and coherent.SAB_GIF_6This GIF was inspired by a visiting scholar, Heather Cleary. She presented on digital text and how text can move across the screen and create images. My plan was to try and hand-write a word (which wound up being my name for the sake of simplicity) and give an organic feeling of change to each frame by re-writing each frame of the GIF. What worked well was the sensation of shaky words that fall off the page. What didn’t work well was the color scheme. I chose a Nature Theme on Adobe Kuler for the color pallet and tried it, but I think I should’ve done a black and white color scheme instead of colors.SAB_GIF_3 This GIF wasn’t inspired by a particular artist, but by the idea of building tension. My plan while entering the project was to first, play with one circle shrinking and growing while exterior circles constantly moved. The more I explored the options, the more I realized the center circle seemed to be exploding outwards with tension while the exterior circles are closing in on the center circle. What worked well was that by having the corner circles move a bit each frame, that caused them to look agitated. What didn’t work well is that the center circle doesn’t truly explode. It increases in size, but to add to the tension it would have been better if the cennter circle became spiked.

Digital Tools: The Art of the GIF

gif_06_molina

I used one of my favorite tiles for the Gif above. What I really became interested in, and what is very evident in the Gif above, is the idea of nature contrasted with the man made. Of course, the images shown are drawn roses-and are a representation of real roses. I really enjoy watching the black lines come in and separate the blocks of roses- making the image a little bit less chaotic.

Throughout my gifs I thought about the word CHAOS a lot. I thought about nature, and the use of computer-made objects such as lines and circles. I stuck with a very limited color scheme and focused on what ideas I had.

For the roses Gif above, I ended up with only 17 images. I started with the basic tile then would add a line here and there, save then repeat. Once I made the gif the first time I did not like how the lines would come out into the blocks then simply cut back to the beginning of the gif. So I then added each layer from 17-1 backwards in Gimp so that I could get the retracting effect of the lines. This created a better flow and a Gif that didn’t make me want to fix something. Although, even now, I wish I could fix the upper left hand corner lines so that they come out from either side rather than in a already square fashion.

In my next Gif I focused on fixed points, fixed areas, and rigid lines. Below, I created a Gif with a very simple pattern and movement that would too look endless in a loop. 

gif_09_molina

I ended up with 54 layers. To make this gif I made a very precise grid. I followed the grid very carefully so that each line would be precisely positioned in each frame. Watching the gif now, I want to open Gimp and make one where lines intersect. But I do enjoy how this one turned out- although simple. Nothing is jumping around, and it reminds me of the roses gif simply beach of the patterns. Watching it, there are no surprises. 

The gif below takes from the two gifs above. I thought about CHAOS, and about very exact shapes. The precise circles are distributed in an un-perfect circle that although bothers me makes a sort of sense with the chaotic movement of the perfect circles. 

gif_10_molina

Nothing is exactly perfect in this gif, and although it bothers me. It bothers me in a good sense. Although the gif is somewhat unpredictable it is predictable in the sense that it loops over and over. The gif draws elements from both gifs above. I finished the gif with 39 layers then placed 39-1 so that it would collapse back to the original circle in the center then loop seamlessly. The gif itself has 78 layers.

The process of gif making is much more time consuming than I thought it would be, but I enjoyed creating something I am happy with. There are many many gifs I am not happy with, but the process is definitely about practicing and figuring out what works for you and what doesn’t.

Digital Tools: The Art of the GIF

For this project, I was inspired by a variety of sources. For the first gif, Windows, I was inspired by the shadows of my windows in my dorm room at night. The shadows were more diagonal and haphazardly placed, but the silhouettes overlapped each other which inspired this. Each color is actually a paintbrush of a window frame. I wanted to use red and blue because one evening an emergency vehicle was outside and the shadows were these flashing colors, and then I added green and brown to go with the colors. The light yellow background is based on the color of my walls when the sun is rising or setting.  This gif was inspired by a 1960s pattern I liked by an unknown artist. The original pattern was just circles on lines, but I decided to recreate the pattern with various other shapes. Then I put all the images in one file on different layers. I made sure to make the gaps transparent so almost all the layers are visible in every frame. The animation is made by cycling through the layers. I wanted to do a gif that was a little less uniform than the previous two, so I hand drew this gif. I was inspired by a colored scarf I had, but I ended up liking the image without colors instead because it flows continuously. Though it is not visible here, the background of this gif is also transparent because I like the idea of partly transparent gifs. My plan going into this project was simply to experiment with motion. I enjoyed planning out each gif and imagining how the frames would follow each other, but I think some move faster than I wanted. I can change this in the future by adding more frames. I think my ideas worked well, but my mental image of the result needs work.

Digital Tools: The Art of the GIF

(I know that this is late, but it’s been a long week…) gif 1 blotter   This one is a color-over of the pattern I did a week before. Not much thought went into it; Just phase the colors into their secondary counterparts, and copy the frames so the picture will go back to normal. The initial pattern was inspired by 60s-era LSD blotter art, or more specifically, this LSD blotter art, featuring a portrait of John Lennon by Peter Max.   gif 2 cake This one was inspired by Wayne Thiebaud, one of my favorite artists. I admire the soft, pastel colors of his confections; How, in his paintings, the sweets are the only detailed part. I like how the eerie white background works with the muted, gentle cake and tray. I also wanted to experience with ‘stop-motion’ gifs, where, although each frame is drastically different, but showing a progression. A story. In this case, a cake getting eaten. gif 3 warm Another small one. I have trouble with hand-eye coordination, so I didn’t notice that the pattern was off-center until after I finished it. Other than that, I’m quite proud of this one. It comes from the likes of seventies graphic design; cool, funky, organic shapes in warm colors. I was inspired by psychedelic art again when I decided to let the colors pool over, one by one, drowning each other out in a hypnotizing manner. Comforting, enticing, and relaxing.   test One of my goals for this project was to do at least one spinning object GIF. I was listening to some Marina and the Diamonds, hence the name (“The Family Jewels”) and the subject. I originally intended to make it 800×800, but the diamonds were too small and decided to leave it as is.    

Digital Tools: The Art of the GIF

NoMoreGalaxy   An artist that has inspired me is Patakk.  Their work is geometric and tends to shift between different shapes.  I like the simplicity of the gifs and how they move.  Patakk uses many simple color schemes which I think are great. My plan for this project was to change the colors of my patterns and to add some effects to them as well.  I like the disrupted look that the effect “shift” has on the gif.  I like the colors I chose to use in my gifs, and I like how I went about changing the colors.  While making the gifs I just went with what I thought looked good, and that’s where my colors came from.  Overall, I’m happy with how my gifs turned out.  I think they look great.  I prefer the ones I made with Gimp rather than the ones I made with Processing.  I think that the ones made with Gimp just have more interest to them than the ones I coded.  I think that if I had added more color variety to the coded ones then they could have been better. Stars Disturb

Digital Tools: The Art of the GIF

gif10 This was the final GIF I made. It originated from a brush I made that depicts the shape of cattails, and I used the Fractal Trace tool in GIMP to create swirling shapes. I was inspired by the work of Yayoi Kusama, and the detail and depth in her infinity rooms. I like her varied use of color, texture, and light. My favorite pieces by her were the Dots Obsession Infinity Mirrored Room, Obliteration Room, and the Aftermath of the Obliteration of Eternity. My absolute favorite was the Aftermath of the Obliteration of Eternity, because it reminds me of both the vastness of outer space and the way city lights look from a distance, and it is so intricate that I could look at it for a long time. I was also inspired by the lush, detailed patterns of Gustav Klimt and by Daniel Buren’s use of space and color in his art installations. gif4 This GIF used the Sparkle tool to create the cloud-like effect on white pixels in the image. Since I have not made GIFs or any sort of animated images before, my plan going in to this project was to experiment with different tools and ideas to see what works and what doesn’t. I found that I often needed more than 6 frames to be happy with the motion of the GIF, and most that I made had between 8 and 12. I also found that once the images are compiled the final appearance in motion is sometimes different that what you would expect. I think I need to continue to experiment both with the software and with expanding my imagination around colors, shape and scale. One challenge that I had was feeling limited by my ability to draw shapes and to imagine what to draw. I found that by picturing what I wanted the motion of the GIF to look like I was better able to make the individual frames mesh into a collective GIF that made more sense to me. I think that experimenting with lots of different tools and filters in GIMP worked well for me because it gave me new ideas and helped me start to learn the capabilities of the software. gif7 This is probably my favorite of the GIFs I created, because I think that I got the smoothness of the motion right and I like the combination of the subdued color palette with the detailed confetti effect.

Non-Linear Post-Mortem: Heretic

Screenshot (19)   Game Design and Non-Linearity  Heretic is a 2D PRG that follows a young girl living a barren village. Resources are slim, the soil is untenable, and the villagers only think of their own needs for survival. The villagers live in fear of dying and the unknown, and have begun to carry out witch hunts, resulting in the burning of various women at the stake for crimes of witchcraft. The player can choose to leave the village and enter the forest, of which most villagers are afraid. If the player brings an item to the book, the village will be changed – for better or worse. The player can decide the fate of the village and the villagers based on what items they bring to the book. For now, I’ve designed four items that the player can bring to the book – a shepherd’s crook, a sword, a shield, and a potted plant. Each item is symbolic of the change it will bring to the town, though not necessarily in the way that the player expects, and not necessarily in a way that the other villagers are happy with. The potted plant, when brought to the book, will result in the construction of a new garden for the herbalist, giving her the ability to grow more plants. The player can continue this cycle and improve the quality and size of the garden with each trip to the book. However, the blacksmith may feel threatened by the increase to her resources and decide to accuse her of witchcraft, leading to her being burned at the stake. The widow, also, has a shepherd’s crook from her late husband that may be brought to the book. If the player does so, the widow will receive a sheep and a small plot of grass in which the sheep can graze. Again, the player can continue this cycle, but risks arousing suspicion of witchcraft the more the player helps the widow. During witch hunts, the women targeted were primarily women who seemed threatening to the capitalist control of production and reproduction. Herbalists were threatening because they had natural knowledge of plants, and often assisted with women’s reproductive health. This power over life and death was threatening to a system that need to control reproductive power to be able to exist. Widows, too, were threatening, because they existed outside of the bounds of marriage. Ultimately, I would like this RPG to illuminate the sexist underpinnings of the witch hunts, and the way they were used as a means to protect capitalist patriarchal power through player choice and consequence. If the player chooses to bring the blacksmith’s shield to the book, a large wall will be built around the village. They can continue to fortify the village by bringing the shield back to the book, and the villagers will never suspect the blacksmith of witchcraft, because the resources he provides isn’t threatening to the capitalist system. The nature of the book should be ambiguous. It may be magical, or it may simply give the player the practical knowledge to achieve the change she seeks. Originally, I was going to have the player bring items to a gathering of chanting women out in the woods, but decided against it because I play testers very quickly associated it with a coven of witches. The book, to me, represents knowledge, which is ultimately what truly threatened the capitalist regime. This game is non-linear most obviously in that the goal is entirely up to the player – whether they want to help or hurt the village – and in that there’s no set path to reach that goal. Though there are only a few items to bring to the book right now, in the future, I want there to be many more, so that there are even more paths and twists and turns. One path won’t necessarily cut you off from another path – if you build a wall with the shield, you can still bring the potted plant or the shepherd’s crook to the book later. Though it will take a lot more design time, I want this game to reflect the possibility of alternate timelines as Borges described in Garden of the Forking Paths. In one instance of the game, the player may wish to indirectly kill all the other NPCs and leave the village in ruins. In another, the player may achieve a utopian village with bountiful resources and no conflict. In another, the player may try to save the herbalist but attempt to kill the blacksmith and the widow, and so on and so forth. The paths should fork and cross over one another and double back and allow for as much exploration as possible. In a lot of traditional RPGs, players use weapons to combat enemies, and the enemies make up the bulk of the narrative. In this game, there aren’t any discernible enemies.  Yes, you can capture and kill a rabbit – but that’s not an enemy. The player can decide to buy the sword – one of the more expensive items – but the player can’t use it to kill villagers. If the player brings the sword to the book, the player may expect to receive some suit of armor, or a bigger sword, etc. But instead, a random building in the village will be destroyed. Just as the book isn’t necessarily magical, the changes it brings aren’t always good. The changes the book makes depends on the player and the items the player brings, and just as it can help make the village great, it can also destroy the village. In that way, this RPG is non-traditional – often, RPGS have one goal – to save someone or something – and there is one way to achieve that goal. In this game, the goal is up to the player, and the ways to achieve that goal don’t follow traditional narratives. For many games, a sword represents heroism. But in this game, the sword represents the violence of domination and oppression. Screenshot (18) Art Design Overall, I’m satisfied with how the game looks and feels. I drew inspiration from illuminated manuscripts of the 1400s and 1500s – a time of intense upheaval in Europe as the society transitioned from feudalism into capitalism. Illuminated manuscripts were usually drawn by religious orders, and were only accessible by those in power. I wanted to play with their patterns and symbols to evoke a religious and medieval aesthetic in my game, and also to re-appropriate the styles of the books to turn them against the will of the aristocrats that commissioned them – even if they did so five hundred some odd years ago. During my last leg of development, I decided to change the main village to be very rocky and barren, in stark contrast with the forest.  I wanted to convey the level of separation of the humans from the natural world through color in my game. Often, human culture and society feel like they are natural to those participating in them, thought they are anything but natural.  The colors of the human dwellings have bright accent colors that serve to further alienate them from the forest environment.    Screenshot (17)    Screenshot (15) Working in 64×64 in this dev cycle was not the best idea, because each tile took at least an hour to make, if not much more. The rock facade took at least eight hours. I got lost in the artwork, rather than the gameplay.  I ended up spending a lot of time on water tiles that ultimately didn’t get much use in the game, because I worked on artwork before actually testing my paper prototype. I had the idea that the girl would maybe crash land on an island in a boat, but decided to scrap that idea because I wanted her to be a part of the community. I might use the water tiles for a fisherman narrative later, but I shouldn’t have devoted so much time to an idea I was completely unsure of. The walk cycle took a lot longer than expected because animating with pixels was a lot harder than i first thought it would be. It seems simpler because you’re working with small units, but it can actually get harder because making a bunch of squares into a cohesive moving shape is kind of difficult to do when you haven’t done it before. I got so frustrated by the walk cycle that I didn’t finish it till last minute, and then I didn’t have time to code in animation of items being picked up, etc. Animating the movement of the feet was particularly difficult, and I’m still not satisfied with the end result. I’ll probably change it in the future. sheep   What I Learned Always test your paper prototype first! That’s one of the big things I realized this semester. Don’t develop a bunch of art and THEN gameplay, because you’ll end up focusing too much on art and not enough on programming. I have a very clear idea of where I want my game to go now, but I have very little of it programmed because I was focusing too much on what the game looked like, and not enough on what actually happened. I spent hours designing the sheep above and it didn’t even make it into gameplay because I didn’t have enough time to program it. Granted, I still probably would have only been able to code and animate one narrative from beginning to end because the art is so detailed, but I wouldn’t have spent so much time on art that I’m now not sure if I’ll use. If I could go back, I would design in a lower resolution and make my paper prototype before I even touched pixel art. I prioritized art over programming and now my game looks really pretty, but it’s not actually that playable. This was a really hard to game to conceptualize because I was working with really abstract concepts, but I’m glad that I did it. I want to keep working on this game because I don’t think there are a ton of RPGs like it, and the ideas I’m trying to illustrate about capitalism are ideas that I want to continue to explore. Designing this game actually really helped me to understand Frederici’s ideas, in a way that just reading them did not. I had a lot of fun working on this game and I definitely intend to finish it.