Loading JSON array in Flask

Processing Coding Questions
1

Hi! I’m working on a website using Python and Flask. One of the pages needs to render a processing sketch, with the fill() parameter based on data in a list that is created in the Flask project file app.py. Basically, in the page route, I create a colormap and then extract the RGB of the colors in that colormap and put it in a list. I then convert that list into a JSON array and save it in a JSON file. The route returns a render_template of an html file which renders the processing file. In the processing file, I want to loop through the list of colours with each loop resulting in the fill() being a different colour in the list. I tried to “send” this variable using template variables in the html file, but no matter what I do it doesn’t work. So I landed on this attempt which is saving the object to JSON and importing it to processing. Although I can’t figure out how to do this. The loadJSON method seems to be incompatible for websites as its not in Javascript. Keep in mind that the list is not static, hence why I’m not just hardcoding it. The colormap parameters will change based on changes in other data in my python script.

Here’s what I have.

Here is the route in app.py:

@app.route('/processor')
def processor():
    palette = Cubehelix.make(start=0.3, rotation=-0.5, n=10)
    particleArray = palette.colors
    with open("particleArray.json", 'w') as f:
        json.dump(particleArray, f)
    with open("particleArray.json") as f:
        data = json.load(f)
    return render_template('a.html')

This is a.html that is being rendered by the above route:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Processing Sketch</title>
    <script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script>
    </script>
</head>
<body>
    <canvas data-processing-sources="{{url_for('static', filename= 'myProgram.pde')}}"></canvas>
</body>
</html>

Here is myProgram.pde where my Processing sketch is stored:

JSONObject json;

int dim; 

void setup() {
  size(800, 800);
  dim = width/2;
  background(0);
  noStroke();
  ellipseMode(RADIUS);
}


void draw() {
  background(0);
  for (int x = 0; x <= width; x+=dim) {
    filter(BLUR,4);
    drawGradient(x/width, height);
  } 
}

void drawGradient(float x, float y) {
  int radius = dim*2;
  float a= 0;
  values= loadJSONArray("C:\Users\Me\ProjectName\myapp\particleArray.json");
  int h= 0;
  int len= values.size();
  float angle= radians(30+a);
  for (int r = radius; r > 0; --r) {
    rotate(radians(angle));
    int[] help= values.getInt(h);
    fill(help[0],help[1],help[2]);
    ellipse(x, y, r+30, r);
    a+=10;
    h++;
    if (h >= len) {
      h=0;
    }
  }
}

This together renders the Processing canvas but it’s just black. Nothing is being drawn. I thought maybe I should try to write it in p5.js way because perhaps the loadJSONArray is not a thing for Javascript and wrote this version of the Processing sketch as tester.pde (and changed the html file to point to this file). This just renders a blank page. No canvas, nothing.

let particleArray;

function preload() {
  particleArray = loadJSON('C:\Users\Me\ProjectName\myapp\particleArray.json');
}

function setup() {
  createCanvas(800, 800);
  background(0);
  noStroke();
  ellipseMode(RADIUS);
}

function draw() {
  background(0);
  for (let x = 0; x <= width; x += dim) {
    filter(BLUR, 4);
    drawGradient(x / width, height);
  }
}

function drawGradient(x, y) {
  let radius = dim * 2;
  let a = 0;
  let h = 0;
  let len = particleArray.length;
  let angle = radians(30 + a);
  for (let r = radius; r > 0; --r) {
    rotate(radians(angle));
    let help = particleArray[h];
    fill(help[0], help[1], help[2]);
    ellipse(x * width, y, r + 30, r);
    a += 10;
    h++;
    if (h >= len) {
      h = 0;
    }
  }
}

I hope this makes sense! If you have any questions, please let me know. I need help!