Skip to content

Commit

Permalink
fix(ui): Fixes checkbox not representing state bug. smoothing functio…
Browse files Browse the repository at this point in the history 
…ns to its own file, webpack build cmd in package json
  • Loading branch information
@NBeing
NBeing committed Jun 4, 2024
1 parent f895f7b commit 4eacd82
Show file tree
Hide file tree
Showing 12 changed files with 215 additions and 159 deletions.
2 changes: 1 addition & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@ node_modules
bundle.js
bundle.js.map
npm-debug.log

dist
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
"description": "Meander Fractal Generator",
"scripts": {
"start": "webpack serve",
"cli": "webpack serve --mode development --open"
"cli": "webpack serve --mode development --open",
"build":"webpack build"
},
"devDependencies": {
"@babel/core": "^7.21.4",
Expand Down
190 changes: 90 additions & 100 deletions src/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { noteLengths, Knobs } from './knobs'

import GlobalTimer from "./util/GlobalTimer"
import { EventBus, MidiTracker } from "./util/eventBus"
import { lerp, clamp, floorClamp, parabolic, impulse } from './util/smoothingFunctions'

const globalTimer = new GlobalTimer()
const eventBus = new EventBus()
Expand Down Expand Up @@ -88,20 +89,9 @@ const spawnTimer = (
eventBus.subscribe("nameEvent", (func, num) => {
if(typeof func === "function"){
func()
} else {
console.log("Why not func")
debugger;
}
});
const lerp = (a, b, t) => a + (b-a) * t
const clamp = (val, max) => val > max ? max : val
const floorClamp = (val, min) => val < min ? min : val
const parabolic = (x,k) => Math.pow( 4.0*x*(1.0-x), k );
// www.iquilezles.org/www/articles/functions/functions.htm
const impulse = ( howSteep, x ) => {
let h = howSteep*x;
return h* Math.exp(1.0 - h);
}

// These values may be for the BSP and not universal
const MIDI_STOP_MSG = 252

Expand Down Expand Up @@ -279,101 +269,101 @@ const App = (props) => {
const depthLFO = new LFO(-500, 200, 20)


// Redraws the canvas with the browser framerate
// window.requestAnimationFrame(function(){
// });
// Redraws the canvas with the browser framerate
const mainLoop = () => {
updateTimers(globalTimer.getSecondsElapsed())

// console.log("myLFO", myLFO.getSin());
// if(
// motifModOptions.filter( (option) => { return option.optionName === "noAnimation"})[0].value == false
// ){
// const configMod = [
// myLFO3.getSin() / 2,
// myLFO3.getSin() / 3,
// myLFO3.getSin() / 4,
// myLFO3.getSin() / 5,
// myLFO3.getSin() / 2,
// myLFO3.getSin() / 3,
// myLFO3.getSin() / 4,
// myLFO3.getSin() / 5,
// ]
// dispatch({
// type: UPDATE_ALL_MOTIFS,
// payload: [
// myLFO3.getSin() + configMod[0],
// myLFO3.getSin() + configMod[1],
// myLFO3.getSin() + configMod[2],
// myLFO3.getSin() + configMod[3],
// myLFO3.getSin() + configMod[4],
// myLFO3.getSin() + configMod[5],
// myLFO3.getSin() + configMod[6],
// myLFO3.getSin() + configMod[7],
// ]
// })
// dispatch({
// type: UPDATE_CONFIG,
// payload:{
// option:
// { optionName: 'sideLength' , min: 2 , max:1200 , value: 300 , type: 'range' },
// value: myLFO4.getSin() / 4
// }
// })
// // dispatch({
// // type: UPDATE_CONFIG,
// // payload:{
// // option:
// // { optionName: 'lineWidth' , min: 0 , max:400 , value: 10 , type: 'range' },
// // value: myLFO4.getSin() / 2
// // }
// // })
// if(
// motifModOptions.filter( (option) => { return option.optionName === "animate"})[0].value == false
// ){
// const configMod = [
// myLFO3.getSin() / 2,
// myLFO3.getSin() / 3,
// myLFO3.getSin() / 4,
// myLFO3.getSin() / 5,
// myLFO3.getSin() / 2,
// myLFO3.getSin() / 3,
// myLFO3.getSin() / 4,
// myLFO3.getSin() / 5,
// ]
// dispatch({
// type: UPDATE_ALL_MOTIFS,
// payload: [
// myLFO3.getSin() + configMod[0],
// myLFO3.getSin() + configMod[1],
// myLFO3.getSin() + configMod[2],
// myLFO3.getSin() + configMod[3],
// myLFO3.getSin() + configMod[4],
// myLFO3.getSin() + configMod[5],
// myLFO3.getSin() + configMod[6],
// myLFO3.getSin() + configMod[7],
// ]
// })
// dispatch({
// type: UPDATE_CONFIG,
// payload:{
// option:
// { optionName: 'sideLength' , min: 2 , max:1200 , value: 300 , type: 'range' },
// value: myLFO4.getSin() / 4
// }
// })
// // dispatch({
// // type: UPDATE_CONFIG,
// // payload:{
// // option:
// // { optionName: 'lineWidth' , min: 0 , max:400 , value: 10 , type: 'range' },
// // value: myLFO4.getSin() / 2
// // }
// // })

// dispatch({
// type: UPDATE_CONFIG,
// payload:{
// option:
// { optionName: 'red' , min: 0 , max:255 , value: 300 , type: 'range' },
// value: colorLFORed.getSin()
// }
// })
// dispatch({
// type: UPDATE_CONFIG,
// payload:{
// option:
// { optionName: 'green' , min: 0 , max:255 , value: 300 , type: 'range' },
// value: colorLFOGreen.getSin(),
// }
// })
// dispatch({
// type: UPDATE_CONFIG,
// payload:{
// option:
// { optionName: 'blue' , min: 0 , max:255 , value: 300 , type: 'range' },
// value: colorLFOBlue.getSin(),
// }
// })
// dispatch({
// type: UPDATE_CONFIG,
// payload:{
// option: {
// max: 20000,
// min: 2,
// optionName: "numSegments",
// type: "range",
// value: 1057,
// },
// value: myLFO2.getSin()
// }
// })
// dispatch({
// type: UPDATE_CONFIG,
// payload:{
// option: { optionName: 'depth' , min: -1000 , max:2000 , value: 1 , type: 'range' },
// value: depthLFO.getSin()
// }
// })
// }
// dispatch({
// type: UPDATE_CONFIG,
// payload:{
// option:
// { optionName: 'red' , min: 0 , max:255 , value: 300 , type: 'range' },
// value: colorLFORed.getSin()
// }
// })
// dispatch({
// type: UPDATE_CONFIG,
// payload:{
// option:
// { optionName: 'green' , min: 0 , max:255 , value: 300 , type: 'range' },
// value: colorLFOGreen.getSin(),
// }
// })
// dispatch({
// type: UPDATE_CONFIG,
// payload:{
// option:
// { optionName: 'blue' , min: 0 , max:255 , value: 300 , type: 'range' },
// value: colorLFOBlue.getSin(),
// }
// })
// dispatch({
// type: UPDATE_CONFIG,
// payload:{
// option: {
// max: 20000,
// min: 2,
// optionName: "numSegments",
// type: "range",
// value: 1057,
// },
// value: myLFO2.getSin()
// }
// })
// dispatch({
// type: UPDATE_CONFIG,
// payload:{
// option: { optionName: 'depth' , min: -1000 , max:2000 , value: 1 , type: 'range' },
// value: depthLFO.getSin()
// }
// })
// }

}
var elapsed = 0
Expand Down
9 changes: 6 additions & 3 deletions src/components/ConfigComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,12 @@ const Config = (props) => {
const dispatch = useDispatch()

const generateInputs = () => {
return motifModOptions.map( ( option:any ,i:number ) => (
<ConfigSlider key={i} option={option} />
))
return motifModOptions.map( ( option:any ,i:number ) => {
console.log("Optchin", option)
return (
<ConfigSlider key={i} option={option} />
)
})
}
const generateMotifInputs = () => {
return range(8).map( (option:any, i:number ) =>{
Expand Down
13 changes: 1 addition & 12 deletions src/service/meander.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,25 +72,16 @@ export default class MeanderCanvas extends Canvas {
this.draw();
}
init(){
// this.ctx.canvas.width = window.innerWidth;
// this.ctx.canvas.height = window.innerHeight;
this.ctx.save()
// console.log("i nit", this.config)
if(this.config.clearScreen){
this.ctx.fillRect (0,0,this.canvas.width, this.canvas.height)
}
// this.ctx.translate( this.canvas.width /2 , this.canvas.height/2 )

// this.ctx.save()
this.ctx.fillStyle = "black";
this.ctx.translate( this.canvas.width /2 , this.canvas.height/2 )
this.ctx.scale(0.15,0.15);
this.ctx.transform(1,0,0,1,0,0)

// this.ctx.fillStyle = "black"
// this.ctx.fillRect( 0, 0 , this.canvas.width , this.canvas.height)


// this.canvas.addEventListener('click', (evt:any) => {

// this.lastX = evt.offsetX || (evt.pageX - this.canvas.offsetLeft);
Expand All @@ -108,8 +99,6 @@ export default class MeanderCanvas extends Canvas {
}

draw(){


let savedPos = this.generateSpacing(this.config.sides).map((n:any,i:any, c:any) => {
let x = this.config.sideLength * Math.sin(n + this.config.baseRotation)
let y = this.config.sideLength * Math.cos(n + this.config.baseRotation)
Expand All @@ -130,7 +119,7 @@ export default class MeanderCanvas extends Canvas {
let numSegments = (this.config.fitToSide) ? numberOfSegments : this.config.numSegments

source =
( this.config.noAnimation )
( !this.config.animate )
? Rx.Observable.from(range( numSegments ))
: Rx.Observable.interval(1).take(numSegments)

Expand Down
Loading

0 comments on commit 4eacd82

Please sign in to comment.