commit 47b45af11afc15e1e529dcd18a9f613f4bcc3bd4
parent 2ce4d8aa5e571de54cc6d0ae34c68973513276a6
Author: Massimo Siboldi <mdsiboldi@gmail.com>
Date: Mon, 5 Feb 2018 16:06:20 -0800
Initial global controls css and components progress
Diffstat:
3 files changed, 93 insertions(+), 28 deletions(-)
diff --git a/src/App/index.js b/src/App/index.js
@@ -2,11 +2,14 @@ import { h, Component } from 'preact';
import WaveEditor from '../WaveEditor/';
import WaveManager from '../WaveManager/';
import Synth from '../Synth/';
+import CircleButton from '../CircleButton/';
import './App.css';
import consts from '../consts.js';
import helpers from '../helpers.js';
-const initialWave = new Array(consts.BUF_SIZE).fill(0);
+const initialWave = new Array(consts.BUF_SIZE)
+ .fill(0)
+ .map((val, i) => Math.sin(i / consts.BUF_SIZE * Math.PI * 2));
const immObjArray = {
update: (arr, idx, opts) => {
@@ -143,7 +146,7 @@ class App extends Component {
changeEditingWaveform = (i) => this.setState({editingWaveformIdx: i})
- addWaveform = (waveform = new Array(consts.BUF_SIZE).fill(0), at = this.state.waveforms.length, isEditing = false) => {
+ addWaveform = (waveform = initialWave.slice(), at = this.state.waveforms.length, isEditing = false) => {
const waveforms = immObjArray.add(this.state.waveforms, at, {
waveform,
beats: boolArray.create(this.state.numBeats)
@@ -194,6 +197,11 @@ class App extends Component {
})
}
+ keyHandler(e) {
+ //TODO handle global commands, maybe some modal stuff even wow
+ console.log('wow i got through', e.key);
+ }
+
render() {
const waves = this.state.waveforms.map((form, idx) => {
return (
@@ -224,23 +232,39 @@ class App extends Component {
})
return (
<div
- className="App"
+ className="App"
+ onKeyDown={this.keyHandler}
>
- <WaveEditor
- mouseData={this.state.mouseData}
- waveform={this.editingWaveform()}
- updateWaveform={(waveform) => {
- this.updateWaveform(this.state.editingWaveformIdx, {waveform});
- }}
- ></WaveEditor>
- <Adsr adsr={this.state.adsr} update={this.updateAdsr} />
- <button onClick={() => {this.setBeats(this.state.numBeats + 1)}}>+ beat</button>
- <button onClick={() => {this.setBeats(this.state.numBeats - 1)}}>- beat</button>
- <button onClick={() => this.addWaveform()}>+</button>
- {waves}
- <Synth waveforms={this.activeWaveforms()} adsr={this.state.adsr}></Synth>
- <button onClick={this.metro}>start</button>
- <button onClick={this.stopMetro}>stop</button>
+ <h1>synthing</h1>
+ <WaveEditor
+ mouseData={this.state.mouseData}
+ waveform={this.editingWaveform()}
+ updateWaveform={(waveform) => {
+ this.updateWaveform(this.state.editingWaveformIdx, {waveform});
+ }}
+ ></WaveEditor>
+ <div class="global-controls">
+ <CircleButton
+ active={this.state.interval}
+ action={this.metro}
+ >
+ <div class="triangle"></div>
+ </CircleButton>
+ <CircleButton
+ active={!this.state.interval}
+ action={this.stopMetro}
+ >
+ <div class="rectangle"></div>
+ </CircleButton>
+ <button onClick={this.metro}>start</button>
+ <button onClick={() => {this.setBeats(this.state.numBeats + 1)}}>+ beat</button>
+ <button onClick={() => {this.setBeats(this.state.numBeats - 1)}}>- beat</button>
+ <button onClick={this.stopMetro}>stop</button>
+ <Adsr adsr={this.state.adsr} update={this.updateAdsr} />
+ </div>
+ {waves}
+ <button onClick={() => this.addWaveform()}>+</button>
+ <Synth waveforms={this.activeWaveforms()} adsr={this.state.adsr}></Synth>
</div>
);
}
diff --git a/src/WaveEditor/index.js b/src/WaveEditor/index.js
@@ -1,22 +1,23 @@
import { h, Component } from 'preact';
import consts from '../consts.js';
import helpers from '../helpers.js';
+import './style.css';
const drawArea = helpers.throttle((amplitudes, canvas, begin = 0, end = undefined) => {
const ctx = canvas.getContext("2d");
const rectWidth = canvas.width / consts.BUF_SIZE;
const roundedWidth = Math.max(1, rectWidth)
- const lineWidth = 5;
+ const lineWidth = 1;
const halfCanvas = (canvas.height - lineWidth) / 2;
window.requestAnimationFrame(() => {
amplitudes.forEach((amp, idx) => {
amp *= halfCanvas;
const roundedXOffset = Math.round(idx * rectWidth);
ctx.clearRect(roundedXOffset, 0, roundedWidth + 1, canvas.height);
- ctx.fillStyle = "#ddd";
+ ctx.fillStyle = "#ff735e";
ctx.fillRect(roundedXOffset, halfCanvas, roundedWidth + 1, -amp);
- ctx.fillStyle = "#e44";
- ctx.fillRect(roundedXOffset, -amp + halfCanvas, roundedWidth + 1, lineWidth);
+ //ctx.fillStyle = "rgba(255, 115, 94, 0.1)"; // changing color for the border
+ //ctx.fillRect(roundedXOffset, -amp + halfCanvas, roundedWidth + 1, lineWidth);
});
});
}, 20)
@@ -96,9 +97,10 @@ export default class waveEditor extends Component {
render() {
return (
<canvas
- height={400}
- width={800}
- ref={(canvas) => {this.canvasRef = canvas}}>
+ class="waveEditor"
+ height={400}
+ width={window.innerWidth - 100}
+ ref={(canvas) => {this.canvasRef = canvas}}>
</canvas>
);
}
diff --git a/src/index.css b/src/index.css
@@ -7,11 +7,50 @@
}
body {
- margin: 0;
- padding: 0;
- font-family: sans-serif;
+ background-color: #fff7f0;
+ margin: 0px 50px;
+ padding: 0;
}
* {
font-family: Hack, monospace, san-serif;
}
+
+h1 {
+ text-align: left;
+}
+
+.triangle {
+ border-left: 0.3em solid transparent;
+ border-top: solid 0.5em black;
+ border-right: 0.3em solid transparent;
+ transform: rotate(-90deg);
+ width: 0;
+ height: 0;
+ position: relative;
+ left: 0.07em;
+}
+
+.rectangle {
+ width: 0.5em;
+ height: 0.5em;
+}
+
+.circle {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 1em;
+ width: 1em;
+ border-radius: 1em;
+ background: ;
+}
+
+.global-controls {
+ background: #f1ddd8;
+}
+
+.global-controls .circle {
+ font-size: 35px;
+}
+
