I Made a Clock that's a Conway's Game of Life
HTML-код
- Опубликовано: 13 июн 2024
- In this video I’m looking at how you can build original projects for your web dev portfolio starting with literally nothing but a blank google doc and ending with a bunch of insanely ambitious ideas and a working clock that's made with CSS and is also a digital life form. Sort of. Spoiler: Margareth Thatcher is to blame.
Enjoy! (Hope it’s useful too)
The Clock:
odddirector.github.io/time_of...
The cheap tablet:
amzn.to/42CnrV4
The tablet that should work better for more complex clock configurations:
amzn.to/487hkcB
(those are all affiliate links) (Amazon pays me if someone buys something through those) (very little) (still helps) (every little helps)
(a great gift for someone or yourself) (did I say that already?)
0:00 The Wombats
0:20 Think Different Jobs Tim
1:17 Why clock? (Margaret Thatcher)
1:34 Get an Insane Idea for Your Project Easy!
2:03 The Brainstorming & I hit a fridge
3:20 A Clock That’s Alive
4:17 Building the Alive Clock
6:04 How it Works
6:38 The Basic Working Alive Clock
7:17 The Crazy Variations of the Alive Clock
7:59 Putting it in the Interior
8:23 Idea #2 (and it’s impossible)
The source code:
(not the movie with Jake Gyllenhaal, the actual source code)
github.com/odddirector/time_o... 
Наука
So I thought I’d clarify something after you thought something I thought was funny, wasn’t funny.
The ChatGpt prompt was:
"write a javascript where a canvas 90 px high by 200 wide will display current time in big black digits and then every second convert this image on the canvas into a two-dimensional javascript array, where 0 would represent white and 1 would represent black, and log it to console"
That's it. The rest was written by me.
github.com/odddirector/time_of_life/commits/main/
Well and by Robert Spatz who’s written the original game of life in js. codepen.io/RBSpatz/pen/rLyNLb
There is an interesting conversation to be had about heavily using AI in a dev process (I don’t think there is anything wrong with it personally, especially for fast prototyping).
Could be a cool topic for a separate video.
this channel is going to blow up - you're really onto something here editing style and pacing is off the charts and perfect use of A.I assistance
Thank you so much! Feedback like this is very important to me.
Don't really know why this was recommended to me, but it was hilarious! Good job 😂
Thanks!
Interesting... You mean you don't watch anything web dev related? (trying a different youtube setting with this one, hence especially interested)
I lovr that the answer is "f that" for the time-heavy approaches. I need to say that more.
Its a very good point, thanks! Still not sure if I'm saying it often enough myself, but running a YT channel with a posting schedule definitely helps.
Amazing production and ideas, loving it
Thank you!
Watched the whole thing and was shocked to see that this has only 300 views. Very well made video. Reminded me a bit of code bullet
And you're not alone there 😅 This thing had like 40 views for the first three days, when my other videos usually get around 2-4k. RUclips is a weird game.
Thank you!
And thanks for the code bullet reference! I didn't know him!
I watched this yesterday and came back to comment (after watching some of your others) and you've got over a thousand extra views since then! Good - I was amazed you only had views in the hundreds for such great content. (I don't really have anything else to add apart from a little juice for the algo overlord)
Thank you!
Yes, the overlord works in mysterious ways. 😅
Maybe I'll figure it out some day.
(could be that a child sacrifice is required)
amazing work dude!!!
Thanks! 😀
This is ART. Hell yeah
Thanks! 😊
It's an interesting point actually. I'd be more tempted to call it "design".
That, or "Another stupid thing Philipp has made". 😂
Did ChatGPT really do all the website's code by itself or did it give you an idea and you converted that idea into code?
Hey!
So ChatGPT only wrote a script that created the running clock on the canvas and converted it to the array of zeros and ones every second. The rest was written by me:
github.com/odddirector/time_of_life/commits/main/
And the original js/css game of life of course was written by Robert Spatz codepen.io/RBSpatz/pen/rLyNLb
The chatgpt prompt was:
"write a javascript where a canvas 90 px high by 200 wide will display current time in big black digits and then every second convert this image on the canvas into a two-dimensional javascript array, where 0 would represent white and 1 would represent black, and log it to console"
"All CSS"
Like you didn't just use HTML and JS when you had to XD
Honestly I don't even know what "all CSS" means when people generally say it, since at least HTML would probably be required (maybe)
the result's zalgo-ish
Î̴̞͖͙͑̀ ̶̳̻̭͆̑d̶̼̟͠ŏ̸̬̲̉͘͜n̸̺̰̟͉͊̌̓͘'̷͈͖̫̒ͅt̵͙̲͛ ̶͉̳̎̀͝k̸̯̤͇̿̏͛͆n̴̞̜̜͍̅͆̾̀o̸̭̙͇̎w̵̼̣̾̈́̂̀͜ͅ ̵̓͜͠w̷̧̢̘̭͗ḫ̷́ͅâ̴̢̟̠̰͐̄͘t̵͚̹̜͍̍̿̎ ̷̖͌͛̐̈́ỳ̶͎̞̤ō̷̠͚̣̯̇u̴̪͂̓̓̕'̵̹̻̑̍͝͝r̷̳͐̑̍e̶̬̤̩͗̍͝͠ ̸̤̭͓̊ṭ̸̲̒̈̕a̴͋ͅl̶̝̽k̸͎̋́̑i̵̹̙̥͋̎̈́͂n̸̨̎̈g̷̨͖̤͋ ̷̡͖͖̈̇a̵̤͂͌̆b̷̻͚̣̲͐̐͘͠o̸͉̻͔̠͐͋̀͝ǘ̴̖̬̙͈̿̎t̸̥́̌͂.̸͇̜͍̓̊̀
odd!
very.
lost me at the part where you started using AI
same
😅 The ai really just wrote a script where it creates the canvas element with the clock displayed on it, and then every second converts it to an image, reads each pixel, converts it to either 1 or 0 and puts it into an array.
I then loop through that array and if a number is 0, make a game of life cell with the same index black (alive), if its 1 -- I make it white (dead).
And my game of life is a table where a number of cells matches the number of pixels in that clock image.
I explain it here in a Doc Brown style 6:04 😅
@@odddirector you still used ai...
@@TehNitro ahh so by "lost me" you meant you lost interest in the video?
I see ai as just another tool really, especially when you're building something fun / or a proof-of-concept-like on a tight schedule.
@@odddirector I wouldve enjoyed the video more if you coded it yourself
ugh stopped watching as soon as I saw AI shart
Its just another tool that helps speed up the build process, especially when its a proof of concept like this.
AI makes better code than you.