Open Project: p5.js

For the next two weeks, years one to three are participating in an “open project”. This is a new project in the timetable, so I wasn’t sure exactly what to expect, having never completed this previously. The structure is that each student will attend at least one workshop and one seminar from a wider selection of activities. For my workshop, I decided to learn about p5.js, which is essentially Processing for JavaScript.

p5jscon-banner

I was quite excited for this workshop – I’ve never even touched on p5.js before, although I’ve known of it. I think it seems like a pretty useful tool for me to learn, as a lot of my focus recently has been around web-based coding. I definitely want to work on my HTML5 skills, and I think knowing p5.js would really compliment that. I also think as the years go by that I’m building preferences for certain tools – creative coding appeals to me more than things like physical electronics or 3D printing.

With this in mind, I sat down for the quick introduction to p5.js. It seems incredibly easy to use, particularly as I have a background in Processing. There is even a (recently added) web editor available for p5.js, meaning I can code directly in the browser – fantastic! Furthermore, there is also a lovely tool which helps convert simple Processing sketches into p5.js. Although this isn’t perfect, it’s certainly very handy.

The workshop was pretty much a quick overview, but it did open my eyes to a lot of exciting potential applications. Using p5.js I can send live sketches to any device, such as my smartphone, with exceptional ease. I can create sketches which detect how many fingers are pressing a touch screen, or which determine the device’s geolocation, or which detect whether a device has been picked up or is stationary. Furthermore, I can integrate p5.js with regular JavaScript and input live data to my sketch. This means I could use an API and make my sketch react responsively.

I have a whole host of ideas floating around in my head, and I’m really keen to try implementing some of them. For now, I want to follow a few tutorials so that I can get up to speed with the basics. Whilst I already know some Processing and JavaScript, it has been a few months since I’ve coded anything, and I tend to forget things very quickly. However, it really shouldn’t take me long to pick things up again. Once I can code confidently in p5.js, I’m going to try inputting live data to see what kind of things I can achieve. To be clichéd: the sky’s the limit!

Advertisements

Graphic Narratives: Finished!

After a few final changes, my video was complete. I tried to blend education and humour, using a simple and clean animation style and a limited colour palette. Overall I am very happy with my final piece. I do have some experience of both Illustrator and After Effects, but this is the most ambitious piece I have created thus far, and I feel pleased that it has been very successful. I would love to create similar pieces in the future.

As a final tie-up for this project, I have included a list of sources which I found helpful during the completion of this project – both research and animating techniques:

Global Online Sex Toys Market 2018-2022

The Long, Strange History of Sex Toys

The Dark, Twisted History of the Butt Plug

Dildos Through the Decades

Early Vibrator Images

The Alien Dildo That Can Lay Eggs Inside You

Kiiroo and Omibod on the Future of Sex Toys

Animate a Line Along a Path (After Effects)

Animate Any Object Along a Custom Path (After Effects)

Flat 2D Smoke Clouds – Motion Graphics After Effects Tutorial

 

 

Graphic Narratives: Visuals

In my previous post I discussed creating a storyboard and recording a final audio for my voiceover. Meanwhile, I had made a start on creating my visuals, as this would be the most time-consuming task of the project.

My workflow was rather organised – perhaps more so than normal. I broke down the animation into each individual scene based upon my storyboard. I then used Illustrator to draw all of the main components for that scene, making sure to save each item into a separate layer so that I could animate them independently of each other.

illustrator1.JPG

I kept track of which items I had drawn and which I was yet to illustrate using my sketchbook. I created a plan of all of my assets, trying to tackle either the most important (key scene) drawings, or the easiest ones, first. I then coloured in the asset in my sketchbook to indicate it had been completed.

20181029160753022_Page_1.jpg

I found this workflow very efficient as it meant I could keep track of my progress throughout very easily. The next stage after creating an image in Illustrator was to import the file into After Effects. I created a blank project titled “Pre-Comps”, which is where I imported each illustration. From here, I would create a short pre composition for each scene, listening to my audio track to get a rough idea of timings.

after effects1.JPG

 

Once I had created short pre-compositions for each scene, I created a new After Effects project, this time my final video. I then imported all of the pre-compositions into this final project file. I placed my final audio track, and lined up each scene in time with the voiceover. I then began adjusting the timings of each scene, and adding smooth transitions between each one. There were a couple of parts I had to change slightly, but overall everything flowed together quite nicely. I made a strong effort to make each scene transition well into the next, using techniques such as fades, zooms and pans.

after effects2.JPG

Finally I added a title screen, and my video was complete. I showed the first version for my final presentation, however in the following days I created a second version which had a more polished end sequence.

title.JPG

I think I did struggle a little with time management for this project. Although I still managed to bring everything together I found the last week very intense. I think this is partially due to my intensive research – which I would not sacrifice was I to do this project again. I think my level of research helped me to write an interesting and humorous script. I think perhaps an area I could have improved upon was the time plan itself. I think I could have broken down sections into even more detailed plans, and this would have given me a better idea of how much progress to aim for each day.

 

 

 

Graphic Narratives: Rough Cut

Following my plan to create a video using my storyboard images, I threw together this quick version. It is definitely far from polished, but it gave me a good idea for the timings of each scene, letting me see which transitions were too fast and which images stayed on screen for too long:

I showed this video for my recent rough cut presentation. The presentations gave a glimpse of what each person is doing, and a chance to give comments before we see their final iterations. I found the session very useful, and got some important feedback from my peers. I explained that whilst my rough cut included my own voice for the audio, it was my plan to record someone else speaking for my voiceover, because I didn’t like how my voice sounded. This was met with a lot of disagreement – my peers though that my own voice fitted well with the tone of my piece, and that someone else’s voice might not set the same tone. Gillian also made a valid point that trying to teach someone else my script would be quite time consuming, whereas because I had written it, I already knew it well and could save a bit of time by reading it myself.

I took these comments on board, however decided I would still try recording someone else, just to see how it might sound and to give me an idea of which I might prefer. I asked my partner to read through my script a couple of times. After listening to him saying it quite differently than how I imagined it, I realised that Gillian and my peers might have been right. I therefore made the decision to record the voiceover using my own voice. I did this using a ZOOM portable microphone, which I had only used once previously. It took me a little bit of time to figure out the recording process, and a few takes before I managed to get a nice, clean audio file without excessive breathing or scuffing noises in the background. I might tidy my final audio in Adobe Audition slightly, but for now my main focus is to finish off my visuals.

 

Graphic Narratives: Script & Storyboard

An important planning stage for this project was to write a script and draw an accompanying storyboard. I began by writing up the voiveover script, taking varoius snippets of my research and pulling this together into a more cohesive and chronilogical script. I decided to split this into mini sections to make it easier to write: early history; the 20th century; the 21st century; recent/present; and future speculations. Although I had followed this structure, I decided I wouldn’t show seperation between each part in my final video, instead opting to have one section flow right into the next. I feel like this makes better use of the time. I actually discovered whilst writing my script that it was very difficult to stick to only two minutes with the amount of information I wished to include. I had to omit anything that wasn’t relevant and really cut down on how many words I was using for each point. As a result, the script ended up being quite tightly written, rather than something that might sound conversational and free-flowing. This does make it a little harder to add that element of tongue and cheek humour I had kind of hoped to inject, however not impossible. I think I will need to allow the graphics to bring the fun whilst the narration tells the facts.

With my script written, I started to think about what might be shown on screen during each part. I looked for the key words/concepts in the script, highlighting each important phrase, then used these phrases to mark out key scenes. I first sketched a very basic rough storyboard:

storyb rough.jpg

I then decided to create a more polished version. I had the same key scenes and illustrations, but I refined my ideas a little more so that I had a clearer idea of exactly how many scenes I would need to create seperate graphics for. I also decided to colour this – although these might not be the final combinations I use, it gave me a feel for my desired colour palette. I think this version really helped me visualise my final piece:

storyboard.jpg

My next step is to take each panel from this storyboard, and create a quick video mock-up of my final piece, so that I can get an idea for timings and see if the transition speeds seem alright. I will simply show the still image where each animated clip would be. I have already cropped the storyboard into mini- sections like so:

storyboard_20.jpg

I also plan to idetify which scenes are vital / easiest to draw, as I will start with these before moving on to more complex / secondary scenes. I still plan to use a very simplified 2D vector art style.

 

 

Graphic Narratives: Research

In order to write a script for my video, I had to do thorough research. I had been concerned that I might not find enough research material, since sex is a relatively taboo subject. However, I discovered there is quite a large amount of content available online about sex toys. I discovered countless articles, studies and even a couple of videos. The videos in particular peaked my interest, as I had believed that my concept was fairly unique, when in actuality, a few videos had already been made detailing the history of sex toys. I was a little miffed, but also interested to see what approach they had taken.

First up, Glamour’s 100 Years of Sex Toys:

This video was fairly straightforward – starting in the 1920’s, it showed how vibrators improved through each decade, up to the present day. There was no voiceover, but enough facts on screen to remain educational and interesting. It did agitate me slightly that the title names “Sex Toys”, but the content is exclusively about vibrators, only one specific type of toy. I understand that a vibrator is the most popular female sex toy, and that Glamour is a women’s magazine and has therefore focussed on women’s toys, but I did find the title misleading. Watching this has made me realise that I want my own video to be broader, focusing on various types of toy rather than just one. In fact, many of the articles I read about the history of sex toys ended up being solely about vibrators. I think that there is not that much information out there about other types of sex toys and their history, therefore my video still has a new angle/perspective to bring forward.

The second video I found was The Illustrated 30,00 Year Evolution of the Sex Toy:

This video appealed to me more than the previous one. First of all, I noticed the art style was quite fun, and that the colour palette is very similar to what I have envisioned for my own project. Secondly, this video includes voice narration, again something I intend to include for my own piece. I also noticed that this video explores the topic a little more broadly. It starts with early history – not just the last hundred years – and discusses various toys, such as dildos, vibrators, prosthetic penises, sex toys for the disabled and more. This video also touches on social issues relating to each time period. However, I still felt that this video has a focus on toys marketed for women. I also noticed that both videos last longer than three minutes. Since our own piece should be just two minutes long, it does make me a little apprehensive about fitting in all of the information I would like to in such a small time frame. Hopefully I can achieve this by writing a very concise script – I would rather feature a greater number of toys with a less in-depth description of each one, than focus on just a few in great detail.

Finally, I discovered An Animated History of the Sex Toy:

Again, this video started with an earlier history of the sex toy, mentioning the first found siltstone dildo.  I noted that this video claimed a far earlier date (32,000 years ago versus 26,000 years ago), making me doubt which source was more credible. Oher points made me question the credibility of this video – it claims the Hitachi Magic Wand was in production as early as 1945, whilst my personal research has indicated it hit the market in 1968. Any facts I state in my own video will have to be backed up with reputable data, to avoid this kind of mix-up. This video did mention male masturbatory aids, something not discussed in previous videos, and so I found that quite a positive. I’d definitely like to represent toys for both sexes in my video piece. This was also a far shorter piece, coming in at just over 2 minutes – the same timescale I have to work with. It was reassuring to see that this can be achieved. However, I did find that this video seemed more choppy and disjointed than the other two, as it skipped over large chunks of history quite quickly. I think it is important when I am scriptwriting and storyboarding that I find links between each piece of information so that the video flows smoothly.

Watching these three examples has definitely helped me refine how I would like my own video to be. I think my main takeaway is that my voiceover script has to be very sharp and concise. I need to communicate points clearly and in as few words as possible. To do this, I will really need to take time polishing my script and removing unnecessary segments.

With this in mind, I began to become quite conscious of project deadlines and time constraints. I had already spent a large amount of time mulling over my concept and conducting research, but I had a lot of work left to do. In order to organise my remaining time more efficiently, I decided to follow tutor advice and create a Gantt chart. Since I have never previously created a Gantt chart, I found it easier to draw one in my sketchbook than to spend a lot of time learning how to use digital tools. Following my sex toy theme, I ended up drawing this:

IMG_20181017_135901151.jpg

I think having a defined plan has helped me feel more on top of things. I now need to make sure I stick to these timeframes in order to produce a polished final result.

 

 

Graphic Narratives: A Concept is Born

Almost a week had passed and I still hadn’t chosen a subject for my animation. I decided I needed to take action. Similarly to my previous project, Design Domain, I ended up finding inspiration by having a conversation about my work. I find that chatting to others, especially non-designers, really helps me find ideas. A second perspective is always valuable. I think as I mature, I become more confident discussing my art projects with others, and better at communicating concepts.

I found inspiration for this particular project whilst chatting with my boyfriend over the weekend. I explained that I wanted to do something perhaps slightly unconventional, a video exploring an unlikely topic, and that I wanted it to be humorous or at least ‘fun’ in some way. He suggested, “Why not make it about sex toys?”. At first, I laughed at his idea, but he continued by backing up his suggestion; “You want to do something different – how many people will have used that as a topic before? Even in the mainstream, I haven’t seen many educational videos about sex toys. It would be a unique topic, and you could definitely put a fun spin on it.” I thought about what he had said. Actually, he had a point. I felt pretty confident that none of my peers would make a similar video, and it definitely ticked my ‘unlikely’ and ‘shock-factor’ boxes. I wondered what I might try to convey with this video, what direction the narrative might take. I’ve seen a lot of videos across social media recently which are in a ‘100 Years of [x]’ format. I decided that the history of sex toys would be a fun approach, looking at both how the objects and the social attitudes have changed over the years. I could conclude the video by doing a speculation on the future of the industry – the thought of animating crazy AI sex robots kind of appealed to me. I reckon this is a topic I could really have fun animating.

With the content of the video now determined, I decided to get cracking with the next stages. First of all, I created a quick Adobe Illustrator sketch, as much to brush up on my dusty skills as anything else. I realised that I had actually forgotten quite a lot, despite it not being all that long since I was regularly using the software over summer. I chose to draw something related to my Sex Toy topic, and therefore went with a butt plug, since the shape is quite distinctive and also simple to create with geometric shapes. This evolved into a silly character doodle:

butt_plugs_love

I think I might make a few more quick concept sketches, experimenting with very simple forms and shapes to illustrate various toys. The next stage, however, is to structure the content of the video more. My action plan is as follows:

  • Find studies, research papers, historical reports and statistics about sex toys
  • Select key facts and information to include in my video
  • Brainstorm a rough narrative
  • Storyboard each scene
  • Write a voiceover/narration script
  • Get making!

My one concern is that academically approved facts and statistics might be hard to source, particularly about historical sex toys. Sex, throughout the ages, has been seen as quite a taboo subject, and I’m worried that this might affect the number of ‘official’ sources I can find on the topic. However, I won’t know until I try, and hopefully I will stumble upon some useful source material.

Graphic Narratives: Initial Thoughts

Having wrapped up my Design Domain proposal, we went straight into the next project, Graphic Narratives. The project brief is to create an animated infographic video, two minutes in length. The topic can be absolutely anything of our choosing, so long as the final video is an infographic of some kind – it should communicate a point/ some data. The video can have a driving narrative or be purely educational.

I am pretty excited for this project – animation is one of my strong points, and I have learned quite a lot in the last few months, so I am keen to apply these new skills. I feel like I have the potential to create a piece I am really proud of for this project. The only problem is the content. As ever, I’m struggling to find inspiration. One thing I have narrowed down is that I want it to have a fun, non-serious tone. I don’t want an educational video full of statistics – I’d rather have something that tells a bit of a story or that explores an unlikely or “silly” topic. I want to insert humour, quirkiness and maybe a little shock factor into whatever I produce. However, I haven’t gotten much further than this yet.

I decided to look at some existing videos to see if I could find inspiration this way. Through videos recommended by our tutor Gillian, I found the work of YouTube channel Kurzgesagt. The team behind this channel creates short “In a Nutshell” style videos, which explore complex topics in a short amount of time using infographic type animations. This channel stood out to me because the art style is very similar to how I imagined my video might look – Adobe Illustrator style drawings using block colours and simple shapes, converted into animations.

Capturennmmm

Although the scenes created are quite complex, with background and foreground scenery, I think the general “vibe” of these videos is quite similar to what I hope to create. I also really enjoy the voiceover style. I would like to have a voiceover in my own video, something which communicates my point in a fun and informal way.

I still don’t feel much further forward on what my content should be, but I’m hoping that by taking time to work on other projects and let my mind wander, I might be struck with inspiration.

Design Domain: Discussions

After writing my previous post, I met with tutors and peers to have a discussion about my idea. My fellow students spoke about their concepts first. I think it’s always useful listening to other people’s interpretation of a brief to help jog your own ideas. I then spoke about my plans, how I intend to create a interactive piece which explores some of my memories in a non linear way. This was met positively by tutors and peers, although we all agreed I had to narrow my focus more. I think describing what it was and also what it wasn’t definitely helped solidify the concept in my mind.

I want the graphics to be very engaging. I will create these by hand using mixed media. I intend to experiment with various art styles in my sketchbook. I also want to include a soundtrack – even simple background music or sound effects add a whole new layer which will make the piece feel more engaging to the viewer/player. I want the memories to appear in a non linear order. This means I don’t want a pre-defined “start” and “end” to the piece – these should be different according to the user’s decisions. I also do not want the memories to be viewed chronologically. I think it makes more sense to muddle the order, much as memories might exist in a jumbled order inside our heads. Finally, I do not want this to feel like a traditional game, where the player has an objective or end goal. I would much rather it is just absorbed as a sort of non-linear story, more like an interactive graphic novel than a game.

After deciding this, I was still unsure how a person would interact with the piece. What would the controls be? What would show on screen? How would a person navigate through the memories? I also started to think about practical implications. With a short time frame, I should use a familiar software rather than learning a new one in less than two weeks. This gave me a choice between Unity or LiveCode. Although possible, I have never used Unity for 2D games. On the other hand, I have used LiveCode for several similar projects. I therefore decided I would opt for LiveCode. Thinking about previous LiveCode projects I remembered my mini game “Creature Creator” – made in first year as I came to grips with the software. I had never blogged about this game, and thought this would be the perfect opportunity. However, I realised  the files were saved on my old laptop, which I keep at my parent’s house, so I had to schedule a visit.

The game itself is very basic – the user is prompted to click on the coloured squares, and depending upon the order they click, a different creature is formed. Some combinations  allow for “evolution” whilst others result in a dead end. The game is clearly very heavily inspired by the Eyezmaze games discussed in my previous post.

ghjx

Although the game itself isn’t totally relevant to my design domain project, having access to the file is very useful so that I can refresh my mind with how LiveCode works. Furthermore, stopping by my parent’s house to access my old laptop actually proved very valuable, as we had an in-depth discussion about my idea.

I described my concept to my parents, and that I was struggling to pinpoint how the interaction would actually work. I was thinking about either a flat “selection screen” where the player would choose a memory, or a map where the player uses arrow keys to travel to different rooms, each containing a memory. My mum asked a very useful question, “Which is easier to make?”. That would definitely be the former. She then asked, “Is there any advantage in doing it the other way?”. I thought about this. Not really. Therefore, it makes far more sense to discard the map idea. So I at least had a little more clarity. I then tried to describe my non linear concept, how I wanted the memories to appear in an unspecified order. My dad asked, “Why don’t you just randomise the order? You could do that quite easily with code.”. I thought about this, and realised that I didn’t want it to be entirely random. Putting this into words helped clarify things a lot, for me more than anyone. “I don’t want the memories to be in a totally random order. I don’t want fragments which are so unrelated that the viewer walks away confused. I would still like this to make some sort of sense. Maybe I could make it so that one memory leads on to another linked one, and that a certain memory has to be viewed to unlock the  next one…”. I wasn’t totally sure how I meant to do this, when my dad chimed in. “Ah, that makes more sense. In that case, why don’t you use elements inside a memory to link a few together? Say your memory is about sitting on a bus, and you spot a man wearing a hat. The player could click on the hat, and then be taken to a memory about you hat shopping. You could even have three or four different paths linked from each memory, so that the whole thing forms a sort of interlinked web. That way, there would be no real start or end either.”. I really liked this idea – it just seemed to click. It ties in better with my concept too – after all, when we think about one memory, it often makes us remember another. That means it would mimic the real memory process. Everything was starting to come together.

I’m really glad to have had these discussions – both in the studio and with my parents. Almost more so than my research, these conversations have really informed my direction. I now feel like I’m at the stage where I can begin sketching and prototyping, selecting specific memories and maybe writing out the dialogue. I’m ready to start making.

 

 

Design Domain: Refining my Concept

With a vague idea in mind, I had lots of ideas floating around in my head, but nothing concrete. Luckily, we had a course visit to the new V&A museum in Dundee. This trip was useful as it gave me the chance to view other artists and designers’ work. The space was utterly packed, since the museum had only recently opened, but I was still able to take a good look around the Scottish Design gallery. One thing which caught my eye was a short video loop from a recent indie horror game, Beckett. I made note of the title and researched this more when I got back.

Beckett is not a free game, which is perfectly fair – designers should earn a fair wage for their work. However, this stopped me from experiencing the game firsthand, as I didn’t want to commit to making a purchase. From what I could gather online, this seems like quite an unusual gaming experience. I was particularly drawn to the style of the graphics, which seem almost collaged together to create quite an atmospheric and engaging visual style. The storytelling itself appears to be done through a series of written post-it notes. The player acts as a detective who is gathering clues about a case.

ss_44b24bfbad8dffb3ef99f53c6658d96d042a8b4c.1920x1080.jpgss_0b71468b9451ba3e76d838b30dbf647c843a02ac.1920x1080.jpg

I really found this game quite a source of inspiration. I like that it’s different from the norm, in terms of what a player might expect from a “mainstream” game. Information is gradually revealed. Something like that might work quite well for my own game. I’m starting to think more about what my game is going to be. Rather than just a story about my life, I’m considering showing a series of fragments, snippets from different points in my life, almost like a collection of memories. The player would somehow navigate between these memories, probably not in any specific order. I like the idea of allowing the player to explore my “story” in a non-linear way.

As I was thinking about non-linear stories, I came back to a collection of graphic novels I read in college. This collection is titled Building Stories and was written by Chris Ware. It consists of fourteen printed works: cloth-bound books, newspapers, broadsheets and flip books, which together tell the life story of the protagonist. These items can be read in any order, thus altering the way each reader experiences the story.

building_stories_planche04-1200x675.jpg

I remember it had a very profound effect on me when I read it – in part because I related  to the main character, but I think also the technique of gradually revealing different parts of the story was really effective. This was totally new to me – I had never read anything quite like it, and I found the innovation really inspiring. Incorporating non-linearity into my own work makes a lot of sense. It would be far from just a gimmick – much like Ware’s work, this technique would be appropriate because it replicates the way we experience memories. We can revisit moments from our memories in any order of our own choosing. Plus, if I use memories which are not linked in any way, it is unnecessary to recall them in a specific order.

By this point I had a much clearer goal. I wanted to create a work which explored various memories from my life. These memories would be presented in a random order of the player’s choosing. The memories themselves might not be particularly significant events – sometimes the seemingly mundane can be just as interesting. I also decided that this piece need not be a game in the most traditional sense – it might end up as more of an abstract, interactive digital piece than a “playable” game.

With all this in mind, I decided I would still look at examples of games with a strong sense of narrative. One site I have visited since childhood is EYEZMAZE, a website populated with the works of Japanese games developer Nakayama ON, or simply “ON”. He has created a whole series of Flash games with beautiful illustrations and quirky characters. Each game definitely has a sense of narrative, without even needing dialogue or particularly complex graphics. A typical game format he employs is to prompt the player to select cards in a specific order, which then influences how the game progresses. The player wins when they guess the correct order of cards. I feel like this ties in loosely with my non-linear approach, because even if the order selected is “incorrect”, a small story is still played out for every possible combination, meaning there are endless narratives included in each game.

1happy_new_year_2016_02.png

A lot of the storytelling in ON’s games is conveyed using progressive animations. Whilst in these games this technique is very effective, I don’t think animation would be appropriate for my piece. A lot of my initial inspiration stems from comic strips in zines, which are often very rough and ready. I think I want my final output to capture that same essence. I don’t want beautifully polished animations. Instead I imagine the “scenes” in my game being portrayed as flat, created using hand drawn images. However, I think I will attempt to make the visuals very rich and engaging. One of the reasons I have enjoyed ON’s games in the past is because I simply enjoy his art style and illustrations, so making my piece visually pleasing is important to me. I also like the idea of conveying a story without the need for any text or speech, as ON does, but I’m not sure how achievable this will be given my subject matter.

Plenty to mull over. I think after a little more research, my next step will be to pin down exactly how the “play” or interaction will work. This will be influenced somewhat by the content, so this is also a good stage for me to figure out which memories I might like to include.