How to convert a phrase from javascript to processing

Althalus7

Hi everyone, I am translating a working code for research project and I need to take this phrase from javascript to processing. Any help would be greatly appreciated thank you.

Bristle.prototype.update = function(newPosition) {
  var i, pos, previousPos, ang, length;

  // Set the first position to the provided position
  pos = this.positions[0];
  pos.x = newPosition.x;
  pos.y = newPosition.y;
  previousPos = pos;

  // Update the other positions
  for (i = 1; i < this.nPositions; i++) {
    pos = this.positions[i];
    length = this.lengths[i];
    ang = p.atan2(previousPos.y - pos.y, previousPos.x - pos.x);
    pos.x = previousPos.x - length * Math.cos(ang);
    pos.y = previousPos.y - length * Math.sin(ang);
    previousPos = pos;
  }
};

G_D

It is unclear is what this code is intended to do (e.g. it is clearly part of a broader project). It seems like it is designed to move something (position A), and then move other things in relation to that new position A. Rather than trying to rewrite a fragment of code, you are probably better off trying to explain the overall program flow (if you can post a working link, or show with screenshots etc that would probably help) From the look of it, this function is relying on separate arrays to store positions, but those aren't described in the code above.

Depending on what you are trying to do, it may be easier to create a class rather than simply rewriting a function.

Althalus7

http://jagracar.com/sketches/sourceCode/oilPainting.js source code http://jagracar.com/sketches/oilPainting.php working link

Althalus7

This is the class it is from

function Bristle(nParts, initLength, deltaLength, initThickness, deltaThickness) {
        this.nPositions = nParts + 1;
        this.positions = [];
        this.lengths = [];
        this.thicknesses = [];

        // Fill the arrays
        var i;

        for (i = 0; i < this.nPositions; i++) {
            this.positions[i] = p.createVector(0, 0);
            this.lengths[i] = Math.max(1, initLength - i * deltaLength);
            this.thicknesses[i] = Math.max(0.1, initThickness - i * deltaThickness);
        }
    }

    //
    // Sets all the bristle elements to a given position
    //
    Bristle.prototype.init = function (newPosition) {
        var i, pos;

        for (i = 0; i < this.nPositions; i++) {
            pos = this.positions[i];
            pos.x = newPosition.x;
            pos.y = newPosition.y;
        }
    };

    //
    // Updates the position of the bristle elements
    //
    Bristle.prototype.update = function (newPosition) {
        var i, pos, previousPos, ang, length;

        // Set the first position to the provided position
        pos = this.positions[0];
        pos.x = newPosition.x;
        pos.y = newPosition.y;
        previousPos = pos;

        // Update the other positions
        for (i = 1; i < this.nPositions; i++) {
            pos = this.positions[i];
            length = this.lengths[i];
            ang = p.atan2(previousPos.y - pos.y, previousPos.x - pos.x);
            pos.x = previousPos.x - length * Math.cos(ang);
            pos.y = previousPos.y - length * Math.sin(ang);
            previousPos = pos;
        }
    };

    //
    // Draws the bristle on the screen and the canvas
    //
    Bristle.prototype.paint = function (col, canvas, paintCanvas) {
        var i, pos, previousPos;

        // Set the stroke color
        p.stroke(col);

        if (paintCanvas) {
            canvas.stroke(col);
        }

        // Paint the bristle elements
        previousPos = this.positions[0];

        for (i = 1; i < this.nPositions; i++) {
            pos = this.positions[i];
            p.strokeWeight(this.thicknesses[i]);
            p.line(previousPos.x, previousPos.y, pos.x, pos.y);

            if (paintCanvas) {
                canvas.strokeWeight(this.thicknesses[i]);
                canvas.line(previousPos.x, previousPos.y, pos.x, pos.y);
            }

            previousPos = pos;
        }
    };

GoToLoop

That's the 1st time I've seen any1 needing to convert JS to Java! @-)
That "oilPainting.js" was written for p5.js library: http://p5js.org/reference/
Therefore you need to convert it to Java Mode: https://Processing.org/reference/
Some tips for it: https://GitHub.com/processing/p5.js/wiki/Processing-transition

Here's my attempt to turn that JS' class Bristle to Java's: :-bd

// forum.Processing.org/two/discussion/16415/
// how-to-convert-a-phrase-from-javascript-to-processing

// Java Mode by GoToLoop (2016-May-04)

// JaGraCar.com/sketches/oilPainting.php
// JaGraCar.com/sketches/sourceCode/oilPainting.js

// www.OpenProcessing.org/sketch/128167

class Bristle {
  final PVector[] positions;
  final float[] lengths, thicknesses;

  Bristle (int parts, 
    final float initLength, final float deltaLength, 
    final float initThickness, final float deltaThickness)
  {
    positions = new PVector[parts = max(2, parts + 1)];
    lengths = new float[parts];
    thicknesses = new float[parts];

    for (int i = 0; i < parts; ++i) {
      positions[i] = new PVector();
      lengths[i] = max(1, initLength - i*deltaLength);
      thicknesses[i] = max(.1, initThickness - i*deltaThickness);
    }
  }

  /** Sets all the Bristle elements to a given position **/
  Bristle init(final PVector newPosition) {
    for (final PVector vec : positions)  vec.set(newPosition);
    return this;
  }

  /** Updates the position of the Bristle elements **/
  Bristle update(final PVector newPosition) {
    // Set the first position to the provided position:
    PVector prevPos = positions[0].set(newPosition);

    // Update the other positions:
    for (int i = 0; ++i < positions.length; ) {
      final PVector pos = positions[i];
      final float len = lengths[i];

      final float ang = pos.sub(prevPos).mult(-1).heading();
      prevPos = pos.set(prevPos).sub(len*cos(ang), len*sin(ang));
    }

    return this;
  }

  /** Draws the Bristle on the canvas **/
  Bristle paint(final color c) {
    return paint(c, getGraphics());
  }

  /** Draws the Bristle on the specified PGraphics layer **/
  Bristle paint(final color c, final PGraphics canvas) {
    canvas.beginDraw();
    canvas.stroke(c);

    PVector pos, prevPos = positions[0];
    for (int i = 0; ++i < positions.length; prevPos = pos) {
      canvas.strokeWeight(thicknesses[i]);
      pos = positions[i];
      canvas.line(prevPos.x, prevPos.y, pos.x, pos.y);
    }

    canvas.endDraw();
    return this;
  }
}

Althalus7

Thank you very much GoToLoop, the reason I'm translating it is so I can run it offline such as on phone and for research project. I'm using it for my outcome explaining some if the processes used to make paintings from regular images through the medium of generative art.

blindfish

@Althalus7 said:

the reason I'm translating it is so I can run it offline such as on phone and for research project.

You don't need to translate JS to run on a phone. See platforms like phonegap. To run offline you can run on a local server and if need be wrap this up as an application: for example using a platform like Electron.

BarbaraAlmeida

This particular sketch already has a java version: http://www.openprocessing.org/sketch/128167

GoToLoop

Nice find, @BarbaraAlmeida! Although I believe my converted tweaked version for class Bristle is a little better, heheheh.

Interestingly, my decision to split the unified JS method paint() into 2 Java methods, 1 for screen canvas and the other for custom canvas, matches the original Java version there. ;))

Althalus7

Thank you, I'll have a look when I can get on my computer.