Post image to Desmos Drawing

README.md

Desmos allows you to draw images.

But it accepts arbitrary points as json. You can upload "images"!

1. Get an image, reduce the size to say 100 x 100 pixels. Full color rgb (even alpha) is fine. Call it input.jpg
2. Copy-as-curl after editing a desmos graph from your browser.
3. Run the python script to get a desmos-compatible json blob: python3 desmos.py > out.json
4. Run the curl with the output json file, but instead of curling with --data ... use --data @out.json on your terminal
5. Refresh your browser!

desmos.py

#!/usr/bin/env python3
from PIL import Image
import json


def translate(value, leftMin, leftMax, rightMin, rightMax):
    # Same as the arduino "map" function
    leftSpan = leftMax - leftMin
    rightSpan = rightMax - rightMin
    valueScaled = float(value - leftMin) / float(leftSpan)
    return rightMin + (valueScaled * rightSpan)


img = Image.open("input.jpg")
pixels = img.load()

min_x = -10
max_x = 10
min_y = 2
max_y = -18

sketch = {"sketchData": {"points": [], "strokes": [],}}

for i in range(img.size[0]):
    for j in range(img.size[1]):
        r, g, b = pixels[i, j]
        x = translate(i, 0, img.size[0], min_x, max_x)
        y = translate(j, 0, img.size[1], min_y, max_y)
        point = {"color": f"rgba({r}, {g}, {b}, 1)", "coords": {"x": x, "y": y,}}
        sketch["sketchData"]["points"].append(point)

out = json.dumps(sketch)

# Yes, the post data is this json, where "out" is another (escaped) json blob inside!
# Replace these TBD fields from the copy-as-curl data
post = {
    "finish": False,
    "editToken": "TBD",
    "studentId": "TBD",
    "classId": "TBD",
    "update": {"TBD": out},
}
print(json.dumps(post))