156 lines
3.8 KiB
Vue
156 lines
3.8 KiB
Vue
<template>
|
|
<section class="sequencer" v-on:mouseover="displayControls()" v-on:mouseleave="hideControls()" >
|
|
<div class="sequencerLine">
|
|
<div class="slot-wrapper">
|
|
<div class="slot" v-for="i in slotSlider" :key='i' >
|
|
<beat />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="control-menu" :class="[{'displayControls': controlIsDisplayed}]">
|
|
<range-slider class="slider" min="1" :max="maxSlots" step="1" v-model="slotSlider" v-on:input="assignEuclidean(slotSlider, pulseSlider)" ></range-slider>
|
|
<input id="pulseSlider" v-model="maxSlots" />
|
|
<range-slider class="slider" min="1" :max="slotSlider" step="1" v-model="pulseSlider" v-on:input ="assignEuclidean(slotSlider, pulseSlider)" ></range-slider>
|
|
<input id="pulseSlider" value="3" />
|
|
</div>
|
|
<!---
|
|
<div style="background-color:firebrick">
|
|
<input type="range" class="slider" min="1" max="32" step="1" v-model="slotSlider" v-on:change="assignEuclidean(slotSlider, pulseSlider)" />
|
|
<input type="range" class="slider" min="1" :max="slotSlider" step="1" v-model="pulseSlider" v-on:change="assignEuclidean(slotSlider, pulseSlider)" />
|
|
</div>
|
|
-->
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import RangeSlider from 'vue-range-slider'
|
|
// you probably need to import built-in style
|
|
import 'vue-range-slider/dist/vue-range-slider.css'
|
|
import beat from '~/components/beat.vue'
|
|
|
|
export default {
|
|
name: 'sequencerDivided',
|
|
data() {
|
|
return{
|
|
slotSlider: 16,
|
|
pulseSlider: 3,
|
|
euclideanList:[],
|
|
controlIsDisplayed:false
|
|
}
|
|
},
|
|
components: {
|
|
RangeSlider,
|
|
beat
|
|
},
|
|
methods: {
|
|
displayControls: function (){
|
|
this.controlIsDisplayed = true;
|
|
},
|
|
hideControls: function (){
|
|
this.controlIsDisplayed = false;
|
|
},
|
|
bjorklund: function (slots, pulses) {
|
|
|
|
var pattern = [],
|
|
count = [],
|
|
remainder = [pulses],
|
|
divisor = slots - pulses,
|
|
level = 0,
|
|
build_pattern = function(lv) {
|
|
if (lv == -1) {
|
|
pattern.push(0);
|
|
} else if (lv == -2) {
|
|
pattern.push(1);
|
|
} else {
|
|
for (var x = 0; x < count[lv]; x++) {
|
|
build_pattern(lv - 1);
|
|
}
|
|
|
|
if (remainder[lv]) {
|
|
build_pattern(lv - 2);
|
|
}
|
|
}
|
|
}
|
|
while (remainder[level] > 1) {
|
|
count.push(Math.floor(divisor / remainder[level]));
|
|
remainder.push(divisor % remainder[level]);
|
|
divisor = remainder[level];
|
|
level++;
|
|
}
|
|
count.push(divisor);
|
|
|
|
build_pattern(level);
|
|
|
|
return pattern.reverse();},
|
|
assignEuclidean: function (a,b) {
|
|
this.euclideanList = this.bjorklund(a,b);
|
|
console.log(this.euclideanList);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.container {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.title {
|
|
font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
|
|
display: block;
|
|
font-weight: 300;
|
|
font-size: 100px;
|
|
color: #35495e;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.subtitle {
|
|
font-weight: 300;
|
|
font-size: 42px;
|
|
color: #526488;
|
|
word-spacing: 5px;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.links {
|
|
padding-top: 15px;
|
|
}
|
|
|
|
.active{
|
|
background-color:black;
|
|
width:100%;
|
|
height:40%
|
|
}
|
|
|
|
.control-menu{
|
|
display: none;
|
|
}
|
|
|
|
.displayControls{
|
|
display:block;
|
|
}
|
|
|
|
.slot-wrapper{
|
|
display:flex;
|
|
height:3em;
|
|
width:auto;
|
|
background-color:firebrick;
|
|
}
|
|
.slot{
|
|
flex:1 1 auto;
|
|
background-color:beige;
|
|
border:1pt solid aquamarine;
|
|
}
|
|
|
|
beat{
|
|
display:flex;
|
|
flex-direction:column;
|
|
flex:1 1 auto;
|
|
}
|
|
</style>
|