Neophyte needs help converting P5 code to Processing

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.

1 Like

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.

3 Likes

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

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!

1 Like

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.

1 Like

Hey There!

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

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

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

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

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.

1 Like

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

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

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

Cheers,
L.

1 Like