Dweets awesomed by u/rodrigo.siqueira

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

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,65%,${i-4}%`,x.arc(960,580,90*r,a=C(t*3)+i*1.57*(1+.2/r/t+C(t*2)/25),a)

Sep 10 2021 4:23 PM UTC

}// 138/140

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

Square depth, quick remix #squares

show FPS hide FPS share fullscreen

taupelink

remix of d/23806 by u/taupelink

function u(t) {

k=120;for(i=k;i--;)
f=i*t,X=f*f%16,Y=X*f%4-2,
x.fillStyle=R(0,k+k*Y/2,k+k*C(Y*1.57)),
x.fillRect(k*X,540+k/Y,k/5**t,i)

Sep 10 2021 3:57 AM UTC

}// 118/140

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

d/23823 figure 3

u/taupelink

briefly: Y ranges from -2 to 2. Below the middle line, Y is positive and there's more green than average. In the large top and bottom areas, Y is between -1 and 1, and there is more blue than average.
u/taupelink

Note the formula for the top of the rectangle, 540+k/Y. This breaks the window up into four horizontal bands. From top to bottom, they are: -2<Y<-1, -1<Y<0, 1<Y<2, and 0<Y<1 respectively.
u/taupelink

Correction: -1<Y<0 is the top band, -2<Y<-1 the second from the top.
u/taupelink

The green component formula is k+k*Y/2. This is greater than k when Y>0.
u/taupelink

The blue formula is k+k*C(Y*1.57). This is greater than k when C(Y*1.57)>0, i.e., when -1<Y<1.

show FPS hide FPS share 1 remix fullscreen

lewdev

function u(t) {

document.addEventListener("keydown",e=>document.body.innerHTML=(["key","keyCode","code"].map(k=>`${k}: ${e[k]}`).join("<br/>")));

Sep 10 2021 2:20 AM UTC

}// 129/140

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

Learn about Key Codes

u/rep_movsd

This doesnt work in dark theme
u/KilledByAPixel

dwitter is a great place for testing ideas like this. i often go back to my old dweets just to find a simple bit of code
u/joeytwiddle

#tool

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

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

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

dwitter.net | rodrigo.siqueira (74578)