Shadow Font by KilledByAPixel

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.

show FPS hide FPS share fullscreen

KilledByAPixel

remix of d/27539 by u/KilledByAPixel

function u(t) {

for(c.width|=i=30;i--;x.fillText('D W I T T E R',50+i,800+i,1800))x.fillStyle=i?R(x.font='900 8in arial'):'#fff'

May 28 2023 5:38 PM UTC

}// 112/140

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

Shadow Font

Show more comments…
u/Joachim

Minus four chars… for(c.width|=i=30;i--;x.fillText('D W I T T E R',50+i,800+i,1800))x.fillStyle=i?R(x.font='8in arial'):'#fff'
u/KilledByAPixel

that one is a bit different without bold font, however i noticed the c.width|= is not necessary
u/Joachim

Oh, okay. The bold font doesn’t make any difference on the device I’m using.
u/deobfuscate

Ive always wanted to know why |= is used. Why specifically use the or equal operator?
u/deobfuscate

Ive always wanted to know why |= is used. Why specifically use the or equal operator?
u/deobfuscate

Whoops, accidentally posted it twice.
u/cantelope

|= isn't or-equal, it's the bitwise or, not an operational or... in the vein of a *= b, it performs the bitwise 'or' operation on the settee. e.g. a |= b is the same as a = a|b ...hope this helps :)
u/deobfuscate

I messed around with it: 0|0 is 0, 1|1 is 1, and so on. But if both numbers are different, it returns the sum.
u/KilledByAPixel

to clear the canvas you just have to do a math operation to the width or height, i use |=0 for some reason but you can use +=0 or -=0 or *=1 etc


      u(t) is called 60 times per second.
      t: elapsed time in seconds.
      c: A 1920x1080 canvas.
      x: A 2D context for that canvas.
      S: Math.sin
      C: Math.cos
      T: Math.tan
      R: Generates rgba-strings, ex.: R(255, 255, 255, 0.5)

dwitter.net