Top #gradient dweets

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 fullscreen

zibx

function u(t) {

eval(unescape(escape`挽挮睩摴栽㌸㐻栽㈱㘬朽栯㈬焽㤫匨琩⨲㭦潲⡩㴰㭩㱣㭩⬽㠩景爨樽〻樼栻樫㵱⥻景爨搽氽㔻氭ⴻ⥰㵴⩬Ɽ⨽⡺㵩ⵃ⡬⭰⤪栭栩⩺⬨稽樭匨瀩⩧ⵧ⤪稻砮晩汬剥捴⡩ⱪ⭴╱ⰸⰴ⤻砮晩汬却祬攽刨搯㝥ㄹⱧⱪⰱ⥽`.replace(/u(..)/g,"$1%")))

Jul 25 2019 7:51 PM UTC

}// 140/140

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

My first dwitter expirience

u/13thptr

nice first dweet ! #metaballs #gradient
u/zibx

Really 184 symbols(
u/zibx

Code before compression: c=c.width=384;h=216,g=h/2,q=9+S(t)*2;for(i=0;i<c;i+=8)for(j=0;j<h;j+=q){for(d=l=5;l--;)p=t*l,d*=(z=i-C(l+p)*h-h)*z+(z=j-S(p)*g-g)*z;x.fillRect(i,j+t%q,8,4);x.fillStyle=R(d/7e19,g,j,1)}
u/iverjo

Very good for a first dweet!

show FPS hide FPS share fullscreen

LimeLaser

remix of d/31675 by u/LimeLaser

function u(t) {

u=t**3/5e3
v=1-u
w=(a,b,c,d)=>255*(a*v**3+3*v*u*(b*v+c*u)+d*u**3)
x.fillStyle=R(w(0,0,1,1),w(0,.7,1,0),w(.2,1,0,0))
x.fillRect(0,60*t,2e3,1)

May 9 2024 4:23 AM UTC

}// 140/140

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

Bezier Sunset Gradient - Fixed

u/LimeLaser

This version has a proper cubic Bezier evaluation function (w) and uses a non-linear ramping for u and t.
u/aaaaaz

#gradient

show FPS hide FPS share fullscreen

f8f82804

remix of d/16585 by u/f8f82804

function u(t) {

eval(unescape(escape`𭱩𭁨𚁸𚑦𫱲𚁘👷🐱𞐲𜀻𦀭🐱𝠻𨡥𩱩𫡐𨑴𪀨𩡩𫁬𚁡𬡣𚀰𛀰𛁷𛰸𛀰𛀷𚐩𚐩𬱥𭁔𬡡𫡳𩡯𬡭𚁡👃𚁳👘𛰹𞐭𭀩𛁢👓𚁳𚠳𚐬𛑢𛱃𚁴𛰳𛑳𚐬𨐯𤰨𭀪𜠩𛁘𛀵𝀰𚐬𩡩𫁬𤱴𮑬𩐽𨁨𬱬𚀤𮱘𛱷𯑴𭑲𫠬𞐵𙐬𝐰𙐩𨀬𩱬𫱢𨑬𠑬𬁨𨐽𛠰𜐻`.replace(/u../g,'')))

Nov 8 2019 10:31 PM UTC

}// 131/140

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

#messy #rainbow

u/DaSpider

Somehow the compressed tweet shows as longer than the uncompressed code, and oth exceed 140 characters?! 😕
u/f8f82804

There's a mismatch in the way that characters are counted -- this compressor uses 32-bit characters which are counted as 2 bytes in the front end, but are counted as 1 by the back end. I think there's an issue on the Dwitter GitHub where u/lionleaf has some comments about why.
u/Cloud

#gradient

show FPS hide FPS share fullscreen

rodrigo.siqueira

function u(t) {

x.fillStyle='gray';x.fillRect(250,440,1420,200)
x.fillStyle=R(t*70,t*70,t*70)
x.fillRect(t*510,0,9,1080)

Sep 27 2019 2:25 PM UTC

}// 104/140

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

Illusory gradient grayscale ("Simultaneous Contrast Illusion"). The bar in the middle is a CONSTANT SHADE of gray. Viewing two colors at the same time influences both of their appearances. #gradient #illusion

u/iverjo

#opticalillusion

show FPS hide FPS share 1 remix fullscreen

KilledByAPixel

remix of d/17225 by u/KilledByAPixel

function u(t) {

eval(unescape(escape`𭱩𭁨𚁸𚑦𫱲𚁣𛡷𪑤𭁨𯀽𪐽𜀻𪐫𚰼𞐹𞱧𦱺🐧𨑤𩁃𫱬𫱲𤱴𫱰𙱝𚀰𛁒𚁱🐹𩐴𛱩𛁩𚠲𛁱𙐲𝐵𚐩𛁧𦱺𧐨𜐬𙰣𜀰𜀰𙰩𚑦𪑬𫁒𩑣𭀨𜀬𜀬𡠽𜡥𜰬𡠩𛁦𪑬𫁓𭁹𫁥👧👣𬡥𨑴𩑒𨑤𪑡𫁇𬡡𩁩𩑮𭀨𦀽𚁓𚁩𚐪𜑥𞐫𭀪𪐪𞐩𙐴𩐳𛐱𩐳𛁙👩𚠹𞐥𡠬𜀬𦀬𦐬𪐪𪐯𞐩`.replace(/u../g,'')))

Jan 15 2020 6:31 AM UTC

}// 140/140

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

Gradient Nebula

u/aleamb

awesome!
u/aleamb

#shading #space #nebula #gradient

show FPS hide FPS share fullscreen

yokljo

function u(t) {

for(a=-22;a<23;a++){
for(b=-30;b<30;b++){
x.fillStyle=R((a+22)*5,a*3+S(t-1)*a)
x.fillRect(960+a*5*(S(t)+1.2),1040-t*60+C(a/14)*b,10,10)
}}

Nov 5 2018 12:22 PM UTC

}// 138/140

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

u/f8f82804

#organic #gradient #lighting #shading

show FPS hide FPS share fullscreen

ciaccodavide

remix of d/20865 by u/ciaccodavide

function u(t) {

for(c.width|=i=192;i--;)x[s='fillStyle']=`hsl(0,0%,${i*.6}%`,x.fillRect(i*10,0,192,2e3)
x[s]=`grey`
x.arc(960+S(t)*500,540,400,0,7)
x.fill()

Nov 30 2020 11:59 AM UTC

}// 140/140

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

Same Grey Circle

u/ciaccodavide

#illusion
u/DataMeta

fun. we explored this #opticalillusion differently :) d/15843 #gradient
u/joeytwiddle

To add a second ball: x.arc(960-S(t)*500,540,300,0,7)

show FPS hide FPS share 1 remix fullscreen

DataMeta

remix of d/15839 by u/DataMeta

function u(t) {

s=C(t);c.style.background=R(g=s*255,g,g);if(t<3)for(i=1920;i--;)
x.fillStyle=R(l=i/7.5,l,l),x.fillRect(t*s>=0?1918-i:i,540-g,4,4)

Sep 29 2019 4:55 AM UTC

}// 129/140

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

#gradient #illusion

u/katkip

nice
u/iverjo

#opticalillusion

show FPS hide FPS share fullscreen

katkip

function u(t) {

for(i=40;i--;)for(j=99;j--;)x.fillStyle=R(0,128+128*C(i*j)),x.fillRect(960+S(t*3+i*j)*960,j*20,20,20)

Jan 19 2019 5:58 PM UTC

}// 101/140

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

Rotating color gradient

u/katkip

#green #gradient #matrix but landscape version

show FPS hide FPS share 1 remix fullscreen

DataMeta

function u(t) {

c.style.background=R(g=S(t*1.5)*255,g,g);if(t<3)for(i=1920;i--;)
x.fillStyle=R(l=i/7.5,l,l),x.fillRect(i,540-C(t)*i/5,13,13)

Sep 28 2019 4:17 PM UTC

}// 124/140

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

Had this laying around. Demonstrates the #illusion in d/15823. The triangle's #gradient remains unchanged.

u/DataMeta

The center of the base of the triangle doesn't exhibit the illusion strongly since there is a constant reference color near it and it is far from the changing background.
u/iverjo

#opticalillusion

dwitter.net | #gradient