Aral Balkan
So given it’s Saturday night, I thought I’d have a little fun with Kitten and make a tiny collaborative drawing toy.
You have a 20×20 grid and only black and white to draw with and everyone shares the same canvas.
https://draw-together.small-web.org
Have fun + looking forward to seeing what we all, umm, draw together.
:kitten:💕
PS. It took about 60 lines of code.
View source: https://codeberg.org/aral/draw-together
Aral Balkan
Haha, nice, already seeing you all adding and removing pixels :)
Feel free to use this thread to coordinate if you want to :)
Aral Balkan
Aww, this is so much fun to watch :)
Aral Balkan
Woah, someone managed to invert the canvas. Who did that? And how? :)
(Are you scripting button presses from the console?) ;)
Aral Balkan
@toasty Haha, Kittens and poo :)
Toasty
@aral I feel like you've captured the very best of the internet here. 🥰
Aral Balkan
Hah, is this a request?
(If you want to play with it locally and add more colours, just add them to the colours array and you can click through as many colours as you like. I wanted to keep it simple and hence it’s black and white.)
Aral Balkan
Hey! and Hi! back to you, whoever you may be :)
Aral Balkan
It’s so lovely to see you folks playing with it.
If you want to share screenshots, please feel free to in this thread.
As much as I’d love to stay up all night watching and playing, I have to feed the pup and hit the sack.
Enjoy!
(And yes, peace.)
:kitten:💕
Aral Balkan
@AnnaLiMg Hah, I swear it said Cool right before I started recording :)
אנה :cS: :piS: :pSt: :zS: :zC:
@aral חא ככ הבנתי מה זה בדיוק
Aral Balkan
@ciourte Game of Life – nice! (Running it now.) :)
Ciourte Piaille
@aral
var f=()=>{
var c=(i,j)=>{
return document.getElementById('pixel-'+i+'-'+j)
}
var iA=(i,j)=>{
return (c(i,j).style.backgroundColor=='black')
}
for(var i=0; i<20; i++){
for(var j=0; j<20; j++){
var n=-iA(i,j)
for (var k=i-1;k<i+2;k++){
for (var l=j-1;l<j+2;l++){
n += (k>19 || k<0 || l>19 || l<0) ? 0 : iA(k,l)
}
}
if((iA(i,j) && (n<2 || n>3)) || (!iA(i,j) && n==3))
c(i,j).cN=true
else
c(i,j).cN=false
}
}
for(var i=0; i<20; i++){
for(var j=0; j<20; j++){
if (c(i,j).cN)
c(i,j).click()
}
}
}
var r=setInterval(f,1000)
clearInterval(r)
Aral Balkan
And, of course, I wake up and someone* has gotten Game of Life running in it because of course :)
Very nice!
:kitten:💕
Enes
@aral I might've vandalized it shortly with some game of life :)
Aral Balkan
@mustastum Oh, you did too, only now seeing this. @ciourte did too and shared their code :) Great minds and all that, I guess :)
Aral Balkan
Brother Soul
@aral I tried it. I really suck at this.
But very clever.
Brother
Aral Balkan
@leighleighleigh Haha, very nice :)
:kitten:💕
Leigh
@aral love this tall creature
Aral Balkan
@lachlan Thanks for sharing :)
:kitten:💕
lachlan but less spooky
@aral An elegant design when I checked it out
Sunny :autumnleaf6:
@aral this was a fun way to spend my time this Sunday morning, thank you 🤗
In the same spirit as the hearts, currently:
Aral Balkan
@sunny Aww, thank you 🤗
:kitten:💕
Jorge Toledo :mastodon:
@aral This is awesome!
Played through some chaos with others, and suddenly a common goal emerged.
And it stayed for a while.
Aral Balkan
@eldelacajita Thank you :)
:kitten:💕
PS. Did you get a chance to look at the code. It’s 60 lines of Kitten :)
Aral Balkan
@scott It gets emitted from each of the buttons, all of which have the same name attribute (`pixel`).
In Kitten’s Streaming HTML workflow, element names are mapped to events on the server (when either the default event type – in this case `click` – or a custom event you specify gets fired). Under the hood, it’s htmx + WebSocket + some Kitten magic (auto-generated WebSocket route, syntactic sugar, etc.)
I have a whole write up that peels away the magic here:
scott
@aral@mastodon.ar.al where does the "pixel" event on line 12 get emitted from?
Aral Balkan
@muiiio Noted :)
muıııo
@aral If there's no #dick on the canvas, then there are no Bulgarians present at that time 😅
Aral Balkan
@DrVeronikaCH Thank you so much, Veronika :) Love the face!
:kitten:💕
PS. Have you had a chance to look at the code? That whole thing is in 60 lines of Kitten. Would love to see Kitten start to get used to teach web dev in the future and would love your thoughts on that too :)
Source: https://codeberg.org/aral/draw-together
A video/write-up on Kitten’s Streaming HTML workflow that peels away the magic layer by layer: https://ar.al/2024/03/08/streaming-html/
Kitten tutorials: https://codeberg.org/kitten/app
Veronika Cheplygina
@aral this is amazing
Aral Balkan
@DrVeronikaCH @cirrus Reminds me of a character out of Maniac Mansion :)
Veronika Cheplygina
@cirrus @aral yes! Was going for panda bear first but it turned out well 😁
James Nash
@DrVeronikaCH @aral Hah! So you must have been one of the collaborators to make this... 🙌
hansup
@aral nice work! 👍😄
Aral Balkan
@hans Aww, thank you :)
:kitten:💕
Have you seen the code?
Aral Balkan
Haha, was just in a collaboration to help some folks complete this :)
https://draw-together.small-web.org
:kitten:💕
Telmo 🦕
@aral this is so fun!! A bit cadavre exquis. “11 times 52 kangaroo”
Aral Balkan
@OnceUponAGoblin :kitten: 💕
Or should I say 🦘
Aral Balkan
@nuagezero You’re very welcome :)
💕
nuagezero
@aral what a great and lovely tool, thanks ❤️ !
Sara Joy :happy_pepper:
Aral Balkan
@sarajw It has evolved :)
Aral Balkan
Where there’s a will…
Aral Balkan
@christian Haha, I was there for the checkerboard :)
:kitten:💕
Christian Alder
@aral Fun! I just spent a few hundred clicks making emoji faces with someone, before taking part in the full canvas checkerboard art project with what felt like at least two other folk :D
Aral Balkan
@sarajw @christian Hah! (Coincidentally, a song I love.) :)
Sara Joy :happy_pepper:
@aral @christian current mood: https://youtu.be/nVrdXUHvsF0?si=A0qNrwzjbBYZ33W8
Aral Balkan
Well, it lasted about 12 hours before folks managed to break it – that’s not bad ;)
Give me a few moments and I’ll have it back up and running with a patch or two :)
Aral Balkan
Take two ;)
(It’s back up an d running with a bit of data validation and I realised that I’d over-engineered it – yes, even in 60 lines of code – by storing all the updates in the database when I didn’t need to, so I removed that. Although, in the future, it would be fun to save time-series data so the drawings can be played back in real time.) :)
Play: https://draw-together.small-web.org
Source code: https://codeberg.org/aral/draw-together
Learn how it works: https://ar.al/2024/03/08/streaming-html/
Aral Balkan
@OnceUponAGoblin Ooh, wanna make one? That would be very neat :)
Telmo 🦕
@aral your game/toy deserves a bot that shares here on mastodon a screenshot of whatever is is on that moment every few minutes
Aral Balkan
OK, just added lower-bound checking too for the row and column indices so that should basically cover all bases.
If you do find a way to crash it, please file a bug at: https://codeberg.org/aral/draw-together
Thanks :)
Aral Balkan
@OnceUponAGoblin Haha :)
Telmo 🦕
@aral i like your faith in my non-existent hability for anything remotely related to code
Aral Balkan
A big thank-you to @paillp for poking the Draw Together Kitten toy with a stick and thereby discovering a big-old hole in Kitten’s new experimental Streaming HTML code where I was assuming (remember, kids, never assume…) the data was valid JSON.
I’ve now fixed that and deployed a new version of Kitten that doesn’t suffer from that issue.
If you do discover that you can crash the app and/or Kitten by doing unspeakable things to it, please file an issue or ping me here.
Christian Alder
@aral This was fun, thanks to whoever joined me in making it :D
Aral Balkan
Aww – just glanced at my Draw Together tab and saw this :)
:kitten: 💕
Aral Balkan
From kitty cat to… Batman?
draw-together.small-web.org
Aral Balkan
The state of my screenshots folder right now…
:awesome:
Aral Balkan
Folks, I see you experimenting with scripting—that’s cool, but please be considerate to the other folks playing with Draw Together.
To that end, I’ve just added two scripts you can use non-destructively to the readme. One to invert the canvas (which someone discovered literally minutes after I released the app) and the second that replaces the whole image with a pre-made design but then restores it after two seconds.
Please be kind, rewind ;)
:kitten:💕
Aral Balkan
I’ve also updated the readme with instructions on how to run Draw Together yourself (you could have it up and running locally in under a minute by installing Kitten, cloning the repository, and running the kitten command) and links to where you can learn more about the Streaming HTML magic in Kitten that means that the whole app is ~60 lines of code :)
https://codeberg.org/aral/draw-together#draw-together
#DrawTogether #Kitten #SmallWeb #web #dev #StreamingHTML #html #css #JavaScript #htmx #WebSocket
Hasko 🇪🇺🦄🌻
@aral can you crash me
Aral Balkan
@lontrachen Yeah, that was a message to a particular pentester who was being very helpful (plugged a hole in Kitten thanks to their help) :)
Aral Balkan
@Sh4d0w_H34rt Someone was attempting it at some point but it degenerated into chaos before they could get the lyrics out :)
Shadow Heart
@aral has anyone been Rick Rolled yet?
Aral Balkan
Right, I’ll leave you with a cute bunny someone drew (naughty cute bunny artist did not rewind though, tsk, tsk). Back to working on Kitten and Domain tomorrow so your timelines will be blissfully empty of pixel sketches :)
’night ’night all – and thank you to all the folks who contributed pixels to our shared ether of Draw Together over the weekend for restoring my faith in humanity a bit :)
https://draw-together.small-web.org
#DrawTogether #Kitten #Domain #SmallWeb #CuteBunny #NightNight
Aral Balkan
@setto 👍
𝖘𝖊𝖙𝖙𝖔𝖑𝖎𝖓Ⓐ 𓁣 probably
@aral@mastodon.ar.al
YEAH!
🇩🇰Blue
@aral Me when someone is messing up my rocket. (Yes, I’m that Immature.)
Aral Balkan
@mutter01 Hehe :)
Aral Balkan
👾
Aral Balkan
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 :)
https://draw-together.small-web.org
Aral Balkan
Thank you to those of you who showed up :)
Might record another take this afternoon.
Aral Balkan
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 :)
Aral Balkan
Thanks again to those of you who came by to toggle pixels with me. I’m happy with this take :)
Will release the video/article this evening :)
Aral Balkan
@wandy_dev Aw, thank you :)
PS. I just made a video about how to recreate it using Kitten:
wandy_dev
@aral this is insanely cool!
Aral Balkan
Aww, hello, kitty!
https://draw-together.small-web.org
:kitten:💕
(Learn how to build the app from scratch: https://ar.al/2024/03/26/draw-together/)
０７６萌ＳＮＳ is a social network, courtesy of ０７６. It runs on GNU social, version 2.0.2-beta0, available under the GNU Affero General Public License.
All ０７６萌ＳＮＳ content and data are available under the Creative Commons Attribution 3.0 license.