JSONObject json;

void setup() {
  size(240, 80);
   //配列形式のデータはJSONArray形式にて取り扱う。
  JSONArray json = loadJSONArray("./data.json");
  println(json);

  for(int i = 0; i < json.size(); i++) {
    //JSONArray形式から要素を引っ張り出したい時はJSONObject形式にする。
    JSONObject item = json.getJSONObject(i);
    //各データをパース
    int id = item.getInt("id");
    String species = item.getString("species");
    String name = item.getString("name");
    
    //表示
    fill(0, 102, 153);
    text(id + ", " + species + ", " + name, 10, 10 + 20*i);
  }
}

f:id:shuzo_kino:20191019031906p:plain

2019-10-17

Processing環境のJS移植 p5.js を使ってみる

processing javascript

p5.jsはprosessingのチームが協力して作っている、ProcessingのJS移植です。
一部関数の取り扱いが違いますが、概ねProcessingと同じ感じで開発ができます。

実際のところ

公式のWEBエディタを用いてProcessingのサンプル
Storing Inputを動かしてみます。

p5.js Web Editor

var num = 60;
var mx = new Float32Array(num);
var my = new Float32Array(num);

function setup() {
  createCanvas(480, 360);
  noStroke();
  fill(255, 153); 
}

function draw() {
  background(51); 
  
  // Cycle through the array, using a different entry on each frame. 
  // Using modulo (%) like this is faster than moving all the values over.
  var which = frameCount % num;
  mx[which] = mouseX;
  my[which] = mouseY;
  
  for (var i = 0; i < num; i++) {
    // which+1 is the smallest (the oldest in the array)
    var index = (which+1 + i) % num;
    ellipse(mx[index], my[index], i, i);
  }
}

レンダリングすると、こんな感じ。
ちゃんと軌跡がでてますね。
f:id:shuzo_kino:20191017233158p:plain

Processing(Java)から移植する際にしたこと

size関数をcreateCanvas関数に変更
型宣言の変更。*1

ライブラリ群

ライブラリ群をみると、やはりJSベースとあってWEB系と親和性の高いものが揃っています。
JSONやXMLのパーサーやDOMの操作、HTTPのGET/POSTがあるのは地味に嬉しいですね。

参考もと

*1:筆者はクソザコなのでjavascriptのfloatの配列をはじめて知りました

2019-10-16

camera関数で視点を変える

processing

Processingの圧倒的な強みに、三次元表示と視点変更があります。

実際のところ

  
void setup() {
  size(400, 400, P3D);
  frameRate(30);
}

void draw() {
  background(204);

  camera(100, 0,100,
          0,0,0,
          0,1,0);
  text(frameRate, 10, 10);
  fill(50);
  text(frameCount, 10, 40);
  fill(50);
  println(frameRate);
}

これをレンダリングすると、こんな感じに。
f:id:shuzo_kino:20191016005415p:plain

参考もと

camera() \ Language (API) \ Processing 3+

2019-10-15

processingのフレームレートを設定する

processing

frameRate関数で調整できます。
fps単位なので、60でテレビなみ、120fpsでヌルヌル動く感じですね。
10fpsだとカクついて見えます。

パラメーターとしてはframeRate変数に格納されています。

実際のところ

  
void setup() {
  frameRate(30);
}

void draw() {
  background(0xff);
  text(frameRate, 10, 10);
  fill(50);
  text(frameCount, 10, 40);
  fill(50);
  println(frameRate);
}

f:id:shuzo_kino:20191016001730p:plain