Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/williamfields/nofft.js
Javascript library for creating MIDI-responsive visuals, instruments, games, and art.
https://github.com/williamfields/nofft.js
audiovisual creative-coding midi webmidi
Last synced: 3 months ago
JSON representation
Javascript library for creating MIDI-responsive visuals, instruments, games, and art.
- Host: GitHub
- URL: https://github.com/williamfields/nofft.js
- Owner: williamfields
- License: mit
- Created: 2017-06-15T16:20:39.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-09-04T12:39:22.000Z (about 7 years ago)
- Last Synced: 2024-04-20T19:42:20.101Z (7 months ago)
- Topics: audiovisual, creative-coding, midi, webmidi
- Language: JavaScript
- Homepage:
- Size: 15.6 KB
- Stars: 14
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-javascript-audio - williamfields/nofft.js - Javascript library for creating MIDI-responsive visuals (UI components and libraries / Other UI)
README
# nofft.js
nofft.js is a Javascript library that makes it *super easy* to create MIDI-responsive visuals, instruments, games, and art.
It can be used to easily map the envelope of a sound to the envelope of a corresponding visual event, like this:
To get an idea of what it can do, open this live example and bang on your MIDI controller: http://williamfields.com/nofft.js/examples/css-example.html
## Quick Start
To include it in your application:
```html
```
Initialize:
```javascript
nofft.init();
```
...and then make sure to update it inside your render loop:
```javascript
function render()
{
nofft.update();
// do stuff
requestAnimationFrame(render);
}
```
## MIDI Notes
You can respond to note events on a particular channel, or if you don't care about the channel, you can opt to respond to events coming in on *any* channel.
### Examples
To respond to the **start** of a note on **any channel**:
```javascript
nofft.anyChannel.onNote = function(channel,note,velocity)
{
console.log("Just received a note ON message for note "+note+" with velocity "+velocity+" on channel "+channel);
};
```
To respond to the **end** of a note on **channel 1**:
```javascript
nofft.channel[1].onNoteOff = function(channel,note)
{
console.log("Just received a note OFF message for note "+note+" on channel "+channel);
};
```
## Envelopes
You can track the envelope of each individual note as it rises and falls:
### Examples
To get the **current envelope value** of note 64 on channel 1:
```javascript
nofft.channel[1].note[64];
```
To get the current envelope value of the **last played note** on channel 4:
```javascript
nofft.channel[4].anyNote;
```
To get the current envelope value of the last played note on **any channel**:
```javascript
nofft.anyChannel.anyNote;
```
To set the **attack** of the envelope so it **rises suddenly**:
```javascript
nofft.anyChannel.attack = 0;
```
To set the **attack** of the envelope so it **fades in**:
```javascript
nofft.anyChannel.attack = 1;
```
To set the **release** of the envelope so it **drops suddenly**:
```javascript
nofft.anyChannel.release = 0;
```
To set the **release** of the envelope so it **falls slowly**:
```javascript
nofft.anyChannel.release = 1;
```
## Controllers
MIDI controllers are also supported.
### Examples
To respond to a MIDI controller event on any channel:
```javascript
nofft.anyChannel.onController = function(channel,controlNumber,controlValue)
{
console.log("Just received a controller message for controller number "+controlNumber+" with value "+controlValue+" on channel "+channel);
};
```
To get the current value of controller 74 on channel 1:
```javascript
nofft.channel[1].controller[74];
```