123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318 |
- <template>
- <section class="sequencer" >
- <!--<span class="sequence-controls-wrapper">-->
- <div class="options-wrapper">
- <span class="control-bar" :style="{ opacity: barOpacity }">
- <div class="sequence-options">
- <div class="option-icon" id="icon-slots"></div>
- <div class="option-icon" id="icon-euclid"></div>
- <div class="sampleType-wrapper">
- <div class="option-icon" id="icon-sample" @click="makeFirstChild(), selectSampleType(1)"></div>
- <div class="option-icon" id="icon-sample" @click="makeFirstChild(), selectSampleType(2)"></div>
- <div class="option-icon" id="icon-sample" @click="makeFirstChild(), selectSampleType(3)"></div>
- <div class="option-icon" id="icon-sample" @click="makeFirstChild(), selectSampleType(4)"></div>
- </div>
- <div class="option-icon" id="icon-delete"></div>
- </div>
- <div class="sequence-bar">
- <range-slider class="slider" @change="setFullOpacity()" min="1" step="1" v-model="slotSlider" v-on:input="assignEuclidean(slotSlider, pulseSlider)" ></range-slider>
- <input id="pulseSlider"/>
- <range-slider class="slider" @change="setFullOpacity()" min="1" :max="slotSlider" step="1" v-model="pulseSlider" v-on:input="assignEuclidean(slotSlider, pulseSlider)" ></range-slider>
- <input id="pulseSlider" value="3" />
- </div>
- </span>
- </div>
- <div class="sequencerLine">
- <div class="slot" v-for="(slot, slotid) in euclideanList" :key="slotid" :style="{ 'width': calculatePulseSize(line.sampleType) }">
- <beat :id="'slot'+slotid" :line="line" v-if="slot === 1"></beat>
- <div v-else class="emptySlot"></div>
- </div>
- </div>
- <!--<</span>-->
- <div>
- <!--<div class="control-menu" style="margin-top:5em;" :class="[{'displayControls': controlIsDisplayed}]">-->
- <div class="control-menu" style="margin-top:5em;">
- </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 {
- props: [ 'line' ],
- data() {
- // return {
- // id: line.id,
- // slotSlider: line.slotSlider,
- // pulseSlider: line.pulseSlider,
- // euclideanList: line.euclideanList,
- // controlIsDisplayed: line.controlIsDisplayed
- // };
- this.line.euclideanList = this.bjorklund(this.line.slotSlider, this.line.pulseSlider);
- return this.line;
- },
- watch: {
- 'slotSlider': function(){
- this.barIsTransparent = true;
- },
- 'pulseSlider': function(){
- this.barIsTransparent = true;
- },
- 'slotSlider': function(){
- this.barOpacity = 0.5;
- },
- 'pulseSlider': function(){
- this.barOpacity = 0.5;
- }
- },
- components: {
- RangeSlider,
- beat
- },
- methods: {
- displayControls: function (){
- this.controlIsDisplayed = true;
- },
- hideControls: function (){
- this.controlIsDisplayed = false;
- },
- setFullOpacity: function (){
- this.barOpacity = 1;
- console.log("fullOPacity");
- },
- makeFirstChild: function (){
- },
- selectSampleType: function (number){
- this.line.sampleType = number;
- console.log(number);
- },
- calculatePulseSize(i) {
- var pulseSize = ((this.sampleLengths[i]/this.line.sequenceMilliseconds)*100) + "vw";
- return pulseSize;
- },
- 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);
- }
- }
- }
- </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:flex !important;
- }
- .sequence-options{
- width:auto;
- height: 3em;
- z-index: 2;
- background-color: red;
- display: none;
- }
- .option-icon{
- width:3em;
- height: 3em;
- background:white;
- }
- .option-icon:hover{
- background-color: cadetblue;
- }
- #icon-slots{
- background-image: url("~/assets/img/squares.png");
- background-repeat: no-repeat;
- background-position: center;
- }
- #icon-euclid{
- background-image: url("~/assets/img/pixel.png");
- background-repeat: no-repeat;
- background-position: center;
- }
- #icon-sample{
- background-image: url("~/assets/img/bell.png");
- background-repeat: no-repeat;
- background-position: center;
- }
- #icon-delete{
- background-image: url("~/assets/img/close.png");
- background-repeat: no-repeat;
- background-position: center;
- }
- .options-wrapper{
- background-color: darkgoldenrod;
- width:3em;
- height: 3em;
- display:flex;
- background-image: url("~/assets/img/squares.png");
- background-repeat: no-repeat;
- background-position: center;
- z-index: 2;
- }
- .options-wrapper:hover > .control-bar > .sequence-options{
- display:block;
- position: absolute;
- margin-left:3em;
- display: flex;
- /*overflow-x: auto;*/
- }
- .sequence-bar{
- display:none;
- }
- .options-wrapper:hover > .control-bar > .sequence-options + .sequence-bar{
- display: block;
- flex:1 1 100%;
- background: blue;
- overflow-x: auto;
- position: absolute;
- width:100%;
- margin-left:15em;
- height:3em;
- }
- .options-menu{
- width:5em;
- height: 3em;
- z-index: 1;
- background-color: dimgrey;
- display: none;
- }
- /*extend button for preventing menu from disappearing accidentally on the edge*/
- .sampleType-wrapper::before {
- content: "";
- opacity: 0;
- display: block;
- width: 44px;
- height: 10px;
- position: absolute;
- top: 0px;
- left: 3px;
- }
- .sampleType-wrapper > .option-icon:not(:nth-child(1)){
- display: none;
- }
- .sampleType-wrapper:hover > .option-icon{
- display: block;
- }
- .sequencer{
- display:flex;
- }
- .sequencerLine{
- height:3em;
- /*width:100%;*/
- display:flex;
- background-color:firebrick;
- }
- .slot-wrapper{
- display:flex;
- height:3em;
- width:auto;
- background-color:firebrick;
- }
- .slot{
- flex:1 1 auto;
- background-color:beige;
- border-left:1pt solid aquamarine;
- border-right:1pt solid aquamarine;
- border-top: transparent !important;
- border-bottom: transparent !important;
- }
- .activeSlot{
- flex:1 1 auto;
- display: flex;
- flex-direction: column;
- }
- </style>
|