← Sean Lawrence

Bockchain Painting

BlockchainPainting is a project I built to learn about cryptocurrencies (specifically, Ethereum) and React. It was built over the course of a few days in order to explore these technologies and learn more about the blockchain concept more generally.

There is a lot of hype around the blockchain - and I believe there is not better way of learning a technology than building something with it - so let's dig in!

Blockchain painting screenshot
A screenshot of the state of the canvas on blockchainpainting.com as of Feb 13th, 2018 on the test (Rinkeby) network.

Ethereum

Ethereum is a public "blockchain-based" distributed computing platform. It can also be thought of as a network of computers on the internet that work together to run programs and write data to a shared database in a consistent way.

No one owns this network so there are small fees (gas fee) to conduct transactions that are paid in a currency called ether (a cryptocurrency, like bitcoin). This ether is ultimately paid to the ethereum miners on the network as an incentive to keep running.

Applications built on blockchains are called dApps - short for "distributed applications". The core logic of these applications are located in what's called smart contracts.

Smart Contracts

Contracts in Ethereum are written in a language called Solidity and have a state and a set of methods that can be invoked to modify their state and do other interesting things (like interact with other contracts!)

For example, this is the line that stores state of the canvas.

uint24[10][10] canvas;

One cannot interact with this state directly, so instead the contract provides methods.

For example, in order to store a list of pixels there is a paintMany method. This method simply takes a list of pixel coordinates and their associated 24 bit colors and sets their value in the canvas represented by a 2-dimensional array.

function paintMany(uint16[] x, uint16[] y, uint24[] color) public {
    require(x.length == y.length);
    require(y.length == color.length);

    for (uint8 j = 0; j < x.length; j++) {
        canvas[x[j]][y[j]] = color[j];
    }

    uint256 pixelsAlreadyChanged = pixelsChanged[msg.sender];
    if (pixelsAlreadyChanged <= 0) {
        painters.push(msg.sender);
    }
    pixelsChanged[msg.sender] = pixelsAlreadyChanged + x.length; 
    Paint(msg.sender, x, y, color);
}

In addition to changing the state of the canvas, the method also tracks the list of painters and how many pixels they have changed as well as a few lines validating the input.

Not particularly exciting on its own - so how does this work within the blockchain concept?

Blockchain

Every pixel can be traced to a transaction on the ethereum blockchain. This means one could technically re-create the state of the canvas at any given time. And this history of state cannot be modified.

Those transactions are auditable and viewable by anyone.

While perhaps more interesting than useful for this particular application, one can imagine why there is excitement in industries where there are lots of mistrustful actors yet a need for a centralized record of shared state and/or audit trail

Fees

The solidity contract does not charge anything (though I could easily charge a small fee if I wanted). There are small gas fees to transact (as with any ethereum contract) which means your final cost is a function of the gas price at the time plus the amount of data you are sending.

Here is a link to the list of transactions to the blockchain painting contract on the test network (Rinkeby):

https://rinkeby.etherscan.io/address/0x4cff91542fb3652c9b07e990bccc80fcaf109583.

What I find interesting about Ethereum is that after deploying (and paying the associated gas fees required) the contract to the blockchain, there is no cost to the contract writer to maintain the contract. It will live there forever as far as I understand (unless you create a method to self destruct the contract).

Front-end

The website (https://blockchainpainting.com) is not necessarily required to interact with the contract. It makes it easy to visualize the state and with the help of a browser extension called metamask it also makes it easy to transact with the Ethereum network. Neither the website or metamask is required to send a transaction. All you need is a client capable of sending Ethereum transactions.

For those curious, canvas rendering consists of retrieving the state of the canvas (list of the 24bit colors) and rendering to a HTML canvas element. I use React + Redux to manage the state of painting until one sends it to the blockchain using Metamask. Using Redux made the undo/redo state exceptionally painless.

Closing thoughts

It was simpler than expected to work with Ethereum. The smart contract portion was relatively small portion of the overall work. Most of my time was building the front-end to render the canvas.

Beyond currencies, I'm excited about the possibilities for gaming and art (see here for more).