Pj.5s code into Processing code

p5.js Libraries
1

How do I translate the following code into processing from pj.5s?

let y
let pins = []
////////////////////////////////////////////////////////////////////////////////////////////////////
OPC.slider("pins_num", 30, 1, 100)
OPC.slider("complexity", 3, 1, 10, 1)
OPC.slider("maximumHeight", 100, 10, 100)
parameterChanged = (variableName, value) => setup()
////////////////////////////////////////////////////////////////////////////////////////////////////
setup = () => {
  createCanvas(windowWidth, windowHeight)
  strokeWeight(.5)
  y = 0
  pins.length = 0
  for (let i = 0; i < pins_num; i++) {
    pins[i] = createVector(random(width), random(height))
  }
}
draw = () => {
  if (y < height) {
    beginShape()
    for (let x = 0; x < width; x++) {
      angle = pins.reduce((sum, p) => sum + complexity * atan2(p.y - y, p.x - x), 0)
      z = map(cos(angle), -1, 1, 0, maximumHeight)
      vertex(x, y + z)
    }
    vertex(width, height)
    vertex(0, height)
    endShape(CLOSE)
    y++
  }
}
2

Hi @asymmetric,

Processing and p5js have a similar API and function signatures so translating between one and another shouldn’t be too complicated (unless you use fancy language feature either in JavaScript or Java).

The thing that might be different is if you use JavaScript libraries. You need to code it yourself or find an equivalent in Java.

What is OPC referring to?

3

2 posts were split to a new topic: Processing code into p5.js code

4

OPC refers to the OpenProcessing Configurator library:

“a helper library that allows sketches on OpenProcessing to provide a UI to play with dynamic variables in their sketches”

The closest to OPC in Processing Java would be ControlP5. Porting from one to the other would require some work.

2 Likes