How to convert a phrase from javascript to processing

edited May 2016 in p5.js

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;
  }
};

Answers

  • 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.

  • 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;
            }
        };
    
  • edited May 2016

    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;
      }
    }
    
  • 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.

  • @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.

  • edited May 2016 Answer ✓

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

  • edited May 2016

    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. ;))

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

Sign In or Register to comment.