diff --git a/w9_lights_classes/css/style.css b/w9_lights_classes/css/style.css
new file mode 100644
index 0000000..06b82b5
--- /dev/null
+++ b/w9_lights_classes/css/style.css
@@ -0,0 +1,11 @@
+html,
+body {
+ margin: 0;
+ /* padding: 5px; */
+ align-items: center;
+ text-align: center;
+ background-color: beige;
+}
+canvas {
+ display: block;
+}
diff --git a/w9_lights_classes/data/lightOff.jpg b/w9_lights_classes/data/lightOff.jpg
new file mode 100644
index 0000000..1b8a9bf
Binary files /dev/null and b/w9_lights_classes/data/lightOff.jpg differ
diff --git a/w9_lights_classes/data/lightOn.jpg b/w9_lights_classes/data/lightOn.jpg
new file mode 100644
index 0000000..28d85f3
Binary files /dev/null and b/w9_lights_classes/data/lightOn.jpg differ
diff --git a/w9_lights_classes/data/switchOff.jpg b/w9_lights_classes/data/switchOff.jpg
new file mode 100644
index 0000000..b0581ff
Binary files /dev/null and b/w9_lights_classes/data/switchOff.jpg differ
diff --git a/w9_lights_classes/data/switchOn.jpg b/w9_lights_classes/data/switchOn.jpg
new file mode 100644
index 0000000..9b9b2cf
Binary files /dev/null and b/w9_lights_classes/data/switchOn.jpg differ
diff --git a/w9_lights_classes/index.html b/w9_lights_classes/index.html
new file mode 100644
index 0000000..1f9b40e
--- /dev/null
+++ b/w9_lights_classes/index.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/w9_lights_classes/sketch.js b/w9_lights_classes/sketch.js
new file mode 100644
index 0000000..508ef57
--- /dev/null
+++ b/w9_lights_classes/sketch.js
@@ -0,0 +1,19 @@
+const images = {};
+
+// We used this in P5.js (in Vite we would simply import the assets)
+function preload() {
+ images.lightOn = loadImage('data/lightOn.jpg');
+ images.lightOff = loadImage('data/lightOff.jpg');
+}
+
+class Light {}
+
+function setup() {
+ createCanvas(800, 600);
+ // createCanvas(400, 300);
+ console.log(images);
+}
+
+function draw() {
+ background(255);
+}
diff --git a/w9_lights_obj/css/style.css b/w9_lights_obj/css/style.css
new file mode 100644
index 0000000..06b82b5
--- /dev/null
+++ b/w9_lights_obj/css/style.css
@@ -0,0 +1,11 @@
+html,
+body {
+ margin: 0;
+ /* padding: 5px; */
+ align-items: center;
+ text-align: center;
+ background-color: beige;
+}
+canvas {
+ display: block;
+}
diff --git a/w9_lights_obj/data/lightOff.jpg b/w9_lights_obj/data/lightOff.jpg
new file mode 100644
index 0000000..1b8a9bf
Binary files /dev/null and b/w9_lights_obj/data/lightOff.jpg differ
diff --git a/w9_lights_obj/data/lightOn.jpg b/w9_lights_obj/data/lightOn.jpg
new file mode 100644
index 0000000..28d85f3
Binary files /dev/null and b/w9_lights_obj/data/lightOn.jpg differ
diff --git a/w9_lights_obj/data/switchOff.jpg b/w9_lights_obj/data/switchOff.jpg
new file mode 100644
index 0000000..b0581ff
Binary files /dev/null and b/w9_lights_obj/data/switchOff.jpg differ
diff --git a/w9_lights_obj/data/switchOn.jpg b/w9_lights_obj/data/switchOn.jpg
new file mode 100644
index 0000000..9b9b2cf
Binary files /dev/null and b/w9_lights_obj/data/switchOn.jpg differ
diff --git a/w9_lights_obj/index.html b/w9_lights_obj/index.html
new file mode 100644
index 0000000..1f9b40e
--- /dev/null
+++ b/w9_lights_obj/index.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/w9_lights_obj/sketch.js b/w9_lights_obj/sketch.js
new file mode 100644
index 0000000..810c53a
--- /dev/null
+++ b/w9_lights_obj/sketch.js
@@ -0,0 +1,32 @@
+const images = {};
+
+// We used this in P5.js (in Vite we would simply import the assets)
+function preload() {
+ images.lightOn = loadImage('data/lightOn.jpg');
+ images.lightOff = loadImage('data/lightOff.jpg');
+}
+
+const light = {
+ init: function (x, width) {
+ /* ... */
+ },
+ toggle: function () {
+ /* ... */
+ },
+ isOn: function () {
+ /* ... */
+ },
+ draw: function () {
+ /* ... */
+ },
+};
+
+function setup() {
+ createCanvas(800, 600);
+ // createCanvas(400, 300);
+ console.log(images);
+}
+
+function draw() {
+ background(255);
+}