Dweets awesomed by u/erin

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: #Opposites

show FPS hide FPS share fullscreen

FireFly

remix of d/3078 by u/FireFly

function u(t) {

for(c.width|=0,i=4e4;--i;C[a=i&8?i:i^15]<(a%16-8)**2+((S+t*2)%16-8)**2||x.fillRect(i%256*8,S*8,8,8))t?S=i>>8:C[i]=Math.random()*32

Oct 10 2021 3:54 AM UTC

}// 130/140

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

Animated sprite silhouettes! (crawling)

u/FireFly

Adding a #time dimension to an old dweet of mine, by rethinking it a bit :)
u/rep_movsd

Amazing
u/rep_movsd

Looks like some of your earliest dweets dont render anymore on the new dwitter shim code
u/FireFly

hmm, they seem to work fine for me :o (in Firefox)
u/rep_movsd

Must be Chromium issues then

show FPS hide FPS share fullscreen

rep_movsd

function u(t) {

eval(unescape(escape`𭁼𯀨𡀽𫡥𭰠𢑭𨑧𩑄𨑴𨐨𨰮𭱩𩁴𪀽𥰽𜠵𝐬𢀽𥰩𚐊𩡯𬠨𨐽𡀮𩁡𭁡𛁩🐰𞱩🁗𚡈𞱩𚰫𚐊𩡯𬠨𦐽𛠳𚰨𪐯𥰩𛰲𞐬𦀽𚁩𙑗𚐯𜠹𛁪👩𚠴𛁋👃𚁘𚐭𤰨𦐪𠰨𦀫𦐩𚐪𠰨𭀫𦀯𦐩𚱴𛁯🐱𞱯🀴𞰫𚱯𚑡𦱪𚱯𛐱𧐽𠰨𢰪𫰩𚠨𨑛𪠫𜱝👗𚐊𮀮𬁵𭁉𫑡𩱥𡁡𭁡𚁄𛀰𛀰𚐻`.replace(/u../g,'')))

Oct 4 2021 1:44 PM UTC

}// 140/140

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

Plasma

u/primo

Very nice.
u/sigveseb

solid
u/magna

smooth
u/rep_movsd

It uses pretty much the same formula as the previous dweet, but just prettier

show FPS hide FPS share fullscreen

pavel

function u(t) {

for(i=c.width|=t%=1,s=60*2**t,r=.71+.29*t;i--;x.fillRect(((i&60)+Y%2*2+r*C(a=.7854*(2*i+t-1))-t-.5)*s,(Y*2+r*S(a)-.5)*s,s,s))Y=i>>6

Sep 8 2021 6:43 PM UTC

}// 131/140

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

Check this out

Show more comments…
u/UEZ

Looks very nice and smart coded. One noob question: which colors will be used in the loop by default when you don't use fillStyle? I saw many examples without fillStyle but the result is not monochrom. Thx.
u/rep_movsd

The default fill color and stroke color are black. Colors have to be set with fillStyle, strokeStyle or perhaps even setting the background (rare)
u/pavel

The default color for fill, fillRect, stroke, strokeRect is black and you need to call fillStyle or strokeStyle respectively. You must have seen other drawing techniques, maybe like putImage or using style attributes to add a filter over the B&W colors.
u/pavel

Haha looks like we answered at the same time and eerily similarly.
u/UEZ

Hmm, when I look to https://www.dwitter.net/d/23732 I cannot see any strokeStyle/fillStyle but the color result is greyscale.
u/pavel

Gray can be achieved by spacing out black pixels amongst white ones. d/23773 shows this clearest.

show FPS hide FPS share fullscreen

pavel

remix of d/23765 by u/New_Core

function u(t) {

for(c.width|=i=w=640,t?x.font='5in"':r=new Date;j=--i>>4;x.fillText(String.fromCodePoint(127812+i%16),j*w-w,(r*j+i+9*p/(1+w**p))%16*w))p=t-j

Sep 7 2021 2:36 AM UTC

}// 140/140

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

#slots

Show more comments…
u/pavel

Have to time it juust right :)
u/New_Core

nice
u/danny@hille.dk

Man - that is some next level golfing-fairy-dust you have used here :-)
u/pavel

Aw, its broken on iPhone, the font name trick doesn't seem to work.
u/anshu

rrr
u/lewdev

How? This is really cool.
u/joeytwiddle

I remember on some devices, fonts over a certain size just don't show. A workaround is to use a scale transform, or reduce the canvas size.

show FPS hide FPS share fullscreen

tomxor

remix of d/23756 by u/tomxor

function u(t) {

for(Y=t*480%720|0,X=1280;X--;!Z|!Y|Y>640|(Z/480+.75&Y/480+.83&(X|Y)/16%15)&&x.fillRect(320+X,180+Y-Z/6*S(Z/203),3,4))Z=X>640?1279-X:X

Sep 5 2021 8:28 PM UTC

}// 133/140

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

Smolr #book of #sierpinski

u/tomxor

Someone's been drawing in the margins...
u/erin

magic

show FPS hide FPS share fullscreen

taupelink

remix of d/23648 by u/taupelink

function u(t) {

for(i=q=k=447;i--;x.fillRect(k*X,k+i/Y,-8*q/v,i*(Y-2)/v))f=i*t,X=f*f%7-1,Y=X*f%3-2,x.fillStyle=R(q*=C(X/6)/8-Y/4,i*S(X/2),q^=k,k/q*t),v=t**t

Aug 30 2021 4:04 AM UTC

}// 140/140

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

d/23689

u/rep_movsd

This is superb
u/rfs

What is your process for making these? incredible
u/taupelink

thank you! lots and lots of trial and error, lately aided by https://capjs.3d2k.com/ I keep playing around with variations, e.g.: for the Y-coordinate, k+i*Y,k-i*Y,k+i/Y,k-i/Y each have a different effect
u/taupelink

for those unfamiliar with dwitter-style compact JS code: for a typical dweet of this type, each frame draws a bunch of rectangles. each rectangle has random coordinates for its upper left-hand corner. the RGBA (color and opacity) of the rectangle depends on those coordinates and on some other parameter that gets modified with each step. The dimensions of the rectangles shrink over time, thus adding finer-grained detail

show FPS hide FPS share 1 remix fullscreen

tomxor

remix of d/23544 by u/pavel

function u(t) {

for(a=Math.abs,c.width&=i=4352;X=1-(T+i/32)%2,Y=--i/2e3;x.fillRect(X*r+64*T,Y*r+96-64*a(S(t)),T=a(2-t%4)+1,(i^i/64)/8&1))r=64/(--Y*Y+X*X+1)

Aug 13 2021 12:57 AM UTC

}// 139/140

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

Smoother #Amiga #Ball

Show more comments…
u/tomxor

..But less authentic. Remaps the pixel positions rather than texture, which gives "free" antialiasing, with spare space to correct the spin.
u/pavel

Oh yeah, nice. This is definitely a better way of doing it. The other mapping has an incorrect center that I have to waste characters to correct.
u/pavel

-2 char using S(t%3.14) to bounce and inlining the single Math.abs call
u/danny@hille.dk

What a clever trick, using modulus pi of t, to only get the positive part of the sinus curve
u/danny@hille.dk

3.2 works fine, while 3 and 3.1 looks wrong
u/danny@hille.dk

test code: c.width|=0,x.fillRect(o=860,o-S(t*4%3.2)*o,200,200)

show FPS hide FPS share fullscreen

erin

remix of d/23463 by u/rodrigo.siqueira

function u(t) {

for(c.width=w=512,d=new ImageData(w,w),m=w*w,i=-1;m--;d.data[i+=2]=T(Y/r-t*9|X/r)*w)r=((X=m%w-99)*X+(Y=m/w)*Y+i*9)/5e4
x.putImageData(d,0,0)

Aug 4 2021 3:07 AM UTC

}// 140/140

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

stereoscopic city flyover

u/erin

this isn't actually stereoscopic

show FPS hide FPS share 1 remix fullscreen

rodrigo.siqueira

remix of d/23456 by u/rodrigo.siqueira

function u(t) {

for(c.width=w=512,d=new ImageData(w,w),m=w*w,i=-1;m--;d.data[i+=4]=T(Y/r-t*9|X/r)*w)r=((X=m%w-128)*X+(Y=m/w)*Y+i)/5e4
x.putImageData(d,0,0)

Aug 2 2021 9:37 PM UTC

}// 139/140

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

Fly over a pixel surface

u/tomxor

oooh

show FPS hide FPS share 2 remixes fullscreen

KilledByAPixel

remix of d/23452 by u/KilledByAPixel

function u(t) {

eval(unescape(escape`󡬽󚍁󛍩󟜰󛍺󛍰󟝃󚍴󚽮󚭮󚼫󚜯󝌫󛬵󚜽󟭩󚼫󟬹󟽸󛭦󪝬󫍒󩝣󭌨󛬮󛭁󛍸󛭳󭍲󫽫󩝒󩝣󭌨󛬮󛭁󚜬󮌮󩭩󫍬󤽴󮝬󩜽󨍨󬽬󚌤󮽮󯜠󞌰󙜤󮽁󦼲󧜪󠝛󜽝󛼹󞝽󙝠󚜺󡬨󠜽󦼮󛬮󠝝󛍩󛍺󟝁󦼲󚽩󙜲󧜪󟝰󛍆󚍁󛍩󚜬󠝛󪜥󟜲󧜫󟝺󛍁󦼲󚽩󧜽󮬯󬌭󮬩󒭆󚍛󝌶󜌬󝌰󛍮󟜱󩜳󛍮󧜩`.replace(/u../g,'')))

Aug 1 2021 3:28 PM UTC

}// 140/140

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

Recursion Soup

u/taupelink

excellent
u/TGY

amazing
u/Xen

highly sexy, i can however sense the next version ;-)
u/vain

Wow! Really cool looking effect and great color sheme !!! love it

dwitter.net | erin (4632)