最近、OpenProcessingに作品を載せてみたいなと思ったのでProcessingで作った作品を
p5.jsに書き換えてみました。
p5.jsとはProcessing(java)をjavascriptで書けるようにしたライブラリです。
Web上で作品を作ってみんなに見てもらうならp5.jsの方が適していると思います。
僕は仕事でjavaを使っているので、Processingの方で作品を作っていましたが、
javascriptも書き方が似ている部分があったりするので割と入りやすかった印象です。
■Processingとp5.jsの違い
以下が初めてp5.jsで制作した作品のソースコードです。
Processingからp5.jsに書き換えた時に気になった点を記載していきます。
var total = 390;
var count = 0;
var parray = [];
//①
function setup() {
frameRate(1000);
createCanvas(740,600); //②
background(51,70,76);
pixelDensity(3.0);
//雪の結晶の形に粒子を配置 ③
for(let i = 0;i < 150;i += 20){
for(let j = 30;j < total+30;j += 60){
let cosx = width/2+i*cos(radians(j));
let siny = height/2+i*sin(radians(j));
parray.push(new Snow(cosx,siny));
for(let k = 0;k < 50;k += 4){
for(let l = 0;l < total;l += 30){
let cosx2 = cosx+k*cos(radians(l));
let siny2 = siny+k*sin(radians(l));
parray.push(new Snow(cosx2,siny2));
}
}
}
}
}
//①
function draw() {
background(51,70,76);
for(let i = 0;i < parray.length;i++){
stroke(255,255,255,250-count);
parray[i].checkEdge();
parray[i].update();
parray[i].display();
}
count++;
}
//雪の粒子クラス
class Snow{
//④
constructor(x,y){
this.location = createVector(x,y);//⑥
this.acceleration = createVector(0,0.03);
this.velocity = createVector(random(-1,1),random(1));
}
//⑤
update(){
this.velocity.add(this.acceleration);
this.location.add(this.velocity);
}
display(){
strokeWeight(1);
point(this.location.x,this.location.y);
}
checkEdge(){
if(this.location.x > width){
this.location.x = width;
this.velocity.x *= -1;
}else if(this.location.x < 0){
this.velocity.x *= -1;
this.location.x = 0;
}
if(this.location.y > 580){
this.velocity.y *= -0.1;
}else if(this.location.y < 0){
this.velocity.y *= -1;
this.location.y = 0;
}
}
}
■setup関数とdraw関数の呼び出しの際はvoidをfunctionに書き換える
//p5.jsのソースコード①で使用
void setup() → function setup()
void draw() → function draw()
■キャンバスのサイズ設定の際はsize関数をcreateCanvasに書き換える
//p5.jsのソースコード②で使用
size() → createCanvas()
■p5.jsではArrayListが使用できないため、配列を使用する
javaにはArrayListという要素を簡単に追加、削除したりできる配列のような機能があり、要素の数を可変にすることができます。
最初に要素の数がいくつになるかわからない場合にも使用できるところが便利です。
javascriptにはArrayListがないのですが、要素を簡単に追加、削除できる関数があるので
こちらを使用します。
//空の配列を定義
var array = [];
//要素の一番最後に値を格納する。p5.jsのソースコード③で使用
array.push(num);
■コンストラクタ名はクラス名ではなくconstructor()となる
javaではコンストラクタはクラス名と同一でしたが、javascriptの場合は、
constructa()と記載します。
また、javascriptはメンバ変数をコンストラクタの中でしか記載できないので、
javaに慣れている人だと違和感があると思います。
javaのコンストラクタ
Class Processing{
//メンバ変数
let num;
let num2;
//コンストラクタ
Processing(let arg , let arg2){
num = arg;
num2 = arg2
}
}
javascriptのコンストラクタ
Class Processing{
//コンストラクタ p5.jsのソースコード④で使用
constructa(let arg , let arg2){
this.num = arg;
this.num2 = arg2
}
}
■クラス内で関数を定義する際に戻り値の型を指定しない
javaの関数定義
Class Processing{
//関数の定義 voidを記述
void exampleMethod(){
ellipse(x,y,size,size);
}
}
javascriptの関数定義
Class Processing{
//関数の定義 p5.jsのソースコード⑤で使用
exampleMethod(){
ellipse(x,y,size,size);
}
}
■メンバ変数の宣言時はthis演算子を使う
javascriptはメンバ変数宣言時に「this」演算子を使って宣言します。
thisは自身のオブジェクトのことを指すので、下記のソースコードを例にすると
インスタンス化する時に引数に指定した値を自身のオブジェクトのメンバ変数に代入するという意味合いになります。
javascriptのコンストラクタ
Class Processing{
//コンストラクタ p5.jsのソースコード⑥で使用
constructa(let arg , let arg2){
//this演算子
this.num = arg;
this.num2 = arg2
}
}以上がProcessingからp5.jsに書き換えた時に気になった点です。
Processingでコーディングをする時に使用する頻度の高い部分を中心記載したので、
Processingからp5.jsにデビューする人にとってお役に立てるかなと思います。
最後まで読んでいただきありがとうございました！
Comments