# Neophyte needs help converting P5 code to Processing

**URL:** <https://discourse.processing.org/t/neophyte-needs-help-converting-p5-code-to-processing/11884>\
**Category:** Coding Questions\
**Created:** [June 6, 2019, 6:29pm UTC](https://discourse.processing.org/t/neophyte-needs-help-converting-p5-code-to-processing/11884 "2019-06-06T18:29:04Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![lfb](https://avatars.discourse-cdn.com/v4/letter/l/bc79bd/32.png) [@lfb](https://discourse.processing.org/u/lfb)\
**Post date:** [June 6, 2019, 6:29pm UTC](https://discourse.processing.org/t/neophyte-needs-help-converting-p5-code-to-processing/11884/1 "2019-06-06T18:29:04Z")

</div>

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:

```auto
// 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:

```auto
// 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.

---

<div class="post-metadata">

**Author:** ![aaronshenhao](https://avatars.discourse-cdn.com/v4/letter/a/ea666f/32.png) [@aaronshenhao](https://discourse.processing.org/u/aaronshenhao)\
**Post date:** [June 6, 2019, 7:04pm UTC](https://discourse.processing.org/t/neophyte-needs-help-converting-p5-code-to-processing/11884/2 "2019-06-06T19:04:08Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![InferNova](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/infernova/32/6009_2.png) [@InferNova](https://discourse.processing.org/u/InferNova)\
**Post date:** [June 6, 2019, 11:19pm UTC](https://discourse.processing.org/t/neophyte-needs-help-converting-p5-code-to-processing/11884/3 "2019-06-06T23:19:14Z")

</div>

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.

```auto

 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 !

```auto

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

```

---

<div class="post-metadata">

**Author:** ![lfb](https://avatars.discourse-cdn.com/v4/letter/l/bc79bd/32.png) [@lfb](https://discourse.processing.org/u/lfb)\
**Post date:** [June 6, 2019, 11:46pm UTC](https://discourse.processing.org/t/neophyte-needs-help-converting-p5-code-to-processing/11884/4 "2019-06-06T23:46:06Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![lfb](https://avatars.discourse-cdn.com/v4/letter/l/bc79bd/32.png) [@lfb](https://discourse.processing.org/u/lfb)\
**Post date:** [June 7, 2019, 5:18pm UTC](https://discourse.processing.org/t/neophyte-needs-help-converting-p5-code-to-processing/11884/5 "2019-06-07T17:18:26Z")

</div>

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.

```auto
//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.

---

<div class="post-metadata">

**Author:** ![InferNova](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/infernova/32/6009_2.png) [@InferNova](https://discourse.processing.org/u/InferNova)\
**Post date:** [June 7, 2019, 6:14pm UTC](https://discourse.processing.org/t/neophyte-needs-help-converting-p5-code-to-processing/11884/6 "2019-06-07T18:14:45Z")

</div>

Hey There!

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

---

<div class="post-metadata">

**Author:** ![lfb](https://avatars.discourse-cdn.com/v4/letter/l/bc79bd/32.png) [@lfb](https://discourse.processing.org/u/lfb)\
**Post date:** [June 7, 2019, 7:35pm UTC](https://discourse.processing.org/t/neophyte-needs-help-converting-p5-code-to-processing/11884/7 "2019-06-07T19:35:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![InferNova](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/infernova/32/6009_2.png) [@InferNova](https://discourse.processing.org/u/InferNova)\
**Post date:** [June 7, 2019, 7:38pm UTC](https://discourse.processing.org/t/neophyte-needs-help-converting-p5-code-to-processing/11884/8 "2019-06-07T19:38:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![lfb](https://avatars.discourse-cdn.com/v4/letter/l/bc79bd/32.png) [@lfb](https://discourse.processing.org/u/lfb)\
**Post date:** [June 8, 2019, 4:49pm UTC](https://discourse.processing.org/t/neophyte-needs-help-converting-p5-code-to-processing/11884/9 "2019-06-08T16:49:11Z")

</div>

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:

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/56b7e7c8b434477af1269e2cab60bab9fd792fd7.png)

---

<div class="post-metadata">

**Author:** ![lfb](https://avatars.discourse-cdn.com/v4/letter/l/bc79bd/32.png) [@lfb](https://discourse.processing.org/u/lfb)\
**Post date:** [June 8, 2019, 4:54pm UTC](https://discourse.processing.org/t/neophyte-needs-help-converting-p5-code-to-processing/11884/10 "2019-06-08T16:54:17Z")

</div>

Here is the javascript code that produces the correct results:

```auto
// 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.

---

<div class="post-metadata">

**Author:** ![InferNova](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/infernova/32/6009_2.png) [@InferNova](https://discourse.processing.org/u/InferNova)\
**Post date:** [June 8, 2019, 4:56pm UTC](https://discourse.processing.org/t/neophyte-needs-help-converting-p5-code-to-processing/11884/11 "2019-06-08T16:56:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![InferNova](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/infernova/32/6009_2.png) [@InferNova](https://discourse.processing.org/u/InferNova)\
**Post date:** [June 8, 2019, 5:05pm UTC](https://discourse.processing.org/t/neophyte-needs-help-converting-p5-code-to-processing/11884/12 "2019-06-08T17:05:05Z")

</div>

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.

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

```

---

<div class="post-metadata">

**Author:** ![lfb](https://avatars.discourse-cdn.com/v4/letter/l/bc79bd/32.png) [@lfb](https://discourse.processing.org/u/lfb)\
**Post date:** [June 8, 2019, 7:24pm UTC](https://discourse.processing.org/t/neophyte-needs-help-converting-p5-code-to-processing/11884/13 "2019-06-08T19:24:16Z")

</div>

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

Cheers,  
L.