CODEWITHSUNDEEP
htmltemplatesflaskprocessingtemplate-variables
turo
turo

Reputation: 1

Using Flask project variables in Processing sketch?

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!

Upvotes: 0

Views: 34

Answers (0)

Related Questions