MediaGraph Demo

This is a demo of a user interface research prototype that I developed for Will Wright at the Stupid Fun Club. It includes pie menus, an editable map of music interconnected with roads, and cellular automata.

It uses one kind of nested hierarchical pie menu to build and edit another kind of geographic networked pie menu.

MediaGraph Demo Video

MediaGraph Music Navigation with Pie Menus Prototype developed for Will Wright’s Stupid Fun Club

MediaGraph Demo Transcript

This is MediaGraph, which lets you arrange all your songs on a map.

It has a big map.

And then we connect them with roads.

Now when you point at a song, you hear its “earcon”.

And if you like it, you can just click on it to play.

Now each one of these songs here can be dragged around the map.

Also we have labels, like that, that you can edit, and add more labels.

So the songs themselves have a pie menu on them that let you change the radius from small to big.

And also you can change the biome, which is the pattern, and cellular automata rule that’s applied.

So that one’s based on Life, and sort of ice.

And this is like moon surface.

So we can zoom in there.

And when we move it around, the cellular automata changes, so we get some interesting patterns.

And when you have two biomes, two songs, they can influence and combine.

See, these are the same biome, so they kind of merge together.

Or it can have a different biome, like that, and they compete for area.

Now if you’ll notice, there’s roads.

And it’s very easy to edit the roads, because if you take this and drop it on another one, now they have a road!

And if you take it and drop again, now they don’t have a road!

So you can just very easily edit the network any way you like. There you go!

And this thing is nice and efficient because it only loads polygons with snapshots of the map when you’re far away.

See, these are flat polygons, very low poly count. But then when you get close, it actually makes a terrain. I’ll get a little closer now.

But if I edit it, it has to make a terrain for that. See that’s a 3D terrain, and pop, it just stopped moving, so it got saved back out into a 2D layer. So if I move down close enough, then it makes the terrain that I’m looking at. But I only have to look at one or two, maybe four at max, because I’m still close.

So I still have a very good frame rate when I’m up close. 85, that’s pretty good. And then when you move away it gets really high because it’s just showing a few flat polygons.

Now here’s a neat thing about the roads. Normally you pan around by just dragging with the left button.

But when you drag on a song, it flicks you down the road in the direction that you dragged.

It can move around and just drop it, but if you flick, you just zoom to the next song along the road.

And then you can zoom out and that still works.

See it just brings it to wherever your cursor is, underneath your cursor. So you can just traverse the network very nicely.

And of course you can move these guys around. There’s auto-scroll. And it just stay attached to everybody. And you can detach it if you want.

The goal is to have a very fluid style.

Oh, here we go!





User interface flower child. Pie menus, PizzaTool, SimCity, The Sims, Visual Programming, VR, AR, Unity3D / JavaScript bridge.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Go Trustless with ALICE token, Now easily farm ALICE on Binance with its 18th Launchpool project

Building a website

Django Project Best Practices to Keep Your Developers Happy

Stick figure raising their arms in celebration.

Layer 2 Leader Matic Network Partners with Bluzelle to Provide Decentralized Data Storage to Dapps

Setup Amazon Elasticsearch Service Manual Index Snapshots and storing in S3

So You Want to Build a Language VM in Rust - Part 01

Lesson 9: Preferences and settings

How to Use YouTube to Be a Better Programmer

Phone displaying YouTube logo

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Don Hopkins

Don Hopkins

User interface flower child. Pie menus, PizzaTool, SimCity, The Sims, Visual Programming, VR, AR, Unity3D / JavaScript bridge.

More from Medium

The Revolution in 3D Cinematics: an Epitaph for Pre-rendering.

Unity Asset Review #8 “ArchVizPRO Interior Vol.8”


Animal Info Graphic