Dwitter - javascript demos in 140 characters

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: #Food

show FPS hide FPS share fullscreen

magna

function u(t) {

c.style.background=R(w=960,w*S(t))
e=(X,Y,S)=>x.fill(new Path2D(`M${X} ${Y} h${S} l${-S/2} ${S/1.2}`))
e(w,0,w*2)
e(-w,0,w*2)
e(630,540,660)

Apr 3 2017 6:53 AM UTC

}// 140/140

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

Another Triforce. Tried fitting a linear gradient, but couldn't.

u/magna

(Note: in case it's not obvious, I'm creating the Triforce by masking the background with huge triangles instead of actually drawing the Triforce's triangles.)
u/magna

#triforce

show FPS hide FPS share 1 remix fullscreen

magna

remix of d/2352 by u/sfz

function u(t) {

c.width=w=512
with(x)filter='sepia(1',fillRect(0,h=240,w,w),font='9em a',fillText('🚃',w-(t*w&1023),h+(t&4)),fillRect(Math.random()*w,0,1,w)

Apr 1 2017 2:09 AM UTC

}// 139/140

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

u/cantelope

all aboard the steampunk trolly!
u/nonce

ahahaha
u/magna

Challenge: Add vignette, film grain and random scratches.
u/magna

#film

show FPS hide FPS share fullscreen

magna

remix of d/2370 by u/magna

function u(t) {

c.width|=0;for(i=9;i--;x.fillRect(400+i*100+S(t)*300,400,50,200));with(c.style)background=`linear-gradient(${S(t)}turn,#ccc,#fff,#ccc)`;

Apr 1 2017 6:03 AM UTC

}// 136/140

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

More thinking outside the box

Show more comments…
u/sigveseb

This is cool
u/donbright

haha best remix of default
u/magna

Heh, thanks! Though, I'd argue that techniques like these are probably "illegal" due to use/abuse of things external to the canvas. And dweets like these are bound to eventually break as the Dwitter runtime is updated. But, hell, this is fun!
u/nonce

I think this is Kosher. You are manipulating the canvases style after all. Also you don't need the with c.style.background= is 5 char shorter
u/magna

Ah dang. That's a vestige of trying to add more effects to this :)
u/magna

#default
u/fujimotos

#light

show FPS hide FPS share 1 remix fullscreen

mxfh

remix of d/2353 by u/cantelope

function u(t) {

x.fill(new Path2D("M940 55l-560 970h560l280-485h-560,l280 485h560"),"evenodd")

Apr 2 2017 4:57 AM UTC

}// 78/140

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

for half dtweet just drop factor 10: .fill(new Path2D("M940 455l-56 97h56l28-48h-56,l28 48h56"),"evenodd")

Show more comments…
u/cantelope

:O
u/cantelope

Thank you! What a smart solution.
u/mxfh

btw: that ratio 97:56 is a freakingly good approximation of the square root of 3
u/mxfh

#minimalistic #logo #path2d #triangles #triforce #fillrule
u/mxfh

#Hōjō
u/mxfh

#Hojo #samurai

show FPS hide FPS share fullscreen

cantelope

remix of d/2391 by u/mxfh

function u(t) {

c.width|=s='l280 485h-560'
x.fillRect(0,0,2e3,2e3)
x.fillStyle=`hsl(${t*300},99%,50%`;
x.fill(new Path2D(w=`M960 55${s+s}m840-485`+s))

Apr 2 2017 6:32 PM UTC

}// 134/140

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

show FPS hide FPS share 1 remix fullscreen

nowaythisisyourregisterform...

function u(t) {

!c.r&&(c.r=1,c.addEventListener('mousemove',e=>x.lineTo(e.x*c.width/c.offsetWidth,e.y*c.height/c.offsetHeight)&x.stroke()))<!-- Draw :D -->

Apr 2 2017 2:17 PM UTC

}// 140/140

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

u/lionleaf

Oh nice! It works in fullscreen too :D
u/lionleaf

haha, your name :P
u/Jenky

Unforunately as I found, e.x/e.y aren't yet implemented in some browsers; if you switch for something like e.pageX/e.pageY they seem to be fine :D - remix with added button-press drawing: https://www.dwitter.net/d/2394
u/nowaythisisyourregisterform...

@lionleaf that register form man...

show FPS hide FPS share fullscreen

luc_4d

remix of d/2366 by u/codeslaw

function u(t) {

m=400
x.fillRect(0,0,c.width|=i=m*5,i)
while(i--)x.fillText('🚀☁️🚀',990+S(t/i**.1)*m,550+T(i/t**.02)*m)

Apr 1 2017 8:55 PM UTC

}// 102/140

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

show FPS hide FPS share 1 remix fullscreen

Jenky

function u(t) {

c.width=c.clientWidth
t?p.map(v=>{x[v[2]?'lineTo':'moveTo'](...v)}):p=[]
x.stroke()
onmousemove=e=>p.push([e.pageX,e.pageY,e.buttons])

Mar 31 2017 1:48 PM UTC

}// 134/140

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

Basic drawing program, not sure if this has been done similarly already, should work cross-browser

show FPS hide FPS share fullscreen

nonce

remix of d/2357 by u/Jenky

function u(t) {

w=c.width|=0
c.style.filter=`hue-rotate(${-t%60}deg`
for(i=0;++i<99;)z=50+i*i/80,x.font=z+`px a`,x.fillText('🌳',(S(i)*w+t*z*4)%(w+z)-z,z*5)

Mar 31 2017 4:47 PM UTC

}// 139/140

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

Show more comments…
u/cantelope

Looks great in chrome. seems the filter does not work in ff.
u/cantelope

i see now it simulates the changing of the seasons. very cool!
u/nonce

May I ask what FF are you on? I have FF 52.0.2 (on MacOS) and it seems to work.
u/donbright

color does not work on firefox / ubuntu. 52.0.1 64 bit, however it still looks amazing in black and white! i just love the whole effect of it, brilliant.
u/cantelope

@nonce I checked it in FF 45.8 on Win10 ( screenshot http://lookie.ml/i-12BLJO ), but Chrome is my primary browser. I've noticed that unicode tends to render somewhat inconsistently between browsers, which is why i avoid using it. But it's a great graphical hack when it works. :D
u/nonce

Oh my, it might not be consistent but I almost spat my soda all over my screen when I saw that screenshot.
u/Lazy1337

#landscape
u/Lazy1337

#trees
u/joeytwiddle

2023: working on FF Nightly on Android

show FPS hide FPS share 2 remixes fullscreen

cantelope

remix of d/2328 by u/cantelope

function u(t) {

x.save(),x.translate(960,540);for(i=99;i--;x.fillStyle=`hsl(${i*6+t*800},80%,90%`,x.fillRect(a=i*10,a,-a*2,-a*2),x.rotate(.775));x.restore()

Mar 31 2017 5:50 AM UTC

}// 140/140

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