Athlete

This page is about all of the lovelycore sports you can compete in as an Athlete! Hooray!

example of an Athlete

Homestar Runner
Full name	Homestar Michael (stipe) Runner
Species	Single-ish no-armed whitey. Is vulnerable and should be updated
Friends	beans b/w rice. thats all i can think umf tonight.
Enemies	four door sedans, billfolds.

<right>Homestar Runner really great! Homestar Runner athe-late!</right>

I LOVE SPORTSSSS YEAAHHHH

This page is great.

As an athlete, you can compete in many races and win so many cool prizes! Make sure to have a rest every once in a while.....

Tennis

Let's practice some tennis!

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>

Hockey

Let's practice some hockey!

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>

Football

Let's practice some football!

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>

? ? ? ? ?

[XX:XX:XX]	SYSTEM	|	USER a-$D HAS LOGGED IN
[XX:XX:XX]	a-$D	|	Day 001 of researching s-ATHLETE.
[XX:XX:XX]	a-$D	|	The subject's strength seems to increase when exposed to Excersise Equipment, making them incredibly dangerous to subdue at Gyms.
[XX:XX:XX]	a-$D	|	Currently unknown if the subject is a Devil embodying a sports-related fear, or if they are just messed up, or something.
[XX:XX:XX]	a-$D	|	The subject was very skilled at reflecting attacks, but was gullible enough to fall for my Special Attack.
[XX:XX:XX]	a-$D	|	This concludes Day 001 of research.
[XX:XX:XX]	SYSTEM	|	USER a-$D HAS LOGGED OUT

Baseball

Let's practice some baseball!

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>

Synchronized Swimming

Let's practice some synchronized swimming!

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>

Squash

Let's practice some squash!

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>

American Football

Let's practice some American football!

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>

Chess

Let's practice some Chess!

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>

Dance Dance Revolution

Let's practice some Dance Dance Revolution!

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>

Moon landing

Let's practice some Moon landing!

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>

Math

Let's practice some Math!

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>

Wii Bowling

Let's practice some Wii Bowling!

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>

what about, yknow, regular bowling???

Let's practice some Bowling!

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>

Binge watching

Let's practice some binge watching!

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>

'The Wiki Camp 2?' What sorta crap is this? And why are there seals everywhere?!

No, no, no, if you want to write a wiki, take it from a certified wiki-teer... er. It has to have more effort, more, er, classé. Like the real men.

⁶