lights exercise
Andrea Bianchi
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 |
18
w9_lights_classes/index.html
Normal file
@@ -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>
|
||||
19
w9_lights_classes/sketch.js
Normal file
@@ -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);
|
||||
}
|
||||
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 |
18
w9_lights_obj/index.html
Normal file
@@ -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>
|
||||
32
w9_lights_obj/sketch.js
Normal file
@@ -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);
|
||||
}
|
||||