Skip to content

Instantly share code, notes, and snippets.

@yliess86
Last active October 18, 2021 17:00
Show Gist options
  • Save yliess86/a817a68fdc70571ad4054ea24885063a to your computer and use it in GitHub Desktop.
Save yliess86/a817a68fdc70571ad4054ea24885063a to your computer and use it in GitHub Desktop.

Creative Technologist Lectures πŸ“š

This document presents all the Lectures we will give this year for the Creative Technologist Students. You will find information about the Lecture's Objectives πŸ”₯, Content πŸŽ“, Skills πŸ’ͺ, Bibliography πŸ“‘, and Requirements 🏷️ as well as all the Assignments πŸ“, Installation πŸ›’ Lists, Notions 🧬 and Rating Constraints πŸ†.

This document is subject to change during the first semester.

Table of Content

  • (MDT) Media & Digital Technologies πŸ–₯️
  • (AI) Artificial Intelligence πŸ€–
  • (CG) Computer Graphics πŸŽ₯
  • (BLT) Bio & Living Technologies πŸ›

(MDT) Media & Digital Technologies πŸ–₯️

About

Objectives πŸ”₯

This course introduces the theory, tools, and methods to create aesthetically pleasing real-time data-driven motion graphics in the browser. We will cover perception, cognition, colors, do and don't of DataViz, the artistic practice, crafting messages, playing with transitions, etc. as well as technical aspects such as Javascript on the frontend, node-based visual programming or Python frameworks to setup APIs and data processing on the server.

Content πŸŽ“

This course introduces the theory, tools, and methods to create aesthetically pleasing real-time data-driven motion graphics in the browser. We will cover perception, cognition, colors, do and don't of DataViz, the artistic practice, crafting messages, playing with transitions, etc. as well as technical aspects such as Javascript on the frontend, node-based visual programming or Python frameworks to setup APIs and data processing on the server.

Skills πŸ’ͺ

  • Creating Animated Graphics in the Browser
  • Developing Dataviz Libraries, Core Drawing, Animation, and Layout Algorithms
  • Developing and Deploying Python Fullstack App
  • Develop Creative and Design Skills

Requirements 🏷️

No requirements except basic programming knowledge.

Table of Content

  • HTML, CSS, Javascript, and Modern Reactive Framework, Vue3 for Building Web Applications
  • Python FastAPI, and MongoDB for Serving Backend APIs
  • Designing Responsive and Dynamic Frontend Applications by Playing with CSS and the Canvas

MDT01: HTML, CSS, Javascript, and Modern Reactive Framework, Vue3 for Building Web Applications

Installation πŸ›’

  • Your Favorite IDE
  • A Local HTTP Server (python3 –m http.server)
  • Node & Node Package Manager (NPM)
  • VueJS 3.2 and Vite

Notions 🧬

HTML

index.html

<!DOCTYPE html>

<html>
	<head>
		<title>Website Title</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>

	<body>
		<nav>
			<ul>
				<li href="#">Home</li>
				<li href="#">About</li>
				<li href="#">Contact</li>
			</ul>
		</nav>
	
		<header>
			<h1>Website Title</h1>

			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
		</header>

		<article>
			<h2>Lorem Ipsum</h2>

			<p>
				Lorem Ipsum is simply dummy text of the printing and typesetting industry.
				Lorem Ipsum has been the industry's standard dummy text ever since the
				1500s, when an unknown printer took a galley of type and scrambled it to
				make a type specimen book. It has survived not only five centuries, but also
				the leap into electronic typesetting, remaining essentially unchanged.
				It was popularised in the 1960s with the release of Letraset sheets
				containing Lorem Ipsum passages, and more recently with desktop publishing
				software like Aldus PageMaker including versions of Lorem Ipsum.
			</p>

			<h2>Nobody</h2>

			<img src="https://thispersondoesnotexist.com/" alt="Nobody">
		</article>

		<footer>
			<a href="mailto: yliess.hati@devinci.fr">yliess.hati@devinci.fr</a>
		</footer>
	<body>
</html>

VueJS

Card.vue

<template>
	<div class="card">
		<img src="cover">
		<h2>{{ title }}</h2>
		<p>{{ abstract }}</p>
		<button>Learn More</button>
	</div>
</template>

<script>
export default {
	props: {
		cover: { type: String, required: true },
		title: { type: String, required: true },
		abstract: { type: String, required: true },
	}
}
</script>

Page.vue

<template>
	<div class="page">
		<ul>
			<li v-for="(card, index) in cards" :key="index">
				<Card
					cover="card.cover"
					title="card.title"
					abstract="card.abstract" />
			</li>
		</ul>
	</div>
</template>

<script>
import { ref } from "vue"
import Card from "../components/Card.vue"
import api from "../use/api.js"

export default {
	setup() {
		const cards = ref([])
		api.getCards().then(data => { cards.value = data })

		return { data }
	}
}
</script>

Assignements πŸ“

  • Create a Simple HTML5 Page with a Header and Count Button
  • Increment and Display Count when Clicking the Button
  • Create an Article Like Page
  • Redo 03 using VueJS
  • Create a Blog with Fake Content

MDT02: Python FastAPI, and MongoDB for Serving Backend APIs

Installation πŸ›’

  • Docker to Encapsulate
    • Python 3.8+
    • FastAPI
    • MongoDB

Assignments πŸ“

  • Adapt the Blog to Parse Markdown to Create Page Content
  • Put Website Markdown Articles into a Folder and Serve the Folder with FastAPI
  • Initiate a MongoDB with Articles Metadata and Content
  • Implement a REST API to Fetch MongoDB with FastAPI
  • Fetch Content from API to populate the Blog

MDT03: Designing Responsive and Dynamic Frontend Applications by Playing with CSS and the Canvas

Assignements πŸ“

  • Create a Blank HTML Page with a Full Size Canvas
  • Draw in the Canvas
  • Erase in the Canvas
  • Make a Simple Document Signing Website

(AI) Artificial Intelligence πŸ€–

About

Objectives πŸ”₯

The Artificial Intelligence (AI) track aims to provide deep understanding and design skills on Data-Driven Modelisation using modern Deep Learning (DL).

Content πŸŽ“

This course covers basic, intermediary, and advanced topics in modern Artificial Intelligence called Deep Learning.

Skills πŸ’ͺ

  • Use Numpy and PyTorch Frameworks
  • Design, Implement, Train and Deploy at Scale advanced Neural Networks
  • Build an advanced Autograd Library

Bibliography πŸ“‘

  • Deep Learning - Ian Goodfellow, Yoshua Bengio et al. - The MIT Press
  • L'Apprentissage Profond - FranΓ§ois Chollet - Machinelearning.fr
  • Linear Algebra and Learning from Data - Gilbert Strang - Wellesley-Cambridge Press
  • Pattern Recognition and Machine Learning - Christopher M. Bishop - Springer-Verlag New York Inc
  • Reinforcement Learning: An Introduction (second edition) - Richard S. Sutton - Bradford Books

Requirements 🏷️

  • Hack & Puzzle
  • Linear Algebra
  • Statistics and Probabilities
  • Python
  • C++

Rating Constraints πŸ†

  • Design and Train a Custom Model
  • Deploy the Model either on Web (Server or In-Browser) or in Device
  • The Model must use an Acceleration Device (GPU, NPU, TPU, ... etc.)
  • The Evaluation of the Model must Contain at least one Objective and one Subjective Metric
  • The Model must be Benchmarked against State of the Art or at least Ground Truth when Available
  • Model Weights (kB) and Inference Speed must be evaluated
  • The Model must Solve a Problem that is not solvable without Deep Learning

Table of Content

  • Multi-Layer Perceptron, Back Propagation, and Convolutional Neural Network for Computer Vision
  • Recurrent Neural Networks, Bag of Words, Embeddings, Auto Encoders, Attention Mechanism and Transformers for Natural Language Processing
  • Q Learning, Deep Q Learning, Actor Critique, and Policy Optimization for Atari Games
  • Prunning, Quantization, Distillation, TochScript, and ONNX for Embedded Deep Learning Applications (Web, Devices)
  • Tensors, and Autograd for Automatic Backward Differentiation from Scratch

AI01: Multi-Layer Perceptron, Back Propagation, and Convolutional Neural Network for Computer Vision

Installation πŸ›’

  • Python 3.8+
  • Numpy
  • PIL
  • PyTorch (with Cuda 10.2 ou 11.1 & CudNN 7 if Nvidia GPU GTX/RTX >= 980 availbale)
  • TorchVision
  • Google User Account

Notions 🧬

Assignements πŸ“

  • Setup a DataLoader for the MNIST Dataset
  • Implement a Simple Multi Layer Perceptron (MLP)
  • Define the Loss Function (Cross Entropy) and the Optimizer (AdamW)
  • Train the Model on Multiple Epochs following a Train, Validation and Test scheme
  • Save the model's Weights on Disk as a ".pt" file
  • Implement a LeNet5 architecture and Retrain
  • Implement a VGG16 architecture and Retrain
  • Implement a ResNet15 architecture and Retrain
  • Use a Pretrained EfficientNet and Finetune on CIFAR10

AI02: Recurrent Neural Networks, Bag of Words, Embeddings, Auto Encoders, Attention Mechanism and Transformers for Natural Language Processing

Installation πŸ›’

  • TorchText
  • HuggingFace

Assignments πŸ“

  • Download The Entire Harry Potter Books
  • Use a Tokenizer, a Lemmer, and a Stemmer (and more) to Clean the Dataset and build a Dictionary
  • Train a Recurrent Neural Network Language Model on this data
  • Save the model's Weights on Disk as a ".pt" file
  • Generate new Sentences based on user Inputs
  • Train a Long Short Term Memory Language Model on this data
  • Train a Long Short Term Memory Language Model with Attention on this data
  • Use a Pretrained Transformer Model and Finetune on this data
  • Train a Seq2Seq Model with Attention on this data
  • Visualize a Subset of the Harry Potter Dictionary and their Hidden Variable (Downsampled to 2 dims)

AI03: Q Learning, Deep Q Learning, Actor Critique, and Policy Optimization for Atari Games

Installation πŸ›’

  • Gym

Assignments πŸ“

  • Initialize a CartPole-v1 Gym Environment
  • Make a Random Agent
  • Train a Deep Q Network (DQN) Agent from State Vector
  • Train a DQN Agent from Image Only
  • Train a DQN Agent from Image Only with Replay Memory
  • Train a DQN Agent from Image Only with Prioritized Replay Memory
  • Train a Dueling Double DQN from Image Only with Prioritized Replay Memory

AI04: Prunning, Quantization, Distillation, TochScript, and ONNX for Embedded Deep Learning Applications (Web, Devices)

Installation πŸ›’

  • ONNX Runtime
  • Tensorflow
  • Git

Assignments πŸ“

  • Use EfficientNet and Finetune on CIFAR10 with Augmentation and Dropout
  • Repeat 01 with Mixed Precision
  • Save the model's Weights on Disk as a ".pt" file
  • Fuse Layers
  • Export as a JIT model
  • Export as an ONNX model
  • Export as an TensorJS model
  • Build an HTML/JS Web Page to Drop Images
  • Perform Inference on the Image and Display the Class
  • Show Top-5 Probabilities as a Bar Plot Under the Image
  • Serve as a Github Page

AI05: Tensors, and Autograd for Automatic Backward Differentiation from Scratch

Installation πŸ›’

  • CMake
  • G++
  • PyBind11

Assignements πŸ“

  • Build a Tensor Class in C++
  • Implement Standard Operators (+, -, *, /, @)
  • Implement Broadcast for Scalars and Include in Operators
  • Implement a Context Based Gradient System
  • Implement Minimal Layers and Activations (Linear, ReLU, Softmax)
  • Train a Simple Network on FizzBuzz
  • Implement Python Bindings using PyBind11
  • Train a Simple Network on FizzBuzz

(CG) Computer Graphics πŸŽ₯

About

Objectives πŸ”₯

The Computer Graphics (CG) track provides advanced development methods for Game Design and 3D Graphical Experiences.

Content πŸŽ“

This course covers basic, intermediary, and advanced topics in Computer Graphics for AR/VR Video Games and 3D Experiences.

Skills πŸ’ͺ

Develop a rendering engine with OpenGL from scratch Game development based on the Unity Game Engine for VR/AR experiences

Bibliography πŸ“‘

  • Linear Algebra and Learning from Data - Gilbert Strang - Wellesley-Cambridge Press
  • Fundamentals of Computer Graphics - Steve Marschner, and Peter Shirley - A K Peters/CRC Press

Requirements 🏷️

  • Hack & Puzzle
  • Python
  • C/C++
  • C#

Rating Constraints πŸ†

  • Design a User Experience
  • Use at least One 3D Rendering Technique (Rasterization, RayTracing, RayMarching, ... etc.)
  • Deploy an Executable on a Platform (Web, Mobile, or a Game Provider, ... etc.)
  • The Controller must involve one or more Body Parts (Voice, Eyes, Hands, Motion Capture, ... etc.)

Table of Content

  • 3D Geometry, and the OpenGL Rendering Pipeline
  • Forward Rendering, Signed Distance Fields, Ray Marching, Pixel/Fragment Shaders for Demo Scene
  • Unity Game Engine, Unity Game Loop Pipeline, Components, and Entity Component System for Video Game Creation
  • Guidelines for Building Virtual and Augmented Reality Experiences
  • Camera Calibration and Feature Detection for Spatial Positioning

CG01: 3D Geometry, and the OpenGL Rendering Pipeline

Installation πŸ›’

  • CMake
  • G++
  • OpenGL
  • GLAD
  • GLFW
  • STB Image

Assignments πŸ“

  • Initialize a Blank Window with GL Context
  • Draw a Triangle (VBO, IBO, VAO, Vertex, and Fragment Shader)
  • Implement a Simple Perspective Camera
  • Draw a Cube and Enable Depth Test
  • Add Support for Uniform Variables
  • Add Normals to the Cube
  • Implement a Simple Phong Shader given a Light Direction and Color
  • Add UVs to the Cube
  • Read, Load a 2D Texture and Apply to the Cube
  • Rotate the Cube with the Mouse

CG02: Forward Rendering, Signed Distance Fields, Ray Marching, Pixel/Fragment Shaders for Demo Scene

Assignments πŸ“

  • Draw a Quad (Simple Vertex and Fragment Shader)
  • Add Time and Resolution as Uniform Variable to Access in the Pixel Shader
  • Draw a white Circle on the Screen
  • Move the Circle using a Sinusoidal Pattern
  • Implement a Sphere Signed Distance Field (SDF)
  • Raymarch the Scene to Show the Sphere
  • Implement a Simple Perspective Camera
  • Approximate the Normals of the Intersection Point
  • Add Simple Directional Phong Lighting
  • Add Other Primitives and Mix them using (Max, Min, and their Soft Version)

CG03: Unity Game Engine, Unity Game Loop Pipeline, Components, and Entity Component System for Video Game Creation

Installation πŸ›’

  • UnityHub
  • Unity (Latest Available, LTS)

Assignments πŸ“

  • Instantiate a Cube and a Plane
  • Make the Cube move onto the Plane
  • Make the Cube Jump and Crouch (Add Spice with the Animation System)
  • Spawn Collectibles using Triggers
  • Spawn Obstacles using Colliders
  • Implement a Fixed Size Cached Obstacle and Collectable System
  • Using those Implement a Simple Subway Surfer Game
  • Use the Particle System and Animation System to add Juice to the Game
  • Use the Shader Graph to Bend the Terrain into Random Direction During the Game
  • Show Success, Failure, and Collectable Count using the UI System
  • Build the Game for Windows, Linux, Mac, Web, or Mobile

CG04: Guidelines for Building Virtual and Augmented Reality Experiences

Installation πŸ›’

  • Oculus, HTC Vive or HoloLens Integration

Assignments πŸ“

  • Create a Simple Scene with Physics Objects and a Floor
  • Setup Movement and Simple Hand Interactions (Collisions, ... etc.)
  • Implement Object Selection by Pointing at It
  • Implement UI Interaction by Pointing at It
  • Using CG03 and previous Assignments Recreate Subway Surfer in AR/VR
  • Improve the Game by taking Scale and Physical Condition into Consideration

CG05: Camera Calibration and Feature Detection for Spatial Positioning

Installation πŸ›’

  • Python 3.8+
  • OpenCV

Assignments πŸ“

  • Use OpenCV to retrieve Images from a Webcam
  • Implement a Simple Pinhole Perspective Camera and their Projection from World to Image Coordinates
  • Augment the Pinhole Perspective Camera with a Simple Distortion Model
  • Use Zang's Method and a Calibration Checkerboard to Extract Intrinsic Parameter from Camera
  • Detect the Corners of a Fiducial Tag Printed on a Paper
  • Use those Corners as a Basis for a Simple Cube Geometry
  • Project the Cube into the Image Plane and Draw it on top of the Image Input
  • Optimize for Realtime

(BLT) Bio & Living Technologies πŸ›

About

Objectives πŸ”₯

This module provides knowledge and skills necessary for the design of Bio Technologies, living and Low-Tech products. The students will experiment with different technologies in order to take them in hand and understand their capacities and limitations.

Content πŸŽ“

This teaching module introduces the different techniques of frugal and organic manufacturing. Students will practice in particular the design of tools operating on human motive energy to carry out biological tasks, the study of the principles of fermentation, epigenetics and bioprinting and biofabrication.

Skills πŸ’ͺ

  • Master the manufacturing and frugal innovation processes.
  • Understand basics of bio technologies practices (hygiene, etc)
  • Understanding of the reproductive cycles of living organisms, and the principles of epigenetic modification
  • Build advanced technologies with frugal innovations

Requirements 🏷️

No requirements.

Table of Content

  • Low Tech bio Frugal Innovation
  • BioTech Introduction
  • Designing Responsive and Dynamic Frontend Applications by Playing with CSS and the Canvas

BLT01: Low Tech introduction: Working without technologies

Teacher πŸŽ“

  • Marc Teyssier
  • Zacharie Guillaume

Where does low tech come from, what is it for? Introduction to the dependency theory.

Assignments πŸ“

  • Primary / secondary needs, identification and conception
  • Dissasemble and reformulate. Understand the techniques involved, the energy involved

BLT02: Frugal Innovation for Bio Technologies: Examples

Teacher πŸŽ“

  • Marc Teyssier
  • Zacharie Guillaume

Overview of methods of frugal prototype for bio technologies.

Assignments πŸ“

  • Mechanical and optical : Paper microscope / Centrifuge Reproduction
  • Water : Analyzer, Purification with moringa seeds + Flexible tanks

BLT03: Flexible Soft Robotics with Bio-Degradable components

Teacher πŸŽ“

  • Madalina Nicolae

How to make flexible substrates safe for the environment

Assignments πŸ“

  • Build a substrate based on your choice technology
  • Create electrical pattern
  • Form the sensor
  • Characterisation

BLT04: Bio-technologies: Working Principles, Design and Biolab setup

Teacher πŸŽ“ Thr34d5 NGO Design Studio (Vivien Roussel, Joanne Jones,

TBD

Assignments πŸ“

  • Setup the lab
  • Basics of lab hygiene

BLT05: Growing Mycelium for DIY fabrication

Teacher πŸŽ“ Thr34d5 NGO Design Studio (Vivien Roussel, Joanne Jones, ... )

TBD

Assignments πŸ“

  • Start the mycelium cultures

BLT06: Kombucha: From Bacterial Cellulose to Textile

Teacher πŸŽ“ Thr34d5 NGO Design Studio (Vivien Roussel, Joanne Jones, ... )

TBD

Assignments πŸ“

  • Start the Kombucha cultures

BLT07: Design principles and philosophy of techniques and innovation

Teacher πŸŽ“ Thr34d5 NGO Design Studio (Vivien Roussel, Joanne Jones, ... )

TBD

Assignments πŸ“

  • TBD

BLT08: Human as a Motor: Fabrication

Teacher πŸŽ“

  • Marc Teyssier
  • Zacharie Guillaume

Assignments πŸ“

  • Kinetic energy wheels + crankset / structure / Principles
  • Create a simple and manual β€œengine block”
  • Analyze its power capabilities
  • ( Learn to weld / cut wood ) ?
  • Design a way of control ( crank, foot)

BLT09: Applications for Low Tech motorisation

Teacher πŸŽ“

  • Marc Teyssier
  • Zacharie Guillaume

Assignments πŸ“

  • Application of the β€œengine block”
  • Use the engine block to cut, saw, centrifuge, charge electrical energy

BLT10: Following Up the Cultures: Transformation

Teacher πŸŽ“ Thr34d5 NGO Design Studio (Vivien Roussel, Joanne Jones, ... )

TBD

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment