node exercise

2026-05-11 14:03:20 +09:00
parent 1cb979a571
commit f63f652f76
8 changed files with 1270 additions and 0 deletions
--- a/w11_node/save-dots/client/.gitignore
+++ b/w11_node/save-dots/client/.gitignore
@@ -0,0 +1 @@
+.vscode/**
--- a/w11_node/save-dots/client/index.html
+++ b/w11_node/save-dots/client/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.min.js"
+      integrity="sha512-I0Pwwz3PPNQkWes+rcSoQqikKFfRmTfGQrcNzZbm8ALaUyJuFdyRinl805shE8xT6iEWsWgvRxdXb3yhQNXKoA=="
+      crossorigin="anonymous"
+    ></script>
+
+    <script src="https://cdn.socket.io/3.1.3/socket.io.min.js"></script>
+
+    <script src="sketch.js"></script>
+
+    <meta charset="utf-8" />
+    <style>
+      body {
+        margin: 0;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+
+  <body></body>
+</html>
--- a/w11_node/save-dots/client/sketch.js
+++ b/w11_node/save-dots/client/sketch.js
@@ -0,0 +1,38 @@
+const socket = io('localhost:3000');
+
+const SIZE = 10;
+let coord = [];
+
+socket.on("connect", () => {
+  console.log('Connected');
+});
+
+socket.on('data', (data) => {
+  coord = data
+});
+
+function setup() {
+  createCanvas(800, 600);
+
+  createButton('Save').position(0, 0).mousePressed( () => {
+    socket.emit('save', coord);
+  });
+
+  socket.emit('load', coord);
+}
+
+
+
+function draw() {
+  background(0);
+  fill(255);
+  noStroke();
+  if (coord.length == 0) return;
+  for (let {x,y} of coord){
+    ellipse(x, y, SIZE, SIZE);
+  }
+}
+
+function mousePressed(){
+  coord.push ({x:mouseX, y:mouseY});    
+}