MediaGraph Demo

MediaGraph Music Navigation with Pie Menus. A prototype developed for Will Wright’s Stupid Fun Club.

Don Hopkins
4 min readMay 25, 2018

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!

Weeeee!

--

--

Don Hopkins

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