processingへの変換を教えてほしい

前提

ここに質問の内容を詳しく書いてください。
（例）
TypeScriptで●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

実現したいこと

p5.jsのコードをprocessingにしたいです

発生している問題・エラーメッセージ

Missing right curly bracket "}"
returnなどの変換がうまくできません

該当のソースコード

let setList = [-99, -99];
let handList = [-99, -99, -99, -99, -99];
let deckList = [];

let images = [];

let select_index = -1;
let idle = 0;

class Effect{
constructor(){
this.x = 0;
this.y = 0;
this.t = 0;
this.message = "";
}
}

let effectList = [];

function preload(){
// images[0] = loadImage("01.png");
// images[1] = loadImage("02.png");
// images[2] = loadImage("03.png");
// images[3] = loadImage("04.png");
}
function setup() {
createCanvas(600, 400);
initGame();
}

function draw() {
background(255, 200, 0);
idle ++;
for(let i=0; i<2; i++){
let x = 190 + i * 150;
let y = 80;
fill(255, 100);

// ハイライト
if(select_index != -1){
  if(canSet(setList[i], handList[select_index]) == 1){
    let alpha = sin(radians(frameCount * 2 % 180)); 
    fill(255, 255 * alpha);
  }
}
rect(x - 5, y - 5, 60 + 10, 80 + 10);
let card = setList[i];
renderCard(card, x, y);

}
for(let i=0; i<5; i++){
if(i == select_index){
continue;
}
let x = 70 + i * 100;
let y = 250;

// 上下アニメーション
if(select_index == -1){
  if(i == int(idle * 10 / 180) % 20 - 10){
    let angle = idle * 10 % 180;
    let rad = radians(angle);
    y += sin(rad) * -10;
  }
}
let card = handList[i];
renderCard(card, x, y);

}
let restList = [];
for(let i=0; i<deckList.length; i++){
if(deckList[i] != -99){
restList.push(deckList[i]);
}
}
for(let i=0; i<restList.length; i++){
let x = 70 + i * 4;
let y = 350;
fill(255);
rect(x, y, 60, 80);
}
if(select_index > -1){
let card = handList[select_index];
let x = mouseX - 30;
let y = mouseY - 40;
renderCard(card, x, y);
}

for(let i=0; i<effectList.length; i++){
let e = effectList[i];
e.t ++;
let alpha = 1 - e.t / 120;
if(alpha < 0){
continue;
}
textAlign(CENTER, CENTER);
textSize(24);
fill(255, 255 * alpha);
text(e.message, e.x, e.y - e.t*0.1);
}

if(isClear() == 1){
fill(0, 200);
rect(0, 0, width, height);
textAlign(CENTER, CENTER);
textSize(64);
fill(255);
text("Game Clear!", width/2, height/2);

textSize(24);
fill(255);
text("- Press Enter -", width/2, height-50);

}
if(isGameOver() == 1){
fill(0, 200);
rect(0, 0, width, height);
textAlign(CENTER, CENTER);
textSize(64);
fill(255, 100, 0);
text("Game Over.", width/2, height/2);

textSize(24);
fill(255);
text("- Press Enter -", width/2, height-50);

}
}

function keyPressed(){
if(keyCode == ENTER){
initGame();
}
}

function initGame(){
setList = [-99, -99];
handList = [-99, -99, -99, -99, -99];
deckList = [];

select_index = -1;
idle = 0;
effectList = [];

for(let i=0; i<36; i++){
deckList[i] = i;
}
for(let i=0; i<999; i++){
let from = int(random(0, deckList.length));
let to = int(random(0, deckList.length));
let cache = deckList[from];
deckList[from] = deckList[to];
deckList[to] = cache;
}
fillHandList();
}

function isClear(){
for(let i=0; i<handList.length; i++){
if(handList[i] != -99){
return 0;
}
}
return 1;
}

function fillHandList(){
for(let i=0; i<handList.length; i++){
if(handList[i] == -99){
handList[i] = drawDeck();
}
}
}

function drawDeck(){
let card = -99;
for(let i=0; i<deckList.length; i++){
if(deckList[i] > -99){
card = deckList[i];
deckList[i] = -99;
break;
}
}
return card;
}

function getType(card){
if(card == -99) return 0;
return int(card / 9) + 1
}
function getNumber(card){
if(card == -99) return 0;
return card % 9 + 1;
}

function addEffect(x, y, message){
let e = new Effect();
e.x = x;
e.y = y;
e.message = message;
effectList.push(e);
}

function renderCard(card, x, y){
if(card == -99){
return;
}
push();
let type = getType(card);
let number = getNumber(card);

stroke(200);
if(type > 0){
noStroke();
}
fill(255, 100);
if(type == 1) fill(255, 100, 50);
if(type == 2) fill(50, 200, 200);
if(type == 3) fill(200, 100, 255);
if(type == 4) fill(100, 100, 255);
rect(x, y, 60, 80);

if(type > 0){
// image(images[type-1], x, y + 20, 60, 60);
}

if(number > 0){
textAlign(CENTER, CENTER);
textSize(32);
fill(255, 200);
text(number, x + 30, y + 40);
}
pop();
}

試したこと

let やvoidの変換

補足情報（FW/ツールのバージョンなど）

TN8001

2022/07/25 21:51

このコードの出どころはドコでしょうか？

TN8001

2022/07/26 04:41

本当に質問者って「聞いてんのはこっちだろ」とばかりに、こちらからの疑問には答えていただけませんね。

行動規範の内容に同意します

回答1件

ベストアンサー

p5.jsのコードをprocessingにしたいです

慣れれば割と機械的作業なんですが、逆の場合に比べて型を入れなきゃならないのが面倒ですね。

ほぼそのままベタ移植です（細かい動作チェックはしてませんので、どっか間違いがあるかも^^;

Processing
1int[] setList = { -99, -99 };
2int[] handList = { -99, -99, -99, -99, -99 };
3int[] deckList = new int[36];
4//PImage[] images = new PImage[4];
5int select_index = -1;
6int idle = 0;
7ArrayList<Effect> effectList = new ArrayList<Effect>();
8
9class Effect {
10  int x, y, t;
11  String message;
12
13  Effect() {
14    this.x = 0;
15    this.y = 0;
16    this.t = 0;
17    this.message = "";
18  }
19}
20
21
22void setup() {
23  size(600, 400);
24  // images[0] = loadImage("01.png");
25  // images[1] = loadImage("02.png");
26  // images[2] = loadImage("03.png");
27  // images[3] = loadImage("04.png");
28
29  initGame();
30}
31
32void draw() {
33  background(255, 200, 0);
34  idle++;
35  for (int i = 0; i < 2; i++) {
36    int x = 190 + i * 150;
37    int y = 80;
38    fill(255, 100);
39
40    if (select_index != -1) {
41      if (canSet(setList[i], handList[select_index]) == 1) {
42        float alpha = sin(radians(frameCount * 2 % 180));
43        fill(255, 255 * alpha);
44      }
45    }
46    rect(x - 5, y - 5, 60 + 10, 80 + 10);
47    int card = setList[i];
48    renderCard(card, x, y);
49  }
50
51  for (int i = 0; i < 5; i++) {
52    if (i == select_index) {
53      continue;
54    }
55
56    float x = 70 + i * 100;
57    float y = 250;
58    if (select_index == -1) {
59      if (i == int(idle * 10 / 180f) % 20 - 10) {
60        int angle = idle * 10 % 180;
61        float rad = radians(angle);
62        y += sin(rad) * -10;
63      }
64    }
65
66    int card = handList[i];
67    renderCard(card, x, y);
68  }
69
70  IntList restList = new IntList();
71  for (int i = 0; i < deckList.length; i++) {
72    if (deckList[i] != -99) {
73      restList.push(deckList[i]);
74    }
75  }
76
77  for (int i = 0; i < restList.size(); i++) {
78    int x = 70 + i * 4;
79    int y = 350;
80    fill(255);
81    rect(x, y, 60, 80);
82  }
83
84  if (select_index > -1) {
85    int card = handList[select_index];
86    int x = mouseX - 30;
87    int y = mouseY - 40;
88    renderCard(card, x, y);
89  }
90
91  for (int i = 0; i < effectList.size(); i++) {
92    Effect e = effectList.get(i);
93    e.t++;
94    float alpha = 1 - e.t / 120f;
95    if (alpha < 0) {
96      continue;
97    }
98
99    textAlign(CENTER, CENTER);
100    textSize(24);
101    fill(255, 255 * alpha);
102    text(e.message, e.x, e.y - e.t * 0.1);
103  }
104
105  if (isClear() == 1) {
106    fill(0, 200);
107    rect(0, 0, width, height);
108    textAlign(CENTER, CENTER);
109    textSize(64);
110    fill(255);
111    text("Game Clear!", width / 2, height / 2);
112
113    textSize(24);
114    fill(255);
115    text("- Press Enter -", width / 2, height - 50);
116  }
117
118  if (isGameOver() == 1) {
119    fill(0, 200);
120    rect(0, 0, width, height);
121    textAlign(CENTER, CENTER);
122    textSize(64);
123    fill(255, 100, 0);
124    text("Game Over.", width / 2, height / 2);
125
126    textSize(24);
127    fill(255);
128    text("- Press Enter -", width / 2, height - 50);
129  }
130}
131
132void mousePressed() {
133  if (select_index == -1) {
134    for (int i = 0; i < 5; i++) {
135      int x = 70 + i * 100;
136      int y = 250;
137      if (mouseX > x && mouseX < x + 60) {
138        if (mouseY > y && mouseY < y + 80) {
139          select_index = i;
140        }
141      }
142    }
143  } else if (select_index > -1) {
144    for (int i = 0; i < 2; i++) {
145      int x = 190 + i * 150;
146      int y = 80;
147      int card = setList[i];
148      if (mouseX > x && mouseX < x + 60) {
149        if (mouseY > y && mouseY < y + 80) {
150          if (canSet(card, handList[select_index]) == 1) {
151            if (card != -99) {
152              String message = "Good [Same Color]";
153              if (getNumber(card) == getNumber(handList[select_index])) {
154                message = "Great! [Same Number]";
155              }
156              addEffect(x + 30, y - 30, message);
157            }
158            setList[i] = handList[select_index];
159            handList[select_index] = -99;
160            fillHandList();
161          }
162        }
163      }
164    }
165    select_index = -1;
166    idle = 0;
167  }
168}
169
170void keyPressed() {
171  if (keyCode == ENTER) {
172    initGame();
173  }
174}
175
176void initGame() {
177  setList = new int[]{ -99, -99 };
178  handList = new int[]{ -99, -99, -99, -99, -99 };
179  deckList = new int[36];
180
181  select_index = -1;
182  idle = 0;
183  effectList = new ArrayList<Effect>();
184
185  for (int i = 0; i < 36; i++) {
186    deckList[i] = i;
187  }
188  for (int i = 0; i < 999; i++) {
189    int from = int(random(0, deckList.length));
190    int to = int(random(0, deckList.length));
191    int cache = deckList[from];
192    deckList[from] = deckList[to];
193    deckList[to] = cache;
194  }
195  fillHandList();
196}
197
198int isClear() {
199  for (int i = 0; i < handList.length; i++) {
200    if (handList[i] != -99) {
201      return 0;
202    }
203  }
204  return 1;
205}
206
207int isGameOver() {
208  if (isClear() == 1) {
209    return 0;
210  }
211
212  int canCount = 0;
213  for (int i = 0; i < handList.length; i++) {
214    for (int j = 0; j < setList.length; j++) {
215      if (canSet(setList[j], handList[i]) == 1) {
216        canCount++;
217      }
218    }
219  }
220
221  if (canCount > 0) {
222    return 0;
223  }
224
225  return 1;
226}
227
228int canSet(int fromCard, int toCard) {
229  if (toCard == -99) {
230    return 0;
231  }
232  if (fromCard == -99) {
233    return 1;
234  }
235  if (getType(fromCard) == getType(toCard)) {
236    return 1;
237  }
238  if (getNumber(fromCard) == getNumber(toCard)) {
239    return 1;
240  }
241  return 0;
242}
243
244void fillHandList() {
245  for (int i = 0; i < handList.length; i++) {
246    if (handList[i] == -99) {
247      handList[i] = drawDeck();
248    }
249  }
250}
251
252int drawDeck() {
253  int card = -99;
254  for (int i = 0; i < deckList.length; i++) {
255    if (deckList[i] > -99) {
256      card = deckList[i];
257      deckList[i] = -99;
258      break;
259    }
260  }
261  return card;
262}
263
264int getType(int card) {
265  if (card == -99) return 0;
266  return int(card / 9f) + 1;
267}
268
269int getNumber(int card) {
270  if (card == -99) return 0;
271  return card % 9 + 1;
272}
273
274void addEffect(int x, int y, String message) {
275  Effect e = new Effect();
276  e.x = x;
277  e.y = y;
278  e.message = message;
279  effectList.add(e);
280}
281
282void renderCard(int card, float x, float y) {
283  if (card == -99) {
284    return;
285  }
286  push();
287  int type = getType(card);
288  int number = getNumber(card);
289
290  stroke(200);
291  if (type > 0) {
292    noStroke();
293  }
294  fill(255, 100);
295  if (type == 1) fill(255, 100, 50);
296  if (type == 2) fill(50, 200, 200);
297  if (type == 3) fill(200, 100, 255);
298  if (type == 4) fill(100, 100, 255);
299  rect(x, y, 60, 80);
300
301  if (type > 0) {
302    // image(images[type-1], x, y + 20, 60, 60);
303  }
304
305  if (number > 0) {
306    textAlign(CENTER, CENTER);
307    textSize(32);
308    fill(255, 200);
309    text(number, x + 30, y + 40);
310  }
311  pop();
312}

let やvoidの変換

わたしはOpenProcessingとかのp5.jsをJavaに移植を結構やっているんですが、普段やっている流れや気を付けるポイントをまとめてみました。

移植手順

比較的規模が小さくぱっと見のコードがきれいな場合は、いきなり移植でもいいです。

functionに型
値を返していなければvoid、返していればその型を指定する。
引数にも型
呼び出し側を見て推定する。
letやvar・constにも型
jsは整数同士の割り算も少数になるので注意深く（割り算のリテラルには、無条件でf付ける勢いでいい）
配列
使用側を見て型を推定する。
初期化部分は{}
個数が固定ならば配列、不定ならArrayListが楽。
クラス
this.の表記がある変数をフィールドに、constructorをクラスと同名に変更する。
p5.jsにしかない関数やオーバーロード
かなりある。リファレンスを見比べてどうにかなりそうならする。
どうにもなりそうになければあきらめる^^;（drawingContext等）
Reference / Processing.org
reference | p5.js
JavaScript特有の書き方
調べてください^^;
JavaScript | MDN

リファクタリング方針

規模が大きいかコードがヤバそうな場合ｗはp5.jsのまま、リファクタリングしながら移植しやすいように変更するのを勧めます。
p5.jsモードで都度動くかの確認や、devツールで値の確認等しながら進めます。

変数
宣言していない変数が唐突に出てきたりするが、きちんと宣言をする。
無駄に広いスコープになっていないか、注意深く見極める。
グローバルで1文字変数は避け、正しく命名する。
varは厄介なのでとにかくletに、constにできるところはすべてconstにする。
配列
3次元・4次元配列や大量の配列等は、クラスにまとめることを検討する（JavaScriptは配列が便利なので、何でもかんでも配列にされがち）
spliceがややこしい（いまだに覚えられない^^;
クラス
古いクラス定義(prototype)は、新しい定義（class）に変更する。
無駄フィールドがないか確認する。
メソッド定義の引数と呼び出し側の引数の数があっているか確認する。
ロジック
冗長・深いネスト・わけのわからない計算等、イケていないところは動作が確認できているうちに解消しておく。
PDEを複数立ち上げていつでも元に戻せるようにしたり、難解な部分はそこだけ抜き出してテスト用のスケッチで確認したりする。