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

Question

前提

ここに質問の内容を詳しく書いてください。
（例）
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 mousePressed(){
if(select_index == -1){
for(let i=0; i<5; i++){
let x = 70 + i * 100;
let y = 250;
if(mouseX > x && mouseX < x + 60){
if(mouseY > y && mouseY < y + 80){
select_index = i;
}
}
}
}else if(select_index > -1){
// 設置
for(let i=0; i<2; i++){
let x = 190 + i * 150;
let y = 80;
let card = setList[i];
if(mouseX > x && mouseX < x + 60){
if(mouseY > y && mouseY < y + 80){
if(canSet(card, handList[select_index]) == 1){
if(card != -99){
let message = "Good [Same Color]";
if(getNumber(card) == getNumber(handList[select_index])){
message = "Great! [Same Number]";
}
addEffect(x + 30, y - 30, message);
}
setList[i] = handList[select_index];
handList[select_index] = -99;
fillHandList();
}
}
}
}
select_index = -1;
idle = 0;
}
}

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 isGameOver(){
if(isClear() == 1){
return 0;
}
let canCount = 0;
for(let i=0; i<handList.length; i++){
for(let j=0; j<setList.length; j++){
if(canSet(setList[j], handList[i]) == 1){
canCount ++;
}
}
}
if(canCount > 0){
return 0;
}
return 1;
}

function canSet(fromCard, toCard){
if(toCard == -99){
return 0;
}
if(fromCard == -99){
return 1;
}
if(getType(fromCard) == getType(toCard)){
return 1;
}
if(getNumber(fromCard) == getNumber(toCard)){
return 1;
}
return 0;
}

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/ツールのバージョンなど）

Comments

[TN8001]

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

[TN8001]

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

Answer 1

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

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

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

int[] setList = { -99, -99 };
int[] handList = { -99, -99, -99, -99, -99 };
int[] deckList = new int[36];
//PImage[] images = new PImage[4];
int select_index = -1;
int idle = 0;
ArrayList<Effect> effectList = new ArrayList<Effect>();

class Effect {
  int x, y, t;
  String message;

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


void setup() {
  size(600, 400);
  // images[0] = loadImage("01.png");
  // images[1] = loadImage("02.png");
  // images[2] = loadImage("03.png");
  // images[3] = loadImage("04.png");

  initGame();
}

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

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

  for (int i = 0; i < 5; i++) {
    if (i == select_index) {
      continue;
    }

    float x = 70 + i * 100;
    float y = 250;
    if (select_index == -1) {
      if (i == int(idle * 10 / 180f) % 20 - 10) {
        int angle = idle * 10 % 180;
        float rad = radians(angle);
        y += sin(rad) * -10;
      }
    }

    int card = handList[i];
    renderCard(card, x, y);
  }

  IntList restList = new IntList();
  for (int i = 0; i < deckList.length; i++) {
    if (deckList[i] != -99) {
      restList.push(deckList[i]);
    }
  }

  for (int i = 0; i < restList.size(); i++) {
    int x = 70 + i * 4;
    int y = 350;
    fill(255);
    rect(x, y, 60, 80);
  }

  if (select_index > -1) {
    int card = handList[select_index];
    int x = mouseX - 30;
    int y = mouseY - 40;
    renderCard(card, x, y);
  }

  for (int i = 0; i < effectList.size(); i++) {
    Effect e = effectList.get(i);
    e.t++;
    float alpha = 1 - e.t / 120f;
    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);
  }
}

void mousePressed() {
  if (select_index == -1) {
    for (int i = 0; i < 5; i++) {
      int x = 70 + i * 100;
      int y = 250;
      if (mouseX > x && mouseX < x + 60) {
        if (mouseY > y && mouseY < y + 80) {
          select_index = i;
        }
      }
    }
  } else if (select_index > -1) {
    for (int i = 0; i < 2; i++) {
      int x = 190 + i * 150;
      int y = 80;
      int card = setList[i];
      if (mouseX > x && mouseX < x + 60) {
        if (mouseY > y && mouseY < y + 80) {
          if (canSet(card, handList[select_index]) == 1) {
            if (card != -99) {
              String message = "Good [Same Color]";
              if (getNumber(card) == getNumber(handList[select_index])) {
                message = "Great! [Same Number]";
              }
              addEffect(x + 30, y - 30, message);
            }
            setList[i] = handList[select_index];
            handList[select_index] = -99;
            fillHandList();
          }
        }
      }
    }
    select_index = -1;
    idle = 0;
  }
}

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

void initGame() {
  setList = new int[]{ -99, -99 };
  handList = new int[]{ -99, -99, -99, -99, -99 };
  deckList = new int[36];

  select_index = -1;
  idle = 0;
  effectList = new ArrayList<Effect>();

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

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

int isGameOver() {
  if (isClear() == 1) {
    return 0;
  }

  int canCount = 0;
  for (int i = 0; i < handList.length; i++) {
    for (int j = 0; j < setList.length; j++) {
      if (canSet(setList[j], handList[i]) == 1) {
        canCount++;
      }
    }
  }

  if (canCount > 0) {
    return 0;
  }

  return 1;
}

int canSet(int fromCard, int toCard) {
  if (toCard == -99) {
    return 0;
  }
  if (fromCard == -99) {
    return 1;
  }
  if (getType(fromCard) == getType(toCard)) {
    return 1;
  }
  if (getNumber(fromCard) == getNumber(toCard)) {
    return 1;
  }
  return 0;
}

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

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

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

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

void addEffect(int x, int y, String message) {
  Effect e = new Effect();
  e.x = x;
  e.y = y;
  e.message = message;
  effectList.add(e);
}

void renderCard(int card, float x, float y) {
  if (card == -99) {
    return;
  }
  push();
  int type = getType(card);
  int 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の変換

わたしは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を複数立ち上げていつでも元に戻せるようにしたり、難解な部分はそこだけ抜き出してテスト用のスケッチで確認したりする。

「これバグじゃねーの？」みたいな微妙な挙動違いとか、移植が簡単そうに見えてハマるパターンとか、やっているうちにバッドノウハウtipsが溜まっていくのが案外楽しいですｗ

Comments

[Nora]

まじでありがとうございます