-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (126 loc) · 6.27 KB
/
index.html
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Living Orb</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Jonathan Giroux">
<meta name="description" content="Living Orb is a tangible game console, featuring a spherical screen of LEDs.">
<meta property="og:description" content="Living Orb is a tangible game console, featuring a spherical screen of LEDs.">
<meta property="og:image" content="/orb-thumbnail.jpg">
<meta property="og:site_name" content="Living Orb">
<meta property="og:title" content="Living Orb">
<meta property="og:type" content="website">
<meta property="og:url" content="http://livingorb.io/">
<meta name="twitter:card" content="summary">
<meta name="twitter:description" content="Living Orb is a tangible game console, featuring a spherical screen of LEDs.">
<meta name="twitter:image" content="/orb-thumbnail.jpg">
<meta name="twitter:site" content="@LivingOrb">
<meta name="twitter:title" content="Living Orb">
<link href="https://fonts.googleapis.com/css?family=Rajdhani|Raleway" rel="stylesheet">
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="header-banner"></div>
<div class="container">
<section>
<h1>Living Orb</h1>
<div class="float-right width-45 aspect-ratio aspect-ratio-16-9">
<iframe class="fullwidth fullheight" src="https://www.youtube.com/embed/khn4KSOQYT0" frameborder="0" allowfullscreen></iframe>
</div>
<p><em>Living Orb</em> is a tangible game console, with which you can easily create your own enlightened games.</p>
<p>The device is an sphere covered by LEDs. It's like its surface is the screen! And you only control it by rotating it, that's all. This allows for unique games!</p>
<p>Because both hardware and software are open-source, here we explain how to</p>
<ul>
<li><strong>construct</strong> your own Living Orb;
<li><strong>design</strong> a funny game adapted to the device;
<li><strong>develop</strong> the game with Lua;
<li><strong>share</strong> your game with others.
</ul>
<div class="float-clear"></div>
</section>
<section>
<h2>Construct your own Living Orb</h2>
<figure class="float-left width-45">
<img src="media/henri.jpg" class="fullwidth"/>
<figcaption>Henri at work, building his own device.</figcaption>
</figure>
<p>The devices includes an accelerometer, a digital compass, and a gyroscope. Therefore it becomes aware of its rotation.</p>
<p>It produces light with LEDs driven by a mini-computer: Raspberry Pi, Arduino...</p>
<p>Its structure can be a polystyrene sphere,it can also be 3D-printed, or assembled with laser-cut boards.</p>
<div class="float-clear"></div>
<figure class="float-right width-60">
<img src="media/saou.jpg" class="fullwidth"/>
<figcaption>Working on the hardware in the best conditions.</figcaption>
</figure>
<p>On the wiki, you'll find a multitude of designs already tested, the equipments needed for the fabrication, and a lot of advices to support you.</p>
<p>So that you enjoy making it!</p>
<div class="float-clear"></div>
</section>
<section>
<h2>Invent new ways to play</h2>
<figure class="float-left width-45">
<img src="media/jardin-dalice.jpg" class="fullwidth"/>
<figcaption>First prototype at <em>Ludipunk Fest</em> (Montreuil, France, on May 21, 2016).</figcaption>
</figure>
<p>The device, both a controller and a scren at the same time, invites you to create unique games.</p>
<p>Since it's a tangible object, there are new game mechanics to discover.</p>
<div class="float-clear"></div>
<figure class="float-right width-60">
<img src="media/square-tune-magician.jpg" class="fullwidth"/>
<figcaption>Decorating the live act of <em>Square Tune Magician</em> at the <em>VIP demoparty</em> (Thoissey, France, on June 11, 2016).</figcaption>
</figure>
<p>The lights are so beautiful to see, that the Living Orb can even serve as decoration, with no interactions.</p>
<div class="float-clear"></div>
</section>
<section>
<h2>Develop your games</h2>
<figure class="float-right width-45">
<img src="media/editor.png" class="fullwidth"/>
<figcaption>With the web editor, write code directly on the device.</figcaption>
</figure>
<p>It's very easy to program games using Lua!</p>
<p>The following code turns on a random LED in white:</p>
<code><pre>
-- Initialize the random generator.
math.randomseed(os.time())
-- Pick a random LED.
led = math.random(Count)
-- Set as white.
function update()
set_color(led, 1, 1, 1)
end
</pre></code>
<div class="float-clear"></div>
<figure class="float-left width-45">
<img src="media/simulator.jpg" class="fullwidth"/>
<figcaption>Test games in the simulator.</figcaption>
</figure>
<p>There is also a simulator to test the games in your browser. This will boost your creation process.</p>
<div class="float-clear"></div>
</section>
<section>
<h2>Share your art and knowledge</h2>
<p>Living orb becomes what you decide to do with. Feel free to customize it as you wish. You can then share your creation to the community!</p>
<p>Share also your games. On the game repository, creators exchange their games and collect new ideas.</p>
</section>
<section>
<h2>Newsletter</h2>
<p>Subscribe to the newsletter to show your support and to get project updates.</p>
<p>You will typically receive a mail every few weeks. Your email address won't be used for any other purpose.</p>
<form action="https://livingorb.us14.list-manage.com/subscribe/post?u=5fe0031b8fbd85bbb13da7ec6&id=f110464442" method="post" target="_blank">
<label>Email address:
<input type="email" value="" name="EMAIL">
</label>
<input type="submit" value="Subscribe" name="subscribe">
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_5fe0031b8fbd85bbb13da7ec6_f110464442" tabindex="-1" value=""></div>
</form>
</section>
<footer>
<hr/>
<p>Project by <a href="http://koltes.digital/">Jonathan Giroux</a> and other contributors.</p>
<p>Find all ressources on <a href="https://github.com/LivingOrb">GitHub</a>.</p>
</footer>
</div>
</body>
</html>