'music working, display sort of'

foglabs · Nov 14, 2020 · 095f39e · 095f39e
1 parent 8d02ac6
commit 095f39e
Show file tree

Hide file tree

Showing 10 changed files with 289 additions and 110 deletions.
diff --git a/fuck.html b/fuck.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title></title>
+</head>
+<body>
+<div id="butt"></div>
+
+<script type="text/javascript">
+    var text = "fduck a fuyckin shit"
+    let canvas1 = document.createElement('canvas')
+    canvas1.width = 1000
+    canvas1.height = 1000
+    let context1 = canvas1.getContext('2d')
+    context1.font = "Bold 40px Arial"
+    context1.fillStyle = "rgba(0,255,255,0.95)"
+    console.log( 'text', text )
+    context1.fillText( text, 0, 50 )
+
+    document.getElementById("butt").appendChild(canvas1)
+
+
+</script>
+
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -15,7 +15,8 @@
     // a state beyond death
     CORRUPTING = 3
 
-    PLAYERHEIGHT = 0
+    // to make cam pos agree with where your eyes are (ish)
+    PLAYERHEIGHT = 0.3
     FLOOR = 0.9
 
     MOVE = 0

diff --git a/lib/Album.js b/lib/Album.js
@@ -0,0 +1,6 @@
+class Album extends Character {
+  constructor(title, urls){
+
+  }
+
+}
diff --git a/lib/Character.js b/lib/Character.js
@@ -91,6 +91,9 @@ class Character {
 
     // ignored if none 
     this.components = []
+
+    // everyones a char
+    // place.characters[ this.mesh.id ] = this
   }
 
   move(x, y, z){

diff --git a/lib/Component.js b/lib/Component.js
@@ -17,6 +17,10 @@ class Component extends Character {
     // vector3
     this.offset = offset
   }
+
+  // customAnimation(){
+  //   this.mesh.rotation.y += 0.004
+  // }
 }
 
 export { Component }
diff --git a/lib/MusicPlayer.js b/lib/MusicPlayer.js
@@ -13,38 +13,113 @@ class MusicPlayer extends Character {
     mat = new THREE.MeshPhysicalMaterial( { color: "#FFFFFF" })
     super(geo, bbox, [255,255,255], mat)
 
+    // isplaying 
+    this.playing = false
     this.currentTrack = 0
     this.urls = urls
     this.tracks = []
 
-    let url
-    for(var i=0; i<urls.length; i++){
-      url = urls[i]
 
-      // wait to actually load cause its too much up front
-      this.tracks.push( new Sound("track"+i, urls[i], 0.5, false, false, false) )
-    }
+    this.loadAlbum(this.urls)
 
     // juz do
-    console.log( 'play button' )
     let playgeo = new THREE.BoxGeometry( 0.02, 0.02, 0.02 )
-    let playmat = new THREE.MeshStandardMaterial( { color: "#ff0000" })
-    let offset = new THREE.Vector3(0,0.01,0.1)
-    this.playButton = new Component( this, offset, playgeo, [255,0,0], playmat, () => { this.playSong(this.currentTrack) } )
-    this.playButton.pushable = false
-    this.playButton.grabbable = false
+    let playmat = new THREE.MeshStandardMaterial( { color: "#00ff00" })
+    let offset = new THREE.Vector3(-0.05,0.01,0.1)
+    this.playButton = new Component( this, offset, playgeo, [0,255,0], playmat, () => { this.playSong(this.currentTrack) } )
     this.playButton.clickable = true
     scene.add(this.playButton.mesh)
-
     this.components.push( this.playButton )
+
+    let stopgeo = new THREE.BoxGeometry( 0.02, 0.02, 0.02 )
+    let stopmat = new THREE.MeshStandardMaterial( { color: "#ff0000" })
+    let stopoffset = new THREE.Vector3(0.02,0.01,0.1)
+    this.stopButton = new Component( this, stopoffset, stopgeo, [0,255,0], stopmat, () => { this.stopSong(this.currentTrack) } )
+    this.stopButton.clickable = true
+    scene.add(this.stopButton.mesh)
+    this.components.push( this.stopButton )
+
+
+    let nextgeo = new THREE.BoxGeometry( 0.02, 0.02, 0.02 )
+    let nextmat = new THREE.MeshStandardMaterial( { color: "#00ffff" })
+    let nextoffset = new THREE.Vector3(0.02,0.08,0.1)
+    this.nextButton = new Component( this, nextoffset, nextgeo, [0,255,0], nextmat, () => { this.nextTrack() } )
+    this.nextButton.clickable = true
+    scene.add(this.nextButton.mesh)
+    this.components.push( this.nextButton )
+
+    let prevgeo = new THREE.BoxGeometry( 0.02, 0.02, 0.02 )
+    let prevmat = new THREE.MeshStandardMaterial( { color: "#ffff00" })
+    let prevoffset = new THREE.Vector3(-0.05,0.08,0.1)
+    this.prevButton = new Component( this, prevoffset, prevgeo, [0,255,0], prevmat, () => { this.prevTrack() } )
+    this.prevButton.clickable = true
+    scene.add(this.prevButton.mesh)
+    this.components.push( this.prevButton )
+
+    // display
+    this.createDisplay()
+  }
+
+  createDisplay(){
+    // create a canvas element
+    let mat = this.createDisplayMat("FOG STEREO")
+    let dispOffset = new THREE.Vector3(0,0.25,0)
+    this.display = new Component(this, dispOffset, new THREE.PlaneGeometry(0.36, 0.06), [0,120,200], mat)
+    scene.add( this.display.mesh )
+
+    // place.characters[this.display.mesh.id] = this.display
+    this.components.push( this.display )    
+  }
+
+  setDisplay(text){
+    let newMat = this.createDisplayMat(text)
+    this.display.mesh.material = newMat
+  }
+
+  createDisplayMat(text){
+    let canvas1 = document.createElement('canvas')
+    canvas1.width = 360
+    canvas1.height = 60
+    let context1 = canvas1.getContext('2d')
+    context1.font = "Bold 50px Arial"
+    context1.fillStyle = "rgba(255,255,255,0.95)"
+    context1.textBaseLine = "middle"
+    console.log( 'text', text )
+    context1.fillText( text, 0, 50)
+
+    // canvas contents will be used for a texture
+    let texture1 = new THREE.CanvasTexture(canvas1) 
+    texture1.needsUpdate = true
+    // texture1.wrapS = THREE.RepeatWrapping
+    // texture1.wrapT = THREE.RepeatWrapping
+    // texture1.repeat.set(2,2)
+
+    let material1 = new THREE.MeshBasicMaterial( { map: texture1, side: THREE.DoubleSide } )
+    material1.transparent = true
+
+
+
+    return material1
+  }
+
+  loadAlbum(urls){
+    let url
+    for(var i=0; i<urls.length; i++){
+      url = urls[i]
+
+      // wait to actually load cause its too much up front
+      this.tracks.push( new Sound("track"+i, urls[i], 0.5, false, false, false) )
+    }
   }
 
   playSong(songIndex){
-    if( this.tracks[this.currentTrack].playing() && this.currentTrack != songIndex && this.tracks[songIndex] ){
-      this.tracks[this.currentTrack].stop()
+    if( this.playing && this.currentTrack != songIndex ){
+      console.log( 'stopping ', this.currentTrack )
+      this.tracks.forEach( (t) => { t.stop() } )
     }
 
     this.currentTrack = songIndex
+    console.log( 'playing ', this.currentTrack )
     if( this.tracks[this.currentTrack].loaded ){
 
       this.tracks[this.currentTrack].play()
@@ -53,24 +128,40 @@ class MusicPlayer extends Character {
       this.tracks[this.currentTrack].load()
     }
 
+    // flag this now, but might have to load first
+    this.playing = true     
+
     // now load the next one 
     let nextTrack = this.currentTrack+1
     if(this.tracks[nextTrack] && !this.tracks[nextTrack].loaded){
       this.tracks[nextTrack].load()
     }
   }
 
+  stopSong(){
+    console.log( 'stop song', this.currentTrack )
+    // if(this.playing){
+    //   this.tracks[this.currentTrack].stop()
+    //   this.playing = false
+    // }
+    this.tracks.forEach( (t) => { t.stop() } )
+    this.playing = false
+  }
+
   nextTrack(){
+    console.log( 'next track', this.currentTrack )
     this.incTrack(1)
   }
 
   prevTrack(){
+    console.log( 'prev track', this.currentTrack )
     this.incTrack(-1)
   }
 
   incTrack(inc){
     // inc looping around
     this.currentTrack = util.incInRange(this.currentTrack, inc, 0, this.tracks.length-1)
+    console.log( 'current track now inc to ', this.currentTrack )
     this.playSong(this.currentTrack)
   }
 }

diff --git a/lib/Pointer.js b/lib/Pointer.js
@@ -16,16 +16,21 @@ class Pointer extends Character {
     // mesh id aka characters[mesh id]
     this.grabbedId = null
 
-    let geo = new THREE.BoxGeometry( 0.1,0.1,0.1 )
+    let geo = new THREE.BoxGeometry( 0.05,0.05,0.05 )
     let mat = new THREE.MeshPhysicalMaterial( { color: '#0000ff', transparent: true, transmission: 0.5, reflectivity: 1, roughness: 0, clearcoat: 1.0, clearcoatRoughness: 0.1 })
 
     let offset = new THREE.Vector3(0,0,0)
     this.grabBox = new Component(this, offset, geo, [23,23,141], mat)
     this.components.push(this.grabBox)
     camGroup.add(this.grabBox.mesh)
 
+    // throwing
     this.lastPos = new THREE.Vector3(0, 0, 0)
     this.accVector = new THREE.Vector3(0,0,0)
+
+    this.componentIds = {}
+    this.componentIds[this.mesh.id] = true
+    this.componentIds[this.grabBox.mesh.id] = true
   }
 
   samplePosition(){

diff --git a/lib/RelaxingRain.js b/lib/RelaxingRain.js
@@ -41,6 +41,22 @@ class RelaxingRain extends Place {
     scene.add(spotlight)
 
 
+    // var spotlight2 = new THREE.SpotLight("#dddddd", 0.03)
+    // spotlight2.castShadow = true
+    // spotlight2.shadow.mapSize.width = 1024*4
+    // spotlight2.shadow.mapSize.height = 1024*4
+    // spotlight2.position.set(-1,1.8,0)
+    // spotlight2.lookAt(1,-1,-2)
+
+    // // light.shadow.mapSize.width = 512; // default
+    // // light.shadow.mapSize.height = 512; // default
+    // spotlight2.shadow.camera.near = 0.5; // default
+    // spotlight2.shadow.camera.far = 500; // default
+    // spotlight2.shadow.focus = 1; // default
+
+    // scene.add(spotlight2)
+
+
     // var mountainLight = new THREE.SpotLight("#bbbb00", 0.004)
     // mountainLight.castShadow = true
     // mountainLight.shadow.mapSize.width = 1024*4
@@ -444,6 +460,9 @@ class RelaxingRain extends Place {
     this.musicPlayer.move(-0.4,1.3,-0.9499999999999999)
     this.characters[this.musicPlayer.mesh.id] = this.musicPlayer
     this.characters[this.musicPlayer.playButton.mesh.id] = this.musicPlayer.playButton
+    this.characters[this.musicPlayer.stopButton.mesh.id] = this.musicPlayer.stopButton
+    this.characters[this.musicPlayer.nextButton.mesh.id] = this.musicPlayer.nextButton
+    this.characters[this.musicPlayer.prevButton.mesh.id] = this.musicPlayer.prevButton
 
     scene.add( this.musicPlayer.mesh )
   }

diff --git a/lib/Sound.js b/lib/Sound.js
@@ -95,7 +95,11 @@ class Sound extends Character {
   }
 
   stop(){
-    this.soundFile.stop()
+    // dont stop nothin
+    if(this.loaded && this.playing()){
+      console.log( 'I am stoppin ', this )
+      this.soundFile.stop()
+    }
   }
 
   handle(){