let's play mario style by danny@hille.dk

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 1 remix fullscreen

danny@hille.dk

remix of d/20340 by u/danny@hille.dk

function u(t) {

for(c.width=X=60;X--;)for(Y=34;Y--;)x.fillStyle=R(o=255*(C(t-X/4)+S(t+X/9+S(Y/(4+S(t/4)-S(X/Y))))),o*S(Y-t*9+S(X+t)),-o),x.fillRect(X,Y,1,1)

Oct 21 2020 5:59 PM UTC

}// 140/140

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

let's play mario style

Show more comments…
u/danny@hille.dk

I made a hi res version here: http://glslsandbox.com/e#68682.1
u/rodrigo.siqueira

The hi res version is a hundred or thousand times faster. I didn't know about glslsandbox. Nice gallery of fast GLSL demos (OpenGL Shading Language).
u/danny@hille.dk

I just recently got aware of http://glslsandbox.com/ - and by reading some of the code from the demos i also found https://www.shadertoy.com/ - but be aware you really need a computer with a powerfull graphics card or else everything just freezes up :-)
u/danny@hille.dk

I also found that, the shaderlanguage is more like c than javascript, and the way you code shaders, are quite different from codeing for canvas2d :-) - Challenge accepted!
u/danny@hille.dk

Here is a version where I have fixed some minor bugs http://glslsandbox.com/e#68682.7
u/danny@hille.dk

Please share, if any of you guys creates something on glslsandbox
u/rodrigo.siqueira

I created a remix of a simple code I found on glslandbox: http://glslsandbox.com/e#68725.0 (Animated blue 3D waves)
u/joeytwiddle

If you like glsandbox, you might also like https://shadertoy.com/
u/danny@hille.dk

u/rodrigo.siqueira that looks awesome!
u/danny@hille.dk

Thanks u/joeytwiddle, i did try shadertoy, but the website is a bit to harsh on my laptop :-)
u/rodrigo.siqueira

I also created 2 other remixes: Rotating Ring of Fire http://glslsandbox.com/e#68726.0 and Purple Unfolding Waves Under a Deep Blue Sky http://glslsandbox.com/e#68725.1
u/danny@hille.dk

u/rodrigo.siqueira cool stuff, I also have been palying with GLSL i have converted some of my dweets FX: http://glslsandbox.com/e#68778.0
u/danny@hille.dk

I really like the organic look-feel, you can achieve with sin/cos event with just black/white http://glslsandbox.com/e#68767.0 I'm properbly gonna make this into a dweet :-)


      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