Top dweets by u/FireFly

function u(t) {

c.width=1920 // clear the canvas
for(i=0;i<9;i++)
x.fillRect(400+i*100+S(t)*300,400,50,200) // draw 50x200 rects

} // 122/140

Please log in (or register) to post a dweet (copy-paste the code somewhere safe to save it meanwhile)


    u(t) is called 60 times per second.
    t: Elapsed time in seconds.
    S: Shorthand for Math.sin.
    C: Shorthand for Math.cos.
    T: Shorthand for Math.tan.
    R: Function that generates rgba-strings, usage ex.: R(255, 255, 255, 0.5)
    c: A 1920x1080 canvas.
    x: A 2D context for that canvas.

Try the new frontend: beta.dwitter.net
Current theme challenge: #ScaryMovies

show FPS hide FPS share 1 remix fullscreen

FireFly

function u(t) {

for(c.width|=M=Math,i=2e4;i--;x.fillRect(A*8,B*8,W=9+M.atan2(M.sqrt(1-X*X-Y*Y),X)*3-t*4&7^4-M.asin(Y)*3,W))X=(A=i%135)/67-1,Y=(B=i/135)/67-1

Mar 4 2017 6:26 PM UTC

}// 140/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

Raycasted rotating sphere with UV-mapping!

Show more comments…
u/sfz

... ??? !!!
u/iverjo

Impressive! I like the c.width|=M=Math hack. Apparently Math is evaluated to NaN in the process.
u/iverjo

http://stackoverflow.com/a/11037887/2319697
u/alien

god... i can't understand this yet but is awesome...
u/sigveseb

So good!
u/donbright

standing ovation
u/tomkh

great job! some tricks here really opens new possibilities
u/mxfh

you can do M.sqrt() with ES6 power operator as **.5 should yield a net gain of 2 chars
u/FireFly

Oh right! I haven't gotten used to it yet since I'm on Fx51, which doesn't seem to support ** yet. Thanks!
u/FireFly

Oh, and also thanks for all the positive responses, everyone :)
u/iverjo

#sphere
u/lionleaf

#disco
u/f8f82804

#halftone #dithering #shading

show FPS hide FPS share 1 remix fullscreen

FireFly

function u(t) {

t||x.translate(X=960,540,c.onmousemove=e=>X=e.offsetX);for(i=80;i--;x.rotate(8))x.fillStyle=`hsl(${X},80%,${i}%)`,x.fillRect(i,S(t)*960,i,i)

Feb 28 2017 9:39 PM UTC

}// 140/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

Interactive demo! Move your mouse to change colour!

Show more comments…
u/FireFly

Thanks to veubeke and p01 for golfing tips :)
u/lionleaf

Oh wow! That's amazing
u/sigveseb

really nice!
u/iverjo

Sick!
u/profit

really cool!
u/lionleaf

On mobile you can tap at different locations for different colors
u/sfacci

ridiculously awesome
u/SpecialAgent

Excellent! And packed full of useful technical tricks, double whammy!
u/Xen

Done Re-mi(X)en
u/jaemiejaemie

borrowed the code used for capturing the mouse x on #4296, thank you
u/iverjo

#interactive
u/lionleaf

#spiral

show FPS hide FPS share 3 remixes fullscreen

FireFly

function u(t) {

for(i=2e3;!t&&i--;Math.random()>(X**2+(Y-4)**2)**.5/6&&f(7)+f(-7))X=i&3,Y=i>>2&7,f=m=>x.fillRect(240*(i>>5&7)+120-X*m,180*(i>>8)+50+Y*7,7,7)

Aug 20 2017 3:53 PM UTC

}// 140/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

Spritegen! Generates 48 random sprites each time the dweet is run (make a change to rerun the dweet)

Show more comments…
u/sigveseb

I love this!
u/alien

wait WHAT !!
u/alien

D: What is going on here!! how
u/iverjo

How does it work?
u/FireFly

It's a dweetification of an older sprite generator of mine. The idea is to take a "mask" of 0..1 floats and filter a grid of random numbers for when num<mask. In this case the mask is based on euclidean distance from centre. This is done for half the sprite, and then the other half is just mirrored
u/FireFly

(You could also view it as flipping a biased coin for each mask value, with the bias given by the mask)
u/FireFly

The same principle would work just as well with larger sprites too, and more exotic/interesting mask shapes. The same rid of random numbers could be applied to different masks, or to an animated mask, to produce an animation between sprites, too!
u/nystrand

so cool!
u/joeytwiddle

Awesome. I love it. Every single one looks like a space invader!
u/iverjo

Interesting technique. Thanks for explaining :) Also, I agree with joeytwiddle
u/jick

Got a link to the original sprite generator?
u/FireFly

I never really wrote it to be shared, so it's all hardcoded and with really ugly code. I put together this animation though: https://twitter.com/FireyFly/status/80072288…
u/statenlogic

Simple, but effective! Makes me want to play 8-bit games again.
u/donbright

genius
u/joeytwiddle

#hiddengem
u/stiaje

#witchcraft
u/tomxor

#bitmap #sprite
u/KilledByAPixel

#generative pixelart
u/KilledByAPixel

#pixelart

show FPS hide FPS share 1 remix fullscreen

FireFly

function u(t) {

for(i=5e3;i--;i%4||x.beginPath())Z=i/128+i%2,X=i/4%32+(i%4>1),x.fillStyle=R(Y=S(X*X/32+Z*Z/32-X-Z-t*6)*80+99),x.fill(x.lineTo(X*60,Z*35-Y))

Aug 2 2017 9:02 PM UTC

}// 139/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

Ripples!

u/alien

Respect

show FPS hide FPS share fullscreen

FireFly

function u(t) {

f = t*60|0
X =  f%120, Y = f/120|0
x.fillStyle = "]!{$${!]".charCodeAt(X%16) + 59 >> Y%12& 1? '#345' : '#DEF'
x.fillRect(X*16, Y*16, 16, 16)

Feb 27 2017 6:20 PM UTC

}// 140/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

u/sigveseb

cool!
u/sfz

wtf is going on here?!
u/FireFly

The string embeds a tiny bitmap which is simply repeated :)
u/5Mixer

This is an awesome idea! I wonder what else you could do with using strings to encode more complex(?) data. Interesting.
u/PiggyClone205

When I read complex, I immediately thought of maybe importing other javascript and cheating a bit.
u/katkip

#invaders

show FPS hide FPS share fullscreen

FireFly

function u(t) {

for(c.width|=A=16,i=9e3;i--;(X&8?B&2:"<fnvff<Ā~``x```".charCodeAt((B/A&3)*8+Y%8)>>7-X%8&1)&&x.fillRect(A*X,A*Y,A,A))X=i&127,Y=i>>7,B=X+Y+t*8

Mar 6 2017 8:36 PM UTC

}// 140/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

00FF. More embedded bitmap fun :)

u/iverjo

Cool!
u/sfz

Going to take a three month sabbatical and figure out how this works.
u/FireFly

Anything in particular that I should explain? It might help to draw the bits of the codepoints in the string literal on a piece of paper, as an 8×15 grid (15 chars, 8 bits per char). Ā is U+100, used to encode 0x00.
u/sfz

Neat trick!

show FPS hide FPS share 1 remix fullscreen

FireFly

function u(t) {

t || x.translate(960, 540)
for (i=40; i--; x.rotate(S(t)))
 x.fillStyle = 'hsla('+i*t+',90%,50%,'+1/t+')',
 x.fillRect(v=i*20, v, i*t, i*t)

Mar 1 2017 8:05 PM UTC

}// 139/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

Colour mania

u/iverjo

Nice!
u/Woodmouth

Ohh, if you wait long enough it goes grey, but then if you wait even longer, it quite suddenly goes back to color, and then suddenly even more grey
u/joeytwiddle

After that it ends up resting on a kind of shiny brushed metal pattern. Amazing!
u/joeytwiddle

#shiny
u/joeytwiddle

#color #rainbow (sorry for spamming the comments)

show FPS hide FPS share 1 remix fullscreen

FireFly

remix of d/1689 by u/FireFly

function u(t) {

for(s='0',i=6;i--;c=s[t*60|0])s=s.replace(/\d/g,i=>['+1-0-1+','-0+1+0-'][i]);c<2?x.translate(18,0,x.fillRect(0,0,18,3)):x.rotate(c+60/57.3)

Mar 1 2017 5:45 PM UTC

}// 139/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

L-system visualizer. Sierpiński arrowhead curve

u/donbright

brilliant.... any description of how it works?
u/donbright

n/m i see you explain it in 1688, thanks!
u/tomkh

haha... using translate/rotate is a cool hack! reminds me of LOGO turtle
u/FireFly

Hehe, it's handy to offload the job of keeping track of the turtle to the canvas.
u/katkip

#fractal

show FPS hide FPS share 2 remixes fullscreen

FireFly

function u(t) {

for(c.width|=i=58;i--;x.fillStyle=`hsla(${i*6},99%,50%,.3)`)i%3?x.lineTo(C(t+(i/3+i%3|0)*497)*450+Z,540):x.moveTo(Z=960,i>29?90:Z,x.fill())

Jul 29 2017 3:42 PM UTC

}// 139/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

Spinning 3D model. This one is pretty CPU-heavy, gotta compromise for size

Show more comments…
u/sigveseb

Very nice!
u/p01

It looks super clean!
u/sigveseb

is it spinning clockwise or counter-clockwise? :)
u/FireFly

shhh… it's rotating CCW I think, but cheating with the Z-axis/depth ordering means the faces are kind of haphazardly drawn :P
u/Xen

its transdimensional, you meant to do it! ;-)
u/Lazy1337

#d3

show FPS hide FPS share fullscreen

FireFly

function u(t) {

if (!t) x.translate(X=960, 540)
x.fillStyle = 'hsl('+t*20+',90%,50%)'
x.fillRect(0, 0, X/t, X/t)
x.strokeRect(0, 0, X/t, X/t)
x.rotate(16/t)

Feb 28 2017 5:40 PM UTC

}// 140/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

Rainbow flower

u/SpecialAgent

so pretty. good use of translation.

dwitter.net | FireFly (732)