Dweets awesomed by u/Forge

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 1 remix fullscreen

tomxor

function u(t) {

eval(unescape(escape`𩡯𬠨𨰮𭱩𩁴𪀽𜐹𜠬𤠽𝀸𛁩🐸𜀶𝀻𪐭𛐻𮀮𩡩𫁬𤡥𨱴𚁓𚰹𝠬𥀫𝐴𛁃𚁍𨑴𪀮𨑴𨑮𜠨𤰽𪐥𞐷𛑒𛁔👩𛰹𝰭𤠬𬠽𚁓𚡓𚱔𚡔𚐪𚠮𝐩𚠹𚐪𜠰𛑲𙠴𝀦𙡲🠳𝠿𬠼𝀲🱔𛱒𞡓𛱒𞠱𛁲🠳𝠿𬠼𤠺𮠨𜰩𛰵𚐩𮠽𫠽🡮𛐭𙠦𠰨𥀯𜠫𤰪𥀯𤠫𭀪𞐩𚡃𚁔𛰴𛑺𚁮𚐪𜠩𛑲𛰶`.replace(/u../g,'')))

Nov 13 2020 1:17 AM UTC

}// 140/140

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

#stargate

Show more comments…
u/DataMeta

wow WHAT
u/DataMeta

super rad combo of that fluid/smoke technique from a while back and the recent 2.5D Doom texture tricks!
u/chris@grimtech.net

Is this an incoming or outgoing wormhole? thanks
u/magna

WHAT.
u/sigveseb

Holy smokes!
u/tomxor

https://news.ycombinator.com/item?id=25088683
u/aleamb

brutal! amazing!!!
u/rep_movsd

This is one of the all time greats
u/Xen

Yess!
u/UEZ

Awesome. One rookie question: where are the color values saved?
u/red-lady

Stargate!!
u/tomxor

@UEZ the width and height of fillRect are used, when less than one pixel it will interpolate the alpha channel in proportion to the area. The same happens when an edge lies between two pixels (anti-aliasing).
u/UEZ

@tomxor: thanks for your fast reply. :-) That's what I thought but when will width used, when height? I'm trying to under JS by converting it to FB.
u/UEZ

*understand
u/tomxor

The following are equivalent when the values of w and h are between 0 and 1: fillRect(0,0,w,h) == fillRect(0,0,w*h,1). This is because the alpha channel of this pixel value is roughly proportional to the subpixel area (w*h). In terms of the patern we are trying to create, multiplication it's like the continuous version of AND, i.e the binary version is 1 IF w AND h. Additionally a lot of characters are saved when separating into w and h because we dont need to wrap the actual subexpression used to create w and h in parens and multiply them i.e fillRect(0,0,(.1+.2)*(.3+.4),1) becomes fillRect(0,0,.1+.2,.3+.4), that's -5 chars!
u/UEZ

@tomxor: thx.
u/nystrand

epic!
u/jelmo

Nice
u/vain

Wow! This seems to be your stargate... Seems you are not from this world! Incredible!!!

show FPS hide FPS share fullscreen

ellisk1

function u(t) {

t?j++:n=j=540;x.beginPath();for(i=3;i--;x.fill())x.fillStyle=R(z=i+j,99+50*C(j)),r=n-n/5*(z%4),x.lineTo(n+r*C(a=Math.PI*z/13-i/3),n+r*S(a))

Oct 25 2018 5: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).

Sun Pattern

show FPS hide FPS share 1 remix fullscreen

f8f82804

remix of d/10658 by u/f8f82804

function u(t) {

for(c.width|=i=13;i--;x.lineTo(967+(y-1?0:1e3*S(p)/z),1e3*y/z))y='011112101211'[i],z=y-1?3:3+C(p=t+1.57*'012340302014'[i]);x.fill('evenodd')

Oct 25 2018 5:41 PM UTC

}// 140/140

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

#d3 #perspective #octahedron

u/pavel

Here is 12 characters saved: c.width^=i=0;for(y of'111121012110')x.lineTo(960+y%2*S(p=t+1.6*'123403020140'[i++])*(z=1600/(3+y%2*C(p))),y*z);x.fill('evenodd')
u/f8f82804

using 1.6 to approximate Math.PI/2 is OK, but you should change all the 4s to 0s in the second data string, just to minimze the aggregate angular error. I used 4 for clarity, because 1.57 is accurate enough that the error is hard to notice. With 1.6 you can notice that one edge is longer than the others. c.width^=i=0;for(y of'111121012110')x.lineTo(960+y%2*S(p=t+1.6*'123003020100'[i++])*(z=1600/(3+y%2*C(p))),y*z);x.fill('evenodd')

show FPS hide FPS share 3 remixes fullscreen

tomxor

function u(t) {

x.fillRect(0,0,i=2e3,i)
for(t+=160;p=i&1,m=t/C(t/i)+p*(t/2+i%t),i--;)x.clearRect(
960+m*S(n=t/9+i*i)*C(!p*i/t),
540+m*C(n+p*2),s=3-C(n)*3,s)

Oct 17 2018 8:45 PM UTC

}// 140/140

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

#space #planet #saturn

Show more comments…
u/joeytwiddle

Wow, beautiful! I am blown away. #dots #lighting #shading
u/lionleaf

Wow! That's amazing
u/magna

WOW!
u/sigveseb

no way!
u/yonatan

beautiful!
u/jellyedwards

That's incredible, well done!
u/jellyedwards

If you change this bit too use t it's like Saturn uses its ring as a hula hoop: 540+m*C(n+p*t)
u/katkip

woow... gj bro
u/keithclark

Nice!!!
u/aleamb

wow! superb!
u/iverjo

That's pretty rad
u/rnbw

my mind is officially boggled o_o
u/Purpzie

This is absolutely beautiful.
u/tomxor

Thanks for all the kind comments :) for those interested: the key is in the parity bit p=i&1 this allowed me to combine two different but similar functions by multiplying parts in an out on each iteration. You should be able to pull the two apart into something more intelligible.
u/magna

@tomxor are you on Twitter as @tomxor by any chance?
u/tomxor

I am not, nor am I on any other social network... unless you consider Github one :P but a different pseudonym..
u/jylikangas

Beautiful dweet!
u/aleamb

The Cosmos is all that is, or ever was, or ever will be. The contemplation of the this Cosmos stir us.
u/Renaud___

so Beautiful
u/ivylab

This is absolute badass
u/vain

OMG! This part blew me away!
u/jdspugh

Well done!

show FPS hide FPS share fullscreen

Forge

remix of d/10398 by u/Forge

function u(t) {

for(x.fillRect(o=12,0,i=n=c.width=900,n);i-=o;)for(j=0,a=((n*i^1e9)+n*t)%n;j<a;j+=o)x.fillStyle=R(b=n*(o>a-j),n/2+j-a,b),x.fillText(j%9,i,j)

Oct 13 2018 9: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).

Slightly larger/slower

show FPS hide FPS share 1 remix fullscreen

Forge

function u(t) {

for(x.fillRect(o=12,0,i=n=c.width=540,n);i-=o;)for(j=0,a=((n*i^1e7)+n*t)%n;j<a;j+=o)x.fillStyle=R(b=n*(o>a-j),n/2+j-a,b),x.fillText(j%9,i,j)

Oct 13 2018 8:31 PM UTC

}// 140/140

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

show FPS hide FPS share 2 remixes fullscreen

Renaud___

function u(t) {

l=c.width+=i=0;h=400;for(;++i<200;)for(j=a=(t+C(i))%2;j++<50;)x.fillRect(l*C(i*i)+~~a*(w=a*h-h)*C(j),(~~a?h:a*h)*(C(i)*C(i)+2)+w*S(j)/4,3,3)

Feb 27 2017 12:09 PM UTC

}// 140/140

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

Show more comments…
u/HeyJD

This looks amazing. Great job.
u/Renaud___

Thanks :)
u/khalkeus

this is super neat
u/iverjo

Wow!
u/lionleaf

Brilliant!
u/tbroadley

Sweet!
u/donbright

OMG OMG OMG OMG
u/ninerdelta

mind blown
u/sfz

(((does we're not worth bow)))
u/Kalanchoe

That's so beautiful!
u/spbyrne

Incredible
u/Renaud___

wow ... thanks again for all the nice reviews :)
u/punkhaa

mice
u/punkhaa

*nice
u/gormisdomai

I joined this site for this kind of thing
u/lionleaf

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

Haha, oops, that comment was for another dweet. This still remains one of my favorites!!
u/sigveseb

golfed to 137: for(l=c.width+=i=0,h=400;++i<200;)for(j=a=(t+C(i))%2;j++<50;)x.fillRect(l*C(i*i)+~~a*(w=a*h-h)*C(j),(~~a?h:a*h)*(C(i)**2+2)+w*S(j)/4,3,3)
u/FireFly

Eternal rains will come… I really like this one, very pretty!
u/zhanglongdream

啊啊啊
u/leonarven

It was really nice to solve the secret of this code! Such simple, but such brilliant! Good job!
u/sb

My favorite
u/arowberry

I love it. Reminds me of my Seattle days.
u/21medals

What does ~~ do? Like in (~~a?h:a*h)
u/Renaud___

It work as a math.floor. actually there is a difference but i dont remember how exactly
u/Renaud___

Dunno what changed in Chrome recently, but now this animation is very very slow :(
u/hollo47

#rain
u/noonat

~ is a bitwise not. It flips all the bits in the number to the opposite. Flipping again (~~) puts the bits back to what they were. It works does something similar to floor because it truncates floats to 32-bit integers as part of the operation. (But unlike floor, ~~-2.1 is -2 instead of -3.)
u/rbong

I did a detailed analysis of this effect in a medium post: https://medium.com/@r.l.bongers/visual-effec…
u/vain

cool raindrop fx

show FPS hide FPS share 17 remixes fullscreen

jczimm

function u(t) {

c.width=1920;
for(i=0;i<300;i++)for(j=0;j<6;j++){x.fillRect(960+200*C(i)*S(T(t/1.1)+j/i),540+200*S(i),10,10)}

Feb 22 2017 5:23 PM UTC

}// 109/140

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

Show more comments…
u/sigveseb

Very stylish!
u/ninerdelta

nice!
u/Kalanchoe

truly a compact loading spinner!
u/jczimm

Thanks!
u/serko

Any way to view this fullscreen on an iPhone?
u/tischler

Awesome. Negating t makes it more aerodynamic. =)
u/Valscor

This is so cool!
u/over

This would be an amazing loading animation !
u/katkip

This is so easy to make and it has 297 likes
u/Leodude123

ねあt
u/Leodude123

Neat!
u/Scaledish

Could I use this as a animation for my site?
u/jczimm

Yes! Consider it CC0-licensed

You've reached the end.

dwitter.net | Forge (1106)