Dissecting A Dweet: Breaking Broke

Today we will examine the JavaScript code to make this awesome shatter effect. The concepts demonstrated by this dweet can be used for making a variety of cool effects. In one of my previous posts I showed a similar technique for making text spiral.

This effect can even be animated with just a bit more code which I will share at the end of the post. Keep reading full explanation of how it works!

with(x)save(beginPath(font="85em'")),moveTo(j=1e3,540),clip(arc(j,540,2e3,a=t*6.3+9,a+.1)),restore(t>1||fillText("BROKE",29*S(a**3),j,1900))
Continue reading
Posted in JavaScript | Tagged , , | Leave a comment

Dissecting A Dweet: Strange Attractor

Hello everyone, today we will be looking into the JavaScript code that generates this cool looking visualization of a Lorenz system. It is based on a set of simple equations that produces incredible fractal spirals first discovered by Edward Lorenz in 1963! If you’ve ever heard of the “butterfly effect”, that phrase originates from these equations and other work by Lorenz.

c.width|=X=Y=Z=1
for(i=4010;i--;i<2e3&&x.lineTo(960+(X*C(t)-Y*S(t))*45,1160-Z*23))Z+=(X*Y-Z)/39,X+=(Y-X)/13,Y+=X*(28-Z)/99
x.fill('evenodd') 
Continue reading
Posted in JavaScript | Tagged , , | 1 Comment

Dissecting A Dweet: Ring Weave

The dweet we will be looking at today may be the simplest one so far, but it’s every bit as mesmerizing and uses a neat trick to plot polar coordinates. There is plenty of room for playing around with the code to create cool remixes and loading style animations. Continue reading on for a full explanation of how it works!

c.width|=c.style.background="#CDF";for(j=3e3;j--;x.arc(960,540,430+60*S(j/500+a*4)*(S(a-t)/2+.5)**9,a,a))a=j/159+t,x.lineWidth=29
x.stroke()
Continue reading
Posted in JavaScript | Tagged , , | Leave a comment

Dissecting A Dweet: Mini Black Hole

Today we will be examining my most popular dweet, a miniature black hole simulation! It’s one of my easiest dweets to explain and the code is fairly straightforward. Read on for a full analysis…

for(i=0;i<2e3;x.fillRect(i?960+i*S(F=260*(t+9)/i+S(i*i)):0,i?500+.2*(2*i*C(F)+2e4/i):0,K=i++?S(i)*9:2e3,K))x.fillStyle=R(99*i,2*i,i,i?1:.4)
Continue reading
Posted in JavaScript | Tagged , , | 10 Comments

Dissecting A Dweet: Spirograph Design Generator

Today we will be examining this crazy small JavaScript program that generates an array of endless random spirograph designs. Read on for a full explanation of how it works.

for(i=144;q=(8+t>>3)*i--;x.fillRect(i%16*120+T(S),(i>>4)*120+T(C),2,2))t%24<1?c.width|=r=n=>S(q**n)*9|0:T=f=>5*r(4)*f(r(3)*t)+9*f(r(2)*t)+60
Continue reading
Posted in JavaScript | Tagged , , | 2 Comments

Dissecting A Dweet: Spiral JavaScript Quine

This is the first in a series of posts where I will analyze a dweet’s code, explain how it works, and why it was done that way. A dweet is a 140 character JavaScript program published on Dwitter. The goal is to write small compact code that does something interesting. This ends up being much different from typical programming and creating quality dweets is something of an art.

I’ve published several hundred dweets but this is one of my favorites. A simple yet beautiful program that creates a winding spiral with the text of it’s own code.

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

MinBytes – A Minimal Bytebeat Album in 1024 Bytes

This is a full album with 9 tracks and visualizer in 1k of JavaScript! Each song is created by a tiny function. For example, the first song on the album uses the simple function (t&t>>8). It is amazing the complexity and chaos that can arise from such a simple system. I’ve collected my experiments together into this album and made it available in several formats, please enjoy!

Live Demo @ minbytes.3d2k.com

Listen to the album on SoundCloud


Here’s the JavaScript code for the first song TAKEOFF!

// TAKEOFF ~ By Frank Force 2019 ~ minbytes.3d2k.com
A=new AudioContext
B=A.createBufferSource()
C=(B.buffer=A.createBuffer(1,1e7,1e5)).getChannelData(0)
C.set(C.map((_,t)=>t&t>>8))
B.connect(A.destination)
onclick=TAKEOFF=>B.start()
Posted in Music | Tagged , , | Leave a comment

“SPENDOTRON: 2019” – Ludum Dare 44

The theme for Ludum Dare 44 was “Your Life is Currency”. This was my 9th Ludum Dare and first one using Javascript. You can play it in browser on itch.io! It’s been over 4 years since the last time I’ve competed in a Ludum Dare so I’m excited to get back into it. I think this is one of my best entries, a super difficult twin stick shooter demake of Robotron. Continue reading for link to the game and my thoughts on the experience.

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

I made 7 1k JavaScript demos in 2 weeks for JS1k!

For the past month I have been doing a deep dive into making tiny JavaScript programs. It started when I learned the JS1k (JavasScript 1 kilobyte) competition was underway, with the deadline rapidly approaching. I had programmed only a small amount of JavaScript before, but always wanted to learn more. It’s such a fun language, fast, simple, accessible, and it runs in any modern web browser. Byte for byte I don’t think there’s a better language for “code golf”.

So, I took the plunge and spent 2 weeks working on JS1k entries all day, every day. I learned a lot, had some fun, and made 7 new JavaScript demos. Read on for an epic postmortem with technical notes!

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

I’m only making business card sized games now

Over the years I’ve worked on many games, some big, some small. I’ve found that the smaller the game, the more fun I seem to have making it. So I set out to make the smallest game I possibly could, and it was a blast.

Ladies and gentlemen, I give you the smallest game I’ve ever released. I call it “Tiny Ski!”, and it’s 960 bytes of pure magic. Please watch this short demonstration and continue reading for more info and source code.

Continue reading

Posted in Game Dev | Tagged | 27 Comments