From 0db55f4ba4ab9c94fbf3eeb294a5182e01bd6215 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Sun, 5 Nov 2017 17:33:04 +1300 Subject: [PATCH] Version 1? --- .gitignore | 5 +- README.md | 252 +++------------------------------ sources/README.md | 27 ---- sources/index.html | 1 + sources/links/main.css | 2 +- sources/scripts/dotgrid.js | 12 ++ sources/scripts/keyboard.js | 7 +- sources/scripts/path_arc.js | 8 +- sources/scripts/path_bezier.js | 8 +- sources/scripts/path_close.js | 7 + sources/scripts/path_line.js | 12 +- sources/scripts/pos.js | 5 + 12 files changed, 64 insertions(+), 282 deletions(-) delete mode 100644 sources/README.md create mode 100644 sources/scripts/path_close.js diff --git a/.gitignore b/.gitignore index ddfb156..572c354 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,2 @@ node_modules/ -builds/ -*.wav - -*.wav +builds/ \ No newline at end of file diff --git a/README.md b/README.md index 120d8a2..5677ced 100644 --- a/README.md +++ b/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. - + ## 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 diff --git a/sources/README.md b/sources/README.md deleted file mode 100644 index 699cd13..0000000 --- a/sources/README.md +++ /dev/null @@ -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 -``` \ No newline at end of file diff --git a/sources/index.html b/sources/index.html index a2b13ad..b6b5a64 100644 --- a/sources/index.html +++ b/sources/index.html @@ -4,6 +4,7 @@ + diff --git a/sources/links/main.css b/sources/links/main.css index 3af0080..adc65af 100644 --- a/sources/links/main.css +++ b/sources/links/main.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;} diff --git a/sources/scripts/dotgrid.js b/sources/scripts/dotgrid.js index 6a8c000..8ab3700 100644 --- a/sources/scripts/dotgrid.js +++ b/sources/scripts/dotgrid.js @@ -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) => { diff --git a/sources/scripts/keyboard.js b/sources/scripts/keyboard.js index ccd7a7b..a4b28f2 100644 --- a/sources/scripts/keyboard.js +++ b/sources/scripts/keyboard.js @@ -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; diff --git a/sources/scripts/path_arc.js b/sources/scripts/path_arc.js index a793d4c..cc8c35e 100644 --- a/sources/scripts/path_arc.js +++ b/sources/scripts/path_arc.js @@ -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+" "; } } diff --git a/sources/scripts/path_bezier.js b/sources/scripts/path_bezier.js index 9bce8ae..2ff383d 100644 --- a/sources/scripts/path_bezier.js +++ b/sources/scripts/path_bezier.js @@ -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+" "; } } diff --git a/sources/scripts/path_close.js b/sources/scripts/path_close.js new file mode 100644 index 0000000..078c79c --- /dev/null +++ b/sources/scripts/path_close.js @@ -0,0 +1,7 @@ +function Path_Close() +{ + this.to_segment = function(prev) + { + return "Z "; + } +} \ No newline at end of file diff --git a/sources/scripts/path_line.js b/sources/scripts/path_line.js index 0b28cf1..ceee600 100644 --- a/sources/scripts/path_line.js +++ b/sources/scripts/path_line.js @@ -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+" "; + } } } diff --git a/sources/scripts/pos.js b/sources/scripts/pos.js index f96599c..2c9b10f 100644 --- a/sources/scripts/pos.js +++ b/sources/scripts/pos.js @@ -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; + } } \ No newline at end of file