Million Ether Homepage

Storing Colors in a Pixel Grid

Million Ether Page Essential Smart Contract

Tip: Mining only when there are transactions

Tip: Using Remix IDE

Getting Started

Getting The Pixels and Ethereum Events

Building a DApp UI

Drawing in HTML Canvas

Using Websockets with Web3

We don't need the checkBalance function anymore, so let's get rid of it.

Web3 and Events Over WebSockets

Drawing Pixels from the Blockchain

Viewing Pixels

The rest of the script can be found in `scripts/buy-pixels-001-read.js` below

Buying An Image -- Reading Pixels

Buying An Image -- Sending Transactions

Pixel bidding and structs

Payable Contracts, payable Functions

Contract Owner and require

Payable color pixel function

Buying Pixels

Sending funds from a contract

The safer way to send funds from a contract

Also note that any sort of math like this _should_ be checking for overflows, which we'll talk about later.

The Pull Payment Pattern - Withdraw payments when outbid

Million Ether Homepage Summary

Auctioning Pixels

solidity

In this course, we'll build a DApp inspired by [The Million Dollar Homepage](https://en.wikipedia.org/wiki/The_Million_Dollar_Homepage). We'll build a 1 million pixel page, and each pixel can be colored by placing the highest bid.

In this course we'll walk through every step of writing a smart contract, deploying it, hosting auctions, and connecting it to the browser through web3. 

If you're looking to build real, full-stack ethereum Dapps, then this is a perfectly-sized example.

We'll build a DApp inspired by the Million Dollar Homepage, powered by an auction on the Ethereum blockchain

To create our page, we're going to be storing pixels in an Ethereum smart contract. 

To store colors, we have to pick a format to encode them in. Every byte we store on the Ethereum blockchain costs ether. So it's important that we're careful about what format we use to store our pixels.

Thankfully, we don't need to invent our own format, we're going to use 24-bit RGB color.

What that means is that we're going to store 1 byte each for the red, green, and blue component for each pixel.

For example, when we use the color picker in Chrome, we can specify colors in RGBA. 

RGBA stands for red-green-blue-alpha. Each one of these is called a "channel", as in, the red channel or the alpha channel. The alpha specifies the transparency of the color, which we're not going to use, but you could if you wanted to.

Notice that as we pick a different color, the values for red, green, and blue vary as a number between 0 and 255.

That's because each channel is represented by 1 byte. And, I can understand if you haven't been working with bits and bytes recently, so recall that 1 byte is 8 bits.

A bit can hold two values, either one or zero. And with 8 bits we can hold 2 to the 8th values, which is 256 values.

In JavaScript we can convert numbers between bases like this:

---
title: Storing Colors in a Pixel Grid


slug: 'storing-colors-in-a-pixel-grid'
thumbnail: https://embed-ssl.wistia.com/deliveries/3d9968af5382c979a7be001962211caa17b77380.jpg

privateVideoUrl: https://fullstack.wistia.com/medias/q8wqhxt8rn
description: ""



---

To create our page, we're going to be storing pixels in an Ethereum smart contract. 

To store colors, we have to pick a format to encode them in. Every byte we store on the Ethereum blockchain costs ether. So it's important that we're careful about what format we use to store our pixels.

Thankfully, we don't need to invent our own format, we're going to use 24-bit RGB color.

What that means is that we're going to store 1 byte each for the red, green, and blue component for each pixel.

For example, when we use the color picker in Chrome, we can specify colors in RGBA. 

RGBA stands for red-green-blue-alpha. Each one of these is called a "channel", as in, the red channel or the alpha channel. The alpha specifies the transparency of the color, which we're not going to use, but you could if you wanted to.

Notice that as we pick a different color, the values for red, green, and blue vary as a number between 0 and 255.

That's because each channel is represented by 1 byte. And, I can understand if you haven't been working with bits and bytes recently, so recall that 1 byte is 8 bits.

A bit can hold two values, either one or zero. And with 8 bits we can hold 2 to the 8th values, which is 256 values.

    2 ** 8
    // => 256

In JavaScript we can convert numbers between bases like this:

Nate Murray

To create our page, we're going to be storing pixels in an Ethereum smart

To store colors, we have to pick a format to encode them in.

Every byte we store on the Ethereum blockchain costs either, so it's important

careful about what format we use to store our pixels.

Thankfully, we don't need to invent our own format.

What that means is that we're going to store one byte each for the red, green,

For example, when we use the color picker in Chrome, we can specify colors in

Each one of these is called a channel, as in the red channel, or the alpha

The alpha specifies the transparency of the color, which we're not going to use

Notice that as we pick a different color, the values for red, green, and blue

That's because each channel is represented by one byte.

I can understand if you haven't been working with bits and bytes recently, so

A bit can hold two values, either 1 or 0.

And with 8 bits, we can hold 2 to the eighth values, which is 256 values.

In JavaScript, we can convert numbers between bases like this.

This converts 255 in base 10 into binary base 2.

There's another common way to view the bytes of a color code, and that is hex

If you've done any web development at all, you've probably seen this.

This is just another way of encoding the same thing.

Each RGB channel is encoded in two base 16 letters, which are then concatenated

So to convert our RGB value to hex, we could do this.

We'll convert each base 10 string to hex.

And then we'll concatenate them together.

And notice that this is the same hex code we see in our browser for that same

But there's one caveat here that's specific to our implementation.

Conventional hex color codes require that the hex code have exactly six digits.

But if our input channel is less than 16, we are only given a single digit.

Here we're given a single digit C, and that's incorrect.

We can fix this by a JavaScript trick, where we prepend zeros and then slice

We can also convert colors the other direction, that is from hex back to base

In this case, we're taking a base 16 number and converting it to base 10.

We'll use this sort of conversion throughout the course.

We're going to store our pixels in our smart contract storage as three raw

When we draw this pixel in our browser's canvas, we're going to convert from

When we upload pixels to our page from an image, we're going to convert the

We're not going to do a lot of bit manipulation in this series, but because we

pixels around, understanding this color encoding helps a lot.