Added Bytebeat-generator, General Update

Signed-off-by: PHENOM <thephenom1811@gmail.com>

.vscode/launch.json

@@ -0,0 +1,23 @@
+{
+    // Verwendet IntelliSense zum Ermitteln möglicher Attribute.
+    // Zeigen Sie auf vorhandene Attribute, um die zugehörigen Beschreibungen anzuzeigen.
+    // Weitere Informationen finden Sie unter https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Debug Hare Dev",
+            "type": "node",
+            "request": "launch",
+            "protocol": "inspector",
+            "program": "${workspaceRoot}/node_modules/nuxt/bin/nuxt",
+            "stopOnEntry": false,
+            "args": ["dev"],
+            "cwd": "${workspaceRoot}",
+            "sourceMaps": true,
+            "env": {
+                "NODE_ENV": "development",
+                "DEBUG": "nuxt:*,app"
+            }
+        }
+    ]
+}

layouts/default.vue

@@ -24,6 +24,24 @@
         </v-list-tile>
       </v-list>
       <v-divider></v-divider>
+      <v-subheader inset>Projects</v-subheader>
+      <v-list>
+        <v-list-tile
+          :href="item.to"
+          :key="i"
+          v-for="(item, i) in navProjectsItems"
+          exact
+        >
+          <v-list-tile-action>
+            <v-icon v-html="item.icon"></v-icon>
+          </v-list-tile-action>
+          <v-list-tile-content>
+            <v-list-tile-title v-text="item.title"></v-list-tile-title>
+          </v-list-tile-content>
+        </v-list-tile>
+      </v-list>
+
+
       <v-subheader inset>External Services</v-subheader>
       <v-list>
         <v-list-tile
@@ -40,6 +58,18 @@
             <v-list-tile-title v-text="item.title"></v-list-tile-title>
           </v-list-tile-content>
         </v-list-tile>
+        <v-list-tile
+          href="#"
+          @click.native.stop="dialog = true"
+          exact
+        >
+          <v-list-tile-action>
+            <v-icon>mdi-minecraft</v-icon>
+          </v-list-tile-action>
+          <v-list-tile-content>
+            <v-list-tile-title>Minecraft Server</v-list-tile-title>
+          </v-list-tile-content>
+        </v-list-tile>
       </v-list>
     </v-navigation-drawer>
     <v-toolbar
@@ -142,8 +172,11 @@
         { icon: 'mdi-git', title: 'Git Server', to: gitInfo.url },
         { icon: 'mdi-discord', title: 'Discord Server', to: discordInfo.invite }
       ],
+      navProjectsItems: [
+        { icon: 'mdi-music', title: 'Bytebeat Generator', to: '/bytebeat' }
+      ],
       footerItems: [
-        { icon: 'mdi-twitter-box', title: '@RealTHEPHENOM', to: 'https://twitter.com/RealTHEPHENOM', color: 'blue' },
+        { icon: 'mdi-twitter-box', title: '@TH3PH3N0M', to: 'https://twitter.com/TH3PH3N0M', color: 'blue' },
         { icon: 'mdi-discord', title: discordInfo.handle, to: discordInfo.invite, color: 'indigo' },
         { icon: 'mdi-git', title: gitInfo.user, to: gitInfo.url, color: 'grey' }
       ],

nuxt.config.js

@@ -22,7 +22,7 @@ module.exports = {
     script: [
     ]
   },
-  plugins: ['~/plugins/vuetify.js'],
+  plugins: ['~/plugins/vuetify.js', { src: '~plugins/vue-chartjs.js', ssr: false }],
   css: [
     '~/assets/style/app.styl'
   ],
@@ -36,17 +36,20 @@ module.exports = {
   build: {
     babel: {
       plugins: [
-        ["transform-imports", {
-          "vuetify": {
-            "transform": "vuetify/es5/components/${member}",
-            "preventFullImport": true
+        ['transform-imports', {
+          'vuetify': {
+            'transform': 'vuetify/es5/components/${member}', /* eslint no-template-curly-in-string:0 */
+            'preventFullImport': true
           }
+        }],
+        ['transform-es2015-modules-commonjs', {
+          'strictMode': false
         }]
       ]
     },
     vendor: [
       '~/plugins/vuetify.js',
-      '~/plugins/vue-clipboard2'
+      '~/plugins/vue-clipboard2.js'
     ],
     extractCSS: true,
     /*

package.json

@@ -1,23 +1,30 @@
 {
-  "name": "phenomic2",
+  "name": "phenomic_net",
   "version": "1.0.0",
   "description": "Nuxt.js + Vuetify.js project",
   "author": "PHENOMICAL <thephenom1811@gmail.com>",
   "private": true,
   "scripts": {
+    "dev-debug": "node --inspect node_modules/.bin/nuxt",
     "dev": "nuxt",
     "build": "nuxt build",
     "start": "nuxt start",
     "generate": "nuxt generate"
   },
   "dependencies": {
+    "babel-plugin-transform-remove-strict-mode": "0.0.2",
+    "chart.js": "^2.7.2",
+    "chartjs-plugin-zoom": "^0.6.5",
     "nuxt": "^1.4.1",
+    "vue-chartjs": "^3.4.0",
     "vue-clipboard2": "^0.1.0",
     "vuetify": "^1.0.0"
   },
   "devDependencies": {
+    "@babel/plugin-transform-strict-mode": "^7.0.0",
     "babel-eslint": "^7.2.3",
     "babel-plugin-transform-imports": "^1.4.1",
+    "babel-preset-es2015-without-strict": "0.0.4",
     "eslint": "^4.3.0",
     "eslint-config-standard": "^10.2.1",
     "eslint-loader": "^1.9.0",

pages/bytebeat.vue

@@ -0,0 +1,188 @@
+<template>
+  <v-layout column justify-center align-left>
+    <v-flex xs12 sm8 md6>
+          <h3 class="display-3">Bytebeat Generator</h3>
+          <span class="subheading">This small tool can create music from a single JavaScript Expression.</span>
+          <v-divider class="my-3"></v-divider>
+          <v-select
+            v-model="example"
+            prepend-icon="mdi-file-music"
+            :items="examples"
+            item-text="name"
+            label="Examples"
+          >
+          </v-select>
+          <v-btn @click="loadExample(example)">Load</v-btn><v-btn>Save As...</v-btn><v-btn @click="reset()">Reset</v-btn>
+          <v-divider class="my-3"></v-divider>
+          <v-form>
+            <v-select
+              v-model="frequency"
+              prepend-icon="mdi-waves"
+              :items="frequencies"
+              label="Frequency (Hz)"
+            >
+            </v-select>
+            <v-text-field
+              v-model="duration"
+              label="Duration (seconds)"
+              placeholder="30"
+              prepend-icon="timer"
+            ></v-text-field>
+            <v-text-field
+              v-model="ft"
+              label="JavaScript function (t)="
+              value='w=t>>9,k=32,m=2048,a=1-t/m%1,d=(14*t*t^t)%m*a,y=[3,3,4.7,2][p=w/k&3]*t/4,h="IQNNNN!!]]!Q!IW]WQNN??!!W]WQNNN?".charCodeAt(w/2&15|p/3<<4)/33*t-t,s=y*.98%80+y%80+(w>>7&&a*((5*t%m*a&128)*(0x53232323>>w/4&1)+(d&127)*(0xa444c444>>w/4&1)*1.5+(d*w&1)+(h%k+h*1.99%k+h*.49%k+h*.97%k-64)*(4-a-a))),s*s>>14?127:s'
+              hint="The variable t determines how the function behaves"
+            ></v-text-field>
+            <v-btn @click="generate()">Generate</v-btn>
+            <v-slider
+              label="Time"
+              v-model="runTime"
+              :max="duration"
+            ></v-slider>
+            <v-slider
+              v-model="volume"
+              v-on:input="setVolume"
+              label="Volume"
+              append-icon="volume_up"
+              prepend-icon="volume_down"
+            ></v-slider>
+            <v-btn-toggle v-model="playBtn" multiple>
+              <v-btn flat  @click="play()">
+                <v-icon>mdi-play-pause</v-icon>
+              </v-btn>
+            </v-btn-toggle>
+            <v-btn-toggle v-model="muteBtn" multiple>
+              <v-btn flat @click="mute()">
+                <v-icon>mdi-volume-off</v-icon>
+              </v-btn>
+            </v-btn-toggle>
+        </v-form>
+    </v-flex>
+  </v-layout>
+</template>
+<script>
+/* eslint no-eval: 0 */
+/* eslint no-debugger: 0 */
+export default {
+  data: () => ({
+    examples: [
+      {
+        name: 'Empty',
+        frequency: '8000',
+        duration: '30',
+        expression: ''
+      },
+      {
+        name: 'Chaos Theory',
+        frequency: '8000',
+        duration: '30',
+        expression: 'w=t>>9,k=32,m=2048,a=1-t/m%1,d=(14*t*t^t)%m*a,y=[3,3,4.7,2][p=w/k&3]*t/4,h="IQNNNN!!]]!Q!IW]WQNN??!!W]WQNNN?".charCodeAt(w/2&15|p/3<<4)/33*t-t,s=y*.98%80+y%80+(w>>7&&a*((5*t%m*a&128)*(0x53232323>>w/4&1)+(d&127)*(0xa444c444>>w/4&1)*1.5+(d*w&1)+(h%k+h*1.99%k+h*.49%k+h*.97%k-64)*(4-a-a))),s*s>>14?127:s'
+      },
+      {
+        name: 'Dante\'s Inferno',
+        frequency: '8000',
+        duration: '30',
+        expression: '((t*(t>>12)&(201*t/100)&(199*t/100))&(t*(t>>14)&(t*301/100)&(t*399/100)))+((t*(t>>16)&(t*202/100)&(t*198/100))-(t*(t>>17)&(t*302/100)&(t*298/100)))'
+      }
+    ],
+    ft: '',
+    example: '',
+    duration: 30,
+    runTime: 'Jew',
+    frequency: 8000,
+    playBtn: [],
+    muteBtn: [],
+    frequencies: ['8000', '11025', '16000', '22050', '32000', '37800', '44056', '44100', '47250', '48000', '50000', '50400', '88200', '96000', '176400', '192000'],
+    audioCtx: '',
+    source: '',
+    gainNode: '',
+    volume: 50,
+    sampleBuffer: []
+  }),
+  methods: {
+    loadExample (example) {
+      this.runTime = 0
+      this.duration = example.duration
+      this.frequency = example.frequency
+      this.ft = example.expression
+    },
+    generateMusicArray () {
+      this.sampleBuffer = []
+      let f
+      eval('f = function (t) { return ' + this.ft + '}')
+      for (let t = 0; t < this.frequency * this.duration; t++) {
+        let sample = f(t)
+        sample = (sample & 0xff) * 256
+        if (sample < 0) sample = 0
+        if (sample > 65535) sample = 65535
+        this.sampleBuffer.push(sample / 65535)
+      }
+    },
+    generate () {
+      this.audioCtx.suspend()
+      if (this.playBtn.length === 1) {
+        this.pause()
+        this.playBtn = []
+      }
+      this.source = this.audioCtx.createBufferSource()
+      this.source.onended = (event) => {
+        this.audioCtx.suspend()
+        this.playBtn = []
+        this.generate()
+      }
+      this.generateMusicArray()
+      let audioBuffer = this.audioCtx.createBuffer(2, this.frequency * this.duration, this.frequency)
+      for (let channel = 0; channel < audioBuffer.numberOfChannels; channel++) {
+        let channelBuffer = audioBuffer.getChannelData(channel)
+        for (let i = 0; i < audioBuffer.length; i++) {
+          channelBuffer[i] = this.sampleBuffer[i]
+        }
+      }
+      this.source.buffer = audioBuffer
+      this.source.connect(this.gainNode)
+      this.source.start(0)
+    },
+    play () {
+      if (!this.source.buffer) {
+        this.generate()
+      }
+      this.pause()
+    },
+    pause () {
+      if (this.audioCtx.state === 'running') {
+        this.audioCtx.suspend()
+      } else if (this.audioCtx.state === 'suspended') {
+        this.audioCtx.resume()
+      }
+    },
+    mute () {
+      if (this.muteBtn.length === 0) {
+        this.gainNode.gain.value = 0
+      } else {
+        this.gainNode.gain.value = this.volume / 100.0
+      }
+    },
+    reset () {
+      this.example = this.examples[0]
+      this.loadExample(this.example)
+    },
+    setVolume (something) {
+      this.muteBtn = []
+      this.gainNode.gain.value = something / 100.0
+    }
+
+  },
+  mounted () {
+    //  Load Example
+    this.example = this.examples[0]
+    this.loadExample(this.example)
+    if (process.browser) {
+      this.audioCtx = new (window.AudioContext || window.webkitAudioContext)()
+      this.audioCtx.suspend()
+      this.gainNode = this.audioCtx.createGain()
+      this.gainNode.connect(this.audioCtx.destination)
+    }
+  }
+}
+</script>

pages/projects.vue

@@ -1,16 +0,0 @@
-<template>
-  <v-layout column justify-center align-center>
-    <v-flex xs12 sm8 md6>
-      <v-jumbotron>
-        <v-container fill-height>
-          <v-layout align-center>
-            <v-flex>
-              <h3 class="display-3">Featured Projects</h3>
-              <span class="subheading">More content will follow soon</span>
-            </v-flex>
-          </v-layout>
-        </v-container>
-      </v-jumbotron>
-    </v-flex>
-  </v-layout>
-</template>

plugins/vue-chartjs.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import { Line } from 'vue-chartjs'
+import zoomPlugin from 'chartjs-plugin-zoom'
+
+Vue.component('LineChart', {
+  extends: Line,
+  props: ['data', 'options'],
+  mounted () {
+    this.addPlugin(zoomPlugin)
+    this.renderChart(this.data, this.options)
+  }
+})

plugins/vuetify.js

@@ -15,7 +15,13 @@ import {
   VSnackbar,
   VJumbotron,
   VSubheader,
-  VDivider
+  VDivider,
+  VSelect,
+  VTooltip,
+  VTextField,
+  VBtnToggle,
+  VSlider,
+  VForm
 } from 'vuetify'
 
 Vue.use(Vuetify, {
@@ -34,6 +40,12 @@ Vue.use(Vuetify, {
     VSnackbar,
     VJumbotron,
     VSubheader,
-    VDivider
+    VDivider,
+    VSelect,
+    VTooltip,
+    VTextField,
+    VBtnToggle,
+    VSlider,
+    VForm
   }
 })