0

I am creating a little project that has turned out to be less straightforward than I thought.

I have my Flask project app.py, an html template called processor.html, and a processing sketch in the static folder called mySketch.pde. Processor.html just directs how to render the processing file, which works fine, but I have an added need. I have a list of hex codes for colors I extracted from a colormap in my flask app. The colormap's attributes are based on inputs that depend on the user on the site, so the hex codes in the list will vary. I want to use this list of colors in my Processing sketch. Essentially, every frame/every time the draw function is called the fill() uses one of the colors in the list. It should start at index 0 and go to the next every time before restarting.

I'm unsure how to pass my variable in app.py to mySketch.pde. I couldn't find much online and attempted to use ChatGPT and I don't know if it's right PLUS it doesn't do much in helping me understand why it's doing what it does. I also am running into an issue with the hex codes. Since they get saved as strings, I can't just do a for loop through them in processing and put it in fill() since it only takes integers. I thought maybe converting them to RGB? But not sure how to save multiple rgb values to a list. Ideally I would have these values in HSL.

I tried using processing's unhex method as a test on a list of hex code strings in a for loop. I realized that the unhex method has nothing to do with colours and doesn't help my need. I also found some post somewhat related to this issue that suggested using Long.decode("string"). It seems that this method has been deprecated in P4 so it's not working out for me. I try to convert the value to int, but it's not working. So far all my sketch is just returning a black screen.

This is what chatgpt suggested I do about passing the variable to the .pde sketch. I don't fully understand it and can't say it works. The file is definitely rendered on the site but it's just a black canvas, which could be because of the hex code situation. But perhaps this is still wrong/not the best way to approach it:

#app.py
@app.route('/')
def index():
    myStrings = ["#FF0000", "#00FF00", "#0000FF"]
    return render_template('processor.html', myStrings=myStrings)

#processor.html
<!DOCTYPE html>
<html>
<head>
    <title>Flask and Processing</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
    <script type="text/javascript">
        let myStrings = {{ myStrings|tojson }};
    </script>
    <script src="{{ url_for('static', filename='mySketch.pde') }}"></script>
</head>
<body>
    <h1>Flask and Processing</h1>
    <p>My Strings: {{ myStrings }}</p>
    <canvas id="canvas"></canvas>
</body>
</html>

and then simply initialize it in processing with

String[] myStrings;

Please help!

turo
  • 1
  • 3
  • you can have your route write the hex codes to a file and the pde script can read those files. That's a sort of quick simple solution – Matthias Apr 25 '23 at 14:19
  • @Matthias ok interesting. i'll look into this as i'm not entirely sure how to make the pde script access the file. Do you have ideas on what to do with the hex codes that will be in a string format? How do I turn them into integers that can be used by fill()? – turo Apr 25 '23 at 16:18
  • is there no documentation on the fill() function, what kind of input it expects? Then it would just be a matter of conversion probably. – Matthias Apr 26 '23 at 09:23
  • @Matthias it expects an integer value. It can be a hex code so like #FFFFFF but it can't accept it from a list that is set as a StringList. I can't set the hex list to an IntList. I converted to RGB actually and in Processing that seems to be working just fine. I saved the list in my flask app and saved it to a new json file in the project. I just don't know how to access it now from the pde file – turo Apr 26 '23 at 14:59
  • an integer that is a [direct translation](https://www.binaryhexconverter.com/hex-to-decimal-converter) from hex to decimal? You just need to convert it from string to hex and from hex to decimal then. But first you have to read the file from within the pde code. Now I'm not familiar with how you call the pde code, but if you call it from the python code somehow, you might also be able to pass the variables through there – Matthias Apr 26 '23 at 15:12
  • @Matthias i didn't even consider formally translating it from string to hex....that's embarrassing. although i'm not sure that's something i can do in processing. yeah im really not sure how to call it! I tried setting a template variable in app.py route and passing it to the html template which would pass it to the pde, but this didn't work. I've tried an endless number of ways to run it through the html doc but it doesn't work. so just trying to avoid that altogether now. – turo Apr 26 '23 at 16:12

0 Answers0