Skip to content

index.markdown

Latest commit

 

History

History
108 lines (90 loc) · 5.51 KB

index.markdown

File metadata and controls

108 lines (90 loc) · 5.51 KB
layout home

The 5of12 Logo, a notched circle with 5 coloured pill shapes arrayed like a paw

Welcome

5of12 gets to do some pretty innovative work in the world of spatial computing. Where possible we like to share what we're learning, rather than keep all this knowledge trapped in our heads.

If you find something interesting, or have a project you'd like to talk about, get in touch.

Check out some examples of our work

Playtonik

Playtonik is a musical fidget toy app for iOS. It combines playful physics interactions with immersive sound and expressive haptics for a relaxing and inspiring musical experience. It also has great connectivity with MIDI, with the ability to control or be controlled by external gear. This little app brings together everything we enjoy about building software!

Playtonik is also a winner of a 2025 MIDI Association Innovation Award for Software Prototypes! Find out more at 5of12.co.uk/playtonik

MediaPipe Playground

Gesture control running in your browser. Interaction from across the room using comfortable motions centred around you. No headset, no specialised cameras, just you and a webcam!

5of12.github.io/MediaPipe-Playground

  • 🦈 Give 3D objects a spin, with a single hand!
  • 🌌 Head to the stars with pose detections. Engage warp speed!
  • 🗺️ Explore mapping data with two handed gestures. Pinch and zoom!

Experiments

We are also exploring WebAudio and WebMIDI in the browser through a growing set of musical tools, utilities and experiments.

Pocket Operations screenshot showing the pattern browser, transport controls and MIDI export tools.

Pocket Operations

A browser-based MIDI pattern recorder for sketching drum patterns, auditioning grooves, sending them to hardware over Web MIDI, and exporting loops as .midi files.

<article class="experiment-card">
  <a class="experiment-card__image-link" href="https://5of12.github.io/MIDIWeb-Hub/" aria-label="Open MIDIWeb-Hub">
    <img
      class="experiment-card__image"
      src="assets/experiments/midiweb-hub-preview.png"
      alt="MIDIWeb-Hub screenshot showing the WebMIDI directory search, tags and site cards."
      loading="lazy"
      width="1440"
      height="1024"
    >
  </a>
  <div class="experiment-card__content">
    <h3 class="experiment-card__title">MIDIWeb-Hub</h3>
    <p class="experiment-card__body">A curated directory of websites that support WebMIDI, helping musicians, makers, educators and developers discover browser-based musical tools and experiments.</p>
    <div class="experiment-card__links">
      <a class="experiment-card__link experiment-card__link--primary" href="https://5of12.github.io/MIDIWeb-Hub/">Launch</a>
      <a class="experiment-card__link" href="https://github.com/5of12/MIDIWeb-Hub">View on GitHub</a>
    </div>
  </div>
</article>

<article class="experiment-card">
  <a class="experiment-card__image-link" href="https://5of12.github.io/Augment/" aria-label="Open Augment">
    <img
      class="experiment-card__image"
      src="assets/experiments/augment-preview.png"
      alt="Augment screenshot showing audio UX controls, waveform preview and export action."
      loading="lazy"
      width="1440"
      height="1024"
    >
  </a>
  <div class="experiment-card__content">
    <h3 class="experiment-card__title">Augment</h3>
    <p class="experiment-card__body">An Audio UX generator built with Tone.js for creating interface sounds, bleeps, bloops, clicks and pops directly in the browser.</p>
    <div class="experiment-card__links">
      <a class="experiment-card__link experiment-card__link--primary" href="https://5of12.github.io/Augment/">Launch</a>
      <a class="experiment-card__link" href="https://github.com/5of12/Augment">View on GitHub</a>
    </div>
  </div>
</article>