Adventures in Tiny Coding – My 2019 In Review

Last year was an interesting and productive year. Mostly I’ve been doing a deep dive into web development and JavaScript, while making ton of games, tools, tiny programs, and animations. The central theme to nearly everything I have been doing is something you might call “Tiny Coding”.

Tiny Ski code printed on a business card

My adventure in tiny coding began on April fools day, strangely enough. For the previous several weeks I had gone perhaps slightly mad, feverishly working on tiny C++ skiing game. Inspired by Andrew Kensler’s Business Card Ray Tracer, I had the urge to make a tiny game to print on the back of on my business card. On April first I published a half joking post about how I would only be making business card sized games now. Little did I know that would not be far from the truth.

I soon discovered the last annual JS1k was already in progress, a competition for making tiny JavaScript programs. At the time I had little experience with JavaScript but I was eager to learn. So I toiled for 2 weeks straight and ended up submitted 6 programs. My favorites are Queen’s Gambit (a robotron chess mashup) and Digit Dilemma (a tough new puzzle game).

Continuing my journey I stumbled across Dwitter, a website where people post tiny JavaScript programs that make art. I was (and still am) blown away by the wonders contained there, and knew that I needed to learn more. Fast forward about six months and over seven hundred dweets I can confident say that I am a master code golfer, though there is always more to discover. In fact I’ve made so many dweets that I created a special tool called The Dweetabase that can be used to quickly browse through them.

I was disappointed that I was unable to find a good tool to capture all the JavaScript animations I was producing, so I decided to make my own! This tool, called CapJS, has received considerable polish with some nice features like a fancy Code Mirror editor, Shadertoy support, beautifier, minifier, centering overlay, watch window, and easy to use drag and drop loading.

I began writing a column called “Dissecting a Dweet” that explains how some of these tiny programs work, which I post right here on my blog. The most popular one by far was “#3 – Mini Black Hole” is a good place to start. So far I’ve released eight of these and I have roughly the first twenty planned out if interest continues.

Towards the end of the year I moved on to building some larger programs, but still sticking with this new “tiny code” philosophy. For JS13k I made “Bounce Back”Β an action adventure roguelite that won second place! I also made “Bogus Roads” for #LowResJam, one of my most complete game with 3 procedural generated levels and 5 music tracks. A few weeks ago at MAGFest I presented a talk on tiny coding to a packed audience which I will continue refining for submission to GDC.

One of the coolest tools I’ve released is ZzFX, a tiny sound effect generator for people to use in their JavaScript games. This began as JS1k entry but I greatly improved it, added a better interface, cleaned up the code, and put it on GitHub. I felt something like this would be a boon to everyone that makes these kind of tiny games. To my delight, many people have already used it including some really incredible games like “The Wandering Wraith” by Mateusz Tomczyk.

Late in the year I released ZzArt on GitHub, a tool that can evolve abstract art using GLSL shaders. Though the code itself is fairly simple, I have been completely amazed by the results. I now have saved hundreds of amazing images, and ended up getting many of them printed for holiday gifts. I even had a few poster sized prints made and hung them in my living room! I will definitely continue developing this.

I recently had some exciting news recently when one of my videos won “Best Illusion of The Year” and now has over two million views! There are many more amazing things that I’ve left out, so keep reading for a organized list of everything I’ve done in 2019. Follow me on twitter for daily updates on my progress. Here’s to an amazing 2020 for everyone!

Continue reading

Posted in Projects | Tagged , | Leave a comment

Best Illusion of The Year 2019

Holy cow, I won Best Illusion of the Year! Thank you to the contest organizers, other participants and fellow illusion chasers.

This spinning shape appears to defy logic by rotating around both the horizontal and vertical axis at the same time! To make things even more confusing, the direction of rotation is also ambiguous. Some visual cues in the video will help viewers change their perception.

More Info…

Posted in Projects | Tagged , , | Leave a comment

JSONCrush – Compress JSON into URL friendly strings

I just open sourced an amazingly useful tool called JSONCrush. This simple system allows for excellent compression of URI encoded JSON strings using the JSCrush algorithm. It seems almost like magic how well it works. The minified version is under 2k of JavaScript!

JSONCrush on GitHub

Example

JSON – 103 bytes

{"students":[{"name":"Jack","age":17},{"name":"Jill","age":16},{"name":"Sue","age":16}],"class":"math"}

URI Encoded Component – 199 bytes

%7B%22students%22%3A%5B%7B%22name%22%3A%22Jack%22%2C%22age%22%3A17%7D%2C%7B%22name%22%3A%22Jill%22%2C%22age%22%3A16%7D%2C%7B%22name%22%3A%22Sue%22%2C%22age%22%3A16%7D%5D%2C%22class%22%3A%22math%22%7D

JSONCrushed – 81 bytes! 59% smaller

('students!%5B*Jack-7.Jill-6.Sue-6)%5D~class!'math')*('name!'-'~age!1.)%2C*%01.-*
Posted in JavaScript | Tagged , , | Leave a comment

ZzArt – Abstract Art Evolution

This tool generates GLSL shaders (basically a bunch of math equations) that you can evolve into incredibly varied works of abstract generative art.

Images can be bookmarked, save as HD pngs or exported as GLSL shader code. The satellite feature shows a full screen preview on a second monitor. It even works on most mobile devices.

This is a work currently underdevelopment but it’s far enough to share. I am constantly adding new features and improvements. If you make anything cool, please share, I’d love to see it!

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

Dissecting A Dweet #8: Shattered Tunnel

Howdy, folks! Today we will be looking at the JavaScript code behind this amazing 3D tunnel effect. This code has an interesting lineage so we’ll also talk about some of the history behind it.

for(c.width|=k=i=960;z=--i;x.fillStyle=`hsl(0 99%${i/9}%`)x.fillRect(k-z*C(j=i/k+t/4)+S(m=k*j)*(r=1e5/z),540+C(m)*r-z*S(j),s=3e4/z*S(j*9),s)

Continue reading on for a full explanation of how it works!

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

Bounce Back Postmortem

The JS13k competition has been going on every year since 2012 but this was my first year entering. Participants get 1 month to make an original 13 kilobyte JavaScript game. This year the theme was “Back” and there were 245 entries! Bounce Back got 2nd place!

My game “Bounce Back” is a procedurally generated adventure game using a boomerang as the primary weapon. I was inspired to create an homage to one of my favorite games “Zelda: Link’s Awakening”. The game was mostly written from scratch and took about two weeks to complete. For the past few months I’ve been practicing JavaScript every day and learning more about game design. So I pulled out all the stops and put everything I’ve learned into practice, hopefully it shows!

In this post I will explain how my game works and the process I went through. Before reading, please take a few moments to play the game if you haven’t already. The source code is also available on GitHub!

Play Bounce Back – Latest Version

Official JS13k Entry – 13 Kilobyte Version

Bounce Back Source Code – GitHub Repository

Continue reading
Posted in Game Dev, JavaScript | Tagged , , , | 4 Comments

Bounce Back: A Boomerang Roguelite for JS13k

When life gets you down, it’s never too late to…

A Boomerang Roguelite / Zelda Homage for JS13k.

Play it in your web browser!

The souce code is also available on GitHub!

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

ZzFX – Zuper Zmall Zeeded Zound Zynth

Major update to ZzFX, my JavaScript sound effect generator! The browser is greatly improved with many more options. You can even download wave files! The micro version is still under 500 bytes.

Live Demo: zzfx.3d2k.com

github.com/KilledByAPixel

Here’s the latest version of the ZzFXmicro JavaScript code…

// ZzFX - Zuper Zmall Zound Zynth - Copyright 2019 Frank Force - MIT License
zzfxV=.3 // volume zzfx= // play sound (p=1,k=.05,b=220,e=0,r=0,t=.1,q=0,D=1,u=0,y=0,v=0,z=0,l=0,E=0,A=0,F=0,c=0,w=1,m=0,B=0)=>{let M=Math,R=44100,d=2*M.PI,G=u*=500*d/R/R,C=b*=(1-k+2*k*M.random(k=[]))*d/R,g=0,H=0,a=0,n=1,I=0,J=0,f=0,x,h;e=R*e+9;m*=R;r*=R;t*=R;c*=R;y*=500*d/R**3;A*=d/R;v*=d/R;z*=R;l=R*l|0;for(h=e+m+r+t+c|0;a<h;k[a++]=f)++J%(100*F|0)||(f=q?1<q?2<q?3<q?M.sin((g%d)**3):M.max(M.min(M.tan(g),1),-1):1-(2*g/d%2+2)%2:1-4*M.abs(M.round(g/d)-g/d):M.sin(g),f=(l?1-B+B*M.sin(d*a/l):1)*(0<f?1:-1)*M.abs(f)**D*p*zzfxV*(a<e?a/e:a<e+m?1-(a-e)/m*(1-w):a<e+m+r?w:a<h-c?(h-a-c)/t*w:0),f=c?f/2+(c>a?0:(a<h-c?1:(h-a)/c)*k[a-c|0]/2):f),x=(b+=u+=y)*M.cos(A*H++),g+=x-x*E*(1-1E9*(M.sin(a)+1)%2),n&&++n>z&&(b+=v,C+=v,n=0),!l||++I%l||(b=C,u=G,n||=1);p=zzfxX.createBuffer(1,h,R);p.getChannelData(0).set(k);b=zzfxX.createBufferSource();b.buffer=p;b.connect(zzfxX.destination);b.start();return b} zzfxX=new(window.AudioContext||webkitAudioContext) // audio context

Posted in JavaScript | Tagged , , , | 1 Comment

Dissecting A Dweet #7: Parallax Mountains

Today we will dissect the tiny JavaScript code that draws a parallax background with mountains and sky. This simple code can be used as a base to create different types of background scenes for your game or website.

for(w=i=99;i--;)for(j=0;j<9;x.fillRect(i*20,j++?w*j+w+w*C(q/9)/j+59*C(q/3.9)/j:0,20,3e3))q=(j*w+i+t*j**3),x.fillStyle=R(9+j*40%w,j*20,w-j*9)

Continue reading on for a full explanation of how it works!

Continue reading

Posted in JavaScript | Tagged , , , | 1 Comment

Bogus Roads: LowRez Game Jam

My 64×64 pixel game for LowRezJam is out, go play it now!

This game is a complete experience with everything from a main menu to a win screen and tons of polish. The gameplay is simple but I invested a lot of time tweaking it to feel awesome. I also recorded 6 news songs for the sound track!

The entire game was made in about week for lowrez jam 2019. I loved working in the 64×64 pixel resolution, it was a fun challenge. For development I used JavaScript, Three.js and Brackets as an editor. I recorded the music using Figure by Propellerhead.

You can play it in just about any web browser, and it supports mouse or gamepad. Have fun!

Update: The judging results are in! My game got 2nd place for gameplay and 8th place overall. I also scored 8th place in audio and 18th place in graphics.

Posted in Game Dev | Tagged , | Leave a comment