Browse Source

Added Bytebeat-generator, General Update

Signed-off-by: PHENOM <thephenom1811@gmail.com>
master
PHENOM 2 years ago
parent
commit
cf9e060bcb
8 changed files with 288 additions and 26 deletions
  1. 23
    0
      .vscode/launch.json
  2. 34
    1
      layouts/default.vue
  3. 9
    6
      nuxt.config.js
  4. 8
    1
      package.json
  5. 188
    0
      pages/bytebeat.vue
  6. 0
    16
      pages/projects.vue
  7. 12
    0
      plugins/vue-chartjs.js
  8. 14
    2
      plugins/vuetify.js

+ 23
- 0
.vscode/launch.json View File

@@ -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"
}
}
]
}

+ 34
- 1
layouts/default.vue View File

@@ -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' }
],

+ 9
- 6
nuxt.config.js View File

@@ -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,
/*

+ 8
- 1
package.json View File

@@ -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",

+ 188
- 0
pages/bytebeat.vue View File

@@ -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>

+ 0
- 16
pages/projects.vue View File

@@ -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>

+ 12
- 0
plugins/vue-chartjs.js View File

@@ -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)
}
})

+ 14
- 2
plugins/vuetify.js View File

@@ -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
}
})

Loading…
Cancel
Save