Draw with your mouse! by nerdworld

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

nerdworld

function u(t) {

r=Math.random;x.fillStyle=R(r()*255,r()*255,r()*255);c.onmousemove=function(e){x.fillRect(e.x*c.width/569,e.y*c.height/320,r()*100,r()*100)}

Mar 8 2021 7:05 PM UTC

}// 140/140

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

Draw with your mouse!

Show more comments…
u/danny@hille.dk

Cool, and welcome
u/danny@hille.dk

Here is a golfing tip: use arrow functions and shave off a few bytes r=(a=255)=>a*Math.random();x.fillStyle=R(r(),r(),r());c.onmousemove=e=>x.fillRect(e.x*c.width/569,e.y*c.height/320,r(100),r(100))
u/danny@hille.dk

if you want to make some compromises, you could make your random function always return 255 like this: <r=a=>266*Math.random();x.fillStyle=R(r(),r(),r());c.onmousemove=e=>x.fillRect(e.x*c.width/569,e.y*c.height/320,r(),r())
u/danny@hille.dk

Now you have a whopping 21 bytes to play with :-)
u/Xen

quick 110: r=a=>266*Math.random();x.fillStyle=R(r(),r(),r());c.onmousemove=e=>x.fillRect(e.x/.3,e.y/.3,r(),r())
u/Xen

100 :-( i cant count lol
u/danny@hille.dk

Well done u/Xen, nice trick with the 1/3 ratio correction, you did leave my 266 typo though :-)
u/nerdworld

Thanks for all the suggestions! Never really used arrow functions before, already used them in new one! Thanks a lot!


      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