TeamTschunk.github.io/index.html at master · TeamTschunk/TeamTschunk.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="UTF-8">
    <title>#TeamTschunkEU by TeamTschunk</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
    <link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
  </head>
  <body>
    <section class="page-header">
      <h1 class="project-name">#TeamTschunkEU</h1>
      <h2 class="project-tagline">Bring code to life!</h2>
    </section>

    <section class="main-content">
      <h3>
<a id="welcome-to-team-tschunks-website" class="anchor" href="#welcome-to-team-tschunks-website" aria-hidden="true"><span class="octicon octicon-link"></span></a>Welcome to Team Tschunk's Website</h3>

<p>We are Team Tschunk, and we are participating in the <a href="http://www.2015.euhackathon.eu/participants/#team-tschunk">2015 EUhackathon</a>!</p>

<h2>
<a id="our-project" class="anchor" href="#our-project" aria-hidden="true"><span class="octicon octicon-link"></span></a>Our Project</h2>

<p><strong>Bring code to life!</strong></p>

<p>Place small code-blocks on a table and see its effects on a screen.</p>

<p>Wo use computer vision technology to make the power of code tangible: children should be able to create and modify small programs on a table by placing wooden or paper code-blocks.</p>

<p>A webcam films the table and shows the created program, augmented by an avatar which walks through the program, on a screen. The children then can change the program and immediately see the effects of the change on the screen. Special functions, like small games or simple image manipulation, can be introduced as blocks, which makes it easy to extend this system.</p>

<p>Doing so we can show the power of even small code in a simple, interactive and entertaining way. This can be used in classrooms, at exhibitions, workshops, and other events.</p>

<p><em>Visual programming + "oh I can touch my code" are a thing!</em></p>

<h2>
<a id="aspects" class="anchor" href="#aspects" aria-hidden="true"><span class="octicon octicon-link"></span></a>Aspects</h2>

<p>Our project focuses around three core aspects.</p>

<ul>
<li><p><strong>Open Educational Resources:</strong> Everything is free. The software can be downloaded for no cost from the Internet. It is also licenses to that anyone can freely modify it. Furthermore, we provide all required hardware parts in open format. (<em>Note:</em> You still need a webcam and a computer.)</p></li>
<li><p><strong>Generic Teaching Framework:</strong> Out software is build in a generic way, allowing the designing of arbitrary games (and other software). Examples include the provided postmaster game, an simple audio synthesiser and an image manipulation tool.</p></li>
<li><p><strong>Postmaster Game:</strong> Last but not least, we provide an demo program implemented with the help of our framework. The grammar needed to write a program &amp; help a postmaster delver the post only requires 5 different commands, allowing easy to use learning. It can be used to demonstrate multiple programming concepts, like code execution, loops and debugging. </p></li>
</ul>

<p>The following screenshot shows a test version of our postmaster game. The program, visualized in the window on the left, was read by a webcam from cards placed on a table.</p>

<p><img src="http://i.2904.cc/20151117_Selection_06.png" alt="A Screenshot of our Postmaster game">
<img src="http://i.2904.cc/cards.jpg" alt="The input program for our Postmaster game"></p>

<h2>EUhackathon 2015 pitch</h2>

<p>
  <iframe src="//de.slideshare.net/slideshow/embed_code/key/wvnqH74VdJkhZ8" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>
</p>

<h2>
<a id="making-off" class="anchor" href="#making-off" aria-hidden="true"><span class="octicon octicon-link"></span></a>Making Off</h2>

<p>We created the required equipment (except webcam, computer and tripod) using laser-cutter and 3d-printer in <a href="http://wp.realraum.at">realraum Graz</a>.
You can find all files needed to reproduce the equipment <a href="https://github.com/TeamTschunk/materials">on GitHub</a>. Furthermore, we also publish all our code <a href="https://github.com/TeamTschunk/TschunkCore">on GitHub</a>.</p>

<p><img src="http://i.2904.cc/laser.jpg" alt="">
<img src="http://i.2904.cc/mount.jpg" alt="">
<img src="http://i.2904.cc/IMG_0437.JPG" alt="">
<img src="http://i.2904.cc/IMG_0434.JPG" alt="">
<img src="http://i.2904.cc/IMG_0443.JPG" alt="">
<img src="http://i.2904.cc/welcome.jpg" alt="">
<img src="http://i.2904.cc/making.jpg" alt=""></p>

      <footer class="site-footer">

        <span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span>
      </footer>

    </section>


  </body>
</html>