Exercises week 9
11
w9_lights_classes/css/style.css
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
/* padding: 5px; */
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-color: beige;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
BIN
w9_lights_classes/data/lightOff.jpg
Normal file
|
After Width: | Height: | Size: 126 KiB |
BIN
w9_lights_classes/data/lightOn.jpg
Normal file
|
After Width: | Height: | Size: 168 KiB |
BIN
w9_lights_classes/data/switchOff.jpg
Normal file
|
After Width: | Height: | Size: 38 KiB |
BIN
w9_lights_classes/data/switchOn.jpg
Normal file
|
After Width: | Height: | Size: 38 KiB |
21
w9_lights_classes/index.html
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script src="js/p5.js"></script>
|
||||
<script src="js/p5.dom.min.js"></script>
|
||||
<script src="js/p5.sound.min.js"></script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
|
||||
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
|
||||
|
||||
<script src="sketch.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css" />
|
||||
<meta charset="utf-8" />
|
||||
</head>
|
||||
|
||||
<body></body>
|
||||
|
||||
</html>
|
||||
3
w9_lights_classes/js/p5.dom.min.js
vendored
Normal file
90025
w9_lights_classes/js/p5.js
Normal file
28
w9_lights_classes/js/p5.sound.min.js
vendored
Normal file
20
w9_lights_classes/sketch.js
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
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(400, 300);
|
||||
console.log(images);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
background(255);
|
||||
}
|
||||
11
w9_lights_obj/css/style.css
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
/* padding: 5px; */
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-color: beige;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
BIN
w9_lights_obj/data/lightOff.jpg
Normal file
|
After Width: | Height: | Size: 126 KiB |
BIN
w9_lights_obj/data/lightOn.jpg
Normal file
|
After Width: | Height: | Size: 168 KiB |
BIN
w9_lights_obj/data/switchOff.jpg
Normal file
|
After Width: | Height: | Size: 38 KiB |
BIN
w9_lights_obj/data/switchOn.jpg
Normal file
|
After Width: | Height: | Size: 38 KiB |
21
w9_lights_obj/index.html
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script src="js/p5.js"></script>
|
||||
<script src="js/p5.dom.min.js"></script>
|
||||
<script src="js/p5.sound.min.js"></script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
|
||||
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
|
||||
|
||||
<script src="sketch.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css" />
|
||||
<meta charset="utf-8" />
|
||||
</head>
|
||||
|
||||
<body></body>
|
||||
|
||||
</html>
|
||||
3
w9_lights_obj/js/p5.dom.min.js
vendored
Normal file
90025
w9_lights_obj/js/p5.js
Normal file
28
w9_lights_obj/js/p5.sound.min.js
vendored
Normal file
31
w9_lights_obj/sketch.js
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
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(400, 300);
|
||||
console.log(images);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
background(255);
|
||||
}
|
||||