Buying An Image -- Reading Pixels
The rest of the script can be found in `scripts/buy-pixels-001-read.js` below
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Million Ether Homepage course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Million Ether Homepage, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:05] We want to be able to see way more pixels on our page. No one wants to sit and buy each individual pixel by hand.
[00:06 - 00:19] Instead, what we're going to do is write a script that will take an image and a location as input, and then submit the necessary transactions to Geth to color these pixels. Before we can do that though, we need to write a script that will read an image .
[00:20 - 00:25] We're going to use the getPixels library to read these images. First, let's create a scripts folder to save this utility script.
[00:26 - 00:29] The first thing we'll do is require getPixels. Next, we process the command line arguments.
[00:30 - 00:40] For a real command line tool, I'd probably use a library like Yargs, but we'll just use process.argv for now. The arguments will be the image path, the x position, and the y position.
[00:41 - 00:51] We're going to be using the "desk to hex" version that we wrote in an earlier video. We call getPixels with the image path, and it calls back with the pixels from that image.
[00:52 - 00:58] Next, from the image, we'll extract the frames, the width, the height, and the channels. I found this API by reading the getPixels documentation.
[00:59 - 01:07] The frames parameter is used for when you're loading an animated GIF, but we're only going to use the first frame. Next, let's log out some basic info about this image.
[01:08 - 01:21] The next thing we need to do is iterate over each pixel. We'll iterate over every pixel in the width, every pixel in the height, and we get the individual channels from pixels using pixels.get, and passing the frame, the x and the y, and then the index of the channel.
[01:22 - 01:32] So for example, the red pixel comes from frame zero at our xy position, and it's the zero-eth index. Pixels.get returns a number from zero to 255.
[01:33 - 01:40] But remember, when we send this transaction to Ethereum, we need to send a hexadecimal number. So we'll convert back using the "desk to hex" function we talked about earlier.
[01:41 - 01:43] For now, let's just log this out. And let's try it out.
[01:44 - 01:49] I've grabbed this GIF from the internet. There we go.
[01:50 - 01:55] Now we have the index of each pixel along with a hex color code. From here, we can form these pixels into Ethereum transactions.