lights exercise

2026-04-22 13:54:03 +09:00
parent 13e99a84d5
commit e8fb1810e3
14 changed files with 109 additions and 0 deletions
--- a/w9_lights_classes/css/style.css
+++ 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;
+}
--- a/w9_lights_classes/data/lightOff.jpg
+++ b/w9_lights_classes/data/lightOff.jpg
--- a/w9_lights_classes/data/lightOn.jpg
+++ b/w9_lights_classes/data/lightOn.jpg
--- a/w9_lights_classes/data/switchOff.jpg
+++ b/w9_lights_classes/data/switchOff.jpg
--- a/w9_lights_classes/data/switchOn.jpg
+++ b/w9_lights_classes/data/switchOn.jpg
--- a/w9_lights_classes/index.html
+++ b/w9_lights_classes/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.js'
+    integrity='sha512-BLd2MDTrBCo01Vkhjbjn3ITBDbx3o/Lt7D5hj5oLwW8vlDHYXMenxglTcUURCgBhdLNAjZ7KD8x4ZA7bQY3OhA=='
+    crossorigin='anonymous'></script>
+
+  <link rel="stylesheet" type="text/css" href="css/style.css" />
+  <meta charset="utf-8" />
+</head>
+
+<body>
+
+  <script src="sketch.js"></script>
+</body>
+
+</html>
--- a/w9_lights_classes/sketch.js
+++ 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);
+}