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

show FPS hide FPS share fullscreen

donbright

remix of d/2025 by u/@literallylara

function u(t) {

c.width^=0
onmousemove=e=>T=e.pageX/42
R=_=>S(s)+(S(s++)>0?0:2)-1
for(s=i=H=540;i--;)x.lineTo(1e3+(R()*C(T)-R()*S(T))*H,H+R()*H)
x.stroke()

Apr 10 2017 11:40 PM UTC

}// 139/140

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

homage to @literallylara 's 2025 with mouse.. (please try moving your mouse over screen)

u/donbright

thanks 2 @cantelope / @manga for T trick, @Jenky for mouse inspiration
u/joeytwiddle

I like the interactivity, and Firefox support. And one of the tricks is really going to save me some characters!
u/gabrielsroka

#interactive

show FPS hide FPS share fullscreen

donbright

remix of d/2455 by u/cantelope

function u(t) {

onmousemove=e=>N=e.pageY/9
for(c.width=i=2e3;i--;)x.fillRect(1e3+S(p=i+t)/(Z=4+C(p)*(h=1+S(i/99-t*4)/N))*1e3*h,540+1/Z*(i-999)*3.3,s=40/Z,s)

Apr 9 2017 11:02 PM UTC

}// 140/140

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

mouse movement tunes the pipe

Show more comments…
u/donbright

(i.e. move your mouse over the image)
u/donbright

inspiration @cantelope + @Jenky https://www.dwitter.net/d/2437 + @joeytwiddle https://www.dwitter.net/d/2446
u/cantelope

Fixed "N is not defined" error by using T *which is predefined).. onmousemove=e=>T=e.pageY/9;for(c.width=i=2e3;i--;)x.fillRect(1e3+S(p=i+t)/(Z=4+C(p)*(h=1+S(i/99-t*4)/T))*1e3*h,540+1/Z*(i-999)*3.3,s=40/Z,s)
u/donbright

@cantelope that is clever!
u/cantelope

@donbright i learned it from magna :)
u/donbright

thanks @cantelope i used this in d/2025
u/iverjo

#interactive

show FPS hide FPS share fullscreen

joeytwiddle

remix of d/1763 by u/New_Core

function u(t) {

c.onclick=_=>window.a||(a=new AudioContext,o=a.createOscillator(),o.connect(a.destination),o.start(),c.onmousemove=e=>o.frequency.value=e.x)

Apr 8 2017 8:22 PM UTC

}// 140/140

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

Starts making noise if you click on the canvas. Hopefully you can silence it by going left, but no guarantees!

u/cantelope

"woooOOOOoooOOOO" :D
u/magna

It's a dweetheremin!
u/joeytwiddle

Yes it is :) More fun with a wider frequency range: o.start());c.onmousemove=e=>o.frequency.value=5*e.x
u/lionleaf

Haha, amazing! Fullscreen gives you a wider audio range :)
u/joeytwiddle

#audio #interactive

show FPS hide FPS share fullscreen

magna

remix of d/2425 by u/cantelope

function u(t) {

t||(w=c.width=568)
with(x)onmousemove=e=>lineTo(C=e.pageX,S=e.pageY),fillStyle=R(S,C,S,.2),fillRect(0,0,w,w),beginPath(stroke()),moveTo(C,S)

Apr 6 2017 5:04 AM UTC

}// 140/140

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

Fixed the "X/Y is not defined" errors by hijacking S and C

u/brahimtim

hhjgj
u/cantelope

@magna, brilliant! :D
u/cantelope

as promised, 3 gold stars... https://www.dwitter.net/d/2434
u/magna

Thanks! :)
u/iverjo

#interactive

show FPS hide FPS share fullscreen

donbright

remix of d/2394 by u/Jenky

function u(t) {

t?o.map(e=>{x.fillRect(e[0]+=e[1]+=S(t),e[2]++,9,9)}):o=[]
onmousemove=e=>o.push([e.pageX*(须=(c.width^=0)/c.offsetWidth),0,e.pageY*须])

Apr 2 2017 11:23 PM UTC

}// 137/140

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

mouse draws the mountains

u/donbright

thx to @Jenky for mouse golfing ideas. 须 = whiskers, mouse tells its position by c.width/c.offsetWidth or c.height/c.offsetHeight
u/gabrielsroka

#interactive

show FPS hide FPS share fullscreen

nonce

remix of d/2312 by u/nonce

function u(t) {

with(x)font='390px Arial',m=t?m:1,c.onmousemove=()=>m++,lineWidth=2,setLineDash([m,1e9]),strokeText(atob("SGVsdmV0aWNh"),3,1e3)

Mar 27 2017 7:02 AM UTC

}// 127/140

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

Find the word

u/cantelope

black magic!
u/joeytwiddle

#interactive #text
u/katkip

eval(atob("SGVsdmV0aWNh")) i found it

show FPS hide FPS share fullscreen

mxfh

function u(t) {

t||(c.onmousemove=e=>x.lineTo(e.pageX*3.3,e.pageY*3.3),c.onwheel=e=>{x.lineWidth+=e.deltaY,e.preventDefault(),x.beginPath();})
x.stroke()

Mar 23 2017 3:24 AM UTC

}// 137/140

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

u/sfz

the wheel is a nice easter egg!
u/mxfh

for fullscreen remove the factor. or calculate new as c.width/c.scrollwidth
u/mxfh

#interactive #draw

show FPS hide FPS share fullscreen

parabola

remix of d/1868 by u/farter

function u(t) {

t||(a=[],c.onmousemove=e=>a.push([e.pageX,e.pageY,35,35]));c.width=568;a=a.filter(o=>(x.fillStyle=R(...o),x.fillRect(...o),o[2]=o[3]--))

Mar 4 2017 7:00 PM UTC

}// 136/140

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

u/iverjo

What does R(...o) do?
u/iverjo

Found it :) It's the rest operator in ES6. Cool! https://github.com/lukehoban/es6features#def…
u/iverjo

I meant the spread operator
u/fujimotos

#interactive

show FPS hide FPS share fullscreen

veubeke

function u(t) {

r=c.offsetWidth/(c.width^=0);L=t?L.filter(l=>l[x.beginPath(),x.arc(...l,0,7),x.stroke(),2]++-70):(onmousemove=e=>L.push([e.x/r,e.y/r,5]),[])

Mar 2 2017 9:32 PM UTC

}// 140/140

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

Note: doesn’t work in Firefox < 53 because of missing support for MouseEvent.x/y

u/iverjo

Wow, this is so cool
u/lionleaf

#interactive #whater #ripples

show FPS hide FPS share fullscreen

puckipedia

function u(t) {

c.width+=0,c.onmousemove=d=>a=d.clientX*3;z=(t?z:Array(f=1e3).fill([a=f,0])).map(([w,e],i)=>(x.fillRect(w,i,9,9),[w+e*i/f+e/9,(e*6+a-w)/9]))

Mar 1 2017 7:29 PM UTC

}// 140/140

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

Just a wobbly line.

Show more comments…
u/sfz

was staring at this waiting for something to happen longer than I like to admit XD
u/lionleaf

Amazing. Love these interactive ones
u/iverjo

+1 for the physics :D
u/iverjo

mildly entertaining to play with
u/hamptonio

nice!
u/recursive

I learned something new! Destructuring assignment!
u/iverjo

#interactive
u/katkip

#physics

dwitter.net | #interactive