Check this out by pavel

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

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.


      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