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

donbright

remix of d/2495 by u/joeytwiddle

function u(t) {

t?s=2e3/c.clientWidth:(a=b=B=A=1,k=j=2)
K=k-a
J=j-b
Q=K**2+J**2
x.fillRect(a+=A+=K/Q,b+=B+=J/Q,9,9)
onmousemove=e=>(k=e.pageX*s,j=e.pageY*s)

Apr 15 2017 10:43 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 = gravitational body (explanation https://www.patreon.com/posts/simulating-in-… )

u/joeytwiddle

Nice :) For a few spare bytes, you could place the body with onclick
u/gabrielsroka

#interactive
u/donbright

#physics

show FPS hide FPS share 1 remix fullscreen

joeytwiddle

remix of d/2491 by u/New_Core

function u(t) {

t?x.fillRect(a+=9*C(d),b+=9*S(d),9,9):a=b=k=j=0
d=Math.atan2(j-b,k-a)
s=2e3/c.clientWidth
onmousemove=e=>(k=e.pageX*s,j=e.pageY*s)

Apr 15 2017 3:40 PM UTC

}// 130/140

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

Woodmouth's ant chasing your mouse

Show more comments…
u/joeytwiddle

Since I couldn't fit the edge detection, I stop the ant when it reaches the target. So I stored the target in k,j
u/donbright

this mouse technique is excellent
u/joeytwiddle

To make him a slow turner: D=(Math.atan2(j-b,k-a)-d+3.14)%6.24-3.14;d+=.05*D
u/joeytwiddle

err I mean 6.28
u/Woodmouth

That's impressive. The slow turn was exactly what i was looking for, but that is sadly just a bit too big.
u/MrM@_S

K=3.14;d+=((Math.atan2(j-b,k-a)-d+K)%6.28-K)/20
u/iverjo

#interactive

show FPS hide FPS share fullscreen

donbright

remix of d/2476 by u/keithclark

function u(t) {

onmousemove=e=>(T=e.pageX/99,R=e.pageY*5)
for(a=c.width^=0;a--;x.fillRect(C(a-T)/S(b)*h+960,C(b)*h+540,i=h/40-5,i))h=900/(2-S(a-T)*S(b=a/R))

Apr 14 2017 12:57 AM UTC

}// 140/140

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

please move your mouse up/down/left/right inside the energy mushroom. (adding mouse to @keithclark 's globe, modded shape, w @Jenky for mous-piration)

u/gabrielsroka

#interactive

show FPS hide FPS share fullscreen

MrM@_S

function u(t) {

if(!t)c.width=K=600
onmousemove=e=>{E=e.pageX;X=e.pageY}
x.fillRect(E,X,9,9)
x.putImageData(x.getImageData(0,0,K,K),t&20,0)
x.globalAlpha=.1

Apr 13 2017 5:24 PM UTC

}// 140/140

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

next is a simple drawing editor

u/MrM@_S

Use your mouse to draw
u/joeytwiddle

Spraycan on the move!
u/iverjo

#interactive

show FPS hide FPS share fullscreen

joeytwiddle

remix of d/1763 by u/New_Core

function u(t) {

onkeyup=e=>{T||a.close();a=new AudioContext;o=a.createOscillator();o.connect(a.destination);o.frequency.value=7*1.06**e.keyCode;T=o.start()}

Apr 13 2017 12: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).

A piano you can play with your keyboard. G is middle-c, i think

Show more comments…
u/joeytwiddle

Twinkle little star: GGNNPPN LLKKIIG NNLLKKIx2 GGNNPPN LLKKIIG
u/joeytwiddle

Silent Night: G IG D, G IG D, N NK, L LG, (I IL KIG IGD)x2, N NQ NKL P LGDGEB L
u/joeytwiddle

Star Wars: (IIIN U SRPZ U SRPZ U SRSP)x2 I IK KSRPN NPRP KM, I IK KSRPN UP. I IK KSRPN NPRP KM, IIN LJI GED BI. IKNSP
u/joeytwiddle

Thanks to @donbright who showed me where i could save 5 chars
u/iverjo

Very impressive :D
u/donbright

this is unbelievable. (ps thx but i stole the idea from others here)
u/donbright

(ok technically they gave it to me prob @cantelope / @manga)
u/Woodmouth

This is the strangest piano i've ever played, but good job!
u/Woodmouth

Also, i found a way to stop it, just press shift. (or any other key with a value too high or low to hear (At least i think that's what happens))
u/joeytwiddle

and of course thanks to New_Core for the intro to Web Audio API
u/joeytwiddle

#audio #music #piano #interactive
u/joeytwiddle

Star Trek intro: R M P H, F KP OKHMR RV Q T L, J OT SOLQV VZ
u/joeytwiddle

Star Trek main: B-L-KIGFE, C B-N-LKIGF, E-D FGIKLKN Q, P N D, I G (ILPS!)
u/joeytwiddle

One more you might know: NPSP WWU, NPSP UUS, NPSP S UR N NU S
u/joeytwiddle

Check the old comments for some simple tunes to play. You'll need to click on the blank canvas for keyboard focus. Hit Space, Shift or Escape for "silence".

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

dwitter.net | #interactive