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

MrM@_S

function u(t) {

onmousemove=e=>E=e.x
t?c.width=99:Y=R=X=E=!(x.F=x.fillRect)
x.F(n=E/7,30,20,3)
x.F(Y+=S(t)*.8,R+=X+=.1,2,Y<n+20&&Y+9>n&&R<32&&3+R>30?X=-3:2)

May 10 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 ball and paddle] interactively move the mouse to keep the ball in the air

u/joeytwiddle

Yay! Pong solitaire. Nice one :)
u/donbright

lol great
u/joeytwiddle

#game
u/katkip

#interactive

show FPS hide FPS share fullscreen

donbright

remix of d/2627 by u/saschavoid

function u(t) {

onmousemove=e=>(阳=e.pageX/41,月=e.pageY/31)
x.globalAlpha=.1
for(x.fillRect(0,0,i=2e3,i);i--;)x.clearRect(i,500+99*(S(t*2+i/阳)+C(t+i/月)),1,9)

Apr 29 2017 12:10 PM UTC

}// 140/140

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

tone and overtone. (please move mouse over picture)

u/coderkid

lovely
u/gabrielsroka

#interactive

show FPS hide FPS share fullscreen

New_Core

function u(t) {

t==0?a=b=0:c.width|=0;c.onmousemove=e=>(X=e.offsetX,Y=e.offsetY);D=X-a,E=Y-b,Math.sqrt(D*D+E*E)>50?0:(a+=D,b+=E);x.arc(a,b,50,0,7);x.fill()

Apr 28 2017 11:38 AM UTC

}// 139/140

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

This works only Fullscreen: you can hook and unhook the ball with your mouse.

u/magna

Hijack S/C instead of X/Y to prevent the initial reference error
u/New_Core

I dont get that Hijack to work.. I made a push ball but it has also reference error before it works so I will not do a remix.. here is code
u/New_Core

t?c.width|=0:a=b=X;c.onmousemove=e=>(X=e.offsetX,Y=e.offsetY);D=X-a,E=Y-b,Math.sqrt(D*D+E*E)<50?(a-=D/9,b-=E/9):0;x.arc(a,b,50,0,7);x.fill()
u/13thptr

#interactive

show FPS hide FPS share fullscreen

MrM@_S

function u(t) {

onkeyup=e=>frame=0
t||(c.width=600)
onmousemove=e=>{E=e.pageX,X=e.pageY}
onmousedown=e=>T=!T
T||x.lineTo(E,X)
x.drawImage(c,200,!x.stroke())

Apr 27 2017 5:21 PM UTC

}// 140/140

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

[drawing tool] Click to turn off draw. Click again to draw a straight line to your mouse. Press any key to clear. It draws in 3 screens

u/iverjo

#interactive

show FPS hide FPS share fullscreen

donbright

remix of d/2562 by u/hscells

function u(t) {

t?c.width=w:(k=1,w=1980,f=w/2)
onmousemove=e=>k=e.pageX/94+e.pageY/942
for(i=f;i>0;i-=k)x.lineTo(w/2+S(i+t/5)*f,540+S(i*5)*f/2)
x.stroke()

Apr 23 2017 12:37 PM UTC

}// 138/140

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

move mouse left-right = coarse adjustment. move mouse up-down = fine adjustment

Show more comments…
u/donbright

challenge - can you find the tuning for a single, rotating parallelogram?
u/hscells

nice use of the mouse!
u/magna

SICK!
u/z3vin

Man, I thought it was cool even before I realized the mouse interactions!
u/donbright

well the default is just stealing from @hscells
u/Xen

thats sexy!
u/Xen

thats sexy!
u/donbright

thx
u/gabrielsroka

#interactive

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".

dwitter.net | #interactive