Méthode Conversion Processing -> p5

Comment convertir un sketch Processing (version 1, 2 ou 3) en langage Java en un sketch p5.js en langage JavaScript?
 
(Attention: l'application Processing 3 est à la base en langage Java ("Mode Java") mais on peut installer un "Mode p5.js" qui permet en plus de programmer en langage JavaScript).

IconeProcessingPetit IconeProcessing2Petit.png IconeProcessing3Petit.pngProcessing
P5js p5.js
Reference Processing 3    
 
Sound library Processing 3
Floss Manual fr           
Java
Reference p5        
Reference JavaScript
p5.sound library    
Floss Manual fr     
JavaScript
Un convertisseur en ligne: p5jsconverter Processing to p5.js converter

  "This is a find/replace converter for turning simple Processing sketches into p5.js code."

What this converts:
int, float, String, Char, PImage, long and boolean
size
void
int [] arrayname = new int [number]
pushMatrix(), pushStyle
popMatrix, popStyle
mousePressed
frameRate
var
createCanvas
function
var arrayname = new Array(number);
push()
pop()
mouseIsPressed (but leaves mousePressed() alone)
frameRate()

A faire en plus:
var[], PFont
color machin;
 
Attention int(...) est remplacé par var(...)
Attention float(...) est remplacé par var(...)
 
Attention PVector est remplacé par var
   PVector Toto = new PVector(0,0);
 
   PVector[] Titi = new PVector[num];
        ...
Titi[i] = new PVector(0,0);
 
 
 
Police = createFont("Helvetica-Light.otf", 24);
for (int j = 0
.length()
if (str1.equals(str2))
 
keyCode == RIGHT
idem UP, DOWN, LEFT
 
img1.pixels[y*img1.width+x]











var
var machin;
 
remettre int(...)
remettre float(...)
 
mettre p5.Vector ou createVector:
   var Toto = new p5.Vector(0,0);
ou var Toto = createVector(0,0);
var Titi = new Array(num);
...
Titi[i] = new p5.Vector(0,0);
 
Supprimer var dans function Toto (var i);
 
Police = loadFont("Helvetica-Light.otf");
for (var j = 0
.length
if (str1 == str2)
 
keyCode == RIGHT_ARROW
idem UP_ARROW, DOWN_ARROW, LEFT_ARROW

img1.get(x, y)
 
Ajouter:
updatePixels(); aprés des instructions au niveau pixel.
function preload() {
  loadImage()  loadFont()  loadTable()  loadStrings()
}

Supprimer:
import ddf.minim.*;
import ddf.minim.analysis.*;
Minim minim;
 

Exemple: class
"ex_10_1_b" From
Make: Getting Started with Processing by Casey Reas and Ben Fry
JitterBug bug; //declare object

void setup(){
  size(480, 120);
  bug = new JitterBug(width/2, height/2, 20, 2.5);
}

void draw(){
  bug.move();
  bug.display();
}

class JitterBug{
  float x;
  float y;
  int diameter;
  float speed;
 
  JitterBug(float tempX, float tempY, int tempDiameter, float tempSpeed){
    x = tempX;
    y = tempY;
    diameter = tempDiameter;
    speed = tempSpeed;
  }
 
  void move(){
    x += random(-speed, speed);
    y += random(-speed, speed);
  }
 
  void display(){
    ellipse(x,y,diameter,diameter);
  }
}
var bug; // Declare object

function setup() {
  createCanvas(480, 120);
  bug = new JitterBug(width / 2, height / 2, 20, 2.5);
}

function draw() {
  bug.move();
  bug.display();
}

function JitterBug(tempX, tempY, tempDiameter, tempSpeed) {
  this.x = tempX;
  this.y = tempY;
  this.diameter = tempDiameter;
  this.speed = tempSpeed;






  this.move = function() {
    this.x += random(-this.speed, this.speed);
    this.y += random(-this.speed, this.speed);
  };

  this.display = function() {
    ellipse(this.x, this.y, this.diameter, this.diameter);
  }
}

Exemple: Audio input (Microphone etc...)
import ddf.minim.*;
Minim minim;
AudioInput in;

void setup(){
  minim = new Minim(this);
  in = minim.getLineIn();
}

void draw(){
  in.bufferSize()
  in.left.get(i)
}
minim/audioinput_class_audioinput
var micro;



function setup() {
  micro = new p5.AudioIn()
  micro.start();
}

function draw() {
  micLevel = micro.getLevel();
}

p5.AudioIn

Exemple: Pixel
loadPixels();
pixels[x + (y * width)] = color(123);
Couleur = Image.pixels[x + (y * width)];
updatePixels();
loadPixels(); // inutile ?
set(x, y, color(123));
Couleur = get(x, y);
updatePixels();


Optimisation code p5

- Eviter une image rendue transparente avec tint() qui consomme beaucoup de CPU.
Même si tint est exécuté une seule fois dans setup().
Pas de problème si l'image a été enregistré transparente en png.
Forum Processing
Problème vu avec p5.js du 1 10 2016 + Firefox 48 + MacOSX.6. (Voir Moniteur d'activité.)
Problème vu avec p5.js du 1 10 2016 + Firefox + Windows 7

- Les manipulations d'une image au niveau du pixel avec Image.get(i, j) et Image.set(i, j, Couleur) sont extrémement lentes!
 - 15000 fois plus lentes dans certain cas: get() slow for single pixel
Solution: utiliser pixels[]
Voir: https://p5js.org/reference/#/p5/get
Voir: https://p5js.org/reference/#/p5/pixels

- Voir: Optimizing p5.js Code for Performance
... et 25 life-saving tips for Processing


Liens

Transition Processing -> p5.js
Java ou Javascript?
En quoi le langage JavaScript est-il différent de Java ?
Java vs JavaScript
"Java and Javascript are similar like Car and Carpet are similar."
Java vs JavaScript: What’s the Difference?
"Java is to JavaScript as ham is to a hamster" 
Méthode Processing
Méthode Processing suite: Les Processing
p5.js Sketches



Paresys Accueil 31 1 2023     Valid HTML 4.01 Transitional Paresys Home