My workshop from last year’s JS Game Dev Summit is now available for free! This three hour course starts with how to create a basic HTML file and goes to advanced graphical effects by the end. It was recorded live with a class that participated by asking questions which helped guide the talk. It’s a great introduction to making generative art and learning how it works even if you’ve never programmed before!
My talk for the 2023 JS GameDev Summit goes on a 20 minute deep dive into my strange practice of making art with super small computer programs. I hope you enjoy.
I’ve made quite a few 1k games now, yet I always find room for improvement and there is so much more to explore in this space. For the JS1024 contest this year the theme was Lucky and I made a tiny pinball machine. It received 1st place in the JavaScript category! I have been wondering for a while how realistic of a pinball sim could be achieved with such a limited amount of code.
This post will walk you through every line for my tiny pinball game that fits in 1 kilobyte of JavaScript. How much is 1k you ask? This much…
for(_='00F*rE8F-7ED/f)*hCin(BMath.AAsB@keyZ1,Y0,XXYWr=V),UUVT-rS69R15Qe. a. f- r- r -=( )* *Acos( x,y,t, w x ge=n[--;)for();209+=+rw(482(2*h-1)EU+*(1 ,X9)) 60 n[h] y=a=>n[ Z]=h=2;h*,;rU5Fc.beginPath(c.fill(c.arc(w=(V9)=>n.push({r,g:Xw:0}n=[x=3,1],i=g=X1e3T65{);RY79XX6)}{,816,18WQ+ 12W45+ 24W45U-21032W70T1Q5F+D+182539,YQT 673,D+* r/38U-*@r/38)V19+Q4R7-7 54-4EUR7+3 FUR0-3E,Y5%3*24438S%9*2W5)}onZdownYonZupXsetInterval(`w=9;w{=Amax(-YAmBYn["zx"[h]]?-.07:.05)T653+65*h],=-+(=482+*(80S /2))U=-+(=7 *@/2)U VQS/8,133],=AmB790,=n.c?.05:@++i)/99+(7 -)/19); width|=2],,.F17,1e3<&&x&&(=RY=74X==Xx--Un.map((a=>{w|| x, y, b?-- b+ r: r Uf=Ahypot(y=- x,o=- yT g-,t= w-,0> &0<r*y+t*o&!( t&!)&&( y/f, o/f,f*=f/(t*yS*oUh=! t| b?1.3:( b=9, 0< y||(++g%64||++xU1.7U(r+oC,(t-yC)}))}Vg+8>>32 S%8*2X420+3E,r?9:g%8 Vx7 ,420+ E,25 )`,16)';G=/[- Q-Z@-F]/.exec(_);)with(_.split(G))_=join(shift());eval(_)That’s how the code looks after being fully minified, though no one would be expected to recognize it at that point. In addition to being minified, it has also been regpacked which is a special tool for size coding that can create compressed JavaScript code that can uncompress itself.
What does it all mean? Keep reading to find out.
Continue readingMy JS1024 game this year is a tiny pinball machine with real physics!
See the Pen Lu1ky Pinball 🍀 Tiny pinball physics game in 1K of JS by Frank Force (@KilledByAPixel) on CodePen.
This video walks you through how to make a small game from scratch with the LittleJS open source game engine. It covers graphics, sound, input, effects, and gameplay.
We will make a breakout style game with a player controllable paddle, a ball that bounces, and bricks that break when hit. This is a great introduction to LittleJS and takes only around 30 minutes to complete. The tutorial is also available on GitHub for you to follow along.
My first generative art project with customizable parameters explores a glitchy circle packing algorithm with a hand drawn aesthetic. It being featured at the Proof of X art exhibition in Tokyo Japan!
Visitors of the exhibition can mint the piece live and personalize their result by adjusting parameters to control color and style. It’s fun to seeing what other people come up with.
Everything was created in vanilla JavaScript, no external libraries used. I first posted a work in progress for this piece almost a year ago in last September! After sitting in my unfinished folder for almost a year, it feels so good to put this one out into the world!
I was born in the city of Philadelphia and we moved to a suburb while still in elementary school. I lived with my parents and younger siblings, two brothers and a sister. From as early as I can remember I was interested in art and my parents did their best to encourage my creativity. Though money was always difficult in my family, they made sure I had plenty of art supplies and even sent me to special classes at the Philadelphia Art Institute.
I worked with the band Squid to make a special game for their new single, it’s like an interactive music video that you can play! The game uses my open source game engine LittleJS and works in your browser on desktop and mobile devices. They even made a commercial for the game, check it out!
My latest generative art release uses a special raymarching system I designed to render realistic abstract sculptures. It’s called Rad Impressions!
Keep reading to learn the story behind the art…
Continue readingTo celebrate the first year of fxhash, artists were invited to create special collections of 365 edition generative works. I decided to try a crazy idea I’ve had for a while and release a project that uses only emojis to create tweetable artwork. Since there is no image used, the art can be copied like normal text for display on social media! I chose this simple output as the preview.
🟥🟥🟥🟥🟥
🟥🔵🔵🔵🟥
🟥🔵🟡🔵🟥
🟥🔵🔵🔵🟥
🟥🟥🟥🟥🟥
Most results are designed to fit in a 280 character tweet, except for rare extra large variants. Five different generative algorithms possible, each with their own set of parameters. Several other features round out the set including shadow, color count, border, background options.
Here is a mosaic showing every Tilemoji, thank you to everyone that got one! Keep reading for some more info about how the project works…
fx(fam)
2.0 launch edition
🗓️ 10 am est/4 pm cet, 11/28
tomorrow, join us alongside hosts @WaitingToSign as we go live to talk fxhash 2.0!
we'll start w/ a brief overview of fxhash newcomers, then dive into the launch calendar & glean insights about the art + curation efforts…
😊 Don't worry guys, #SpaceHuggers works on the #SteamDeck in Desktop mode.
Well.. it's recognizing the controller's inputs as keyboard inputs:
L1=Ctrl left
R1=Alt Left
L2=right click
R2=left click
X=Page Up
Y=Page Down
A=Enter
B=Space
Left Stick/D-pad=Arrow keys
