Version 1?

This commit is contained in:
Devine Lu Linvega 2017-11-05 17:33:04 +13:00
parent a8833095b2
commit 0db55f4ba4
12 changed files with 64 additions and 282 deletions

5
.gitignore vendored
View File

@ -1,5 +1,2 @@
node_modules/
builds/
*.wav
*.wav
builds/

252
README.md
View File

@ -1,250 +1,32 @@
# Marabu
# Dotgrid
Marabu is a simple open-source music tracker built from Soundbox.
Dotgrid is a simple vector drawing application.
<img src='https://raw.githubusercontent.com/hundredrabbits/Marabu/master/PREVIEW.jpg' width="600"/>
<img src='https://raw.githubusercontent.com/hundredrabbits/Dotgrid/master/PREVIEW.jpg' width="600"/>
## Guide
If this is your first time using a tracker, don't worry this quick introduction will cover the basics of writing a little track, and exporting it to an audio file.
The interface is divided into 3 columns, the *sequencer*, the *pattern editor* and the *instrument*. By default, the application launches with an active pattern, in the first instrument. There is a maximum of 16 instruments that can play at the same time.
To move the **pattern cursor**, use the arrow keys. Pressing the keyboard keys a,s,d,f,g,h & j will record a note in the first row of the first column. Pressing the ArrowDown and ArrowUp keys, will move the *cursor* up/down in the sequencer. Allowing you to fill `pattern #1` with notes. Pressing `space` will play the pattern, pressing `esc` will stop.
To change the **sequencer patterns**, use the arrow keys while `holding alt`. To add notes to a second instrument, move to the second column and press `alt ArrowRight`, this will set the first row of the second instrument to 1, and allow you to record notes. Press `alt ArrowDown` to move to the second row, and press `alt ArrowRight` again twice, to extend the track to 2 rows, and begin adding notes to the second row of the second instrument.
To change the **instrument controls**, use the arrow keys while `holding shift`. To save your song, press `ctrl s`, to render an audio file(.wav) press `ctrl r`.
## Controls
### Basics
### Layer 1
- `space` Play.
- `esc` Stop.
- `q` Erase control points.
- `w` Erase last segment.
- `e` Export SVG file.
- `r` Close Path.
### General
### Layer 2
- `ctrl n` New.
- `ctrl s` Save.
- `ctrl S` Save as.
- `ctrl o` Open.
- `ctrl r` Export .wav.
- `ctrl i` Export .ins(instrument).
- `ctrl t` Export .thm(instrument).
- `a` Draw Arc(counter-clockwise).
- `s` Draw Arc(clockwise).
- `d` Draw Line.
- `f` Draw Bezier.
### Sequencer
### Parametric
#### Arrows
- `alt ArrowDown` Next Sequence.
- `alt ArrowUp` Previous Sequence.
- `alt ArrowRight` Increment Pattern Id +1.
- `alt ArrowLeft` Decrement Pattern Id -1.
#### Keys
- `ctrl l` Loopmode, see below.
### Editor
#### Arrows
- `ArrowRight` Next Instrument.
- `ArrowLeft` Previous Instrument.
- `ArrowDown` Next Row.
- `ArrowUp` Previous Row.
#### Keys
- `)` Increment Note Value +12.
- `(` Decrement Note Value -12.
- `0` Increment Note Value +1.
- `9` Decrement Note Value -1.
- `Backspace` Erase Note in Row.
- `/` Add a Control Keyframe.
- `Tab` Toggle **Composition Mode**.
### Instrument
#### Arrows
- `shift ArrowDown` Next Control.
- `shift ArrowUp` Previous Control.
- `shift ArrowRight` Increment Control Value +1.
- `shift ArrowLeft` Decrement Control Value -1.
#### Keys
- `]` Increment Control Value +10.
- `[` Decrement Control Value -10.
- `}` Increment Control Value +1.
- `{` Decrement Control Value -1.
- `x` Next Octave.
- `z` Previous Octave.
### Keyboard
Hold `shift`, while pressing a note, to make chords.
- `a` Play/Record C.
- `s` Play/Record D.
- `d` Play/Record E.
- `f` Play/Record F.
- `g` Play/Record G.
- `h` Play/Record A.
- `j` Play/Record B.
- `w` Play/Record C#.
- `e` Play/Record D#.
- `t` Play/Record F#.
- `y` Play/Record G#.
- `u` Play/Record A#.
## Effects
### Envelope
- `ATK` Attack
- `SUS` Sustain
- `REL` Release
- `POW` Attack/Release curve
### Osc
- `MOD` --
- `MIX` Dry/Wet between the 2 osc
- `FRQ` Frequency
- `DET` Detune, frequency offset between the 2 osc.
### LFO
- `AMT` Amount
- `FRQ` Frequency
### Efx
- `LP` Low-pass
- `HP` High-pass
- `BP` Band-pass
- `FRQ` Filter Frequency
- `RES` Resonance
### Delay
- `DLY` Delay Rate
- `VOL` Delay Volume
### Shapers
- `NOI` Noise Volume
- `BIT` Bitcrusher
- `DIS` Distortion
- `PIN` Pinking
- `CMP` Compressor
- `DRV` Drive
- `PAN` Pan
### UV
- `VOL` UV Volume/Envelope
- `WAV` UV Wave shape
## Cheatmode
Press `ctrl k` to activate cheatmode. Press `esc` to exit cheatmode.
### Selection
The cheatmode will catch 3 keys, corresponding to int/hex of `rate`, `length` & `offset` of the selection. The `/` key indicates that it does not loop through the whole pattern.
- `4` Every 4th note.
- `42` Every 4th note, and the following one.
- `422` Every 4th note, and the following one, starting from the second.
- `/` Only the first note.
- `/ 44` Only the 5th, 6th, 7th and 8th first notes.
### Copy/Paste
- `c` To copy the entire pattern.
- `v` To paste copied notes.
- `4 c` To copy every 4th note.
### Insert Multiple
- `8 as` This will add C5 and D5 to the 1st and 9th note.
### Erase Multiple
- `backspace` To clear a whole column.
- `4 backspace` To clear every 4th bar.
- `42 backspace` To clear every 4th bar, starting at the second bar.
### Modify Multiple
- `+` Increment each note of the pattern.
- `-` Decrement each note of the pattern.
### Use case
To copy the first 16 bars, into the 16 following bars and play the following note.
- `/ F c` Copy the first 16 bars.
- `/ F F v` Paste the first 16 bars from the the 16th bar.
## Loopmode
Press `ctrl l` to activate loopmode.
### Selective play
- `enter` Will play from current sequencer row, for 1 track.
- `/ enter` Will play from current sequencer row, only active instrument, for 1 track.
- `4 enter` Will play from the current sequencer row, for 4 tracks.
- `/ 4 enter` Will play from the current sequencer row, only active instrument, for 4 tracks.
### Copy/Paste
- `c` To copy the selected sequence.
- `v` To **insert** the selected sequence.
## Notes
During render, the track time is displayed in the before-last row of the Editor in the `0252` format, or 2:52.
## Themes
You can customize the look of your tracks by editing the .mar file and replacing the attributes' colors.
```
theme: {
background:"#fff",
f_high:"#f00",
f_med:"#0f0",
f_low:"#00f",
f_inv:"#00f",
b_high:"#ff0",
b_med:"#f0f",
b_low:"#0ff",
b_inv:"#00f"
}
```
## Development
There are currently no means to change the `bpm`, to do so, update the `bpm` value from the exported `.mar` file to an int between 50 and 450. Use `npm start` to develop locally.
### TODOs
#### Optimisation
- Trim tracks on export.
- Load trimmed track.
#### Feature
- Continuous follow instead of pageview.
- Template file of just sequencer sequences.
#### Misc
- Cancel render with escape.
#### Bug
- add .wav to export(cannot replicate?)
- Clicking icon on dock, shows the application. Replicate on Left.
- `+` Increase stroke size.
- `-` Reduce stroke size.
- `/` Toggle linecap.
## License

View File

@ -1,27 +0,0 @@
# Dotgrid
Minimalist vector drawing tool to create grid based SVGs. There isn't much to it at the moment. Enjoy!
## Functions
```
q CLEAR
w DELETE LAST
e EXPORT(Not working atm, just copy the DOM element)
```
## Tools
```
aA CLOCKWISE
sS COUNTERWISE
d LINE
```
## Shapes
```
z DOT
x CIRCLE
c RECT
```

View File

@ -4,6 +4,7 @@
<script type="text/javascript" src="scripts/path_line.js"></script>
<script type="text/javascript" src="scripts/path_arc.js"></script>
<script type="text/javascript" src="scripts/path_bezier.js"></script>
<script type="text/javascript" src="scripts/path_close.js"></script>
<script type="text/javascript" src="scripts/dotgrid.js"></script>
<script type="text/javascript" src="scripts/keyboard.js"></script>
<link rel="stylesheet" type="text/css" href="links/reset.css"/>

View File

@ -1,4 +1,4 @@
body { background:#fff; padding:30px; font-family: 'input_mono_regular'; -webkit-user-select: none;-webkit-app-region: drag;}
body { background:#fff; padding:30px; font-family: 'input_mono_regular'; -webkit-user-select: none;-webkit-app-region: drag; overflow: hidden;}
#dotgrid { margin:0px auto; position:relative; border:0px solid white; background:white; overflow: hidden; padding:10px;}
#dotgrid .marker { width:2px; height:2px; background:#ddd; position:absolute; margin-top:-1px; margin-left:-1px; border-radius:4px; z-index:50;}

View File

@ -244,6 +244,16 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
reset();
}
this.draw_close = function()
{
if(this.segments.length == 0){ return; }
this.segments.push(new Path_Close());
this.draw();
reset();
}
this.draw_dot = function()
{
var s = document.createElementNS("http://www.w3.org/2000/svg", "circle");
@ -310,6 +320,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.export = function()
{
if(this.segments.length == 0){ return; }
dialog.showSaveDialog((fileName) => {
if (fileName === undefined){ return; }
fs.writeFile(fileName+".svg", dotgrid.svg_el.outerHTML, (err) => {

View File

@ -2,12 +2,13 @@ function Keyboard()
{
this.listen = function(event)
{
// console.log(event.keyCode)
console.log(event.keyCode)
switch (event.keyCode) {
case 65 : dotgrid.draw_arc(event.shiftKey ? "1,1" : "0,1"); break;
case 83 : dotgrid.draw_arc(event.shiftKey ? "1,0" : "0,0"); break;
case 83 : dotgrid.draw_arc(event.shiftKey ? "1,1" : "0,1"); break;
case 65 : dotgrid.draw_arc(event.shiftKey ? "1,0" : "0,0"); break;
case 68 : dotgrid.draw_line(); break;
case 70 : dotgrid.draw_bezier(); break;
case 82 : dotgrid.draw_close(); break;
case 187 : dotgrid.mod_thickness(1); break;
case 189 : dotgrid.mod_thickness(-1); break;
case 191 : dotgrid.mod_linecap(1); break;

View File

@ -13,11 +13,11 @@ function Path_Arc(from,to,orientation,end)
html += "M"+this.from+" ";
}
else if(prev){
if(prev.to.x != this.from.x && prev.to.y != this.from.y && !prev.end){
html += "M"+this.from+" ";
if(prev.end && !prev.end.is_equal(this.from)){
html += "M"+this.from+" ";
}
else if(prev.end && prev.end.x != this.from.x && prev.end.y != this.from.y){
html += "M"+this.from+" ";
else if(prev.to && !prev.to.is_equal(this.from)){
html += "M"+this.from+" ";
}
}

View File

@ -12,11 +12,11 @@ function Path_Bezier(from,to,end)
html += "M"+this.from+" ";
}
else if(prev){
if(prev.to.x != this.from.x && prev.to.y != this.from.y && !prev.end){
html += "M"+this.from+" ";
if(prev.end && !prev.end.is_equal(this.from)){
html += "M"+this.from+" ";
}
else if(prev.end && prev.end.x != this.from.x && prev.end.y != this.from.y){
html += "M"+this.from+" ";
else if(prev.to && !prev.to.is_equal(this.from)){
html += "M"+this.from+" ";
}
}

View File

@ -0,0 +1,7 @@
function Path_Close()
{
this.to_segment = function(prev)
{
return "Z ";
}
}

View File

@ -12,11 +12,15 @@ function Path_Line(from,to,end = null)
html += "M"+this.from+" ";
}
else if(prev){
if(prev.to.x != this.from.x && prev.to.y != this.from.y && !prev.end){
html += "M"+this.from+" ";
if(prev.end){
if(!prev.end.is_equal(this.from)){
html += "M"+this.from+" ";
}
}
else if(prev.end && prev.end.x != this.from.x && prev.end.y != this.from.y){
html += "M"+this.from+" ";
else if(prev.to){
if(!prev.to.is_equal(this.from)){
html += "M"+this.from+" ";
}
}
}

View File

@ -12,4 +12,9 @@ function Pos(x,y)
{
return new Pos(this.x - pos2.x,this.y - pos2.y)
}
this.is_equal = function(pos2)
{
return pos2.x == this.x && pos2.y == this.y;
}
}