Graph extension's Funeral

It lived. It served. It died.

This article is dedicated to the late graph extension.
Fly high, sweet angel...

Here lies the Pong. It pinged until it ponged.

It could never be the IP grabber it was destined to be.

We're so back

They lived. They served. They died.

This article is dedicated to the late Pong.
Fly high, sweet angel...

Archive

Use W/S to control the left paddle, and use I/K to control the right paddle.

<graph>{"width":640,"height":360,"background":"black",

"signals":[{"name":"clocks","init":{"expr":"{raw:now(),active:false,offset:now(),main:0,prev:0,delta:0,frames:0}"},"streams":[{"type":"body:mousemove,mouseover,mouseout,body:wheel","expr":"{raw:now(),active:eventX()>=0&&eventX()<width&&eventY()>=0&&eventY()<height,offset:clocks.offset,main:clocks.main,prev:clocks.prev,delta:clocks.delta,frames:clocks.frames}"},{"type":"body:mousemove,mouseover,mouseout,body:wheel","expr":"{raw:clocks.raw,active:clocks.active,offset:clocks.active?clocks.offset:(clocks.raw-clocks.main),main:clocks.active?(clocks.raw-clocks.offset):clocks.main,prev:clocks.prev,delta:clocks.delta,frames:clocks.frames+clocks.active}"},{"type":"body:mousemove,mouseover,mouseout,body:wheel","expr":"{raw:clocks.raw,active:clocks.active,offset:clocks.offset,main:clocks.main,prev:clocks.main,delta:clocks.main-clocks.prev,frames:clocks.frames}"}]},

{"name":"ball","init":{"x":310,"y":170,"vx":0.2,"vy":0.1},"streams":[{"type":"body:mousemove,mouseover,mouseout,body:wheel","expr":"{x:if(ball.x < -20 || ball.x > width,310,ball.x+(ball.vx*clocks.delta)),y:ball.y+(ball.vy*clocks.delta),vx:if((ball.x<width-60 && ball.x+(ball.vx*clocks.delta)>width-60 && ball.y+(ball.vy*clocks.delta)<paddle2.y+100 && ball.y+(ball.vy*clocks.delta)+20>paddle2.y) || (ball.x>40 && ball.x+(ball.vx*clocks.delta)<40 && ball.y+(ball.vy*clocks.delta)<paddle1.y+100 && ball.y+(ball.vy*clocks.delta)+20>paddle1.y),ball.vx*-1,ball.vx),vy:if((ball.y<height-20 && ball.y+(ball.vy*clocks.delta)>height-20) || (ball.y>0 && ball.y+(ball.vy*clocks.delta)<0),ball.vy*-1,ball.vy)}"}]},

{"name":"paddle1","init":{"y":100,"vy":0},"streams":[ {"type":"body:keydown[event.code=='KeyW']","expr":"{y:paddle1.y,vy:-.1}"}, {"type":"body:keyup[event.code=='KeyW']","expr":"{y:paddle1.y,vy:if(paddle1.vy<0,0,paddle1.vy)}"}, {"type":"body:keydown[event.code=='KeyS']","expr":"{y:paddle1.y,vy:.1}"}, {"type":"body:keyup[event.code=='KeyS']","expr":"{y:paddle1.y,vy:if(paddle1.vy>0,0,paddle1.vy)}"}, {"type":"body:mousemove,mouseover,mouseout,body:wheel","expr":"{y:clamp(paddle1.y+(paddle1.vy*clocks.delta),0,height-100),vy:paddle1.vy}"}]},

{"name":"paddle2","init":{"y":200,"vy":0},"streams":[ {"type":"body:keydown[event.code=='KeyI']","expr":"{y:paddle2.y,vy:-.1}"}, {"type":"body:keyup[event.code=='KeyI']","expr":"{y:paddle2.y,vy:if(paddle2.vy<0,0,paddle2.vy)}"}, {"type":"body:keydown[event.code=='KeyK']","expr":"{y:paddle2.y,vy:.1}"}, {"type":"body:keyup[event.code=='KeyK']","expr":"{y:paddle2.y,vy:if(paddle2.vy>0,0,paddle2.vy)}"}, {"type":"body:mousemove,mouseover,mouseout,body:wheel","expr":"{y:clamp(paddle2.y+(paddle2.vy*clocks.delta),0,height-100),vy:paddle2.vy}"}]}], "marks":[{

 "type":"rect",
 "properties":{
   "enter":{"fill":{"value":"white"},"width":{"value":20},"height":{"value":20}},
   "update":{"x":{"signal":"ball.x"},"y":{"signal":"ball.y"}}
 }

},{

 "type":"rect",
 "properties":{
   "enter":{"fill":{"value":"white"},"width":{"value":20},"height":{"value":100},"x":{"value":20}},
   "update":{"y":{"signal":"paddle1.y"}}
 }

},{

 "type":"rect",
 "properties":{
   "enter":{"fill":{"value":"white"},"width":{"value":20},"height":{"value":100},"x":{"value":600}},
   "update":{"y":{"signal":"paddle2.y"}}
 }

}]}</graph>