cerberus presentation

.gitignore

@@ -1,3 +1,7 @@
+# files
+public/images
+public/videos
+
 # ---> Node
 # Logs
 logs

public/css/style.css

@@ -0,0 +1,48 @@
+html {
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+}
+
+body {
+	margin: auto;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	background-color: #1d2021;
+	color: #ebdbb2;
+}
+
+#imagewithdescription {
+	width: 200px;
+	height: auto;
+}
+
+#smallimage {
+	height: 200px;
+	width: auto;
+}
+
+#banner {
+	max-width: 80%;
+}
+
+#navbar {
+	max-width: calc(782px - 32px);
+}
+
+.loader {
+	border: 16px solid #f3f3f3;
+	border-top: 16px solid #3498db;
+	border-radius: 50%;
+	margin: auto;
+	width: 120px;
+	height: 120px;
+	animation: spin 1s linear infinite;
+}
+
+@keyframes spin{
+	0% {transform: rotate(0deg);}
+	100% {transform: rotate(360deg);}
+}

src/client/components/Arduino.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+/**
+ * @return {jsx} The root component
+ */
+export default function Arduino() {
+	return (
+		<div className='container'>
+			<h1>Cerberus played with an Arduino controller</h1>
+			<p>A recording of a work session experimenting with Arduino and a
+				MOSFET transistor to control the laser state, by
+				synchronizing the frequency of the waveform and the frequency
+				of the MOSFET we can create segmentation, you can see 8
+				segments at 1:24 and later 256 segments. The laser sometimes
+				vanishes because I recompile the arduino project during the
+				video</p>
+			<video width="360" height="640" controls>
+				<source
+					src="static/videos/laser_arduino.mp4"
+					type="video/mp4" />
+				Your browser does not support the video tag.
+			</video>
+		</div>
+	);
+}

src/client/components/Beepbox.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+/**
+ * @return {jsx} The root component
+ */
+export default function Beebox() {
+	return (
+		<div className='container'>
+			<h1>Cerberus with appropriate music</h1>
+			<p>This is a work session. The Cerberus is a very versatile project
+				and you cannot always predict the shape that the sound will
+				produce, here I used simple waveforms to create more or less
+				predictable shapes, you can recognize Lissajous curves at some
+				points</p>
+			<video width="360" height="640" controls>
+				<source src="static/videos/laser_beepbox.mp4"
+					type="video/mp4" />
+				Your browser does not support the video tag.
+			</video>
+		</div>
+	);
+}

src/client/components/Instruments.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+/**
+ * @return {jsx} The root component
+ */
+export default function Instruments() {
+	return (
+		<div className='container'>
+			<h1>Cerberus played with string instruments</h1>
+			<p>A recording of an event made by Évariste that took place the 9th
+				of November 2018 at Matrice, it features the Cerberus being
+				played by string instruments.</p>
+			<video width="640" height="360" controls>
+				<source src="static/videos/laser_instruments.mp4"
+					type="video/mp4" />
+				Your browser does not support the video tag.
+			</video>
+			<p>Photography took after the event</p>
+			<img
+				width="640"
+				height="auto"
+				src='static/images/laser_instruments.jpg'></img>
+		</div>
+	);
+}

src/client/components/Kinect.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+/**
+ * @return {jsx} The root component
+ */
+export default function Kinect() {
+	return (
+		<div className='container'>
+			<h1>Cerberus played with a Kinect camera</h1>
+			<p>A recording of a work session experimenting with Kinect depth
+				camera and the Cerberus</p>
+			<p>
+				<a
+					href={'https://git.gaetanbrochard.dev/' +
+						'gbrochar/cerberus-kinect'}>
+					The code for this project</a></p>
+			<video width="640" height="360" controls>
+				<source src="static/videos/laser_kinect.mp4" type="video/mp4" />
+				Your browser does not support the video tag.
+			</video>
+		</div>
+	);
+}

src/client/components/Presentation.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+/**
+ * @return {jsx} The root component
+ */
+export default function Presentation() {
+	return (
+		<div className='container'>
+			<div className='display-1'>Cerberus</div>
+			<p>The Cerberus is a sound visualization artistic project that
+				allows for a lot of way to visualize sounds, we experimented
+				with this project for several monthes in 2018 while Évariste
+				was still in activity, and I later made a Kinect version of the
+				project for the digital art exhibition I made in Arzal,
+				Britanny.</p>
+			<p>Videos aren&apos;t giving the Cerberus good publicity, because
+				the laser is actually drawing the shape dozens or even hundreds
+				of time per second, and the camera shutter speed struggle to
+				capture that. Pictures however can be pretty, as you can see
+				below.</p>
+			<img
+				width="640"
+				height="auto"
+				src='static/images/laser_photo.jpg'></img>
+		</div>
+	);
+}

src/client/components/Root.tsx

@@ -1,4 +1,9 @@
 import React from 'react';
+import Presentation from './Presentation';
+import Instruments from './Instruments';
+import Kinect from './Kinect';
+import Beepbox from './Beepbox';
+import Arduino from './Arduino';
 
 /**
  * @return {jsx} The root component
@@ -6,7 +11,11 @@ import React from 'react';
 export default function Root() {
 	return (
 		<div>
-			<h1>Hello World !</h1>
+			<Presentation />
+			<Instruments />
+			<Kinect />
+			<Beepbox />
+			<Arduino />
 		</div>
 	);
 }

src/server/main.ts

@@ -12,4 +12,4 @@ app.get('/', (_req, res) => {
 	res.render('index');
 });
 
-app.listen(3000);
+app.listen(3004);

views/index.ejs

@@ -1,11 +1,28 @@
 <!DOCTYPE html>
 <html>
-	<head>
-		<meta charset="utf-8">
-		<title></title>
-	</head>
-	<body>
-		<div id="root"></div>
-		<script src="js/bundle.js"></script>
-	</body>
+
+<head>
+	<meta charset="utf-8">
+	<title></title>
+
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
+		integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+		integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+		crossorigin="anonymous"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
+		integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
+		crossorigin="anonymous"></script>
+	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
+		integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
+		crossorigin="anonymous"></script>
+
+	<link rel="stylesheet" href="/static/css/style.css">
+</head>
+
+<body>
+	<div id="root"></div>
+	<script src="js/bundle.js"></script>
+</body>
+
 </html>