processing.jsメモ

  • アニメーションをする場合には下記のコードをprocessing.jsと共に読み込むと便利
    • processing.init.js
      if(window.addEventListener){
        window.addEventListener("load",function(){
          var scripts=document.getElementsByTagName("script");
          for(var i=0;i<scripts.length;i++){
            if(scripts[i].type=="application/processing"){
              var src=scripts[i].src,canvas=scripts[i].nextSibling;if(src&&src.indexOf("#")){
                canvas=document.getElementById(src.substr(src.indexOf("#")+1));
            }else{
              while(canvas&&canvas.nodeName.toUpperCase()!="CANVAS")canvas=canvas.nextSibling;
            }
            if(canvas){Processing(canvas,scripts[i].text);}
            }
          }
        },false);
      }

cakephpでのprocessing.js使用

  • 該当のコントローラ内でjshelper利用を宣言
public $helpers = array('Html','Ajax','Javascript');
  • 該当のviewに下記を記述
    • index.ctp
      <?php
      echo $javascript->link('prototype');
      echo $javascript->link('processing');
      echo $javascript->link('processing.init');
      ?>
  • 実際にはbody内に記述される
  • viewの行頭に書くこと
  • index.ctpの続き
    <script type="text/javascript">
    function test1() {
        var element = $('div1');
        alert(element.innerHTML);
    }
    
    function test2() {
        var elements = $('div1', 'div2');
        for (var i=0; i<elements.length; i++) {
            alert(elements[i].innerHTML);
        }
    }
    </script>
    
    以下、Prototype.jsの読み込み
    <div id="div1">DIV1の中身</div>
    <div id="div2">DIV2の中身</div>
    
    <button onclick="test1()">test1</button>
    <button onclick="test2()">test2</button>
  • と、ここまではprototype.jsのサンプル
  • index.ctpの続き
    <?php
    $rectWidth=30;
    echo "<script type=application/processing>";
    echo "float rectWidth = ".$rectWidth.";";
    echo "float rectHeight = 50.0;";
    echo "int X, Y;";
    echo "int nX, nY;";
    echo "int delay = 16;";
    
    ?>
    void setup() {
      size(200, 200);
      strokeWeight(10);
      frameRate(15);
      X = width / 2;
      Y = width / 2;
      nX = X;
      nY = Y;
    }
    
    void draw() {
      rectWidth = rectWidth + sin(frameCount / 4);
      rectHeight = rectHeight + sin(frameCount / 4);
      X += (nX - X) / delay;
      Y += (nY - Y) / delay;
      background(#4169E1);
      fill(#32CD32);
      stroke(255);
      rect(X, Y, rectWidth, rectHeight);
    }
    
    void mouseMoved(){
      nX = mouseX;
      nY = mouseY;
    }
    </script>
    
    <canvas width="200px" height="200px"></canvas>
    
    以下略
  • echoでjavascriptコードを出力する(上数行分)
  • canvasはdivで囲わない

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2016-09-22 (木) 13:14:05 (1730d)