Wie kann ich JavaScript-Code in Processing-Code umschreiben?

Hallo,

also ist es möglich, einen Java-Code in einen Processing-Code umzuschreiben oder besser gesagt, könnte jemand helfen? Ich bin noch sehr am Anfang, habe aber einen Code gefunden, der mir sehr gut gefällt und mit dem ich gerne ein bisschen herumprobieren würde. Nur funktioniert er eben in Processing nicht und mit Java kenne ich mich noch weniger aus, darum würde ich ihn gerne umschreiben.

So sieht das Ganze aus:

let shapes = [];
let colors = ["#ffc857", "#e9724c", "#c5283d", "#481d24", "#255f85", "#a5bccc"];

function setup() {
  createCanvas(1000, 800);
  rectMode(CENTER);
  translate(width / 2, height / 2);
  scale(1.4);
  rotate(random(PI));
  translate(-width / 2, -height / 2);
  background(random(colors));
  let seg = int(random(25, 45));
  let w = width / seg;

  for (let i = 0; i < seg; i++) {
    for (let j = 0; j < seg; j++) {
      let x = i * w;
      let y = j * w;

      if ((i + j) % 2 == 0) {
        shapes.push(createVector(x + w / 2, y + w / 2, w * 2.01));
      }
    }
  }

  shuffle(shapes, true)
  noStroke();

  for (let s of shapes) {
    let rnd = int(random(4));
    shuffle(colors, true);
    push();
    translate(s.x, s.y);
    fill(random(colors));

    if (rnd == 0)
      circle(0, 0, s.z);
    else if (rnd == 1)
      square(0, 0, s.z);
    else if (rnd == 2) {
      let n = int(random(1, 5));
      
      for (let i = 0; i < n; i++) {
        let ss = map(i, 0, n, s.z, 0);
        fill(colors[i]);
        circle(0, 0, ss);
      }
    }
    else if (rnd == 3) {
      let n = int(random(1, 10));

      for (let i = 0; i < n; i++) {
        let ss = map(i, 0, n, s.z, 0);
        fill(colors[i % colors.length]);
        square(0, 0, ss);
      }
    }

    pop();
  }
}

function draw() {
}

Answer 1

[regex9]

Das, was du da hast, ist JavaScript-Code, nicht Java. Einer Konversion in Processing sollte nichts im Wege stehen.

Hilfen dazu:

• Funktionen werden in JavaScript mit dem Schlüsselwort function eingeleitet.
• Das Schlüsselwort let stellt eine Variablendeklaration dar. Um die umzuschreiben, musst du zuvor den richtigen Typ ermitteln.
• Die eckigen Klammern sind eine Kurzschreibweise, um ein Array anzulegen.

Beispiel:

let colors = ["#ffc857", "#e9724c", "#c5283d", "#481d24", "#255f85", "#a5bccc"];

Du brauchst eine Variable, die Farbwerte in einem Array speichert. Dafür kannst du den color-Typ nutzen.

color[] colors = new color[] { #ffc857, #e9724c, #c5283d, #481d24, #255f85, #a5bccc };

• Die for-of-Schleife ist eine verkürzte Form, um über die Elemente in einem Array zu iterieren. Du kannst sie direkt in eine Iterationsschleife konvertieren.

Beispiel (JavaScript-Code):

let numbers = [ 1, 2, 3 ];

for (let number of numbers) {
  // do something ...
}

// equivalent
for (let index = 0; index < numbers.length; ++index) {
  let number = numbers[index];
  // do something ...
}

• In JavaScript sind Arrays dynamisch. Das heißt, sie können auch nachträglich noch in ihrer Größe wachsen. Die push-Methode dient dabei als Mittel, um neue Elemente an das Ende des Arrays zu hängen. In Processing kannst du das shapes-Array mit Hilfe einer ArrayList umsetzen.
• Die int-Funktion entspricht einem expliziten Typecast zu einer Ganzzahl (Integer).
• Die shuffle-Funktion ist nur in p5.js vorimplementiert. Für Processing müsstest du sie dir selbst implementieren. Man kann an dieser Stelle, so wie auch die p5.js-Implementation auf den Fisher-Yates-Shuffle-Algorithmus zurückgreifen. Das ist an der Stelle auch gleich eine gute Anfängerübung.

Alle anderen Funktionen sind, sofern ich nichts übersehen habe, gleichnamig auch in Processing vertreten. Falls du zu ihnen nochmals mehr Details einholen möchtest, nutze die Processing-Referenz.