GitHub GitHub Universe 2020: Play - Creative Coding, 12 Dec 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: modV: visualizing audio with the web - GitHub Universe 2020

Description

Presented by Sam Wray, Sr Experience Technologist, Publicis•Poke

ModV is a free, open source visual performance tool that allows you to mix media, shaders, and JavaScript to create super-reactive visuals for audio/visual performances. Explore modV's most useful features in this 10 minute primer.

For more from GitHub Universe 2020, visit https://githubuniverse.com

As always, feel free to leave us a comment below and don't forget to subscribe: http://bit.ly/subgithub

Thanks!

Connect with us.
Facebook: http://fb.com/github
Twitter: http://twitter.com/github
LinkedIn: http://linkedin.com/company/github

About GitHub
GitHub is the best place to share code with friends, co-workers, classmates, and complete strangers. Millions of people use GitHub to build amazing things together. For more info, go to http://github.com

A

Welcome to this 10 minute run through of mod v. What is mod v well mod v is a free and open source piece of software, which allows you to pipe in audio and generate audio reactive visuals, which are great for live, shows such as av shows and gigs. Anything with a projection behind it, which needs to be synced to audio really moderate, is built on web technologies, and I've been working on it for around six years now we have two main contributors who are myself and tim pietrowski.

A

Both tim and myself have used modv in shows all over the world, with kind of live use spanning from around four to six years respectively. So, let's get into it down here is the gallery. It contains modules. Modules are visual generators.

A

There are three types which are 2d, interactive, shader format and webgl shader. To set your input of audio, you click input, device, config and we'll set it to my microphone.

A

So now one two one: two we are using my microphone as the audio input. We can drag a module into a group.

A

And click enable you'll see in the preview window that the module is drawing over itself each frame. We can stop this behavior by unchecking, inherit and checking clearing. This will clear. The canvas at every frame modules can be mixed and matched as you like, so we can drag and drop and just click enable, and now we have another module drawing to the screen.

A

Each modules has a set of controls which can be modified in the module inspector in the top right. So let's get the object, distance a little up and then we'll up the stroke weight a little bit of circle spacing and now it looks kind of different.

A

Each module has its own set of controls, which you can see by clicking on the module and they'll appear in the module inspector in the top right.

A

If we select a module and hit backspace, we can delete the module from the group.

A

So, let's drag and drop scale and we'll put it before concentrics click enable and you'll see that nothing much happens yet. But if we uncheck clearing now we have this infinite drawing to the screen and every time the frame draws, it will draw the previous frame a little bigger. So you get this tunnel effect, which is quite nice.

A

We can extend this even further by finding a block, color dragging and dropping this clicking enable and we'll turn the alpha up slightly and now every frame that's drawn to the screen will be drawn slightly darker, so we get this.

A

Nice fade to black you'll notice that in the input configuration panel, each property that we click can be configured so let's go to scale and select scale and in the audio drop down we will select energy now this looks like it maybe hasn't done much, but if we slightly restrict the maximum value of energy, we can see now that every time I speak and let's just uh turn down the circle spacing slightly. So this is a little more obvious that the scale is being affected by how much my voice is making zones.

A

Sorry but yeah, so we've now assigned an audio feature of the incoming audio to a module's property media is the audio analysis, library that we use underneath modvey. It allows us to select certain features of incoming audio, rather than just using the standard, fft values which I've found produces a much more punchier result than just sticking to standard fft values we're looking to bring fft into modv at some point. But for now we only support mater's audio features which work surprisingly.

A

Well, you can create new groups by clicking new group, rearrange groups and even drag modules between groups and drag them back.

A

Blend modes can also be set for modules and groups, just like you would in photoshop, and let's look at that here and we'll click difference, and now we can see there's some funky stuff going on over here. Let's maybe try hard light. Instead and now we have this hard light, looking kind of blending going on a little bit, let's check out what's going on in the output window, so this would sit on your secondary screen or projector.

A

You can resize the canvas just by resizing the window and double click to go full screen, hello, one two one, two one two and double click to get out of full screen.

A

Once you've got an output that you like. You can save this into a preset in the file menu and you can open a saved preset also by the file menu.

A

You could share presets with friends if you'd like just make sure that they have the modules that you're, using along with the built-in modules modvi allows loading of your own modules too. Let's quickly see a 2d modules code and how they are built.

A

A module in modv is a javascript file which exports one object. We need to give the module some metadata, so we tell it what kind of module type it is in this case it's 2d and we can give it a name.

A

So let's remove just those two for now and we'll find circle in our gallery, and this is being uh loaded from the file system. So we click enable and there's nothing going on here.

A

So let's uncomment props- and this is kind of like your view or react properties. So we have one property called size, one property called color and we give it some details about the properties here. So it's an integer, it's default. 20 minimum should be zero, maximum should be 100 and it should always be zero or above that's, abs, absolute and the color is a type of color. So we'll save that switch back to mod v and we'll see that we have size and color properties enabled, but it's still not drawing anything to the screen.

A

So, let's look at the draw function. This drop function is similar to what you'd find in p5.js processing or open frameworks. So, let's uh uncomment that save it and look back at mod v, we have a red circle drawn in roughly the center of the screen. So what can we do with with this red circle? Well, let's change the color.

A

Nice so, as we saw, we can't go past zero and we cannot go above 100, but we can still assign these audio features to these properties. So this is a little quieter, so we're just going to turn up the maximum on our audio input and there we go. We have a bouncing, a green circle super interesting, but there's more that you can do with mod v than just grip, bouncing green circles so to show off mod fee.

A

Why don't we have a little jam I'll, be using music written by myself and all of the modules used to create the visuals will be default modules found in modv. Let's take a look.

A

A

B

B

A

Modvey is a long-term passion project of mine and we're always looking to improve and add new features. If you'd like to have a go, visit modv.vsync.gl and see the getting started guide, we sometimes run workshops on morphe. So, if you'd like to see a more in-depth runthrough of mod v and have a go for yourself with a little support on the side, then check out our twitter page as we have one coming up.

A

If you notice a bug or you have an idea, chaos and suggestions are more than welcome. I hope you'll check out modv and even use it at a live show iphone xamarin thank.

A