Fps test

dist/content/work.json

@@ -61,7 +61,7 @@
       },
       "livecase" : {
         "title": "LiveCase by Google",
-        "thumb": "/assets/images/thumbs/livecase.jpg",
+        "thumb": "/assets/images/thumbs/livecase.png",
         "agency": "Huge",
         "role": "Lead full stack engineer",
         "description": "Did it , worked on site, setup CI pipeline, loading testing and profiling, 3rd party API integrations for content moderation and companion app, 3d rendeting pipeline optimizations, custom shaders",
@@ -80,14 +80,21 @@
       },
       "playstation" : {
         "title": "First To Greatness - PS4",
-        "thumb": "/assets/images/thumbs/first-to-greatness.jpg",
+        "thumb": "/assets/images/thumbs/first-to-greatness.png",
         "agency": "",
         "description": "",
         "year": 2009
       },
       "rangerover" : {
         "title": "Race The Sun",
-        "thumb": "/assets/images/thumbs/race-the-sun.jpg",
+        "thumb": "/assets/images/thumbs/race-the-sun.png",
+        "agency": "",
+        "description": "",
+        "year": 2009
+      },
+      "x2" : {
+        "title": "x2 performance",
+        "thumb": "/assets/images/thumbs/x2.png",
         "agency": "",
         "description": "",
         "year": 2009
@@ -122,14 +129,14 @@
       },
       "fractals" : {
         "title": "Museum Tower Wall Covering",
-        "thumb": "/assets/images/thumbs/fractal.jpg",
+        "thumb": "/assets/images/thumbs/fractal.png",
         "agency": "",
         "description": "",
         "year": 2009
       },
       "newdeal" : {
         "title": " New Deal Design",
-        "thumb": "/assets/images/thumbs/ndd.jpg",
+        "thumb": "/assets/images/thumbs/ndd.png",
         "agency": "",
         "description": "",
         "year": 2009
@@ -143,21 +150,21 @@
       },
       "aro" : {
         "title": " Architecture Research Office",
-        "thumb": "/assets/images/thumbs/aro.jpg",
+        "thumb": "/assets/images/thumbs/aro.png",
         "agency": "",
         "description": "",
         "year": 2009
       },
       "kitchen" : {
         "title": "The Kitchen",
-        "thumb": "/assets/images/thumbs/kitchen.jpg",
+        "thumb": "/assets/images/thumbs/kitchen.png",
         "agency": "",
         "description": "",
         "year": 2009
       },
       "typem" : {
         "title": "Type M",
-        "thumb": "/assets/images/thumbs/typem.jpg",
+        "thumb": "/assets/images/thumbs/typem.png",
         "agency": "",
         "description": "",
         "year": 2009
@@ -171,7 +178,7 @@
       },
       "ucla" : {
         "title": " UCLA Architecture & Urban Design",
-        "thumb": "/assets/images/thumbs/ucla.jpg",
+        "thumb": "/assets/images/thumbs/ucla.png",
         "agency": "",
         "description": "",
         "year": 2009

src/components/Work/Nervous.js

@@ -1,12 +1,13 @@
 // @flow
-import { PolySynth, Synth, Frequency, FeedbackDelay } from "tone";
+import { PolySynth, Synth, Frequency, FeedbackDelay, Master } from "tone";
 
 export type NervousPoint = {|
   midi: string,
   pixelation: number
 |};
 
 type RandFunc = () => number;
+// type Gen = () => RandFunc;
 
 class Nervous {
   notes: Array<NervousPoint>;
@@ -18,18 +19,22 @@ class Nervous {
 
   constructor(detune: number) {
     this.delay = new FeedbackDelay(0.15, 0.1).toMaster();
-    this.delay.wet.value = 0.2;
+    this.delay.wet.value = 0.1;
     this.synth = new PolySynth(6, Synth, {
       oscillator: {
         partials: [0, 2, 3, 4]
       }
     }).connect(this.delay);
+    Master.set("volume", -6);
+    // this.panVol = new PanVol();
+    // this.synth.chain(this.delay, this.panVol, Master);
+
     this.currentNote = "";
     this.synth.set("detune", -100 * detune);
     this.midiMax = 100;
     this.midiMin = 36;
     this.notes = this.randomWalk();
-    // Master.mute = true;
+    this.then = new Date();
   }
 
   boxMullerRandom(): RandFunc {
@@ -123,9 +128,9 @@ class Nervous {
   }
 
   play(note: string): void {
-    this.synth.triggerRelease(this.currentNote);
-    this.currentNote = note;
-    this.synth.triggerAttack(this.currentNote);
+    // this.synth.triggerRelease(this.currentNote);
+    // this.currentNote = note;
+    this.synth.triggerAttackRelease(note, 1, undefined, 0.5);
   }
 
   stop(): void {

src/components/Work/Project.js

@@ -48,6 +48,8 @@ class ProjectInner extends React.Component<WithDispatch<OwnProps>, State> {
   nervous: Nervous;
   blip: number;
   slider: Flickity;
+  then: Date;
+  fpsInterval: number;
 
   constructor(props: WithDispatch<OwnProps>) {
     super(props);
@@ -59,6 +61,8 @@ class ProjectInner extends React.Component<WithDispatch<OwnProps>, State> {
     this.state = {
       showPixels: false
     };
+    this.then = new Date();
+    this.fpsInterval = 1000.0 / 750.0;
   }
 
   componentDidMount() {
@@ -73,6 +77,7 @@ class ProjectInner extends React.Component<WithDispatch<OwnProps>, State> {
     const transitioned: boolean =
       this.props.selectedProject !== prevProps.selectedProject;
     if (selected && transitioned && this.slider) this.slider.resize();
+    this.fpsInterval = 1000 / 10;
   }
 
   toggle() {
@@ -124,7 +129,9 @@ class ProjectInner extends React.Component<WithDispatch<OwnProps>, State> {
     if (this.counter === 0 || this.counter === this.nervous.notes.length - 1) {
       this.step = -this.step;
     }
+  }
 
+  animate() {
     // loop
     if (this.play) {
       if (this.props.selectedProject === this.props.projectId) {
@@ -135,8 +142,17 @@ class ProjectInner extends React.Component<WithDispatch<OwnProps>, State> {
           this.nervous.stop();
           return;
         }
+        this.nervousPlay();
+      } else {
+        this.raf = window.requestAnimationFrame(this.animate.bind(this));
+        this.nervousPlay();
+        // const now = Date.now();
+        // const elapsed = now - this.then;
+        // if (elapsed > this.fpsInterval) {
+        //   this.then = now - elapsed % this.fpsInterval;
+        //   this.nervousPlay();
+        // }
       }
-      this.raf = window.requestAnimationFrame(this.nervousPlay.bind(this));
     } else {
       this.nervous.stop();
       window.cancelAnimationFrame(this.raf);
@@ -157,7 +173,7 @@ class ProjectInner extends React.Component<WithDispatch<OwnProps>, State> {
     this.setState({ showPixels: true });
     if (!this.play) {
       this.play = true;
-      this.nervousPlay();
+      this.animate();
     }
   };