New dweets | Dwitter

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

taupelink

remix of d/23806 by u/taupelink

function u(t) {

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

Sep 8 2021 1:50 AM UTC

}// 133/140

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

d/23810 figure 2

Show more comments…
u/taupelink

Changes from figure 1:
u/taupelink

f=97*i*t: I added the "97*" to improve the quasi-random numbers. If you omit it from this dweet, then artifacts appear reflecting small values of f.
u/taupelink

q*=1+S(X*.6): I added the "*.6" to zoom in horizontally. I wanted the picture to have just one vertical red bar.
u/taupelink

q*=1-S(Y*.8+1.2): vertical zoom and translation, positioning the green bars so they look a little like riverbanks. The constants here were found entirely by trial-and-error.
u/taupelink

q**-t: This dweet uses RGBA rather than RGB. Changing the alpha formula can create or destroy an image, or otherwise dramatically affect its appearance. Varying
u/taupelink

q**-t: This dweet uses RGBA rather than RGB. Changing the alpha formula can create or destroy an image, or otherwise dramatically affect its appearance. Varying
u/taupelink

q**-t: This dweet uses RGBA rather than RGB. Changing the alpha formula can create or destroy an image, or otherwise dramatically affect its appearance. Varying
u/taupelink

q**-t: This dweet uses RGBA rather than RGB. Changing the alpha formula can create or destroy an image, or otherwise dramatically affect its appearance. Varying
u/taupelink

q**-t: This dweet uses RGBA rather than RGB. Changing the alpha formula can create or destroy an image, or otherwise dramatically affect its appearance. Varying
u/taupelink

Varying alpha inversely with brightness can create interesting effects. Here, it varies with t as well. This contributes to the texture of the river. Again, I came across this formula by trial-and-error.
u/taupelink

So that's how I ended up with a red bridge across a river. An inky shadowy red river bridge, if you will.
u/taupelink

(sorry about the repeated comment above...if a moderator could delete those, and this request comment, that'd be great. Thank you!)
u/taupelink

More about how the q**-t works: the taller, brighter blues are more transparent. The shorter, darker ones stand out more, appearing as dark horizontal lines.

show FPS hide FPS share fullscreen

ArthurThuczsec

remix of d/21603 by u/rodrigo.siqueira

function u(t) {

f=(X,Y,n=99)=>T(S(X)+S(Y))<9&&n>0?f(X*X-Y*Y-1.4,2*X*Y,n-2):n/69
for(i=1e3;i--;x.fillStyle=R(i%X))x.fillRect(X=t*49,i,1,f(X/9e3+.1,i/9e3)**2)

Sep 7 2021 9:56 PM UTC

}// 140/140

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

Art-1

u/cantelope

#slowdraw
u/cantelope

looks cool

show FPS hide FPS share fullscreen

tactical_retard

remix of d/23621 by u/tactical_retard

function u(t) {

eval(unescape(escape`󡬽󫜽󟭭󙜲󟬱󟼨󫜥󜜭󛬵󚜪󜬺󚌱󚼭󫜥󜜭󛬵󚜪󜬊󬬽󚍍󟝍󨝴󪌩󛭲󨝮󩍯󫜊󩭯󬬨󪜽󨜽󜭥󜼻󪜭󛜻󣜮󨝢󬼨󦜭󝜰󜌫󡬨󦌯󦜩󚬵󜌰󚜾󝬰󚭴󙬦󚍸󛭦󪝬󫍒󩝣󭌨󦌬󦜬󜬰󛌲󜌩󚜩󦌽󬬨󚜪󨜬󦜽󬬨󮌮󩭩󫍬󤽴󮝬󩜽󨍨󬽬󚌤󮼶󜌪󭍽󛌹󞜥󛌳󝜥󨌩󚭡`.replace(/u../g,'')))

Sep 7 2021 3:41 PM UTC

}// 129/140

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

better triangle wave function: F=m=>Math.abs(1-m%2)*2-1

show FPS hide FPS share 1 remix fullscreen

Joachim

function u(t) {

eval(unescape(escape`󮬽󨼮󭽩󩍴󪌽󜼰󜌊󘝴󟽰󟝛󧜺󬌮󭝮󬽨󪝦󭌨󮽹󞬱󛍲󞭺󙝓󚍴󚜪󞝽󚜊󩭯󬬨󪜠󫽦󘍰󚝷󪝴󪌨󪜩󮜾󜬰󜌿󬌮󬍯󬌨󚜺󮌮󩭩󫍬󤭥󨽴󚌰󛌰󛍺󛌱󜌰󚽹󚜬󮜯󟜮󞜵󛍸󛭦󪝬󫍓󭍹󫍥󟝒󚌰󛌰󛌰󛍲󛼹󞜩󒭸󛭦󪝬󫍓󭍹󫍥󟜧󘽢󨭢󙼬󮌮󩭩󫍬󚍸󛭡󬭣󚌲󜌬󜬰󛌹󛌰󛌷󚜩`.replace(/u../g,'')))

Sep 7 2021 2:25 PM UTC

}// 135/140

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

fly by #night

u/Joachim

#moon

show FPS hide FPS share 5 remixes fullscreen

taupelink

function u(t) {

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

Sep 7 2021 2:03 PM UTC

}// 114/140

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

d/23806 figure 1

Show more comments…
u/taupelink

this week i will give a line-by-line description here in comments and then maybe in a blog post
u/taupelink

definitely a blog post. the comments will come over time...don't feel obligated to come back and check this dweet for new comments
u/taupelink

k=120: for code golfing purposes, this variable plays multiple roles: loop iteration count per frame, scale factor for X&Y coordinates, width of each rectangle at the start of the animation
u/taupelink

for(i=k;i--;): establishes a loop where i counts down from 120 to 1. "i--" means, If i is 0, then stop here; otherwise, decrement i by 1
u/taupelink

f=i*t,X=f*f%16,Y=X*f%9: this code creates quasi-random decimals X (0.0-15.999) and Y(0.0-8.999). (Hat-tip to whoever suggested this technique... u/pavel ?) If you multiply the upper bounds by 120 each, you get the overall dimensions 1920x1080.
u/taupelink

x.fillStyle=R(red,green,blue): sets the RGB color value for fills. I will take each component one at a time...
u/taupelink

q=i*2: sets the red component to 2x the loop index, i.e. an even number from 2 to 240. This covers most of the possible range 0-255. The red value is tied to i but not to X or Y; rectangles everywhere have a random degree of red.
u/taupelink

q*=1+S(X): sets the green component, and updates the value of q, to q*(1+sin(X)). Where sin(X) is close to -1, around X=1.5*pi and X=3.5*pi, the value of q is close to being zeroed out by this code; that explains the vertical red bands.
u/taupelink

q*=1-S(Y): sets the blue component, and updates the value of q, to q*(1-sin(Y)). This is why you see the green bands (no blue) around Y=0.5*pi and Y=2.5*pi; that's where sin(Y) is close to 1.
u/taupelink

x.fillRect(top,left,width,height): standard Javascript for drawing a rectangle. Again I will take one component at a time...
u/taupelink

k*X,k*Y: the X- and Y-coordinates of the upper left-hand corner of the rectangle, scaled by a factor of k.
u/taupelink

k/5**t: the width of the rectangle, which decreases exponentially over time. This can provide texture at different scales, including fine-grained detail.
u/taupelink

i: the height of the rectangle, equal to the index variable. The height of each rectangle is proportional to the red component, indeed to every component; so, for the 120 rectangles that are drawn in any given frame, some are tall and bright, some short and dark.
u/taupelink

A blog post on this dweet is up: https://medium.com/@taupelink/elements-of-a-…

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.
u/KilledByAPixel

#slotmachine

show FPS hide FPS share fullscreen

ArthurThuczsec

remix of d/22683 by u/Xor

function u(t) {

x.fillRect(t*99,0,t/9,9e9)

Sep 6 2021 8:40 PM UTC

}// 26/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 fullscreen

Tekmap

remix of d/7814 by u/SpecterPainter

function u(t) {

x.fillStyle="#3061"
x.fillRect(0,0,2e3,2e3)
for(i=-9;i<1900;x.fillStyle=`hsl(${i/9%214},99%,60%)`)
x.fillRect(i+=3,540*(1+T(t*i)/3),3,9)

Sep 6 2021 8:10 PM UTC

}// 136/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 fullscreen

ArthurThuczsec

remix of d/7818 by u/Cistoran

function u(t) {

x.fillStyle="#1061"
for(x.fillRect(i=0,0,I=2e3,I);i<I;x.fillStyle=`hsl(${i/9} 99%60%`)x.fillRect(i+=4,540*S(t+i*(t/2|0))*3,20,30)

Sep 6 2021 7:56 PM UTC

}// 129/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 fullscreen

tactical_retard

remix of d/10861 by u/rodrigo.siqueira

function u(t) {

eval(unescape(escape`󩭯󬬨󪜽󜜰󞽩󛜭󙬦󭌥󝬼󚍴󚬶󜌥󜜰󚜻󮌮󩭩󫍬󥍥󮍴󚌢󧍵󜬶󜬰󘬬󞌶󜌫󠼨󪜫󭌪󜬩󚬴󜌰󛌵󝌰󚽓󚍩󚽴󚬪󛬵󚬨󠼨󭌩󚬳󚜩󚬵󝌰󚜩󮽸󛭦󫽮󭌽󘬲󪝮󙼢󛍸󛭧󫍯󨭡󫍃󫽭󬍯󬽩󭍥󣽰󩝲󨝴󪝯󫬽󘭤󪝦󩭥󬭥󫭣󩜢󯜊󮌮󩍲󨝷󢝭󨝧󩜨󨼬󜌬󤼨󥌨󭌩󚜪󜜰󜌰󚭔󚍴󚜩`.replace(/u../g,'')))

Sep 6 2021 7:38 PM UTC

}// 135/140

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