Version 1?
This commit is contained in:
parent
a8833095b2
commit
0db55f4ba4
3
.gitignore
vendored
3
.gitignore
vendored
@ -1,5 +1,2 @@
|
||||
node_modules/
|
||||
builds/
|
||||
*.wav
|
||||
|
||||
*.wav
|
||||
|
252
README.md
252
README.md
@ -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
|
||||
|
||||
|
@ -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
|
||||
```
|
@ -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"/>
|
||||
|
@ -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;}
|
||||
|
@ -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) => {
|
||||
|
@ -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;
|
||||
|
@ -13,10 +13,10 @@ 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){
|
||||
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){
|
||||
else if(prev.to && !prev.to.is_equal(this.from)){
|
||||
html += "M"+this.from+" ";
|
||||
}
|
||||
}
|
||||
|
@ -12,10 +12,10 @@ 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){
|
||||
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){
|
||||
else if(prev.to && !prev.to.is_equal(this.from)){
|
||||
html += "M"+this.from+" ";
|
||||
}
|
||||
}
|
||||
|
7
sources/scripts/path_close.js
Normal file
7
sources/scripts/path_close.js
Normal file
@ -0,0 +1,7 @@
|
||||
function Path_Close()
|
||||
{
|
||||
this.to_segment = function(prev)
|
||||
{
|
||||
return "Z ";
|
||||
}
|
||||
}
|
@ -12,13 +12,17 @@ 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){
|
||||
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){
|
||||
}
|
||||
else if(prev.to){
|
||||
if(!prev.to.is_equal(this.from)){
|
||||
html += "M"+this.from+" ";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html += "L"+this.to+" "
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user