City In A Bottle – A 256 Byte Raycasting System

Hello size coding fans. Today, I have something amazing to share: A tiny raycasting engine and city generator that fits in a standalone 256 byte html file.

In this post I will share all the secrets about how this magical program works. Here’s my tweet that contains the code and a video of the outputโ€ฆ

You may have already seen this post on my twitter timeline. After I originally released it about 2 years ago it ended up being one of my most popular tweets ever. Thank you for supporting this strange obsession of mine. Keep reading and I will try my best to explain how and why it works the way it does…

Continue reading
Posted in JavaScript | Tagged , , , | 7 Comments

New Piroot Trailer – Happy Pi Day

It’s Pi day and new trailer for Piroot is here and the steam store is officially live! Wishlist it today!

Posted in Uncategorized | Leave a comment

Piroot – An Epic Adventure Game

There’s a new website up for Piroot, the action adventure game that I have been working on for many years. Also, some big news is coming on Pi Day, 3.14!

Posted in Game Dev | Tagged , | Leave a comment

Bitwise ๐Ÿ“ผ Liminal – A Short Film in 256 Bytes

I found an old VHS tape at a yard sale. It was labeled “Bitwise Liminal” in sharpie. But when I watched the video it was only static.

Then I started having vivid and surreal dreams. While awake I couldn’t stop thinking about that weird VHS tape.

After researching I learned it was a digital backup. Using some special software I recovered the data. To my shock, it was a 256 byte program…

With trembling hands I opened it in a web browser. Strange. This reminds me of the dreams I’ve been having.

Now I don’t need to sleep anymore. I just keep watching.

<canvas id=c><svg onload=setInterval("for(t+=.1,R=T=C=Math.cos,c.width=w=128,i=9986,V=t/9&3;Y=i--/w;c.getContext`2d`.fillRect(X,Y,(C(t/6)*T^V*i/1e4*T+t)%20?(R=T++,1):(T=9,19/R),5/Z))for(Z=5,X=i%w+4/R;0<(V*95+C(t/3)+Z*X/64-Z^Z|(60-Y)*Z/58)%13;Z+=.2);",t=9)>
Posted in JavaScript | Tagged , | Leave a comment

LittleJS Engine – Community Game Showcase

It’s been over 2 years since the LittleJS engine was launched and it is still going strong! There have been improvements across the board to make the engine super tight and powerful. To name a few, post processing effects, native wave/mp3 support, typescript compatibility, and NodeJS build system. I also produced a nice intro tutorial to help onboard new users.

In this video we are celebrating some outstanding games made by the community. It is wonderful to see such impressive variety of style and genera in this collection. Here’s to the continued success and boundless potential of LittleJS. Full steam ahead, Choo Choo!

Posted in Game Dev | Tagged | Leave a comment

FxVase – Interactive Pottery Simulation

Sculpt, glaze, and fire your own virtual pottery, then mint it on the blockchain to share with the world! This interactive tool allows for a wide range of expressive sculptures to be rendered in real time and saved in HD. It was written from scratch with vanilla JS and webgl shaders using a rendering technique called ray marching.

Posted in Game Dev, Generative | Tagged , | Leave a comment

Free Workshop: How to make amazing generative art with simple JavaScript code

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!

Posted in Generative | Tagged , , | Leave a comment

JavaScript Haikus: My Adventures in Tiny Code

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.

Posted in Generative, JavaScript | Tagged , , | Leave a comment

How I made a 1K Pinball Game in JavaScript – Lu1ky Pinball

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:rUf=Ahypot(y=-x,o=-yTg-,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%8Vx7	,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 reading
Posted in Game Dev, JavaScript | Tagged , , | Leave a comment

Lu1ky Pinball

My 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.

How to Play

  • Left flipper = Z or mouse left
  • Right flipper = X or mouse right
  • Ball launcher = C or mouse click
  • Free ball every 64 points
  • Chrome browser recommended

Features

  • Physics simulation
  • Pinball machine layout
  • Ball launcher
  • Rotating flipper
  • Bumper animation
  • Score tracking and display
  • Ball display
Posted in JavaScript | Tagged , , | Leave a comment