Use different background speeds to create the illusion of a moving perspective
The showcase player uses a modified version of Processing.js in combination with jsweet to let students program their apps in Java code while still allowing for browser support.
Content created by students is scaled to fit the showcase frame while maintaining aspect ratio and cursor position. This is why some projects may appear blurry in fullscreen, or why some small details may not be visible on a small screen
<iframe width='500px' height='400px' src='https://nest.ktbyte.com/nest#468761' allowfullscreen></iframe><xml xmlns="https://developers.google.com/blockly/xml"><block type="global_variables" id="6@3dAmy0eCKw7qS)I}2w" x="227" y="-251"><next><block type="variable_declaration" id="~4F(qzWuyz]Xmf/nX7qx"><field name="var_type">Sprite</field><field name="var_name">sky</field><value name="value"><block type="sprite_newSprite" id="o+F.AN(*F{zW?Q3Gb8U~"><value name="p0"><block type="value" id="HD]!n`N/9wZATKc{t`.c"><field name="TEXT">"https://static.ktbyte.com/images/paralax_field/Field%20Layer%2001.png"</field></block></value><value name="p1"><block type="value" id="JN?O?(]C[cp)rEwPnn@A"><field name="TEXT">320</field></block></value><value name="p2"><block type="value" id="YZJi71bOF@:JxZ/DE?nI"><field name="TEXT">240</field></block></value><value name="p3"><block type="value" id="clXJVjm%{3ZO7a(,6hS#"><field name="TEXT">640</field></block></value><value name="p4"><block type="value" id="^iIT^wgdFz~HDqS^|ub0"><field name="TEXT">480</field></block></value></block></value><next><block type="variable_declaration" id="-_GELn4}nL.JJlYPPK4@"><field name="var_type">Sprite</field><field name="var_name">mtn1</field><value name="value"><block type="sprite_newSprite" id="J,{T1.VW0Zt)T7HJ6)4|"><value name="p0"><block type="value" id="#AHedr7cD-;BsU@Dm5+q"><field name="TEXT">"https://static.ktbyte.com/images/paralax_field/Field%20Layer%2002.png"</field></block></value><value name="p1"><block type="value" id="R:`K4)+_}]LHTk#TEW||"><field name="TEXT">320</field></block></value><value name="p2"><block type="value" id="NoMI;KZVDlijl8e3RdUG"><field name="TEXT">240</field></block></value><value name="p3"><block type="value" id="]dhg;%@!FJae?Ol9b.vM"><field name="TEXT">640</field></block></value><value name="p4"><block type="value" id="[R-Hl!Au69A3l[_uS]+["><field name="TEXT">480</field></block></value></block></value><next><block type="variable_declaration" id="DG..SI:^86%2ims*rpE?"><field name="var_type">Sprite</field><field name="var_name">hill1</field><value name="value"><block type="sprite_newSprite" id="5R)X9wO(rQ.+lLFsgSvp"><value name="p0"><block type="value" id="l9u:cv(CDDW_-d,h4)Xm"><field name="TEXT">"https://static.ktbyte.com/images/paralax_field/Field%20Layer%2005.png"</field></block></value><value name="p1"><block type="value" id="qaSyuPHnr$s9A;|C,J]s"><field name="TEXT">320</field></block></value><value name="p2"><block type="value" id="~*V]T63[::jf^HU:L?w*"><field name="TEXT">240</field></block></value><value name="p3"><block type="value" id="`fc3aXCmVhqr!`b?BC#~"><field name="TEXT">640</field></block></value><value name="p4"><block type="value" id="_fioSU%37bT~u2C1HW.r"><field name="TEXT">480</field></block></value></block></value><next><block type="variable_declaration" id="@!1AHH54@Zfw76_5oyXr"><field name="var_type">Sprite</field><field name="var_name">tree1</field><value name="value"><block type="sprite_newSprite" id="K|Hys_*E(r|xmmML7mC]"><value name="p0"><block type="value" id="|MfMRq2^Vm(HL$I@2PjQ"><field name="TEXT">"https://static.ktbyte.com/images/paralax_field/Field%20Layer%2007.png"</field></block></value><value name="p1"><block type="value" id="}Z/X3oaZs5*eKm[~24p("><field name="TEXT">320</field></block></value><value name="p2"><block type="value" id="+P-Zp.P(Oavzo30MZ^Wt"><field name="TEXT">240</field></block></value><value name="p3"><block type="value" id="WOZ(8+Ok$mr4pb1RUqwb"><field name="TEXT">640</field></block></value><value name="p4"><block type="value" id="#876j}0Sf65;N/=5upZx"><field name="TEXT">480</field></block></value></block></value><next><block type="variable_declaration" id="L7BKSa7D@E96G3sW=9po"><field name="var_type">Sprite</field><field name="var_name">grass1</field><value name="value"><block type="sprite_newSprite" id="1:fC~jtu#^}KsNIr(xeR"><value name="p0"><block type="value" id="l2Eed#J3~1TRRmZ(Ran%"><field name="TEXT">"https://static.ktbyte.com/images/paralax_field/Field%20Layer%2009.png"</field></block></value><value name="p1"><block type="value" id="0G5x`#3z#fY/V396C4_9"><field name="TEXT">320</field></block></value><value name="p2"><block type="value" id="g]ZXC+9?OERu`E6+CVB9"><field name="TEXT">240</field></block></value><value name="p3"><block type="value" id="Q~3OnxyAVYv=Ea%4Q|f`"><field name="TEXT">640</field></block></value><value name="p4"><block type="value" id="@hvqmw2^5(j~?kBp:VNu"><field name="TEXT">480</field></block></value></block></value><next><block type="variable_declaration" id="PQIfN3dUPp6`B}SN^S15"><field name="var_type">Sprite</field><field name="var_name">flappy</field><value name="value"><block type="sprite_newSprite" id="db~z|nnv9]Kcll{G;jVl"><value name="p0"><block type="value" id="0PMQ*D:@CO+{p?p9p|-6"><field name="TEXT">"http://www.pngmart.com/files/12/Flappy-Bird-Logo-Transparent-Background.png"</field></block></value><value name="p1"><block type="value" id="G|Db2oM#F/GB}h27e*HL"><field name="TEXT">100</field></block></value><value name="p2"><block type="value" id="^3lS3S4Ty#CCH3~V1H?S"><field name="TEXT">240</field></block></value><value name="p3"><block type="value" id="fI2F(*x|O~VO:`SdzpA6"><field name="TEXT">50</field></block></value><value name="p4"><block type="value" id="h+Bog]Z$^!.S+u)]5^f:"><field name="TEXT">50</field></block></value></block></value><next><block type="variable_declaration" id="sx%Q=k#{Dj+s0!%5WQ_@"><field name="var_type">Float</field><field name="var_name">yvel</field><value name="value"><block type="value" id="QS;Mpg(8zV7!UKQ`n+08"><field name="TEXT">0.0</field></block></value><next><block type="variable_declaration" id="TW,}:;GZO{6XWtHS79fu"><field name="var_type">Float</field><field name="var_name">gravity</field><value name="value"><block type="value" id="d+j6akG8[evs|eRneJOH"><field name="TEXT">0.8</field></block></value></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block><block type="global_function_setup" id="G5LmU$w]~ot?uRQg-:yo" x="224" y="241"><statement name="statements"><block type="command_size" id="6kty=R_[kW9j*uXE%b!H"><value name="p0"><block type="value" id="K{fGK~D[T?536:pqoUQ*"><field name="TEXT">640</field></block></value><value name="p1"><block type="value" id="Bi8G[e-,[uSo.4jn~=2D"><field name="TEXT">480</field></block></value></block></statement></block><block type="global_function_user_defined" id="K!F%^gCW5]//Cz./*kR9" x="566" y="232"><field name="name">display</field><field name="input">Sprite s</field><statement name="statements"><block type="conditionals_if" id="6#43Gf{OMCG}m?LZ8[Pq"><value name="IF0"><block type="conditionals_compare" id="Fh:,?)98H*]Zs9c.gB%o"><field name="OP">LTE</field><value name="A"><block type="sprite_getX" id="_j0sXa6$V?kFa^.XefHE"><field name="var_name">s</field></block></value><value name="B"><block type="value" id="N,zErPuE.CoC0!v2/7v^"><field name="TEXT">-width/2</field></block></value></block></value><statement name="DO0"><block type="sprite_moveX" id="$WMRc6}|j^W|H]X%ZKpE"><field name="var_name">s</field><value name="p0"><block type="value" id="t37GG!7ahVP1_!IXU]%-"><field name="TEXT">width</field></block></value></block></statement><next><block type="sprite_display" id="T8M0Byl{G!95#tc8E?D1"><field name="var_name">s</field><next><block type="sprite_moveX" id=")_~kIO$I`u`+pY5awL||"><field name="var_name">s</field><value name="p0"><block type="value" id="*^v^DJlIr@,,z7Mg;5FD"><field name="TEXT">width</field></block></value><next><block type="sprite_display" id="ER^%[FK@{Y#6Dj@?-Otz"><field name="var_name">s</field><next><block type="sprite_moveX" id="[!MX(|-e|UAx;xd*p`YK"><field name="var_name">s</field><value name="p0"><block type="value" id="9gb$Xx!TNqY-KKrnOR16"><field name="TEXT">-width</field></block></value></block></next></block></next></block></next></block></next></block></statement></block><block type="global_function_draw" id="UMirahJV*eB/:gj|tnG3" x="230" y="339"><statement name="statements"><block type="command_background" id="x3i21Ea?$nu~)Iy=(^:Y"><value name="p0"><block type="value" id=";itt+Q+C;CmnKYa.1XyS"><field name="TEXT">255</field></block></value><value name="p1"><block type="value" id="0g/@.fu[InGYXqzNdh.j"><field name="TEXT">255</field></block></value><value name="p2"><block type="value" id="t(L.S!hkU5)Jq5Jal0@u"><field name="TEXT">255</field></block></value><next><block type="global_function_call_user_defined" id="i4z7WB~Q-i=Uvsu|;^~s"><field name="name">display</field><field name="input">sky</field><next><block type="global_function_call_user_defined" id="r8Xc@$C5anCY;T~V*|O2"><field name="name">display</field><field name="input">mtn1</field><next><block type="global_function_call_user_defined" id="vu$ES[0-$48dOXwCNQp!"><field name="name">display</field><field name="input">hill1</field><next><block type="global_function_call_user_defined" id="|e~jw(H!4:zU(vaY+D_R"><field name="name">display</field><field name="input">tree1</field><next><block type="global_function_call_user_defined" id="sfoZ6A+X==^KYsZ_l6d$"><field name="name">display</field><field name="input">grass1</field><next><block type="sprite_moveX" id="$#d~UqHQ{KGN:wk2e9-A"><field name="var_name">sky</field><value name="p0"><block type="value" id="/xSPkD=AcV;hM]/-PGuA"><field name="TEXT">-1</field></block></value><next><block type="sprite_moveX" id="$wV3kSRTCE1r|c:TV2De"><field name="var_name">mtn1</field><value name="p0"><block type="value" id="]~_Z:G}(Z~e=jFnv!kva"><field name="TEXT">-2</field></block></value><next><block type="sprite_moveX" id=";l#mM{iL~4],WdT:5+aY"><field name="var_name">hill1</field><value name="p0"><block type="value" id="KH]]$eDOyxiW7E)k?w[^"><field name="TEXT">-4</field></block></value><next><block type="sprite_moveX" id="9%YOt{s2mX~jHqDx]{S@"><field name="var_name">tree1</field><value name="p0"><block type="value" id="%ZHe9rgmFsWP@#;-GakF"><field name="TEXT">-8</field></block></value><next><block type="sprite_moveX" id="_PsmdX5~Oa$I7G?LVFKj"><field name="var_name">grass1</field><value name="p0"><block type="value" id="%v%$o:NK!v;$Jrr@`Lb`"><field name="TEXT">-12</field></block></value><next><block type="sprite_moveY" id="Za.6N0KXUx)oFoZ;3*9L"><field name="var_name">flappy</field><value name="p0"><block type="value" id="3Gpld`ok~q/8n$)J5DW/"><field name="TEXT">yvel</field></block></value><next><block type="variable_set_value" id="KM|YIL`y@R7X`P:?pdaf"><field name="var_name">yvel</field><value name="value"><block type="value" id="4B,][IW$DYYB2+/_#CXS"><field name="TEXT">yvel + gravity</field></block></value></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></statement></block><block type="sprite_display" id="95zrudwRNepOv951$15o" x="238" y="836"><field name="var_name">flappy</field></block><block type="global_function_keyPressed" id="e0D=VAm5mM8j9c=GUJ0y" x="208" y="908"><statement name="statements"><block type="conditionals_if" id="xXHw_9v-Nvm+Lj*`ZEzF"><value name="IF0"><block type="command_pressed" id="PN(O]gg=ggo@cB5z.ZRH"><value name="p0"><block type="value" id="*bW5_hdUk~;[2s[cd4*w"><field name="TEXT">" "</field></block></value></block></value><statement name="DO0"><block type="variable_set_value" id="QK$4p;1QyVe0c:fnRUp]"><field name="var_name">yvel</field><value name="value"><block type="value" id="@V`lY6Hfo80CAk##i%Hr"><field name="TEXT">yvel - 20</field></block></value></block></statement></block></statement></block></xml>