vibertthio / beact Goto Github PK

現在錄音的key是用過了幾秒去存的，所以換速度之後，播放就會亂掉。

Probable Solution

• 錄音時一樣存過了幾秒，但多存一個欄位：當時的bpm。播放record時自動改bpm，播放結束再改回來。

we have to update the function of it!

在沒有輸入 title 的情況下試圖 update 或 save 時，希望能在Title的輸入欄下跳出暫時性的紅字警告

https://github.com/cesarandreu/react-window-resize-listener

先拿掉

剛剛發現，有些 render order 跟我預期的差很多。
之後找到是 resize 的時順序不一樣所造成的結果。

在 matrix 開始消失的時間前後，整個動畫的 framerate 變得相當的低，甚至有種快要當機的感覺。但是只要沒有變化，不管是 matrix 存在或是消失，都不會有這樣的問題。
我推論有幾個可能，包括：

1. svg render 的效率不好，所以導致整體效能都非常的低。
2. 偵測滑鼠動態的寫在 src/components/Matrix.js 這個檔案裡面，使用的是 window 這個 global 物件。並在其上加入太多 event listener 導致瞬間瀏覽器跑不動。

相應的解決辦法就是：

1. 將 two.js 的 core 換成最新的 library，需要去動到 webpack 的設定，所以需要小心地檢查。還有檢查舊有的動畫之相容性。
2. 換一種偵測的方式，並且把 listener 限縮到只有滑鼠的動作偵測而已。盡量不要使用 window 這個物件直接掛上 listener，去找 react 有效的方式去偵測。

1. 我將 project 先 clone 一份到 local，取名叫 beact-demo。
2. 在 deploy 前有先 build bundle.js 到 /public，接著把 dev dependencies 中不必要的內容清掉，需要的（babel、nodemon、react-hot-loader）移到 dependencies 去，然後 commit。會這麼做主因是前一次在做 Blog 的時候，發現如果把一些 run script 會用到的東西放在 dev dependencies 會造成 deploy的 error。以下是當前的 package.json：

{
  "name": "beact",
  "version": "0.0.0",
  "description": "making audio/visual with react and tone.js",
  "main": "''",
  "scripts": {
    "start": "nodemon --exec babel-node server/server.js --ignore public/"
  },
  "author": "Vibert Thio",
  "license": "MIT",
  "dependencies": {
    "@tweenjs/tween.js": "^16.7.0",
    "axios": "^0.16.2",
    "body-parser": "^1.17.2",
    "express": "^4.15.3",
    "keymaster": "^1.6.2",
    "lodash": "^4.17.4",
    "material-ui": "^0.18.3",
    "mongodb": "^2.2.27",
    "mongoose": "^4.10.3",
    "node-sass": "^4.3.0",
    "prop-types": "^15.5.10",
    "react": "15.4.2",
    "react-dom": "15.4.2",
    "react-tap-event-plugin": "^2.0.1",
    "react-window-resize-listener": "^1.1.0",
    "sass-loader": "^6.0.2",
    "tone": "^0.10.0",
    "two.js": "github:vibertthio/two.js#dev",
    "uuid": "^3.0.1",
    "babel-cli": "^6.24.1",
    "babel-loader": "^6.3.2",
    "babel-plugin-transform-class-properties": "^6.22.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-es2015": "6.22.0",
    "babel-preset-react": "^6.23.0",
    "babel-runtime": "^6.22.0",
    "nodemon": "^1.11.0",
    "react-hot-loader": "^3.0.0-beta.6"
  }
}

3. Deploy 到 Heroku

heroku create
heroku addons:create mongolab:sandbox
git push heroku master
heroku open

此時顯示 cannot GET，但 heroku logs 沒發現 error。

試著載入內建的pattern，建立了renderPatterns()和playPattern()，前者負責把所有的Patterns列成會被onTouchTap觸發playPattern()的list，後者則會在被觸發時setState。

但結果只有圖像會被改變，聲音卻不會變。

因為切換音源的方式沒有做 callback ，所以現在都會跑出 error。

現在 master 跟 heroku 之間 dependencies 已經有一點點差異，因為之前 Tween.js 的新版本 webpack 時會壞掉。所以記得要更新 heroku 的 package.json 以免 deploy 失敗。

• When the chain is playing, you press spacebar to pause, and you press it again. The sequencer continues to play the same chain item again. But it should continues from wherever it pause.

• Recorder's sequencer performs the same as the above-mentioned type.

1. remove js doc
2. use prettier

    const origin = { x: two.width * 0.5, y: two.height * 1.5 };
    const destIn = { y: two.height * 0.5 };
    const destOut = { y: two.height * -0.5 };

    /**
     * [setDirection description]
     */
    function setDirection() {
      const direction = (Math.random() > 0.5);
      origin.x = two.width * 0.5;
      origin.y = two.height * (direction ? 1.5 : -0.5);
      destIn.y = two.height * 0.5;
      destOut.y = two.height * (direction ? -0.5 : 1.5);
    }

    setup() {
        ...
    }

    let { playing, shape, aniIn, aniOut } = setup();

可以把 origin, destIn, destOut 的設定放到 setup 裡面去統一輸出，這樣架構好像比較單純。

1: Animation.js

const setAnimation = (index, set, animation) => {
    const i = index % (set.length);     // 我懂了，切換動畫時index會一直加，超過的index讓他重頭算起
    set[i].forEach((s) => {
      const opt = s.options ? s.options : [];
      const param = [Two, two, TWEEN, colors, animation];
      s.animation(...param, ...opt);
    });
  };
  const setSequencerAnimations = () => {
    sequencerAnimations.splice(0, sequencerAnimations.length);   // 我好像知道了，先不用回答
    setAnimation(
      currentSequencerAnimationsIndex,
      sequencerAnimationsSet,
      sequencerAnimations,
    );
  };
  const setKeyAnimation = () => {
    keyAnimations.splice(0, keyAnimations.length);  // 我好像知道了，先不用回答
    setAnimation(
      currentKeyAnimationsIndex,
      keyAnimationsSet,
      keyAnimations,
    );
  };

2 config.js

what does this line mean?

export const nodeEnv = env.NODE_ENV || 'development';

好像都沒用到nodeEnv這個東西？

two.js 原本 build 並無法進入直接使用 webpack 包裝，因為使用 underscore, backbone 等功能並且有 global variable 的問題。
所以我先使用了一個 npm 沒有認證的 dependency，是另外一位開發者先寫好的 monkey-patch。
使得有可能在下載的時候會造成 npm 停滯，完全沒有 console 訊息的問題。

目前按了exit play record button之後animation還是會繼續播完
邏輯是在audio.js最後那邊，我在playRecord用Transport.schedule來設定接下來要播的動畫
然後react端按下按了exit play record button後會觸發keyboard的clearSchedule函數，這函數理論上要把這些剩餘的預設動畫清空。
但是我用的方法Transport.cancel([time]); 不知為何會當掉，目前是comment掉的狀。

update Chain的時候希望能讓chainlist裡頭被update的chainElement閃一下（旁邊有打勾的那個）
update Pattern同理。