New #Interactive dweets

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

show FPS hide FPS share fullscreen

MrFuzzzy

function u(t) {

c.width=999;if(!t)a=Array(99).fill(99)
c.onmousemove=d=>a[0]=d.clientY*1.5
for(i=1;i<99;i++){x.strokeRect(i*9,a[i]=a[i]*.6+a[i-1]*.4,99,99)}

Jan 8 2018 7:54 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/Xen

nice idea
u/sigveseb

Haha I saw this and I was like "this one totally reacts to mouse input" before I even looked at the code :D nice one
u/magna

Love this!
u/Xen

sigveseb i dont even check anymore, i just wave my mouse over every dweet... :-D
u/iverjo

#interactive

show FPS hide FPS share 1 remix fullscreen

magna

remix of d/3274 by u/magna

function u(t) {

onmousemove=(e)=>S=e;d=x.createImageData(w=c.width=100,w);for(i=0;i<4e4;d.data[i++]=i%T(i%S.x*S.y+t)*255);x.putImageData(d,0,0)

Jan 7 2018 6:23 PM UTC

}// 127/140

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

Move mouse to change tuning to find the hidden channels!

u/iverjo

#interactive
u/magna

#tv #noise

show FPS hide FPS share fullscreen

trupples

function u(t) {

t||(r=31,c.width=innerWidth,x.globalCompositeOperation='xor',c.onclick=e=>x.fillRect(e.x&~r,e.y&~r,r,r))

Jan 6 2018 9:08 PM UTC

}// 104/140

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

Another drawing thingy

u/sigveseb

clever to use xor
u/iverjo

#interactive

show FPS hide FPS share 1 remix fullscreen

CliffJonesJr

function u(t) {

M=245
x.font='99px A'
onmousemove=e=>{x.fillStyle=R(a=e.shiftKey*M,b=e.ctrlKey*M,M-a-b,.2)
x.fillText('●',e.clientX*3.3,e.clientY*3.5)}

Jan 1 2018 11:16 PM UTC

}// 135/140

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

Finger painting! Blue is the default color. Hold SHIFT for red, CTRL for green, or SHIFT+CTRL for yellow.

Show more comments…
u/CliffJonesJr

TODO: Remix this to be mobile-friendly somehow. This works on a MacBook, but probably not much else since the scalars I use for clientX and clientY are very ad hoc.
u/trupples

Nice one! I love this wave of mouse input dweets :D Btw you can use e.x and e.y instead of e.clientX/Y to shave off some bytes
u/CliffJonesJr

@trupples Wha?!! Yeah, I should have tried that. Derp.
u/CliffJonesJr

Anybody know how I can make this more cross-platform? Remixes welcome!
u/wclang

Thanks, trupples, for the tip about mouse input!!
u/rippedspine

so nice! i solved the cross-platform thing in this dweet https://www.dwitter.net/d/5168 :D
u/CliffJonesJr

Thanks @rippedspine! I just posted a remix that works better across devices: https://www.dwitter.net/d/5403
u/iverjo

#interactive

show FPS hide FPS share fullscreen

Wazabadoo

function u(t) {

a=t?a+3:500
c.width|=0
x.r=x.fillRect
for(i=1;i<99;i++){
b=i*200-t*50
x.r(b,0,40,300)
x.r(b,780,40,300)
}
c.onclick=()=>a-=99
x.r(0,a,40,50)

Dec 31 2017 5:28 PM UTC

}// 140/140

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

First draft of a flappy bird clone

show FPS hide FPS share 1 remix fullscreen

alexander

function u(t) {

x.lineWidth=10
c.onmousemove=function(e){X=e.clientX*3.3;Y=e.clientY*3.3}
c.onclick=function(e){c.width=1920}
x.lineTo(X,Y)
x.stroke()

Dec 31 2017 3:09 PM UTC

}// 134/140

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

u/joeytwiddle

#interactive

show FPS hide FPS share fullscreen

joeytwiddle

remix of d/2612 by u/joeytwiddle

function u(t) {

t?c.width=W=200:P=Z=0;for(i=36;i--;j==Z&&(X-99)**2<60?Z=9:Z?onclick=e=>Z--:P++)j=i>>2,x.fillText(j?'🚌':'🐢',j?X=j%5*t/i*P/23%W:99,9*(j||Z))

Dec 29 2017 2:29 PM UTC

}// 138/140

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

Crossy tortoise. Click to play

Show more comments…
u/zanella

Holy s**t, that was awesome!
u/joeytwiddle

Thanks hehe. The traffic patterns suffered in this version, to make room for the emojis.
u/iverjo

This needs more upvotes!
u/_nderscore

Awesome!
u/lionleaf

Oh wow! Amazing!
u/trupples

holy shit
u/SIGILLIM

I won! :D. This is so creative.
u/leon

extra
u/vberlier

super dope stuff here
u/joeytwiddle

The traffic I wanted, but cannot fit: j?X=j%5*(t+i)*P/400%W:99
u/lionleaf

#game #interactive #emoji #frogger #tortoise #bus
u/fujimotos

#playable
u/katkip

Impossible
u/hvianna

👍👍
u/joeytwiddle

For playability, the boxy d/2612 is my favourite

show FPS hide FPS share fullscreen

wclang

function u(t) {

c.onmousemove=e=>X=e.clientX
a=20
for(i=0;i<80;i++){for(j=0;j<50;j++){z=(i*i+j*X+77*t)%255;x.fillStyle=R(z,0,0,1);x.fillRect(a*i,a*j,a,a)}}

Dec 28 2017 9:26 PM UTC

}// 140/140

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

Move the mouse around to change the patterns

u/wclang

This borrows from Firefly #1629 again for capturing mouse movement, and combines my previous two dweets.
u/iverjo

#interactive

show FPS hide FPS share fullscreen

wclang

function u(t) {

c.onmousemove=function(e){X=e.clientX;Y=e.clientY;}
x.clearRect(0,0,1920,1080);x.fillStyle="red";x.fillRect(3.3*X,3.3*Y,100,100);

Dec 28 2017 7:06 PM UTC

}// 129/140

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

Mouse over the screen; a red square follows the mouse.

u/wclang

Note, you'll get an error message until you mouse over the screen.
u/wclang

There's a magic number, 3.3, that keeps the square under the mouse. This doesn't work in full-screen mode (the square is offset from the mouse).
u/wclang

I should mention I learned that mouse events are accessible from FireFly #1629. (I had to figure out what was going on in that dweet, so I could get X and Y off of the mouse.)
u/iverjo

#interactive

show FPS hide FPS share fullscreen

Exquisite

function u(t) {

if(!t)c.addEventListener('mousemove',e=>{r=c.getBoundingClientRect();x.lineTo(e.clientX*1920/r.width,e.clientY*1080/r.height)});x.stroke()

Dec 27 2017 6:45 AM UTC

}// 138/140

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

Mouse over for lines :)

u/iverjo

Nice. Even works correctly in fullscreen :)
u/iverjo

#interactive

dwitter.net | #Interactive