Critical Reflective Journal

stagdo.info

Sat, 21 Apr 2018 12:00:00 +0100

An attempt to fully understand the technology

When it came to merging my prototype bmx builder in with the rest of my app, I realised I didn’t fully understand how the framework actually worked. My entire life I have avoided jQuery for the simple reason that I didn’t want to be plugging libraries in without understanding the underlying technology, so I decided to hand-build a single page application (SPA) before going back to Framework7.

I found an excellent youtube video tutorial [1] by Curran Kelleher, demonstrating an iterative way to implement navigation for a SPA using AJAX. He provided all his code examples [2] to work through along the way so I fully understood what was going on.

From this, I then decided to apply my long-standing idea of a stag do management app - ideal when you are abroad and don’t want to have to keep reloading pages - and built out a real test case to use for my upcoming stag do in April 2018.

A sample page of the stagdo app showing the AJAX menu which doesn't force a page reload.

The result is https://karls.stagdo.info, a password protected, AJAX powered SPA powered by a JSON back-end! I have been waiting for years to be able to write a sentence like that and fully understand it and fully deserve to say it!

I intend to turn this into a paid service to compete with the (extremely overpriced!) competition - the likes of chillisauce and red seven leisure so I will need to build out a control panel for the organiser. I have started planning for this by dynamically creating the “stags” page from a JSON file which I can write to from the control panel:

{
   "stags": [{
         "name": "stag__name",
         "nickname": "stag__nickname",
         "number": "stag__number",
         "indie": "stag__indie-outfit",
         "football": "stag__football-outfit",
         "tshirt": "stag__tshirt-size",
         "balance": "stag__debt"
      }
   ]
}

A generated stag card (with sensitive data blurred out) and debt summary.

This also calculates the total amount owed to the organiser - in practice I found it very handy for everyone in the group to see who were the bad payers and how much I was owed, it certainly pulled on a few heart strings and got the money rolling in. It also provides a handy telephone link so I could phone any of the stags easily - often the organiser is dealing with people they have never met so they wouldn’t necessarily have all the phone numbers to hand.

My first X customers will be able to request a customisation feature which I will roll out to all future customers, to help me build up the necessary features. At first thought, I plan to provide a custom subdomain customer.stagdo.info for 1 year at a fixed price.

References

Kelleher, C. Navigation for Single Page Applications, YouTube, Retrieved March 08, 2018: https://youtu.be/xN9QxPtK2LM
Kelleher, C. Navigation for Single Page Applications, GitHub, Retrieved March 08, 2018: https://github.com/curran/screencasts/tree/gh-pages/navigation

BMX Dev S2W11 - final project plan

Sat, 21 Apr 2018 09:00:00 +0100

Aiming for an MVP

I have just come through a period of complete unproductivity on this module due to starting a new full-time job and having to organise a stag do. However, I did manage to tie in my stag do preparation with the course theme, by designing and building an AJAX powered single page application to help manage the 15 stags, their questions and finances, so time was not wasted. I also designed a brand new (drinking) game which I see as a possible kickstarter campaign!

Moving back to the module, I have decided to take Al’s week 11 advice and plan out all the tasks I need to accomplish to achieve MVP status during the remaining 13 ( ! ) days:

Day	Date	AM	PM
Saturday	21st	Plan project	Document stagdo.info
Sunday	22nd	Merge all work	Merge all work
Monday	23rd	-	Build reward page
Tuesday	24th	-	Iterate
Wednesday	25th	-	Iterate
Thursday	26th	-	Iterate
Friday	27th	-	-
Saturday	28th	-	-
Sunday	29th	-	-
Monday	30th	-	-
Tuesday	1st	-	Plan video
Wednesday	2nd	-	Film video
Thursday	3rd	-	Render video
Friday	4th	-	Submission

The final week of the project must be left as a buffer and dedicated to video creation. I am entertaining all next weekend ( birthday ) so am unable to do any work between Friday and Monday, bad timing but can’t be helped, therefore it must be planned for!

BMX Dev S2W6 - character design 3 - refinement

Tue, 06 Mar 2018 08:00:00 +0000

Developing the character creation technique.

To be successful, many character designs employ a number of tricks to ensure they are easy to draw and inexpensive. Aside from the techniques mentioned earlier, a famous method is to put gloves onto cartoon character to avoid having to draw details such as fingernails though admittedly, the historical reasons have much darker undertones [1].

With this in mind, I sat down and attempted to draw my character as efficiently as possible in a minimum amount of time. Attacking the challenge from this angle has led to a refinement of my character (Vapor…) that lends itself well to reproduction and those with limited artistic skill. You can see my process below with (the wrong kind of) paper, biro and spirit markers.

1) Line creation in black and white

2) Adding the spirit glow

3) Introducing a simpler colour scheme

4) Adding more colour...too much?

My character is now very easy to draw, his whiter colour scheme is more representative of a ghost, and the lack of colours saves ink as well as time. His colour scheme will also naturally help him stand out against the strong colours in my app.

V4P0R
(/v-eɪ-p-r/)

His name is V4P0R

Here I have used my most experienced workflow after a quick recap from an online tutorial [2] - Illustrator with the mouse and pen tool to create a simplistic but polished version. Still unsure about the colour scheme - one idea is that as users “complete” parts of the app, V4P0R gains more and more colour as he is brought back to life.

References

Fletcher, R. Ever wondered why so many cartoon characters wear gloves? Here’s the slightly troubling answer, Digital Spy, Retrieved March 06, 2018: http://www.digitalspy.com/movies/news/a820479/why-cartoon-characters-wear-gloves-disney-mickey-mouse/
Secrest, J. Adobe Illustrator Inking and Gradients Tutorial, YouTube, Retrieved March 06, 2018: https://www.youtube.com/watch?v=–AGbBPXtDI

BMX Dev S2W6 - concept art 3 - a new approach

Tue, 06 Mar 2018 08:00:00 +0000

Using familiar tools.

Having found joy using Illustrator and a mouse, I attempted to redo my concept art with a Wacom tablet and Illustrator. I started again from the (unlicensed) sample [1] in order to gain correct proportions and aspect ratios.

1) The reference image

I sketched the figure outline from the photo as simplistically as I could using the Wacom.

2) Sketching out the main components of the image

Next, I created a custom brush in Illustrator, and used it to refine my lines (with the reference photo hidden) giving the man a baseball cap.

3) Creating custom stylised lines

I then imported my historical photograph onto the tablet, and used the “image trace” tool to stylise it and limit the colours to just 16. These colours would then be used to paint in my figure. Finally I added my photograph of the current starting grid as a background and again used image trace, this time with only 12 colours to create a contrast between what exists and what went before.

4) Adding in photos and stylising them, creating a colour palette for the main figure.

The style I have adopted here is a very basic, sketched approach that ideally should be used for earlier stages of development. If I had the time I would like to refine the image and add in further lighting and shading, and more importantly, show the viewer exactly what the purpose of this image is. I feel at the moment the message is being lost, all the user can see is a person watching a video on a tablet.

References

Fotos593. Over the shoulder shot of young man holding tablet, Shutterstock, Retrieved March 06, 2018: https://www.shutterstock.com/image-photo/over-shoulder-shot-young-man-holding-307393016?src=aT5bGFIG8PMEs33Efse2zQ-1-55

BMX Dev S2W5 - concept art 2

Mon, 05 Mar 2018 08:00:00 +0000

Further investigations into concept art creation.

After further practice with a Wacom tablet, I attempted again at concept art. Beginning with a recent photo of the old start grid:

The start grid as it stands

I then began sketching my figure over the top:

Sketching out the framework of my composition

Next I blocked out the major components on separate layers:

Blocking out the components

I then placed an old photo of the start grid onto the tablet and began sampling colours from it to use to light the scene:

Shading the scene

Looking at this piece now, it appears as though the figure is in the dark so his colour palette needs work. It also lacks the style and finish of a piece of concept art. Perhaps I will get more accuracy through use of the pen tool or even by applying line smoothing.

Another thing I have learnt is that I need to add the layer shading on it’s own separate layer so I can easily change the base colour of the components from the blues to more natural colours.

BMX Dev S2W6 - character design 2 - beginnings

Sun, 04 Mar 2018 08:00:00 +0000

Exploring the basics of character design.

My idea is to have a character that takes his spirit form until the track is restored, at which point he may switch to his normal form with the life of the track rejuvenating him. I started some basic sketches exploring both of these forms

A brief study on the spirit form

A brief study on the human form

I then skimmed through the book Alive Character Design (Su and Zhao, 2012), before beginning sketching digitally in Photoshop and attempting to work in some details.

Initial sketch

Drawing in the lineart

Blocking in colours

Adding basic lighting

Painting in the spirits' glow

The most frustrating thing about this process is the lack of line smoothing. I used to working in Illustrator with a mouse and producing perfect lines, so I had to adopt a slightly different mindset for this workflow accepting a less refined piece. I will redraw it in Illustrator to produce a higher quality image.

In discussions with my younger Sister, it came to light that she also became frustrated with Photoshops’ line smoothing, and instead now works using Paint Tool SAI which is more suitable for this type of workflow. Let’s not forget that Photoshop is designed for photo editing.

Going back to my chosen form, I would like to highlight again the ‘tricks’ employed to improve efficiency:

removal of limbs (and indeed the lower half of the body)
hidden face (may need to employ the helmet to convey expressions)
limited details on the hands

Update - Paint Tool SAI

Having installed Paint Tool SAI and had a brief 5 minute tutorial from my Sister, I tried to sketch my character. I can say that it is instantly more satisfying working with line-smoothing - especially during the early stages - as it allows you to create much better looking artwork rapidly. The screenshot below was taken after about 2 minutes of work, I used the marker tool after drawing in the lineart to quickly create a colour scheme.

A screenshot of my working setup in Paint Tool SAI

I’m sure there exists a Photoshop plugin which replicates this behaviour that will allow me to work this freely with all the benefits of that software, such as the TOYO94 colour swatches.

References
Su, H. and Zhao, V. (2012). Alive character design. Harrow, England: CYPI Press.

BMX Dev S2W6 - character design 1 - analysis

Sat, 03 Mar 2018 08:00:00 +0000

By considering character design I have opened up a new avenue of promotion for my app.

Creating a character design for my app involves consideration of:

Personality
Location
Colour
Form

Brainstorm

To begin exploring these factors I began with a brainstorm which eventually produced a novel way of integrating a character within the story of the app.

Brainstorm done using Wacom Intuos Pro tablet for practice

Location

Whilst examining the location aspect of character design, it occurred to me that I could draw parallels between the character and the track itself. In it’s current state, the track is “dead”, so there is an opportunity to present the “spirit of the track” in the form of a ghostly character with an agenda to return the track to it’s former glory.

Is he a local resident, with an intricate knowledge of the town? This would enable him to connect with other developments in the park. He might be a former BMX pro rider from abroad who helped usher BMX into the UK for the very first time.

Personality

The spirit is truly stuck in the 80’s; that is where his existence ended, so he is an embodiment of everything stereotypical of BMX in that decade - showing similar traits to the surfing community, his language would be era-specific with a positive outlook on life.

Colour

As a spirit the character would have to fit his ghostly presence in with the bright colour palette of the app, yet as a live entity (which may be realised upon restoration of the pump track in real life) would be dressed in typical 80’s BMX attire.

The Rose of Temperaments

The Rose of Temperaments by Goethe and Schiller 1798/9

We can examine Goethe and Schiller’s 200 year old Rose of Temperaments to understand common links between colours and personality types:

colours: red/orange/yellow
temperament: choleric
personality: independent, decisive, goal oriented
character traits: tyrants, heroes, adventurers

colours: yellow/green/cyan
temperament: sanguine
personality: enthusiastic, active, and social
character traits: hedonists, lovers, poets

colours: cyan/blue/violet
temperament: phlegmatic
personality: relaxed, peaceful, quiet
character public speakers, historians, teachers

colours: violet/magenta/red
temperament: melancholic
personality: analytical, detail oriented, deep thinker and feeler
character traits: philosophers, pedants, rulers

Following this theory would suggest a colour scheme hinted towards the choleric temperament of warm red oranges and yellows as our spirit is a hero trying to help resurrect the track. He is also adventurous in his interests of BMX riding.

However, in his spirit form he may also exhibit shades of one of the other temperaments depending upon the final decision of his mood - a sad spirit, or an active spirit.

Sonny, pretending to be ferocious. Notice the simplicity and lack of limbs for ease of animation.

Interestingly, a previous character creation project I worked on resulted in my character “Sonny”, a vampire who was afraid of the dark. His cape is a rich purple, demonstrably linking him with the phlegmatic temperament as he plays out his days in the loneliness of his castle, unable to go out into the dangerous sunlight nor the frightening darkness.

Form

Immediately a teenage form springs to mind, a human character that would have enjoyed using the track in it’s heyday. However, being a spirit, there exists some opportunity for time-saving creation techniques such as missing limbs (as exhibited famously by Rayman) and the constant presence of a helmet to simplify drawing of the head and facial features. This could also add a sense of mystery similar to Top Gear’s The Stig.

Rayman and his missing limbs give him unique abilities.

Top Gear's The Stig wears a constant helmet to conceal his identity - it also forms part of his character.

Existing art

A brief study into existing BMX artwork heralds the obvious work by BMX entrepeneur Bob Haro, mostly for BMX Action magazine in the 1980’s.

BMX Action 1984 cartoon by Bob Haro

I also found an excellent series of sketches on Artstation by Jocelyn Millet that show great composition and style.

Jocelyn Millet 01

Jocelyn Millet 02

Jocelyn Millet 03

Jocelyn Millet 04

Jocelyn Millet 05

Jocelyn Millet 06

Jocelyn Millet 07

Jocelyn Millet 08

Jocelyn Millet 09

Jocelyn Millet 10

BMX Dev S2W5 - concept art 1

Mon, 26 Feb 2018 08:00:00 +0000

Creating digital concept art has a process all of it’s own.

Before turning to pen and paper I considered the user journey map for my BMX builder component, to help me figure out the best scenario to illustrate.

A couple of key points leapt out at me; firstly the use of an “intelligent” sign that would transmit the PWA url using a bluetooth beacon, or perhaps via a scannable QR code. Secondly was the user experiencing the actual app itself, whilst sat at the BMX track.

On reflection, I now realise that my initial compositions heavily influenced which scenario to proceed with; my sketch of the signpost dominated the frame and almost appeared menacing. However, I can implement this into the background of the second composition if I feel it is a better fit than the BMX track.

Having the BMX track in the background will allow me to use it’s lines to direct the viewer back to the tablet, enhancing it as a focal point.

Concept 1 illustrating the interactive sign

Concept 2 over the shoulder illustrating the app in action

A bit of back story; at my previous employment I was lucky enough to be able to use a huge Wacom Cintiq tablet which acted as a monitor and allowed the user to draw directly onto the screen. Going from this technology, to then attempting to use a standard tablet is a very frustrating process and I quickly gave up (made no easier by the fact I’m running Manjaro Linux and having to use Windows inside a virtual machine which creates a whole lot of configuration issues).

First attempt using Autodesk Sketchbook on an Android tablet

I purchased Autodesk Sketchbook Pro for the small sum of 89p for my Android tablet, and set to work trying to draw using a combination of my fingers and a cheap stylus. As you can see above, this method lacks in accuracy and is no substitute for a professional tablet, however it was a good exercise in colour and composition.

My scene will be ‘lit’ by the tablet, so I attempted to use the screen colours to highlight the user holding it. When applying the top-right to bottom-left background gradient, it was interesting that I could use it in both directions; by having the darker colour in the bottom corner it would help contrast against the tablet screen, but by having the lighter colour in the bottom corner it would illuminate the entire area and bring it into the foreground.

My next step is to persevere with the Wacom tablet my Sister kindly lent to me to see if I can get used to the disconnect between my hands and eyes. However I will begin by drawing the scene out by hand on paper with markers, so I have a much better idea of what I am trying to create.

BMX Dev S1W3 - literature review

Mon, 26 Feb 2018 08:00:00 +0000

For this literature review I read chapter 4 of Dr. Brown’s 2012 PHD thesis ‘The suspension of disbelief in video games’.

Dr. Brown clearly defines the key purpose of the chapter in the opening paragraph:

This chapter intends to observe how video games’ self-referential focusing upon the suspension of disbelief can contribute to our better understanding of the features of that suspension of disbelief which are unique to video games.

He then expands upon this in the following paragraph, intending to show how the use of the ‘fourth wall’ governs the problem of dissonance:

…in moments where games work with their own version of the ‘fourth wall’ are points where dissonances are emphasized to create various kinds of affect including shock, border play and a deepening of the imaginary relations…

Brown is intending to show how the act of video games acknowledging and addressing the player through fourth wall breaking techniques helps us to understand how the specific audience of video games experiences a unique suspension of disbelief, as opposed to the cinema goer, or the reader for example.

Choosing the final chapter to read posed some problems; I was essentially thrown into the conversation near to the end, so confusion flourished as I had to handle ideas and referencing of material previously covered in the preceding chapters. It was also necessary to read through some of the wide range of referenced material to gain a full understanding of the argument, such as Steven Conway’s article on Gamasutra [1] and Huizinga’s classic study [2] of the play-element. Indeed, Brown opens with the final lines from Shakespeare’s Tempest [3], where the famous playwright directly addresses the audience in what is thought to be his final play:

As you from crimes would pardon’d be, Let your indulgence set me free.

This is a play with which I was unfamiliar, so again research into the analysis of the play was needed which revealed an argument that Shakespeare was actually breaking the fourth wall himself here and talking to the audience [4].

Dr. Brown uses qualitative data in the form of both participating and non-participating observations of pertinent examples from video games, as well as analysis of relevant academic documents.

His research data is valid, coming from static sources in an era prior to software updates of video games, ensuring a consistent experience for users regardless of their place in time.

Video games, being an art form, are open to personal interpretation, which stems from personal experiences. As an art form, video games are in a constant state of evolution, therefore at some point in the future, a change in culture coupled with a change in video game approach could lead to an alternative interpretation of the evidence presented as well as Brown’s own conclusions.

Dr. Brown uses a psychological framework to support the basis of his argument, delving heavily into the mind state of the gamer with particular reference to the ‘game-playing role’.

Brown assumes the relationship between theory and practice to be based on a constant, unified approach to video games as experienced by someone of his stature. In reality, this approach will vary somewhat between individuals with less or more exposure to the techniques demonstrated within.

Brown opposes his own point of view of the suspension of disbelief being a separate entity to the lusory attitude and the concept of the magic circle by referencing Conway’s foresight:

Conway’s argument stands in opposition to this. While he recognises the impact of the fourth wall upon the suspension of disbelief, he shows real foresight when claiming

No matter the technique, to break the fourth wall is normally to break the suspension of disbelief, to remind the audience it is just a film, just a television show, just a performance. Yet in video games, the inverse will often apply. As mentioned above, many of these so- called fourth wall breaks actually serve to further immerse the player, extending the immersion beyond the screen, and this is where we find the term “breaking the fourth wall” becomes extremely lacking.

However, he comprehensively contests this theory in three main ways; citing primarily that unsteady foundations which have not dated well in light of modern video games, secondly the issue of the fourth wall not being a wall at all but rather:

…a tissue of allowances made by the gamer

Finally, Brown suggests that the suspension of disbelief is not a constant across differing kinds of media, and that the theory disregards a whole range of illusory and narrative content that goes into the creation of it.

This detailed critical analysis of contrasting ideas gives further credibility to Brown’s own theory, showing he has considered multiple viewpoints before coming to his own conclusions, some of which are very established in the industry.

There is a limitation of this study which cannot be ignored; the nature of the language used may alienate a large proportion of the possible audience. Video games now serve a much broader market than ever before, a growing market comprising of a large percentage of people not accustomed to digesting material written in this manner. I believe the author could maximise the reach of his studies by rewriting his work in a less formal style; indeed the interest in video game design, even just video game analysis, is bigger than ever before.

In terms of the immediate module (Individual design and development) the arguments presented in this chapter lend a great deal to my approach; I am creating a graphical user interface which mimics that of many historical interfaces such as the DOS operating system and VHS recording quality in order to create a certain response in the user, along with a level of immersion.

I need to consider all aspects of this approach in order for it to work as intended. I believe it is fair to assume that the user is fully aware that the presented replication of older technologies is indeed replication and not an authentic experience; this understanding by the user is itself something to develop.

My future plans will focus around controlling food growth from applications; wherein lies a difficult problem: how to overcome the dissonance between slow (30 days) real-time plant growth and in-game time? I fear keeping the user hooked for that initial growth period will be my most difficult challenge, so some techniques discussed here may provide some opportunity for a different approach at audience engagement.

References

Conway, S. A Circular Wall? Reformulating the Fourth Wall for Video Games, Gamasutra, Retrieved February 21, 2018: http://www.gamasutra.com/view/feature/132475/.
Huizinga, J (1944, this edition published in 1949, reprinted 1980). Homo Ludens - a study of the play-element in culture. Trowbridge & Esher, England: Redwood Burn Ltd.
Shakespeare, W (1611, reprinted 2018). The Tempest, CreateSpace Independent Publishing Platform.
Grunes, D T and Grunes, J M (2014). What Shakespeare Teaches Us About Psychoanalysis: A Local Habitation and a Name. Routledge.

BMX Dev S2W4 - color palettes

Tue, 20 Feb 2018 08:00:00 +0000

My recent visit to Scotland placed me in some of the most natural scenery I could imagine, so I chose this photograph I took of my first ever experience of a Loch.

Loch Lubnaig, taken February 20th.

I decided to try out some services that automatically extract a colour palette from images to help me get started, and found that Canva provided the best results.

Use of canva to automatically create a colour palette from an image, however it's colour naming needs work.

This natural colour palette does form a complementary colour scheme, with the pair of colours Sienna (#9C7c44) and Light Steel Blue (#96B0CD) most closely fiting this scheme. Sienna stands alone on the opposite side of the colour wheel so is an ideal choice to be used an the accent colour. The remaining colours are all very similar to each other—too much so to be classed as analogous—with Dark Slate Gray (#48536B) being the most saturated of these. This therefore can be used effectively as the dominant colour.

Color wheel of my palette shown in Adobe Color CC: (https://color.adobe.com/create/color-wheel/?base=2&rule=Custom&selected=1&name=My%20Color%20Theme&mode=rgb&rgbvalues=0.611764705882353,0.48627450980392156,0.26666666666666666,0.5882352941176471,0.6901960784313725,0.803921568627451,0.22745098039215686,0.2235294117647059,0.23137254901960785,0.7686274509803922,0.7843137254901961,0.796078431372549,0.2823529411764706,0.3254901960784314,0.4196078431372549&swatchOrder=0,1,2,3,4)