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

Lu1ky Pinball Code Walkthrough

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

LittleJS Breakout Tutorial

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.

Posted in Game Dev, JavaScript | 5 Comments

Scribbobbles at Proof of X in Tokyo

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!

Posted in Generative | Tagged , , | Leave a comment

My Artist Story – A Short Autobiography

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.

One of my early mixed media abstract works
Continue reading
Posted in Personal, Projects | Tagged , | Leave a comment

Squid – Undergrowth – Music Video Game

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!

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

Rad Impressions on 256Art

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 reading
Posted in Generative | Tagged , | Leave a comment

Tilemoji – Tweetable Emoji Art

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

Tilemoji on fxhash

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…

All 365 Tilemojis on fxhash
Continue reading
Posted in Generative | Tagged , , | Leave a comment