Digi, Aye?

A Little Bit of Christmas Code

2023-12-23T20:56:00+00:00

Hello again test test, is anyone there

It’s been a long time since I’ve posted anything here and like everyone, life’s very different to what it was in 2019. I’ve finished a bout of studying citizenship and design, I’ve worked with a group of friends to make some fun wee games and I’ve started a new job in a new city.

I’ve just uploaded a little Christmas sketch as invited to by the ever kind and creative Rianna and Mike. It’s now available on day 20 of the Generative Advent Calendar. You’ll have to forgive the way it looks, it’s been a very busy Christmas and I haven’t written code properly for some time. That being said though, I’m pleased with what it turned into in it’s “My first HTML project” style. I strongly recommend you have a look at the other contributors though, they’re much better!

Generative Advent 2023

In the depths of the pandemic, Rianna and I co-worked on a bunch of little creative sketches which turned into Games for Crows. I spent a good bit more time thinking about game design than I ever had previously and we carved out a small niche in Games for Crows. We wanted to make things that were reflective and relaxing, it seemed appropriate in the midst of a pandemic. Rianna then became extremely prolific and produced a whole multitude of games tools and fidget toys.

Later we invited Ryan and Matt to both write and produce illustrations for a game that plays with different ideas of who we are and how we participate in our community and wider society. Those games are still in a cupboard that has been firmly shut since the pandemic but I will get round to releasing at least one of them this year.

Project Arc

And back to the Christmas sketch. This was a very small contribution to imagining things differently. Years ago, I heard an expert describe how authors spend chapters and chapters trying to get the reader to project themself onto the protagonist in a book. In a game, you need only pick up the controller and push forward, and magically the projection has already happened. You’re movement and the character’s is one. It’s so much easier to reveal new possibilities and ideas of what’s possible through characters in computer games because projection and the associated empathy is much smoother. Anyway, I hope you all have some proper restful holidays, I’m off to drink a few pints of gravy!

Games for Crows on itch.io

P.S. Here are some books I really liked this year.

TVKit - A TV Prototyping Toolkit

2019-06-03T17:39:00+01:00

I’ve finally got access to Framer X again! Unfortunately I haven’t had much access to time. Until I do work up the courage to begin properly learning React again, I have some tools that I’d like to share.

First of all, there’s EasyNav.

This is EasyNav

Taking it back to the design view

I made EasyNav because I wanted a flexible tool that would allow me to quickly make D-Pad navigable prototypes without having to spend too much time with code. It also lowers the barrier of entry to those who want to use it while allowing you to use Framer’s full feature set if you want to.

How it works

EasyNav reads the document and infers navigation from the position of each Frame. So if you draw a Frame above another one, EasyNav will allow you to navigate up to the frame above it. On top of that, it also allows you to override those default behaviours if you wish to block navigation for whatever reason. You can find more instructions in the example project on the Github page: EasyNav for Framer Studio - Github

TVKit

This project was made to give us a set of standard patterns to use for prototyping at YouView. I’ve removed all of the YouView stuff but it still leaves you with quite a lot of power and has also taught me a great deal about javascript. I’ll post some gifs to show the basics of it:

At YouView we have set these up to work with our APIs meaning we get all of the cloud metadata that we’re not showing here. This means we have carousels that work with Search, Discover, the Main Menu, the Miniguide and any combined mix you might want. These components are also fully interactive. One of the problems I’d started to notice however was how we could navigate between the components, this is where I created Navigables.

Navigables work off of a fairly simple premise, choose the direction you want to go in, then choose the next Navigable you’d like to highlight. An example of this might be

myNavigable.onUpOut(-> highlight.setContext(otherNavigable))

I’ve found it really useful for quickly spinning up prototypes as it allows you to start sending layer-based events based on keyboard input. It also works great with a FLIRC and other controllers.

You can find more examples and code here.

If you try any of this, let me know! I suspect my documentation might trip you up here as I haven’t been the most studious of documenters so give me a shout if you run into any problems.

I’m going to try and find some time for Framer X now, though I’ve got some research coming up and I’ll likely have to fallback onto TVKit as it’s served me well up until now!

Another Alpha Channel Experiment

2018-09-27T23:00:00+01:00

Requires a cyberpunk backing track

Stressing out

Stress! That’s my aim. I wanted to go further than last time. It’s clear to me that time is an important element as the last sketch felt disconnected and loose. This has much more of a satisfying, disconcerting* feel to it. Whenever I use it I feel like I’m becoming more stressed just by appearing and moving in the image. It almost makes you want to stop moving.

I suspect this won’t be the end of my interest in alpha channels. I’ve been looking at an awful lot of old VHS covers on pinterest which may have something to do with it.

It works by allowing the red alpha channel to move around in real time but only occasionally capturing the blue and green channels’ frames. They also have a blend mode applied to them as appeared in the previous sketch.

Hopefully I’ll be able to produce a p5js version some time soon so I can share it around but until then I’ll settle for just listening to Carpenter Brut until my ears bleed –

* Forgive the oxymoron

Some Bonus Mistakes

Trying Some Libraries

2018-08-07T18:09:00+01:00

My First Attempt at THREEJS

Uh oh, I’m spending an awful lot of time with code. With the advent of Framer and now Framer X, I’ve become a bit of an addict for trying out all of the different packages that are floating around the scriptiverse and it’s far too tempting to give them a poke.

Here’s some of the stuff I’ve been playing with: –

P5.JS

Made with p5.js

The Web Audio API’s capabilities have blown me away as you can do all kinds of witchcraft when combined with P5.js. This is a quick prototype I built with the p5.sound library which I’ve only just scratched the surface of. This uses mouse input to control a low pass and amplitude if I remember correctly. I’d love to try hooking this up to an Arduino to create some cool performative artifacts.

Sketches for Fountains

After giving a friend a little support for their final year project, they offered to let me try out a processing sketch on the fountains at Central Saint Martins –

You can see a live demo of the Fountain Sketch here. Made with p5.js.

The left hand side shows the height of the wave: the whiter it is, the higher the wave. The right hand side shows the colour projected through the jet. Unfortunately we ran out of time on the day but I did get this photo of a trial run almost working correctly –

A Processing Sketch in a Fountain

P5 with 3D

First foray into 3D using p5.js

Um, I’m not sure there’s much to say about this other than I have a lot to learn about 3D. I had a go at THREEJS at the start of this post too but it’s just a whole new set of skills and ideas to get my head around… I’ll keep at it.

Open Frameworks

Over the past couple of years, I think I’ve finally learned how to wield Twitter effectively and it’s introduced me to swathes of new artists’ and coders’ work. I found a video of Zach Lieberman talking at the AIGA design conference last year and I found the ease with which he was able to create shapes in code and talk about his journey with creative code inspiring. Seeing that talk made me want to try out Open Frameworks. The following is a result of that exploration –

An Open Processing Sketch – inspired by/stolen from – Zach Lieberman’s AIGA talk.

A progression of that initial idea.

Learning about the importance of using time as this is HECTIC.

Quickly I’m realising I need to become a master of time and colour. Understanding how to use time in a sketch is so important and quite a new way of thinking compared to the programming environments I’m familiar with.

Colour is also really difficult as you’re using time to change the properties of colour. Slowly, mastery of the sine wave is emerging as a necessary skill to create a well composed sketch: it allows for a much more naturalistic shift in colour and space.

Trippy camera stuff made with Open Frameworks.

I saw this on tumblr some time ago but was never able to track down another source. I’m a really big fan of people’s interpretations of chromatic aberration and I wanted to have a go at creating something interesting.

And finally here’s the talk that kicked off the Open Frameworks intrigue –

TV & Framer

2018-04-22T00:00:00+01:00

Hello world, hello TV

Prototyping for TV

Information about user research and prototyping for TV is lacking compared to mobile & web. Most of it is transferrable but – at YouView – we’ve encountered problems where we’ve had to innovate in order to achieve what’s standard practice on other platforms. One of the biggest barriers has been prototyping because we use infrared input and there aren’t any obvious, pre-packaged solutions for prototyping with a remote control.

It feels like we’ve tried every prototyping tool under the sun (R.I.P. Pixate ⚰️). Using Axure we’d tied ourselves into the deepest, most convoluted conditional logic that it was no longer feasible to return to a project.

A screenshot of one of my colleague’s more complicated prototypes –

Axure’s conditional chaos. And that’s a fraction of it.

Axure was good in that it was one of the few prototyping tools that allowed for keyboard input. We’d discovered that you could buy a cheap infrared receiver called a FLIRC and that it could be used to convert infrared input into keyboard input. Perfect.

We got by like this for some time and when we needed more intricate prototypes, we would hire contractors who weren’t from a design background. That made communication difficult.

Enter Framer.

Framer was introduced to me by a colleague who described it as,

…pretty much javascript. If you can use that you might as well work on the set top box.

That was fairly intimidating but equipped with some decaying programming skills from school and a determination to stop using Axure (see above), I’d decided to stick with it.

We’d stumbled upon this nifty little example which seemed to perfectly meet our needs. Unfortunately the syntax looked pretty dense compared to the mobile prototypes and it became fairly clear that Framer wasn’t designed for TV but we persevered.

Using FLIRC with a YouView TV Guide prototype

A year of learning later and we’re finding it’s quite hard to get an entire design team – with little knowledge of object oriented programming – to use a tool to do something for which it wasn’t designed. Keyboard input creates a whole host of problems, such as repeating input and complicated syntax, so we came up with a (hopefully) simpler solution than Framer had previously offered.

Using a remote control with framer 😎 by @struanfraser uhuuuu I want to try that too #framerlondon pic.twitter.com/alxncDo4Mq
— Marie Schweiz (@ma_rylou) April 24, 2018

Keyboard Input for Framer

After many prototypes I felt like I’d come to a conclusion about how I wanted to use keyboard input in a way that was relatively similar to Framer’s existing syntax. It still requires a knowledge of functions which I think was a bit of a stumbling block. That said, you only have to write one line of code for each key which simplifies things considerably –

The Old Way

1
2
3
4
5
6
7
8
9
enter = 13
document.addEventListener 'keydown', (event) ->
    keyCode = event.which
    eventHandler(keyCode)
    event.preventDefault()
eventHandler = Utils.throttle 0.3, (keyCode) ->
    switch keyCode
        when enter
            doSomething()

The New Way

1
keyboard.onKey(keyboard.enter, doSomething, 0.3)

I’ve written a more comprehensive guide on how to use the module on Github so if the module sounds like something you’d be interested in, take a look –

Get the Module