在網頁上發表processing寫的東西

processor

有二種方法，但都要有 processing.js 在同個目錄，如果有圖檔的話，也要放在同個目錄下。

一是直接用 .pde，也要把 .pde檔放在同目錄中，然後在網頁中寫

<script type="text/javascript" src="processing.js"></script>
<canvas width="xxx" height="xxx" data-processing-sources="my.pde"></canvas>


二是直接把 .pde的內容寫在網頁上當成 javascripts來用，如下：


<script src="processing.js"></script>
<script type="text/processing" data-processing-target="mycanvas">

這裡就是 processing 的碼，和 .pde裡寫的一樣。


</script>
<canvas id="mycanvas"></canvas>


但並非百分之百都可以移植到網頁上，有試過不行的，但大都可以順利執行。
processing.js在 processing.org 可下載。

enter

如果要加入音效，還要多加一個 minim.js ，而在 .pde內則需要 import minim.js; ，但在電腦上則是 import ddf.minim.*;
這裡附上網上找到的 minim.js 但本來只能輸出 ogg 和 mp3 ，我改成輸出 wav 和 mp3 檔的。

/**
* Minim-emulation code by Daniel Hodgin
*/

// wrap the P5 Minim sound library classes
function Minim() {
  this.loadFile = function (str) {
    return new AudioPlayer(str);
  }
}

// Browser Audio API
function AudioPlayer(str) {
  var loaded = false;
  var looping = false;

  if (!!document.createElement('audio').canPlayType) {
    var audio = document.createElement('audio');
    audio.addEventListener('ended', function () {
      if (looping) {
        this.currentTime = 0;
        this.play();
      }
    }, false);
    audio.preload = 'auto';
    audio.autobuffer = true;
    if (canPlayWav()) {
      audio.src = str.split(".")[0] + ".wav";
    } else if (canPlayMp3()) {
      audio.src = str;
    }
    loaded = true;
  }
  this.play = function () {
    if (!loaded) {
      var local = this;
      setTimeout(function() { local.play(); }, 50);
      return;
    }
    audio.play();
  };
  this.loop = function () {
    if (!loaded) {
      var local = this;
      setTimeout(function() { local.loop(); }, 50);
      return;
    }
    //audio.loop = 'loop';
    looping = true;
    audio.play();
  };
  this.pause = function () {
    if (!loaded) {
      return;
    }
    audio.pause();
  };
  this.rewind = function () {
    if (!loaded) {
      return;
    }
    // rewind the sound to start
    if(audio.currentTime) {
      audio.currentTime = 0;
    }
  };
  this.position = function() {
    if (!loaded) {
      return -1;
    }
    if(audio.currentTime) {
      return audio.currentTime * 1000;
    }
    return -1;
  };
  this.cue = function(position) {
    if (!loaded) {
      return;
    }
    if(audio.currentTime) {
      audio.currentTime = position / 1000;
    }
  };
  this.mute = function() {
    audio.volume = 0.0;
  };
  this.unmute = function() {
    audio.volume = 1.0;
  };
}

function canPlayWav() {
  var a = document.createElement('audio');
  return !!(a.canPlayType && a.canPlayType('audio/wav; codecs="vorbis"').replace(/no/, ''));
}

function canPlayMp3() {
  var a = document.createElement('audio');
  return !!(a.canPlayType && a.canPlayType('audio/mp3;').replace(/no/, ''));
}