CRTImageDrawer-DedFishy

[DedFishy]

This is a combination of two different algorithms. First, I have a Python script that will be given an image and output a text document containing monochrome data of that image. It can be configured to different thresholds of whiteness and blackness. Secondly, the JavaScript that runs on the blot will read this image data, generate a map of lines that represent rows of black pixels, and draw them onto the canvas. Due to how much processing is required to create the final image, I feel that this doesn't count as just "dropping an SVG" on the canvas. I know it's not as cool as the actual freaking raytracer that somebody made somehow, but I think that there's a lot of value in this project.

As for me, I began learning with Python, eventually getting into web development as well. This meant that coming into this, I had a lot of experience with JavaScript and Python. I also have learned Java, C#, SQL, and a few other languages.

Here's Rick Astley (it probably is impractical to draw, but there are other images that would work better):

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
blot-3dgallery	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 15, 2024 9:29pm

[DedFishy]

I got featured on one of the emails!

[leomcelroy]

It's cool to demonstrate the rasterization techniques with Blot. Could you implement the image processing in a single HTML file?

There is a similar example here:

https://github.com/hackclub/blot/blob/main/art/BitMap-AdityaPV/Image_to_array_coverter.html

[DedFishy]

Unfortunately, I am fairly certain it is not possible to make the Blot accept an image file and just print that out without preprocessing.
I am using the Blot editor, so I don't have access to the ability to just write HTML. If there's a way to use a normal HTML document to make Blot programs, that would be cool, but the website is purely JS. A side effect of this is that the necessary functions and classes are not available. To even load an image, I need to create an HTML Image object to put the SRC into and print to an HTML canvas, but neither the Image class or Document class are exposed, so I can't construct one with new Image() or document.createElement('img'). That's why I have a preprocessor, and the example you've linked unfortunately uses document.createElement to accomplish what its doing. If you know how I can write the script with HTML in the Blot editor (perferably since I like to work on this stuff at school, where I only have a locked down Chromebook), please let me know.

[DedFishy]

@leomcelroy I finally understood what you meant. I've reimplemented the data generation algorithm in HTML. All you have to do is put an image named image.png inside the HTML file's working directory, and open the page. It will generate the blot code and put it on the screen as soo as it loads the image, and then you just need to paste the blot code into a text document for the blot algorithm to read. This should be what you suggested, right?

[leomcelroy]

Can you make sure the files it uses are in the same folder? Also your project.js should be index.js

[DedFishy]

@leomcelroy I've renamed the file. I'm not sure what you mean by making sure the files it uses are in the same folder. If you mean the data it reads, I still don't know how to add those documents along with the file, and including the data in the JS directly makes the file too big. To fix this, I've been loading the raw files from another GitHub repo: https://github.com/DedFishy/Cheese
Is there a way to include files like that in the Blot editor?

[DedFishy]

Sorry, I'm a little slow in the head lol. I've uploaded the files that I used as examples.

[DedFishy]

@leomcelroy It's been three weeks, any updates on this?

[leomcelroy]

The snapshot is still missing the .png extension.

[DedFishy]

@leomcelroy I think you're looking at the txt files that contain the image data. The snapshots have a .png extension:

The .txt files are the data output by the preprocessing algorithm I rewrote in JS.

[BrightTheBackpack]

The blot website uses the js file's Metadata to obtain the snapshots for the gallery. There needs to be the extension otherwise the file won't be found

[DedFishy]

Oh, thanks @BrightTheBackpack ! I have just updated that.
@leomcelroy it all should be up to standard now, I think.

[leomcelroy]

You can order your Blot here.