Dweets awesomed by u/magna

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

show FPS hide FPS share fullscreen

rep_movsd

function u(t) {

eval(unescape(escape`𭱩𭁨𚁸𚑦𫱲𚁆👄🐾𩡩𫁬𤱴𮑬𩐽𡀬𡐽𚁁𛁂𛁃𛁄𚐽🡢𩑧𪑮𤁡𭁨𚀩𯁥𫁬𪑰𬱥𚁁𛁂𛁃𛁄𛀰𛀰𛀷𚑼𩡩𫁬𚀩𛁆𨀣𜀰𜡠𛁅𚀰𛀰𛁩👯🐲𜠰𜀬𪐩𛁆𨀣𩠸𜠴𨀬𡐨𦐽𜠵𝐬𦐬𤀽𞐹𛁐𚐬𡠨𤠨𦐬𦐬𦐬𛠰𜠩𚐻𪐭𛐻𚑅𚀨𭀯𜠪𤀫𪐪𜰩𙑯𛁃𚁩𚡩𚐪𤰨𪐩𚡩𛀳𜀰𛀳𜀩`.replace(/u../g,'')))

Sep 13 2021 11:39 AM UTC

}// 140/140

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

Moon and clouds #moon

show FPS hide FPS share fullscreen

rep_movsd

function u(t) {

eval(unescape(escape`𭱩𭁨𚁸𚑦𫱲𚁪👦𬡡𫑥𛁣𛡳𭁹𫁥𛡦𪑬𭁥𬠽𙱢𫁵𬠨𜐵𬁸𙰬𩡩𫁬𤡥𨱴𚀰𛀰𛁩🐲𩐳𛁩𛁦𪑬𫁓𭁹𫁥👠𘰹𩑦𨀩𛁦𪑬𫁓𭁹𫁥👠𘱦𩐳𨀬𨡥𩱩𫡐𨑴𪀨𩡩𫁬𚀩𚐬𩑬𫁩𬁳𩐨𚁐🐹𞐩𚠶𛁑👐𚠲𛁐𛁐𛀰𛀰𛀷𚐻𪐭𛐻𪠫𚰩𭀦𨱬𩑡𬡒𩑣𭀨𪐪𜰬𠰨𪠪𪠩𚠱𩐳𛁑𛀱𝐩`.replace(/u../g,'')))

Sep 12 2021 4: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).

Cloudy summers day

u/Joachim

Very good… what compressor did you use?
u/rep_movsd

The most popular one is https://www.dwitter.net/d/14282
u/Joachim

thanks!

show FPS hide FPS share 1 remix fullscreen

pavel

remix of d/23821 by u/pavel

function u(t) {

for(c.width=w=127,i=n=9087;i--;u[i]=420*t>n-i?p&u[r=i+w+i*t%3|0]<1?u[r]++:p:(X-Y/2-30*t-w&Y)<1)x.fillRect(X=i&w,Y=i>>7,.7,p=u[i])

Sep 10 2021 9:36 PM UTC

}// 129/140

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

Mr Sierpiński, I don't feel so good

u/Joachim

#sierpinski #particles #physics
u/tomxor

interesting idea (transitioning between imovable and movable).
u/Toby

Very original!
u/rep_movsd

Entropy :(
u/donbright

bravo

show FPS hide FPS share 1 remix fullscreen

rodrigo.siqueira

remix of d/23817 by u/pavel

function u(t) {

for(i=420;r=--i>>2;i&3||x.beginPath(x.fill()))x.fillStyle=`hsl(177,42%,${90-3*r}%`,x.arc(960,580,24*r,a=(i*2-.5+S(r/9-t*8))/.9549,a)

Sep 10 2021 8:10 PM UTC

}// 132/140

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

Moving triangle wings #triangles

show FPS hide FPS share fullscreen

taupelink

remix of d/23806 by u/taupelink

function u(t) {

for(i=k=q=120;i--;)
f=i*t,X=f*f%16,Y=X*f%10-5,
x.fillStyle=R(q=q%i*4,q*=1+S(X*.6)*Y/5,q*=1-S(Y/4),i/q),
x.fillRect(k*X,540+k*Y,i/t,q/2**t)

Sep 10 2021 5:54 PM UTC

}// 138/140

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

d/23825

Show more comments…
u/taupelink

I doubt I'll be able to give a satisfying breakdown of this one. A few observations...
u/taupelink

q is declared at the start of the loop, and it evolves over time. In previous examples, q was always equal to i*2. Here, in each iteration, q is set to q%i*4 before undergoing further changes....this makes it so that q and i are related but not as tightly coupled.
u/taupelink

("time"=loop iterations here)
u/taupelink

Y is in the range -5...5. The top of the rectangle is 540+120*Y. (Note to self: go back and redo Figure 3 to use *Y rather than /Y, it's simpler)
u/taupelink

The green component is q*=1+S(X*.6)*Y/5. In Figures 1 and 2, there was a vertical red line, reflecting the way that the q parameter depended only on X at this point; it got zeroed out around X=5. Here, q is zeroed out around only part of the X=5 line, specifically the part around Y=5 at the bottom.
u/taupelink

Correction: I'm talking about X=8, not X=5. The sin(X*.6) term hits -1 around where X*.6=1.5*pi, which is around X=8.
u/taupelink

So, if a rectangle is plotted with upper left-hand corner near X=8, Y=5 (i.e., bottom center), then there will be little to no green or blue in it.
u/taupelink

If you're following along, then you may be looking at that spot in the picture and wondering why there's some green, yellow, orange in that location. That's due to overlap with other rectangles, ones whose upper left-hand corners are elsewhere...
u/taupelink

....The overlap is partly due to how I defined the rectangle width parameter, i/t. The "/t" means that rectangle widths shrink over time....but when t is very small, the rectangles are very wide! Part of the green/orange near X=8,Y=5 is due to rectangles that were drawn during the first half-second or so of the animation.

show FPS hide FPS share 1 remix fullscreen

pavel

remix of d/19550 by u/tomxor

function u(t) {

for(c.width=w=127,i=9087;i--;t?p&u[r=i+w+r%3]<1&&--u[i]&++u[r]:u[i]=r)x.fillRect(X=i&w,Y=i>>7,.5,p=u[i]),v=Y-36,r=(X/3-21)**4>v*v?2:i*t|Y<30

Sep 10 2021 2:03 AM UTC

}// 140/140

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

Overfilled #hourglass

u/pavel

#time
u/rep_movsd

Amazing!
u/tomxor

Excellent! makes me wonder what else we can do with this stuff...

show FPS hide FPS share fullscreen

rep_movsd

function u(t) {

eval(unescape(escape`𨰮𭱩𩁴𪁼👙👌🐳𜐴𛁏🐹𞐬𮀮𭁲𨑮𬱬𨑴𩐨𞐶𜀬𝐴𜀩𒡔👦𬡡𫑥𙑌𚠲𛁋🐨𥀼𣀩𚡔𚰫𛁋𯁼𮀮𬡯𭁡𭁥𚁔𛱏𚐊𡀽𚁘𛁗𚐽🡸𛡦𪑬𫁒𩑣𭀨𦀬𦐬𥱼𜠬𞐩𒡦𫱲𚀻𦐾𛑌𞰩𥰽𛐨𢠽𣰭𠰨𦐭𛐯𣰩𚡏𚰴𚐪𜠬𦐪𦐾𞁥𝁼𦐾𣀭𢱼𚁙🀰𙡙🡋𛑌𚐿𡀨𢠬𥰩𞡄𚁊𚐬𡀨𢠫𥰩`.replace(/u../g,'')))

Sep 9 2021 9:11 PM UTC

}// 140/140

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

Hourglass #time

show FPS hide FPS share fullscreen

taupelink

remix of d/23648 by u/taupelink

function u(t) {

for(i=q=k=288;--i;x.fillRect(k*X-k,k*Y,2e4/q*(C(q)>Y/9*t),-Y*q))f=i*t,X=f*f%9,Y=X*f%6,x.fillStyle=R(q^=k,q*=.9+S(q%X+Y)/2,q^i,q**.5/i*Y*9/t)

Sep 9 2021 1:07 PM UTC

}// 140/140

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

d/23818

show FPS hide FPS share 4 remixes fullscreen

pavel

function u(t) {

for(i=420;r=--i>>2;i&3||x.beginPath(x.fill()))x.fillStyle=`hsl(177,42%,${90-3*r}%`,x.arc(960,580,24*r,a=(i*2-.5+(~r%2|1)*C(t-r/9))/.9549,a)

Sep 8 2021 11:34 PM UTC

}// 139/140

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

3x33 [A] by twitter.com/tequibo

u/rodrigo.siqueira

What is Pavel's Twitter account?
u/pavel

twitter.com/pavelbahilov I have plans to post but I don't currently

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.

dwitter.net | magna (133031)