How do I render an image?

Oisthebestletter

So, I was playing around with Scratchattach and I noticed a project (link here) by @TimMcCool. It would render any profile picture. Unfortunately, his backend is down and he did not publish the code on his GitHub.

This leads me to question just how he did this? I know how to fetch a users profile picture in Scratchattach but not how to turn that image into RGB/Hex pixels that Scratch can then use.

(Yes, Scratch can use hex codes)

set pen color to (join [#] (hex code))

So how could I do this, using Cloud Requests?

(Yes, I know the cloud is down, but I am more than willing
to do it in Turbowarp.)

Last edited by Oisthebestletter (Jan. 19, 2026 13:17:47)

redspacecat

Here's the python code for an earlier iteration of my profile picture viewer.

The_Cool_Scratch_Guy

I don't know the details of scratchattach, but here's my guess about how that sort of system might work:

User sends input,
Scratch project sets a variable,
A python script notices the variable changed,
That script gets the profile picture of the user wanted using scratchattach,
The script turns the pixel information into a number or numbers so it fits in scratch's cloud variables,
The script sets the cloud variable,
The project notices the variable changed,
The project turns the numbers back into hexcodes and displays the image on the screen.

That's how it seems to me it would work.

MineTurte

Oisthebestletter wrote:
So, I was playing around with Scratchattach and I noticed a project (link here) by @TimMcCool. It would render any profile picture. Unfortunately, his backend is down and he did not publish the code on his GitHub.

This leads me to question just how he did this? I know how to fetch a users profile picture in Scratchattach but not how to turn that image into RGB/Hex pixels that Scratch can then use.

(Yes, Scratch can use hex codes)
set pen color to (join [#] (hex code))
So how could I do this, using Cloud Requests?

(Yes, I know the cloud is down, but I am more than willing
to do it in Turbowarp.)

Funnily enough, I actually made something very similar, just that it wasn't originally for rendering profile pictures and instead just any picture you wanted but it'll do the same thing.

For the scratch side, I used this project I made to render. Then to actually feed the information into said project, I made a website using Flask (and an HTML template).

HTML (must be in a folder named templates. I normally use this in replit so i'm not quite sure how it'd go in an actual file explorer)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Image Hex Extractor</title>
  <style>
    body { font-family: sans-serif; padding: 20px; }
    #output { width: 100%; height: 200px; }
  </style>
</head>
<body>
  <h1>Image Hex Extractor</h1>
  <input type="file" id="fileInput" accept="image/*" />
  <button id="processBtn">Process</button>
  <textarea id="output" placeholder="Result will appear here..."></textarea>
  <canvas id="canvas"></canvas>
  <script>
    const fileInput = document.getElementById('fileInput');
    const processBtn = document.getElementById('processBtn');
    const output = document.getElementById('output');
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    processBtn.onclick = () => {
      const file = fileInput.files[0];
      if (!file) return;
      const img = new Image();
      img.onload = () => {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        const imageData = ctx.getImageData(0, 0, img.width, img.height).data;
        const hexArray = [];
        for (let i = 0; i < imageData.length; i += 4) {
          const r = imageData[i];
          const g = imageData[i + 1];
          const b = imageData[i + 2];
          const hex = '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
          hexArray.push(hex);
        }
        const result = img.width + 'x' + img.height + '|' + hexArray.join('|');
        output.value = result+"|";
      };
      img.src = URL.createObjectURL(file);
    };
  </script>
</body>
</html>

Then for the python backend:

from flask import Flask, jsonify, render_template, request
app = Flask(__name__)
@app.route('/')
def index():
    return render_template("html_file_name.html")
if __name__ == '__main__':
     app.run(debug=True)

Last edited by MineTurte (Jan. 23, 2026 18:55:39)

Oisthebestletter

redspacecat wrote:
Here's the python code for an earlier iteration of my profile picture viewer.

There seems to be a couple of functions and/or libraries that are not in the code. Could you tell me what those are?

redspacecat

Oisthebestletter wrote:
redspacecat wrote:
Here's the python code for an earlier iteration of my profile picture viewer.
There seems to be a couple of functions and/or libraries that are not in the code. Could you tell me what those are?

scratchattach (imported as “import scratchattach as sa”)
pillow (imported as “from PIL import Image”)

Oisthebestletter

redspacecat wrote:
Oisthebestletter wrote:
redspacecat wrote:
Here's the python code for an earlier iteration of my profile picture viewer.
There seems to be a couple of functions and/or libraries that are not in the code. Could you tell me what those are?
scratchattach (imported as “import scratchattach as sa”)
pillow (imported as “from PIL import Image”)

Do you have the code for the newer version of your project?

The_Cool_Scratch_Guy

Using scratchattach documentation, ai, prior knowledge, and some creative thinking, I pulled together this script, which I can't type here due to ‘appearing to include unsuitable language’.

This uses my account to login to scratch, gets my pfp, and arranges the pixel data into one big string, where every 8 digits of it is a pixel color, and adds the image width at the end. We can send this string in chunks of 256 digits to scratch via cloud variables, and then from scratch we can piece together the large string. Then, we can split the string along each 8 digits, and each of those ~8 digit numbers can be used with the pen extension to make a color. (This is basically the hexcode converted to decimal, which seems to work with pen.) The last number at the end tells us after how many pixels to go to the next row.

The image may or may not come out sideways and flipped, based on whether our scratch program and pixels are iterating over the pixels in the same direction.

Last edited by The_Cool_Scratch_Guy (Jan. 26, 2026 19:26:12)

redspacecat

Oisthebestletter wrote:
Do you have the code for the newer version of your project?

Here's the updated version.

It fetches the pfp and stores it, then allows fetching it by the client in multiple chunks.
This is the version used in my profile picture viewer.

Oisthebestletter

I need to bring this back up from the depths, because I need to make a Python script that converts a video into frames usable in this project.

MineTurte

Oisthebestletter wrote:
I need to bring this back up from the depths, because I need to make a Python script that converts a video into frames usable in this project.

To turn a video into individual frames, use ffmpeg. As for turning each frame into data this might give you a start: https://scratch.mit.edu/projects/1248312758/. It's in Javascript but it's basically the same concept, just find a python library for getting specific pixel hex codes based off of X and Y coordinates.

If you don't wanna have to go through replit to get the JS source code, here it is:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Image Hex Extractor</title>
  <style>
    body { font-family: sans-serif; padding: 20px; }
    #output { width: 100%; height: 200px; }
  </style>
</head>
<body>
  <h1>Image Hex Extractor</h1>
  <input type="file" id="fileInput" accept="image/*" />
  <button id="processBtn">Process</button>
  <textarea id="output" placeholder="Result will appear here..."></textarea>
  <canvas id="canvas"></canvas>
  <script>
    const fileInput = document.getElementById('fileInput');
    const processBtn = document.getElementById('processBtn');
    const output = document.getElementById('output');
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    processBtn.onclick = () => {
      const file = fileInput.files[0];
      if (!file) return;
      const img = new Image();
      img.onload = () => {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        const imageData = ctx.getImageData(0, 0, img.width, img.height).data;
        const hexArray = [];
        for (let i = 0; i < imageData.length; i += 4) {
          const r = imageData[i];
          const g = imageData[i + 1];
          const b = imageData[i + 2];
          const hex = '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
          hexArray.push(hex);
        }
        const result = img.width + 'x' + img.height + '|' + hexArray.join('|');
        output.value = result+"|";
      };
      img.src = URL.createObjectURL(file);
    };
  </script>
</body>
</html>

Last edited by MineTurte (May 11, 2026 01:48:03)

Discuss Scratch