Just added a code breakdown for the Draw Together¹ Kitten² app to my blog post with the tutorial video:
https://ar.al/2024/03/26/draw-together/
Draw Together, in ~50 lines of code, is a real-time collaborative drawing tool on a 20×20 pixel grid where people can click to toggle the colour of each pixel.
(The full source and explanations fit the four screenshots on this post.)
¹ https://draw-together.small-web.org
² https://kitten.small-web.org
![Screenshot of web page (detail, start of Source Code section) at URL https://ar.al/2024/03/26/draw-together/:
Source code
The code sets up a real-time collaborative drawing tool on a 20×20 pixel grid where people can click to toggle the colour of each pixel.
Here’s a breakdown of the entire source code, detailing what each section does:
Create 20×20 pixel grid
const rows = new Array(20).fill().map(row => new Array(20).fill(0))
const colours = ['white', 'black']
Creates a 20x20 grid initialized with zeros. Each cell will store an index corresponding to the colours array.
Validation function
const isValid = data => typeof data === 'object' && typeof data.rowIndex === 'number' && typeof data.columnIndex === 'number' && data.rowIndex >= 0 && data.rowIndex <= rows.length-1 && data.columnIndex >= 0 && data.columnIndex <= rows[0].length-1
Checks if the data object has valid rowIndex and columnIndex within grid bounds.
Handle connections and pixel updates
export function onConnect ({ page }) {
page.on('pixel', data => {
if (!isValid(data)) return](https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/113/323/781/892/923/594/original/2c7d94459b34096d.png)
![Screenshot of web page (detail, cont.):
rows[data.rowIndex][data.columnIndex]++
if (rows[data.rowIndex][data.columnIndex] === colours.length) {
rows[data.rowIndex][data.columnIndex] = 0
}
page.everyone.send(kitten.html`
<${Pixel} rowIndex=${data.rowIndex} columnIndex=${data.columnIndex} pixelColourIndex=${rows[data.rowIndex][data.columnIndex]} />
`)
})
}
Listens for pixel updates, validates data, updates the grid, and sends the updated pixel state to everyone connected.
Pixel component
const Pixel = ({ rowIndex, columnIndex, pixelColourIndex }) => kitten.html`
<button
id='pixel-${rowIndex}-${columnIndex}'
aria-label='pixel-${rowIndex}-${columnIndex}'
name='pixel'
style='
background-color: ${colours[pixelColourIndex]};
top: calc(5% * ${rowIndex});
left: calc(5% * ${columnIndex});
'
connect
data='{rowIndex: ${rowIndex}, columnIndex: ${columnIndex}}'
morph
></button>
`
Defines a button element representing a pixel, styled according to](https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/113/323/788/975/395/004/original/d998c1a58cf3c554.png)
![Screenshot of web page (detail, cont.):
its colour and position.
Canvas component
const Canvas = () => kitten.html`${
rows.map((row, rowIndex) => row.map((pixelColourIndex, columnIndex) => kitten.html`
<${Pixel} rowIndex=${rowIndex} columnIndex=${columnIndex} pixelColourIndex=${pixelColourIndex} />
`))
}`
Renders the entire grid by mapping over each row and column, creating Pixel components.
Styles component
const Styles = () => kitten.css`
[name='pixel'] {
position: fixed;
width: 5%;
height: 5%;
border: 0;
}
`
Applies CSS styles to the pixel buttons to size and position them correctly.
Main export
export default () => kitten.html`
<page title='Draw Together'>](https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/113/323/790/831/119/935/original/b4d009e120774c56.png)
Woof! Here’s a happy little puppy pixel sketch to liven up your morning.
Participation au #DrawTogether de Nyo !
Thème : Insecte aristocrate
#insect #mantereligieuse
https://mastodon.ar.al/@aral/112428020737217125
aral@mastodon.ar.al - Ooh, and someone just made it even better :)
It got defaced right after my post but I saw at least someone else trying to recreate it and so I helped out too :)
That feeling when you open the silly little collaborative drawing app you made and you find that some folks made this.
https://draw-together.small-web.org
PS. If you want to learn how the app was made, here’s a video tutorial using Kitten¹: https://ar.al/2024/03/26/draw-together/
Loving all the cool CGA art on this weekend’s Draw Together :)
G’morning! Looks like the kitty is gone but the trans pride remains :)
https://draw-together.small-web.org
Everyone I'm sorry. I tried to change the cat on #drawtogether to a cute bear and it's a little awful. Help! https://draw-together.small-web.org/
Aww, CGA trans pride kitty cat. (I love that the CGA palette 1 colours are basically the trans pride flag.)
Thank-yous to the folks who drew this :)
Aww, hello, kitty!
https://draw-together.small-web.org
(Learn how to build the app from scratch: https://ar.al/2024/03/26/draw-together/)
I love that (a) Draw Together is so easy to embed (see https://ar.al/2024/03/26/draw-together/) and (b) it makes me laugh every time I see what folks have made while I was away :)
Looks like we have a glass of something or other?
Let’s build Draw Together… umm, together.
Video: https://vimeo.com/927628184
Blog post: https://ar.al/2024/03/26/draw-together/
Play with it: https://draw-together.small-web.org
I was trying to make dog on draw together, but okay
Right, about to do another take of the Draw Together making of video: if anyone wants to twiddle with the pixels while I’m recording, please do :)
I’m just about to record a video where I create the Draw Together Kitten¹ app from scratch in one take. If any of you want to be in the initial demo of the live version, feel free to head on over to https://draw-together.small-web.org and demonstrate your pixel drawing skills :)
TEAM 
