NoteCraft Submitted to JS13k

Play The Official JS13k Entry

NoteCraft on GitHub

Features

  • Export to ZzFXM and OS13k
  • Share compressed links
  • Several example songs
  • Instruments are customizable
  • Undo and Redo
  • Cut, copy, and paste
  • Turing complete!
Posted in JavaScript, Music | Tagged , , , | Leave a comment

OS13k Submitted to JS13k

Play The Official JS13k Entry

OS13k on GitHub

Features

  • 3 Games!
  • JS13k Trophy System
  • ZzFXM Music Player
  • ZzFX Sounds
  • Piano & Visualizer
  • Custom User Programs & Dweets
  • More apps and bonus features

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

1Keys – How I Made a Piano in only 1kb of JavaScript

Digit Dilemma

The legendary JavaScript competition JS1k was thought to have ended, but it has risen from it’s ashes in the form of JS1024! This competition for making tiny JavaScript programs has been going on for 10 years and will now be continuing under a new name. Thank you to the organizers and other participants, you should definitely check out some of the other entries.

Figuring out how make something cool with such a small amount of code is quite the challenge, but it’s not my first rodeo. This year I submitted two programs, so check out my other entry, Digit Dilemma Plus, a logic puzzle game with procedural levels. The contest provides “shims”, html starter code for canvas and WebGL programs, but neither of my entries use them.

JavaScript provides a powerful though simple audio library, the Web Audio API. I first explored it while developing ZzFX, a tiny sound effect system. For while I’ve been itching to make some musical instruments. This demo works much differently from ZzFX, mostly using the oscillator and gain nodes.

In this post I will go through every single line of my 1 kilobyte piano and explain how some of the trickier parts work. The whole thing is open source on GitHub and has a some improvements since my JS1024 submission. So please continue reading and let’s make sweet music together!

Here’s 1Keys running live in a CodePen for you to mess around with. It can be played with either the mouse or keyboard.

See the Pen 🎹 1Keys – 1k Version by Frank Force (@KilledByAPixel) on CodePen.

Source Code on GitHub

Official JS1024 Entry

Update: 1Keys won first place in JS1024 2020!

Continue reading
Posted in JavaScript, Music | Tagged , , , | 17 Comments

Major ZzFX Update

New ZzFX Features

  • 19 parameters (over twice as many)
  • 7 Presets for easier sound effect creation
  • Improved web browser compatibility
  • Streamlined user interface and workflow
  • Cleaner and simpler code
  • The fully minified version is under 1 kilobyte.
  • So much more!

ZzFX Sound Designer

ZzFX on GitHub

Posted in Game Dev, JavaScript, Projects | Tagged , , | 1 Comment

Interactive Mandelbrot Particles

An experiment to visualize how points move around the mandelbrot set. Draw with your mouse and watch the Mandelbrot set do it’s magic!

See the Pen Interactive Mandelbrot Particles by Frank Force (@KilledByAPixel) on CodePen.

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

Tiny Coding: Making Big Games With Little Code

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

How I made a 3D game in only 2KB of JavaScript

Months ago, when I heard that the legendary JS1k game jam would not be continuing, I talked it over with some other devs and decided to help fill the void we would host a 2k game jam on itch called 2kPlus Jam. The primary goal of this comp was to create a game that fits entirely in a 2 kilobyte zip file. That is incredibly small, for point of reference a 3.5 floppy disk could hold over 700 of these games.

My entry, Hue Jumper, is an homage to 80’s racing game rendering technology. The 3D graphics and physics engine was implemented from scratch in pure JavaScript. I also spent ungodly hours tweaking the gameplay and visuals.

The theme for the game jam was “Shift” which I incorporated by shifting the hue for the world’s color when the player crosses a checkpoint. I imagined that crossing a checkpoint was fictionally like shifting or jumping into a new dimension with a different hue, which is how I came up with the name “Hue Jumper”.

This post is going to be a bit long because it contains the JavaScript code for my game in it’s entirety. The code is already well commented so I’m not going to explain every line of it nor are you expected to read through all the code now. Instead my goal is to explain how it works, why I made it this way, and walk you through the overall structure. This same code is on CodePen for you to play around with live. So please continue reading, buckle up, and hold onto your butts!

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

Hue Jumper – A 2 Kilobyte 3D racing game in JavaScript

For 2kPlus jam I made a 3D racing game that fits in 2 kilobyte zip! It includes physics, controls, rendering engine, and procedural level generator. The code is extremely dense and clean as I went through many iterations to fit everything. I also spent an immense amount of time polishing the look and feel. You can play the game in browser, or view the code on GitHub. I am working on a post that will go into some technical detail about how my game works. Also, check the other submissions to 2kPlus jam, there are some mind blowing entries!

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

Egg Time Rewind – An egg cracking low res shooter


Time REWINDS you die… but your PREVIOUS LIVES remain.

This game was made in 4 days for Nokia 3310 Jam 2 with the limitation of 84×48 resolution and only 2 colors. The them was “Death is Good”. It is written in JavaScript building off the code used by my js13k game Bounce Back.

I used the theme by having ghosts of your previous lives return to help you after each death. There is also a juggling mechanic like the Twin Bee / Stinger series of games where you can juggle an egg for massive bonus points. The level is procedurally generated every time you start a new game and gets progressively more difficult over time.

The game can be played with keyboard, mouse, or gamepad in several different configurations. There are 2 ways to shoot, hold fire for fully auto, or wait to charge up a powerful blast.

Player’s high score is tracked to add some replay value, though it is a pretty simple game. The font and font rendering system is the same one I made for Bogus Roads. The sound effects use ZzFX, my tiny JavaScript sound generator.

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

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