Dweets awesomed by u/rep_movsd

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 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.

show FPS hide FPS share fullscreen

rep_movsd

function u(t) {

eval(unescape(escape`𨰮𭱩𩁴𪁼🐰𛁆🐨𠐬𠠬𦀬𦐩🐾𮱸𛡦𫱮𭀽𨀤𮱂𯑥𫐧𨀻𮀮𩡩𫁬𥁥𮁴𚁓𭁲𪑮𩰮𩡲𫱭𠱯𩁥𤁯𪑮𭀨𠐩𛁘𛀱𜀸𜀭𦐩𯐊𩡯𬠨𦐽𜐰𜀻𦐼𜐲𜀰𞱙𚰽𜰲𜀩𩡯𬠨𦀽𦐭𞐹𞱘🀱𞀲𜀭𦐻𦀫🐲𜰰𚐊𡠨𜐲𞐳𞀷𛀲𜀬𦀬𦐩𛁆𚀱𜠷𞀱𜠫𚁴𚰫𯀰𚐥𜐶𛁅🐴𛁘𚰱𜠸𛁙𚰷𜠩`.replace(/u../g,'')))

Sep 8 2021 2:04 PM UTC

}// 139/140

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

Canned fruit stand

u/rep_movsd

Best viewed on Firefox

show FPS hide FPS share fullscreen

Joachim

function u(t) {

eval(unescape(escape`󮬽󨼮󭽩󩍴󪌽󜼰󜌊󭌿󬌮󬍵󬽨󚍻󦌺󤼨󭌪󜼩󚬹󞜬󮜺󜜬󬬺󮬥󤼨󭌩󚼱󯜩󞭰󟝛󧜊󮍛󩬽󙽦󪝬󫍒󩝣󭌧󧜨󞜬󞜬󜜰󛌱󜌩󒭦󫽲󚍩󘍯󩬠󬌩󭽩󭍨󚍩󚝸󦽳󟜧󩭩󫍬󤽴󮝬󩜧󧜽󤬨󜌬󬬪󞜹󚜬󮍛󩭝󚌰󛌹󞜫󮜬󮬬󮜯󞜩󛍹󛼽󛬹󝜬󮍛󬽝󟜧󘼴󝌴󙼬󮍛󩭝󚍘󚼱󝜰󛝹󛼲󛌹󞜫󮜬󮜬󮜯󞜩`.replace(/u../g,'')))

Sep 8 2021 9:13 AM UTC

}// 140/140

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

#landscape #perspective #road #track

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 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

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

rodrigo.siqueira

remix of d/23749 by u/rodrigo.siqueira

function u(t) {

for(i=k=780;--i;x.fillRect(k-i*Y,k-v*i,80*q*X*v,Y*i*v))f=i*t,X=i*f%3-1,Y=X*f%4-2,x.fillStyle=R(q=i*X,q*=X*X/t,q*=Y**3*t*q/i/X,i/q/q),v=.5**t

Sep 6 2021 1:32 PM UTC

}// 140/140

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

All the colors of a sunrise

u/taupelink

nice!
u/rep_movsd

Try swapping around the r, g and b values - b, g , r and g, r, r look pretty realistic
u/rodrigo.siqueira

u/rep_movsd please paste the colors (q=...?) that you found so I can try your suggested combinations, thanks!

show FPS hide FPS share fullscreen

robotman_

function u(t) {

for(c.width^=i=0;i<44*15;i++)x.fillRect(960+S(a=i+t*((f=0|(i/44))%2==(0|(t/4))%2?1:-1))*(r=80*f+20*(t%4)),540+C(a)*r,w=9+f,w)

Sep 6 2021 8:57 AM UTC

}// 125/140

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

Hypnotizing circles

dwitter.net | rep_movsd (47486)