Neophyte needs help converting P5 code to Processing

lfb · June 6, 2019, 6:29pm

Hello, friends. I have a small P5 sketch that I want to convert to Processing. I’ve tried, I’ve tried but can’t bring it home. Getting frustrated. The problem happens mainly in one function that converts a string of 12 characters to an array of coefficients. P5 sketch:

// Converts a string of 12 characters to a coefficient which we do stuff with
// Declare global variables
var code = "CVQKGHQTPHTE";
var xmin = -4;
var xmax = 1;
var ymin = -0.8;
var ymax = 1.8;
var x0 = 0;
var y0 = 0;
var a;

function setup() {
  createCanvas(600, 600);
  background(255); 
  noLoop();
}

function draw() {
  a = c2n(code); //call function to convert code to array of numbers

  for (i = 0; i < 100; i++) { 
    x0 = random(xmin, xmax);
    y0 = random(ymin, ymax);

    makeCircles(10);
  }
} //draw

function c2n(c) {
  var coeffs = [];
  var ab = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', ];

  for (i = 0; i < c.length; i++) {
    for (j = 0; j < ab.length; j++) {
      if (c[i] === ab[j]) {
        coeffs.push(round(j - 12)/10);
      }
    }
  }
  return coeffs;  // returns the array of coefficients from the code
}

function makeCircles(iters) {
  var x = x0;
  var y = y0;

  for (j = 0; j < iters; j++) {
    var xt = x;

    x = a[0] + a[1]*x + a[2]*x*x + a[3]*x*y + a[4]*y + a[5]*y*y;
    y = a[6] + a[7]*xt + a[8]*xt*xt + a[9]*xt*y + a[10]*y + a[11]*y*y;

    ellipse(map(x, xmin, xmax, 0, width), map(y, ymin, ymax, height, 0), 15+j*5, 15+j*5);
  }
}

Here is the Processing code so far:

// Converts a string of 12 characters to a coefficient which we do stuff with
// Declare global variables
String code = "CVQKGHQTPHTE";
float xmin = -4;
float xmax = 1;
float ymin = -0.8;
float ymax = 1.8;
float x0 = 0;
float y0 = 0;
float a;

void setup() {
  size(600, 600);
  background(255); 
  noLoop();
}

void draw() {
  a = c2n(code); //call function to convert code to array of numbers

  for (int i = 0; i < 100; i++) { 
    x0 = random(xmin, xmax);
    y0 = random(ymin, ymax);

    makeCircles(10);
  }
} //draw

String c2n(String c) {
  float [] coeffs;
  String [] ab = {"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"};
  for (int i = 0; i < c.length; i++) {
    for (int j = 0; j < ab.length; j++) {
      if (c[i] == ab[j]) {
        coeffs.push(round(j - 12)/10);
      }
    }
  }
  return coeffs;  // returns the array of coefficients from the code
}

void makeCircles(int iters) {
  float x = x0;
  float y = y0;

  for (int j = 0; j < iters; j++) {
    float xt = x;

    x = a[0] + a[1]*x + a[2]*x*x + a[3]*x*y + a[4]*y + a[5]*y*y;
    y = a[6] + a[7]*xt + a[8]*xt*xt + a[9]*xt*y + a[10]*y + a[11]*y*y;

    ellipse(map(x, xmin, xmax, 0, width), map(y, ymin, ymax, height, 0), 15+j*5, 15+j*5);
  }
}

Thanks in advance. My head hurts.

aaronshenhao · June 6, 2019, 7:04pm

Looks quite good! There are a few mistakes that I see so far.

Arrays in Java are fixed sized. In order to “push” items, what you want is an ArrayList. When comparing strings in Java, you can’t use ==, use equals() instead, or use a char array for single letters instead (note chars use single quotes while strings use double quotes).

From what I’ve heard, it’s better practice new float[]{…} when initializing an array rather than {…}.

I don’t think round(j - 12) is doing anything in your code as it is rounding an integer. Also note that if you don’t convert your denominator or numerator to a float, you may end up with integer division, which may be not what you want.

You initialized a as a float, yet c2n returns a String. Furthermore, you are then performing maths operations on a[i]. I think what you want is for a to be a float or int array, and for your function to return one of those datatypes.

InferNova · June 6, 2019, 11:19pm

Hey There!

I rewrote for you to help with your journey in processing ! But I didn’t do this to do your work for you. I did it so you can have an easier time understanding what going on. Please do look back on anything you don’t understand and ask further questions to understand what is happening within the sketch.


 for (int i = 0; i < temp.length; i++) temp[i] = coeffs.get(i);

Also a little note the line above. This is to convert the ArrayList into the array there is dozens of ways to do this with native Java functions but sometimes a quick dirty old for loop does the job so why not ! Basically just fills you array before return. Just wanted to explain enjoy !


ArrayList<Integer>coeffs;
String code;
float xmin;
float xmax;
float ymin;
float ymax;
int x0;
int y0;
int a[];
void setup() {
  code = "CVQKGHQTPHTE";
  xmin = -4;
  xmax = 1;
  ymin = -0.8;
  ymax = 1.8;
  x0 = 0;
  y0 = 0;

  size(600, 600);
  background(255);
  noLoop();
}
void draw() {
  a = c2n(code);
  makeCircles(10);
}
int[] c2n(String c) {
  coeffs = new ArrayList<Integer>();  
  char ab [] = {'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z' };

  for (int i = 0; i < c.length(); i++) {
    for (int j = 0; j < ab.length; j++) {
      if ( c.charAt(i) == ab[j]) {
        coeffs.add(  ( j - 12 )/10);
      }
    }
  }
  int temp[] = new int[coeffs.size()];
  for (int i = 0; i < temp.length; i++) temp[i] = coeffs.get(i);
  return temp;
}
void makeCircles(int size ) {
  int x = x0;
  int y = y0;
  for (int j = 0; j < size; j++ ) {
    int xt = x;
    x = a[0] + a[1]*x + a[2]*x*x + a[3]*x*y + a[4]*y + a[5]*y*y;
    y = a[6] + a[7]*xt + a[8]*xt*xt + a[9]*xt*y + a[10]*y + a[11]*y*y;
    ellipse(map(x, xmin, xmax, 0, width), map(y, ymin, ymax, height, 0), 15+j*5, 15+j*5);
  }
}

lfb · June 6, 2019, 11:46pm

Thank you so much! It is easier for me to learn this way – looking at code I know works. I’m going to study this and I’m sure I’ll have questions. Cheers!

lfb · June 7, 2019, 5:18pm

Cool. But after testing it, the c2n function is not returning the right coefficients. I should have explained further that it should return a value of -1.2 for the letter ‘A’ and add 0.1 for each letter after that. What we should be getting (the javascript code does this correctly) is :
A: -1.2
B: -1.1
C: -1.0
D: -0.9
and so on.

Here is the javascript code, shortened, doesn’t draw anything. Check the console.

//var code = "CVQKGHQTPHTE";
var code = "ABCDEFGHIJKL";
var xmin = -4;
var xmax = 1;
var ymin = -0.8;
var ymax = 1.8;
var x0 = 0;
var y0 = 0;
var a;

function setup() {
  createCanvas(600, 600);
  background(255); 
  noLoop();
}

function draw() {
  a = c2n(code); //call function to convert code to array of numbers

  print(a);
} //draw

function c2n(c) {
  var coeffs = [];
  var ab = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', ];

  for (i = 0; i < c.length; i++) {
    for (j = 0; j < ab.length; j++) {
      if (c[i] === ab[j]) {
        coeffs.push(round(j - 12)/10);
      }
    }
  }
  return coeffs;  // returns the array of coefficients from the code
}

The Java code is not doing this, and I can’t tell where.

InferNova · June 7, 2019, 6:14pm

Hey There!

The String within my example is different from yours, that what probably causing the problem.

lfb · June 7, 2019, 7:35pm

Can you fix? I can’t figure it out.

InferNova · June 7, 2019, 7:38pm

Persistence goes a long way. “ABCDEFGHIJKL”; this should be in mine where I have a different one in setup

lfb · June 8, 2019, 4:49pm

Hi. I can’t get your algorithm to produce the results I’m looking for. I have simplified the sketch to just test the conversion from the character ‘code’ to the coefficient numbers (c2n). I also changed the arrays to float type since they need to be floating point multipliers. What do you think? Here is your slightly modified code:

ArrayList<Integer>coeffs;
String code1;
String code2;
float cd1[];
float cd2[];

void setup() {
  code1 = "ABCDEFGHIJKL";
  code2 = "CVQKGHQTPHTE";
  noLoop();
}

void draw() {
  cd1 = c2n(code1);
  println(cd1);
  cd2 = c2n(code2);
  println(cd2);  
}

float[] c2n(String c) {
  coeffs = new ArrayList<Integer>();  
  char ab [] = {'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z' };

  for (int i = 0; i < c.length(); i++) {
    for (int j = 0; j < ab.length; j++) {
      if ( c.charAt(i) == ab[j]) {
        coeffs.add(  ( j - 12 )/10);
      }
    }
  }
  float temp[] = new float[coeffs.size()];
  for (int i = 0; i < temp.length; i++) temp[i] = coeffs.get(i);
  return temp;
}

cd1 and cd2 should be returning this:
cd1_cd2

lfb · June 8, 2019, 4:54pm

Here is the javascript code that produces the correct results:

// Converts a string of 12 characters to a coefficient which we do stuff with
// Declare global variables

var code1 = "ABCDEFGHIJKL";
var code2 = "CVQKGHQTPHTE";
var cd1;
var cd2;

function setup() {
  createCanvas(600, 600);
  background(255); 
  noLoop();
}

function draw() {
  cd1 = c2n(code1); //call function to convert code to array of numbers
  print(cd1);
  cd2 = c2n(code2);
  print(cd2);
} //draw

function c2n(c) {
  var coeffs = [];
  var ab = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', ];

  for (i = 0; i < c.length; i++) {
    for (j = 0; j < ab.length; j++) {
      if (c[i] === ab[j]) {
        coeffs.push( (j - 12)/10);
      }
    }
  }
  return coeffs;  // returns the array of coefficients from the code
}

Recall that the letter ‘A’ should be converted to the value -1.2. Every sequential letter after adds 0.1 so that ‘B’ is -1.1, ‘C’ is -1.0, etc.
Thanks much for your help.

InferNova · June 8, 2019, 4:56pm

Will have a look and let you know what could be the mistake !

InferNova · June 8, 2019, 5:05pm

Oopsies ! I wasn’t at first aware that these would be floats / decimals I didn’t pay attention. The mistake in my code is that we are doing an Integer operation which cuts off the decimals.

You did the right thing changing the array to a float ! But the ArrayList receives these first and it was set to being an Integer !

Also make sure where j-12 / 10 to do (float) j - 12 / 10 or j - 12 .0/ 10.0. So this will allow a decimal operation as initially we are using integers so unless we change them to get decimals
or change the way we perform the arithmetic.

This will fix the issue.

ArrayList<Float>coeffs;
coeffs = new ArrayList<Float>();

lfb · June 8, 2019, 7:24pm

Yes! Thanks so much. It would have taken me another week to get this on my own, and many headaches.

Cheers,
L.

Topic		Replies	Views
Convert processing Sketch to p5.js Coding Questions	1	455	June 15, 2021
Convert processing to p5js code Coding Questions	1	487	January 27, 2021
Troubleshooting converting from .pde to p5 sketch Coding Questions	2	442	April 25, 2021
Processing to p5.js sketch Coding Questions	1	402	November 15, 2020
Sketch conversion Processing to p5.js Beginners	4	584	February 8, 2022

Neophyte needs help converting P5 code to Processing

Related topics