Recent Changes -

Challenges {HackLeague}

Notes

  • Use HackLeague materials e.g. textures.
  • cf HackLeague regarding criteria
  • URL checking makes cheating too easy, consider a form spam protected submission

Challenges

Add a cube

Go to http://jsbin.com/ticisi/edit?html,output and complete the challenge, good luck!

Estimated time
2min
Requires
browser supported webGL
Skills
HTML
Goal
understand 3D coordinates

Rotation

Rotate another part of another letter in red

http://jsbin.com/limigel/edit?html,output

Ask to do the same for a letter in green <a-entity rotation="0 180 0"> ... half of a letter e.g bars of an E </a-entity>

concepts
rotation

Add several cubes at once

http://jsbin.com/zoxifow/edit?html,output

add cubes with x=0 z=-5 and y going from 0 to 5 N featuring existing loops for the other 2 parts of the letter

concepts
createElement + loop

Display a texture

http://jsbin.com/vewuxec/edit?html,output

<a-box src="#preloadedtexture"></a-box> (with a letter or URL directly as solution)

concepts
texture

Display a sky texture

http://jsbin.com/zozovu/edit?html,output

<a-sky src="#preloadedsky"></a-sky> (saved from a 360 snapshot with a letter or URL directly as solution)

concepts
360

Groups and hierarchy

http://jsbin.com/rilivo/edit?html,output

concepts
scene graph

Animate a cube along its axis

http://jsbin.com/gigodek/edit?html,output

animate a cube with its position attribute to change on y and form an I

concepts
animation

Animate a cube along a pivot

animate a cube with its rotation attribute to form an O

concepts
pivot

Scale up an existing group

http://jsbin.com/sopuvod/edit?html,output

to be able to read change from 0.0001 to 1

concepts
scale

ECS, what is that

http://jsbin.com/sopuvod/edit?html,output

concepts
entity component system

Using an existing component

http://jsbin.com/gixilis/edit?html,output

concepts
3rd party component

Registering a new component

http://jsbin.com/cubehug/edit?html,output

concepts
own component

Next challenges

  • network e.g. get the position of a remote element via firebase
    • can be as final challenge to avoid conflicts
  • shader e.g. fix a GLSL shader where value passed as parameters allows text to become visible
  • add and use a mixin (e.g. size + color to hide part of letters hidding the solution)
  • register and use a custom component that creates a letter, make a word out of it as solution.
  • repeated or timed animation via JS
  • gaze interaction
  • positioning and changing visuals based on a dataset
  • find a safer scheme than 1 out of 26 possibilities that are too fast to exhaust
  • leveraging other JS frameworks e.g. D3, display a bar graph using the provided dataset. The bars will align to hide all but one word, that's your solution.
  • Loading 3D assets, load the collada model provided, move and scale it around until you can read the word, that's your solution.
  • IoT exercise, connect to an IoT device and display the data
  • server side exercise, change the URL of the existing code to pull data from your own server
  • design an A-painter brush then use it to clear it

Notes

  • crescendo in time
  • few exercises done per day
    • sharing with testing for next day