Skip to content
This repository was archived by the owner on Jul 5, 2022. It is now read-only.

Commit 9200f34

Browse files
duskvirkusduskvirkus
authored
adding mouse learning code (#3181)
1 parent 79061bb commit 9200f34

File tree

5 files changed

+134
-0
lines changed

5 files changed

+134
-0
lines changed

‎_more/talks/mouse-learning.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ date: 2021-04-29
55
redirect_from:
66
- /mouse-learning
77
- /mouselearning
8+
repository: /talks/mouse-learning
89

910
img_path: "/assets/images/mouselearning.png"
1011
img_alt: "An image showing a still from the mouse learning talk. Dan stands in the middle of a garden surrounded by mac windows. The one behind his head says Mouse Learning. The window on the left says 'a video for the 2021 computer mouse conference by The Coding Train'. And the last one says 'inspired by The Dada of All Demos by emma rae bruml norton'."
@@ -104,6 +105,14 @@ links:
104105
url: https://github.com/zalandoresearch/fashion-mnist
105106

106107
variations:
108+
- name: "if/else background"
109+
web_editor: yFaE6qQyO
110+
folder: "if-else-background"
111+
lang: "p5js"
112+
- name: "Mouse Learns"
113+
web_editor: kWjDFS51O
114+
folder: "mouse-learns"
115+
lang: "p5js"
107116
- name: "MouseGAN"
108117
url: https://github.com/CodingTrain/Computer-MouseGAN
109118
lang: "repository"

‎more/talks/mouse-learning/if-else-background/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
5+
<script src="https://unpkg.com/[email protected]/dist/ml5.min.js"></script>
6+
<meta charset="utf-8" />
7+
8+
</head>
9+
<body>
10+
<script src="sketch.js"></script>
11+
</body>
12+
</html>

‎more/talks/mouse-learning/if-else-background/sketch.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// if/else background
2+
// Mouse Learning Talk
3+
// The Coding Train / Daniel Shiffman
4+
// https://thecodingtrain.com/more/talks/mouse-learning.html
5+
6+
// if/else background: https://editor.p5js.org/codingtrain/sketches/yFaE6qQyO
7+
// mouse learns: https://editor.p5js.org/codingtrain/sketches/kWjDFS51O
8+
9+
function setup() {
10+
createCanvas(400, 400);
11+
}
12+
13+
function draw() {
14+
background(0);
15+
16+
if (mouseX > 200) {
17+
background(255, 0, 0);
18+
} else {
19+
background(0, 0, 255);
20+
}
21+
22+
strokeWeight(8);
23+
stroke(255);
24+
line(200, 0, 200, height);
25+
}

‎more/talks/mouse-learning/mouse-learns/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
5+
<script src="https://unpkg.com/[email protected]/dist/ml5.min.js"></script>
6+
<meta charset="utf-8" />
7+
8+
</head>
9+
<body>
10+
<script src="sketch.js"></script>
11+
</body>
12+
</html>

‎more/talks/mouse-learning/mouse-learns/sketch.js

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
// Mouse Learns
2+
// Mouse Learning Talk
3+
// The Coding Train / Daniel Shiffman
4+
// https://thecodingtrain.com/more/talks/mouse-learning.html
5+
6+
// if/else background: https://editor.p5js.org/codingtrain/sketches/yFaE6qQyO
7+
// mouse learns: https://editor.p5js.org/codingtrain/sketches/kWjDFS51O
8+
9+
let brain;
10+
let trainButton;
11+
12+
let isTrained = false;
13+
14+
let dropdown;
15+
16+
function setup() {
17+
let canvas = createCanvas(400, 400);
18+
canvas.mousePressed(trainingData);
19+
20+
dropdown = createSelect();
21+
dropdown.option("red");
22+
dropdown.option("blue");
23+
24+
let options = {
25+
// inputs: ["mouseX", "mouseY"],
26+
// outputs: ["left","right"],
27+
task: "classification",
28+
debug: true,
29+
};
30+
brain = ml5.neuralNetwork(options);
31+
trainButton = createButton("train");
32+
trainButton.mousePressed(function() {
33+
brain.normalizeData();
34+
brain.train({ epochs: 100 }, finished);
35+
});
36+
}
37+
38+
function finished() {
39+
console.log("training complete");
40+
isTrained = true;
41+
}
42+
43+
function trainingData() {
44+
let inputs = { mouseX, mouseY };
45+
let label = dropdown.value();
46+
brain.addData(inputs, { label });
47+
}
48+
49+
function draw() {
50+
background(0);
51+
52+
// if (mouseX > width / 2) {
53+
// background(255, 0, 0);
54+
// } else {
55+
// background(0, 0, 255);
56+
// }
57+
58+
if (isTrained) {
59+
let inputs = { mouseX, mouseY };
60+
let outputs = brain.classifySync(inputs);
61+
background(outputs[0].label);
62+
}
63+
64+
strokeWeight(8);
65+
stroke(255);
66+
//line(width / 2, 0, width / 2, height);
67+
68+
let data = brain.neuralNetworkData.data.raw;
69+
strokeWeight(4);
70+
for (let row of data) {
71+
//console.log(row);
72+
stroke(0);
73+
fill(row.ys.label);
74+
circle(row.xs.mouseX, row.xs.mouseY, 24);
75+
}
76+
}

0 commit comments

Comments
 (0)