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.

View post on imgur.com

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

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 →

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 →

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

View post on imgur.com

Continue reading →

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

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)

View post on imgur.com

Continue reading →

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

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.