This is a read-only snapshot of the ComputerCraft forums, taken in April 2020.
Mitchfizz05's profile picture

JavaScript ComputerCraft Image Renderer

Started by Mitchfizz05, 15 December 2013 - 04:19 AM
Mitchfizz05 #1
Posted 15 December 2013 - 05:19 AM
Hello, (I haven't posted here for a while. :huh:/>)

Recently I got an urge to do this for no apparent reason, even though I've gotten bored of both ComputerCraft and Minecraft.

It is a JavaScript that will take the URL to a ComputerCraft image file and display it on the webpage.

It should be compatible across all devices (computers, tablets, smartphones) and browsers as it is purely JavaScript based.

At the moment I feel this is pretty stable, but I haven't really tested it much, so report any bugs you find.

Oh, and also, the images that it renders aren't actual .png files or anything, just a bunch of HTML markup. And it works for all sizes of images. Although, unexpected results will be caused if the image goes further than the browser width.

Changelog:
[indent=1]1.0: Initial release.[/indent]

[indent=1]1.1: Make the coloring the same as ComputerCraft. Thanks theoriginalbit for the hex codes. Use the same Pastebin link for the latest version.[/indent]

Current Setbacks:
  • Takes about a second to render the image.
  • Can't load images from your hard drive - most features will only work when uploaded to a webserver.
Example Code:

<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="cc_render.js"></script>
</head>

<body>

  <div id="canvas1" class="canvas">
  <!-- The rendered image will be put in here -->
  </div>

  <script type="text/javascript">
   var canvas1 = document.getElementById("canvas1");
   renderImageFromFile(canvas1, "testImage");
  </script>

</body>
</html>

Extra Functions:



[indent=1]renderPixel(canvas, color) - Outputs a pixel on the specified canvas, with the specified color.[/indent]

[indent=1]renderBlankPixel(canvas) - Outputs a blank, transparent pixel on the specified canvas.[/indent]

[indent=1]nextLine(canvas) - Goes down a row on the specified canvas.[/indent]

[indent=1]renderImageRow(canvas, image) - Takes in a row of image code (a line from a CC image file) and outputs it onto the specified canvas.[/indent]

[indent=1]renderImageFromFile(canvas, fileStr) - Reads the file from the specified URL and outputs the contents on the canvas. Probably the main function.[/indent]

[indent=1]clearCanvas(canvas) - Clears the specified canvas.[/indent]

[indent=1]In place of the canvas parameter - you need to put the element which you'd most likely retrieve using the document.getElementById function.[/indent]

Tweaks in the JS file:



[indent=1]Most things that you would want changed are clear variables at the top of the JavaScript file.[/indent]
[indent=1]Here is what each variable/config thingy does:[/indent]

[indent=1]pixelWidth. Width of a pixel. Remember ComputerCraft pixels are taller than they are wide.[/indent]
[indent=1]pixelHeight. Height of a pixel. ^[/indent]
[indent=1]zoom. Zoom on the pixels. I recommend 2.[/indent]
[indent=1]debug. Outputs to the JavaScript console when pixels and drawn and on what canvas.[/indent]
[indent=1]pixelBorders. Shows black borders around all the pixels. A sort of debug option. Partially mis-aligns all the pixels.[/indent]

[indent=1]Further down you'll also see a large array called colors. This here basically is all the character codes - and what HTML color to convert them to. You shouldn't need to modify this.[/indent]

Live Demo:



[indent=1]You can have a look at a demo here: http://mitchfizz05.n..._imagerenderer/[/indent]

Pictures:



[indent=1]You could probably guess what it will look like, but meh. The sayin' goes "no pics, no clicks" - so I'll put some pics.[/indent]

[indent=1][/indent]
Using in your own projects:


[indent=1]You can use this in your own projects if you want, however, please give credit in some form.[/indent]


Oh, and apologies if I put this in the wrong section, but I suppose this is a program, so yeah. I'm a bit rusty cause I haven't posted here for months.

So, yeah. Enjoy.
Edited on 15 December 2013 - 04:55 AM
theoriginalbit #2
Posted 15 December 2013 - 05:21 AM
The colours could do with a little tweaking so that they look like they do in-game.

Also what is the file format it supports for image files? I'm assuming Paint files?
Mitchfizz05 #3
Posted 15 December 2013 - 05:29 AM
The colours could do with a little tweaking so that they look like they do in-game.

Also what is the file format it supports for image files? I'm assuming Paint files?
It takes in the standard computercraft image format, like the ones produced by the paint program - and it outputs HTML markup to form the image.

Also, the colors will be easy to tweak, all coloring is stored in an array - so I can edit that in a jiffy.
theoriginalbit #4
Posted 15 December 2013 - 05:36 AM
Also, the colors will be easy to tweak, all coloring is stored in an array - so I can edit that in a jiffy.
Line 32-62 are the CC colours in HEX form
Edited on 15 December 2013 - 04:36 AM
Mitchfizz05 #5
Posted 15 December 2013 - 05:56 AM
Also, the colors will be easy to tweak, all coloring is stored in an array - so I can edit that in a jiffy.
Line 32-62 are the CC colours in HEX form
Done. Thanks for the HEX codes.

(Use the same Pastebin link for the updated version.)

Edit: Opps - forgot to update the demo - I'll do that now… Done.
Edited on 15 December 2013 - 04:59 AM
theoriginalbit #6
Posted 15 December 2013 - 06:02 AM
Done. Thanks for the HEX codes.
No problems.
apemanzilla #7
Posted 15 December 2013 - 11:17 PM
Nice - don't really have much of a use for it, but cool regardless!

(If only we had something to convert pictures to CC format…….)
Mitchfizz05 #8
Posted 16 December 2013 - 01:14 AM
Nice - don't really have much of a use for it, but cool regardless!

(If only we had something to convert pictures to CC format…….)
I think there was something about that somewhere around here, but I can't remember after my great ComputerCraft forums hibernation.

I don't know much about converting the other way, but I might look into it and give it a shot. Sadly though, the images would have to be really low resolution.
theoriginalbit #9
Posted 16 December 2013 - 01:20 AM
I don't know much about converting the other way, but I might look into it and give it a shot. Sadly though, the images would have to be really low resolution.
It could be very difficult, given that pixels are square IRL, but rectangular in CC. The thing that would be cool however would be reading images (png/bmp/jpg) and displaying them on OpenPeripheral's Terminal Glasses.