{"id":14388,"date":"2026-05-26T23:08:42","date_gmt":"2026-05-26T14:08:42","guid":{"rendered":"https:\/\/r-dimension.xsrv.jp\/classes_j\/?p=14388"},"modified":"2026-06-17T15:25:34","modified_gmt":"2026-06-17T06:25:34","slug":"image_processing1-2026","status":"publish","type":"post","link":"https:\/\/r-dimension.xsrv.jp\/classes_j\/image_processing1-2026\/","title":{"rendered":"\u753b\u50cf\u51e6\u7406"},"content":{"rendered":"\n<style>\n.imgP5Wrap {\n  margin: 1.2em 0 1.8em 0;\n}\n.imgP5Canvas {\n  width: 320px;\n  max-width: 100%;\n  border: 1px solid #ddd;\n  background: #fff;\n}\n.imgP5Canvas canvas {\n  width: 320px !important;\n  height: 240px !important;\n  max-width: 100%;\n  display: block;\n}\n.imgP5Caption {\n  font-size: 0.9em;\n  color: #666;\n  margin-top: 0.4em;\n}\n.imgP5Controls {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5em;\n  align-items: center;\n  margin-top: 0.55em;\n}\n.imgP5Button {\n  padding: 0.32em 0.9em;\n  border: 1px solid #bbb;\n  \/*border-radius: 10px;*\/\n  background: #fff;\n  color: #fff;\n  cursor: pointer;\n  font-size: 0.76em;\n  line-height: 1.4;\n  letter-spacing: 0.04em;\n  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;\n}\n.imgP5Button:hover {\n  background: #69c!important;\n  border-color: #111;\n  color: #fff;\n}\n.imgP5Note {\n  border: 1px solid #ddd;\n  background: #fafafa;\n  padding: 1em;\n  margin: 1.2em 0;\n}\n.imgP5Status {\n  font-size: 0.9em;\n  color: #666;\n  margin-top: 0.4em;\n}\n<\/style>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/p5@1.9.4\/lib\/p5.min.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u306e\u30da\u30fc\u30b8\u3067\u306f\u3001Processing\u3067\u30ab\u30e1\u30e9\u6620\u50cf\u3092\u4f7f\u3063\u305f\u753b\u50cf\u51e6\u7406\u3092\u5b66\u3073\u307e\u3059\u3002\u753b\u50cf\u51e6\u7406\u306e\u57fa\u672c\u306f\u3001\u6620\u50cf\u3092\u8aad\u307f\u8fbc\u307f\u3001\u30d4\u30af\u30bb\u30eb\u306e\u8272\u3092\u53d6\u308a\u51fa\u3057\u3001\u5225\u306e\u8272\u3084\u56f3\u5f62\u306b\u5909\u63db\u3057\u3066\u63cf\u304d\u76f4\u3059\u3053\u3068\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Processing\u306e\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u306f\u3001\u6620\u50cf\u304c\u6b6a\u307e\u306a\u3044\u3088\u3046\u306b\u57fa\u672c\u7684\u306b <strong>640\u00d7480<\/strong> \u3067\u8a18\u8ff0\u3057\u3066\u3044\u307e\u3059\u3002\u30d6\u30e9\u30a6\u30b6\u4e0a\u306ep5.js\u5b9f\u884c\u30b5\u30f3\u30d7\u30eb\u306f\u3001\u30da\u30fc\u30b8\u4e0a\u3067\u6271\u3044\u3084\u3059\u3044\u3088\u3046\u306b <strong>320\u00d7240<\/strong> \u3067\u8868\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"imgP5Note\">\n  <div class=\"imgP5Controls\">\n    <button id=\"img-start-camera\" class=\"imgP5Button\" type=\"button\">\u30ab\u30e1\u30e9\u958b\u59cb<\/button>\n    <button id=\"img-stop-camera\" class=\"imgP5Button\" type=\"button\">\u30ab\u30e1\u30e9\u7d42\u4e86<\/button>\n  <\/div>\n  <div id=\"img-camera-status\" class=\"imgP5Status\">\u30ab\u30e1\u30e9\u306f\u307e\u3060\u958b\u59cb\u3055\u308c\u3066\u3044\u307e\u305b\u3093\u3002<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">1. \u30ab\u30e1\u30e9\u6620\u50cf\u306e\u8868\u793a<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u307e\u305a\u306f\u3001\u30ab\u30e1\u30e9\u304b\u3089\u306e\u6620\u50cf\u3092Processing\u4e0a\u3067\u8868\u793a\u3057\u307e\u3059\u3002Processing\u3067\u306f<code>processing.video<\/code>\u30e9\u30a4\u30d6\u30e9\u30ea\u306e<code>Capture<\/code>\u3092\u4f7f\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"listCaption\">\u30ea\u30b9\u30c81<\/div>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>import processing.video.*;\n\nCapture video;\n\nvoid setup() {\n  size(640, 480);\n\n  String[] cameras = Capture.list();\n\n  \/\/ \u30ab\u30e1\u30e9\u304c\u8a8d\u8b58\u3055\u308c\u308b\u307e\u3067\u5f85\u3064\n  while (cameras.length == 0) {\n    cameras = Capture.list();\n  }\n\n  \/\/ 640\u00d7480\u3067\u30ab\u30e1\u30e9\u6620\u50cf\u3092\u53d6\u5f97\u3059\u308b\n  video = new Capture(this, 640, 480, cameras[0]);\n  video.start();\n}\n\nvoid draw() {\n  if (video.available()) {\n    video.read();\n  }\n\n  image(video, 0, 0, width, height);\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"imgP5Wrap\">\n  <div id=\"img-list1\" class=\"imgP5Canvas\"><\/div>\n  <div class=\"imgP5Controls\">\n    <button id=\"img-play1\" class=\"imgP5Button\" type=\"button\">\u518d\u751f<\/button>\n    <button id=\"img-reset1\" class=\"imgP5Button\" type=\"button\">\u30ea\u30bb\u30c3\u30c8<\/button>\n  <\/div>\n  <div class=\"imgP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1a\u30ab\u30e1\u30e9\u6620\u50cf\u3092\u305d\u306e\u307e\u307e\u8868\u793a\u3059\u308b<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">2. tint()\u3092\u4f7f\u3063\u305f\u52b9\u679c<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><code>tint()<\/code>\u3092\u4f7f\u3046\u3068\u3001\u753b\u50cf\u3084\u6620\u50cf\u306b\u8272\u3092\u91cd\u306d\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3053\u3053\u3067\u306f\u3001\u30ab\u30e1\u30e9\u6620\u50cf\u306b\u8d64\u3063\u307d\u3044\u8272\u3092\u91cd\u306d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"listCaption\">\u30ea\u30b9\u30c82<\/div>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>import processing.video.*;\n\nCapture video;\n\nvoid setup() {\n  size(640, 480);\n\n  String[] cameras = Capture.list();\n  while (cameras.length == 0) {\n    cameras = Capture.list();\n  }\n\n  video = new Capture(this, 640, 480, cameras[0]);\n  video.start();\n}\n\nvoid draw() {\n  if (video.available()) {\n    video.read();\n  }\n\n  \/\/ \u6620\u50cf\u306b\u8d64\u3063\u307d\u3044\u8272\u3092\u91cd\u306d\u308b\n  tint(255, 100, 100);\n  image(video, 0, 0, width, height);\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"imgP5Wrap\">\n  <div id=\"img-list2\" class=\"imgP5Canvas\"><\/div>\n  <div class=\"imgP5Controls\">\n    <button id=\"img-play2\" class=\"imgP5Button\" type=\"button\">\u518d\u751f<\/button>\n    <button id=\"img-reset2\" class=\"imgP5Button\" type=\"button\">\u30ea\u30bb\u30c3\u30c8<\/button>\n  <\/div>\n  <div class=\"imgP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1a\u30ab\u30e1\u30e9\u6620\u50cf\u306b\u8d64\u3044\u8272\u3092\u91cd\u306d\u308b<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">3. \u5ea7\u6a19\u5909\u63db\u3092\u4f7f\u3063\u305f\u53cd\u8ee2<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><code>scale()<\/code>\u3092\u4f7f\u3046\u3068\u3001\u30ab\u30e1\u30e9\u6620\u50cf\u3092\u5de6\u53f3\u53cd\u8ee2\u30fb\u4e0a\u4e0b\u53cd\u8ee2\u3067\u304d\u307e\u3059\u3002\u5de6\u53f3\u53cd\u8ee2\u3067\u306f<code>scale(-1, 1)<\/code>\u3092\u4f7f\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"listCaption\">\u30ea\u30b9\u30c83<\/div>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>import processing.video.*;\n\nCapture video;\n\nvoid setup() {\n  size(640, 480);\n\n  String[] cameras = Capture.list();\n  while (cameras.length == 0) {\n    cameras = Capture.list();\n  }\n\n  video = new Capture(this, 640, 480, cameras[0]);\n  video.start();\n}\n\nvoid draw() {\n  if (video.available()) {\n    video.read();\n  }\n\n  background(0);\n\n  image(video, 0, 0, width\/2, height\/2);  \/\/ \u5de6\u4e0a\uff1a\u6b63\u50cf\n\n  pushMatrix();\n  scale(-1, 1);                           \/\/ \u53f3\u4e0a\uff1a\u5de6\u53f3\u53cd\u8ee2\n  image(video, -width, 0, width\/2, height\/2);\n  popMatrix();\n\n  pushMatrix();\n  scale(1, -1);                           \/\/ \u5de6\u4e0b\uff1a\u4e0a\u4e0b\u53cd\u8ee2\n  image(video, 0, -height, width\/2, height\/2);\n  popMatrix();\n\n  pushMatrix();\n  scale(-1, -1);                          \/\/ \u53f3\u4e0b\uff1a\u4e0a\u4e0b\u5de6\u53f3\u53cd\u8ee2\n  image(video, -width, -height, width\/2, height\/2);\n  popMatrix();\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"imgP5Wrap\">\n  <div id=\"img-list3\" class=\"imgP5Canvas\"><\/div>\n  <div class=\"imgP5Controls\">\n    <button id=\"img-play3\" class=\"imgP5Button\" type=\"button\">\u518d\u751f<\/button>\n    <button id=\"img-reset3\" class=\"imgP5Button\" type=\"button\">\u30ea\u30bb\u30c3\u30c8<\/button>\n  <\/div>\n  <div class=\"imgP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1a\u6b63\u50cf\u30fb\u5de6\u53f3\u53cd\u8ee2\u30fb\u4e0a\u4e0b\u53cd\u8ee2\u30fb\u4e0a\u4e0b\u5de6\u53f3\u53cd\u8ee2<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">4. \u56de\u8ee2\u3059\u308b\u30ab\u30e1\u30e9\u6620\u50cf<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><code>translate()<\/code>\u3068<code>rotate()<\/code>\u3092\u4f7f\u3046\u3068\u3001\u30ab\u30e1\u30e9\u6620\u50cf\u3092\u56de\u8ee2\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u753b\u50cf\u306e\u57fa\u6e96\u70b9\u3092\u753b\u9762\u4e2d\u592e\u306b\u79fb\u52d5\u3057\u3066\u304b\u3089\u56de\u8ee2\u3055\u305b\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"listCaption\">\u30ea\u30b9\u30c84<\/div>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>import processing.video.*;\n\nCapture video;\nfloat angle = 0;\n\nvoid setup() {\n  size(640, 480);\n\n  String[] cameras = Capture.list();\n  while (cameras.length == 0) {\n    cameras = Capture.list();\n  }\n\n  video = new Capture(this, 640, 480, cameras[0]);\n  video.start();\n\n  imageMode(CENTER);\n}\n\nvoid draw() {\n  if (video.available()) {\n    video.read();\n  }\n\n  background(0);\n\n  translate(width\/2, height\/2);\n  rotate(angle);\n  image(video, 0, 0, 320, 240);\n\n  angle += 0.02;\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"imgP5Wrap\">\n  <div id=\"img-list4\" class=\"imgP5Canvas\"><\/div>\n  <div class=\"imgP5Controls\">\n    <button id=\"img-play4\" class=\"imgP5Button\" type=\"button\">\u518d\u751f<\/button>\n    <button id=\"img-reset4\" class=\"imgP5Button\" type=\"button\">\u30ea\u30bb\u30c3\u30c8<\/button>\n  <\/div>\n  <div class=\"imgP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1a\u30ab\u30e1\u30e9\u6620\u50cf\u304c\u753b\u9762\u4e2d\u592e\u3067\u56de\u8ee2\u3059\u308b<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">5. 1\u30d4\u30af\u30bb\u30eb\u305a\u3064\u8272\u3092\u53d6\u308a\u51fa\u3059<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u753b\u50cf\u51e6\u7406\u3067\u306f\u30011\u30d4\u30af\u30bb\u30eb\u305a\u3064\u8272\u3092\u8abf\u3079\u308b\u3053\u3068\u304c\u91cd\u8981\u3067\u3059\u3002<code>pixels[y * width + x]<\/code>\u3067\u3001x,y\u5ea7\u6a19\u306e\u30d4\u30af\u30bb\u30eb\u3092\u914d\u5217\u756a\u53f7\u3068\u3057\u3066\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"listCaption\">\u30ea\u30b9\u30c85<\/div>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>import processing.video.*;\n\nCapture video;\n\nvoid setup() {\n  size(640, 480);\n\n  String[] cameras = Capture.list();\n  while (cameras.length == 0) {\n    cameras = Capture.list();\n  }\n\n  video = new Capture(this, width, height, cameras[0]);\n  video.start();\n\n  loadPixels();\n}\n\nvoid draw() {\n  if (video.available()) {\n    video.read();\n  }\n\n  video.loadPixels();\n  loadPixels();\n\n  for (int y = 0; y &lt; height; y++) {\n    for (int x = 0; x &lt; width; x++) {\n      int index = y * width + x;\n      pixels[index] = video.pixels[index];\n    }\n  }\n\n  updatePixels();\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"imgP5Wrap\">\n  <div id=\"img-list5\" class=\"imgP5Canvas\"><\/div>\n  <div class=\"imgP5Controls\">\n    <button id=\"img-play5\" class=\"imgP5Button\" type=\"button\">\u518d\u751f<\/button>\n    <button id=\"img-reset5\" class=\"imgP5Button\" type=\"button\">\u30ea\u30bb\u30c3\u30c8<\/button>\n  <\/div>\n  <div class=\"imgP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1a1\u30d4\u30af\u30bb\u30eb\u305a\u3064\u8aad\u307f\u53d6\u3063\u3066\u540c\u3058\u6620\u50cf\u3092\u63cf\u304f<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">6. \u8272\u3092\u5909\u63db\u3059\u308b<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u30d4\u30af\u30bb\u30eb\u306e\u8d64\u30fb\u7dd1\u30fb\u9752\u306e\u5024\u3092\u53d6\u308a\u51fa\u3059\u3068\u3001\u30b0\u30ec\u30fc\u5909\u63db\u3001\u8272\u306e\u53cd\u8ee2\u30012\u8272\u5316\u306a\u3069\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"listCaption\">\u30ea\u30b9\u30c86<\/div>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>import processing.video.*;\n\nCapture video;\n\nvoid setup() {\n  size(640, 480);\n\n  String[] cameras = Capture.list();\n  while (cameras.length == 0) {\n    cameras = Capture.list();\n  }\n\n  video = new Capture(this, width, height, cameras[0]);\n  video.start();\n\n  loadPixels();\n}\n\nvoid draw() {\n  if (video.available()) {\n    video.read();\n  }\n\n  video.loadPixels();\n  loadPixels();\n\n  for (int y = 0; y &lt; height; y++) {\n    for (int x = 0; x &lt; width; x++) {\n      int index = y * width + x;\n      color c = video.pixels[index];\n\n      float r = red(c);\n      float g = green(c);\n      float b = blue(c);\n\n      \/\/ \u30b0\u30ec\u30fc\u5909\u63db\uff1aRGB\u306e\u5e73\u5747\u3092\u660e\u308b\u3055\u306b\u3059\u308b\n      float gray = (r + g + b) \/ 3;\n      pixels[index] = color(gray);\n\n      \/\/ \u53cd\u8ee2\uff1a\u8272\u3092\u9006\u306b\u3059\u308b\u5834\u5408\u306f\u3053\u3061\u3089\u3092\u4f7f\u3046\n      \/\/ pixels[index] = color(255 - r, 255 - g, 255 - b);\n\n      \/\/ \u4e8c\u5024\u5316\uff1a\u660e\u308b\u3055\u3067\u767d\u3068\u9ed2\u306b\u5206\u3051\u308b\u5834\u5408\u306f\u3053\u3061\u3089\u3092\u4f7f\u3046\n      \/\/ if (gray &gt; 127) {\n      \/\/   pixels[index] = color(255);\n      \/\/ } else {\n      \/\/   pixels[index] = color(0);\n      \/\/ }\n    }\n  }\n\n  updatePixels();\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"imgP5Wrap\">\n  <div id=\"img-list6\" class=\"imgP5Canvas\"><\/div>\n  <div class=\"imgP5Controls\">\n    <button id=\"img-play6\" class=\"imgP5Button\" type=\"button\">\u518d\u751f<\/button>\n    <button id=\"img-reset6\" class=\"imgP5Button\" type=\"button\">\u30ea\u30bb\u30c3\u30c8<\/button>\n    <button id=\"img-mode-gray\" class=\"imgP5Button\" type=\"button\">\u30b0\u30ec\u30fc<\/button>\n    <button id=\"img-mode-invert\" class=\"imgP5Button\" type=\"button\">\u53cd\u8ee2<\/button>\n    <button id=\"img-mode-threshold\" class=\"imgP5Button\" type=\"button\">2\u8272<\/button>\n  <\/div>\n  <div class=\"imgP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1a\u30b0\u30ec\u30fc\u30fb\u53cd\u8ee2\u30fb2\u8272\u5316\u3092\u5207\u308a\u66ff\u3048\u308b<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">7. \u6642\u9593\u306e\u9045\u5ef6\u3092\u8a18\u9332\u3059\u308b<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1\u884c\u305a\u3064\u3001\u307e\u305f\u306f1\u5217\u305a\u3064\u6620\u50cf\u3092\u8a18\u9332\u3057\u3066\u3044\u304f\u3068\u3001\u6642\u9593\u306e\u305a\u308c\u304c\u753b\u9762\u306b\u6b8b\u308a\u307e\u3059\u3002\u52d5\u3044\u3066\u3044\u308b\u3082\u306e\u304c\u6b6a\u3093\u3067\u8868\u793a\u3055\u308c\u308b\u306e\u306f\u3001\u884c\u3084\u5217\u3054\u3068\u306b\u64ae\u5f71\u3055\u308c\u305f\u6642\u9593\u304c\u9055\u3046\u304b\u3089\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"listCaption\">\u30ea\u30b9\u30c87<\/div>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>import processing.video.*;\n\nCapture video;\nint row = 0;\n\nvoid setup() {\n  size(640, 480);\n\n  String[] cameras = Capture.list();\n  while (cameras.length == 0) {\n    cameras = Capture.list();\n  }\n\n  video = new Capture(this, width, height, cameras[0]);\n  video.start();\n\n  loadPixels();\n}\n\nvoid draw() {\n  if (video.available()) {\n    video.read();\n  }\n\n  video.loadPixels();\n\n  \/\/ 1\u884c\u5206\u3060\u3051\u73fe\u5728\u306e\u6620\u50cf\u304b\u3089\u30b3\u30d4\u30fc\u3059\u308b\n  for (int x = 0; x &lt; width; x++) {\n    int index = row * width + x;\n    pixels[index] = video.pixels[index];\n  }\n\n  updatePixels();\n\n  stroke(255, 0, 0);\n  line(0, row, width, row);\n\n  row++;\n  if (row &gt;= height) {\n    row = 0;\n  }\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"imgP5Wrap\">\n  <div id=\"img-list7\" class=\"imgP5Canvas\"><\/div>\n  <div class=\"imgP5Controls\">\n    <button id=\"img-play7\" class=\"imgP5Button\" type=\"button\">\u518d\u751f<\/button>\n    <button id=\"img-reset7\" class=\"imgP5Button\" type=\"button\">\u30ea\u30bb\u30c3\u30c8<\/button>\n  <\/div>\n  <div class=\"imgP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1a\u6a2a\u65b9\u5411\u306e\u30b9\u30ad\u30e3\u30f3\u3067\u6642\u9593\u5dee\u3092\u8a18\u9332\u3059\u308b<\/div>\n<\/div>\n\n\n\n<div class=\"listCaption\">\u30ea\u30b9\u30c88<\/div>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>import processing.video.*;\n\nCapture video;\nint column = 0;\n\nvoid setup() {\n  size(640, 480);\n\n  String[] cameras = Capture.list();\n  while (cameras.length == 0) {\n    cameras = Capture.list();\n  }\n\n  video = new Capture(this, width, height, cameras[0]);\n  video.start();\n\n  loadPixels();\n}\n\nvoid draw() {\n  if (video.available()) {\n    video.read();\n  }\n\n  video.loadPixels();\n\n  \/\/ 1\u5217\u5206\u3060\u3051\u73fe\u5728\u306e\u6620\u50cf\u304b\u3089\u30b3\u30d4\u30fc\u3059\u308b\n  for (int y = 0; y &lt; height; y++) {\n    int index = y * width + column;\n    pixels[index] = video.pixels[index];\n  }\n\n  updatePixels();\n\n  stroke(255, 0, 0);\n  line(column, 0, column, height);\n\n  column++;\n  if (column &gt;= width) {\n    column = 0;\n  }\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"imgP5Wrap\">\n  <div id=\"img-list8\" class=\"imgP5Canvas\"><\/div>\n  <div class=\"imgP5Controls\">\n    <button id=\"img-play8\" class=\"imgP5Button\" type=\"button\">\u518d\u751f<\/button>\n    <button id=\"img-reset8\" class=\"imgP5Button\" type=\"button\">\u30ea\u30bb\u30c3\u30c8<\/button>\n  <\/div>\n  <div class=\"imgP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1a\u7e26\u65b9\u5411\u306e\u30b9\u30ad\u30e3\u30f3\u3067\u6642\u9593\u5dee\u3092\u8a18\u9332\u3059\u308b<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">8. \u30ab\u30e1\u30e9\u6620\u50cf\u3092\u56f3\u5f62\u3067\u63cf\u304f<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u30ab\u30e1\u30e9\u6620\u50cf\u3092\u305d\u306e\u307e\u307e\u8868\u793a\u3059\u308b\u306e\u3067\u306f\u306a\u304f\u3001\u30d4\u30af\u30bb\u30eb\u306e\u660e\u308b\u3055\u3084\u8272\u3092\u4f7f\u3063\u3066\u56f3\u5f62\u3092\u63cf\u304f\u3068\u3001\u30e2\u30b6\u30a4\u30af\u3084\u62bd\u8c61\u7684\u306a\u6620\u50cf\u8868\u73fe\u306b\u306a\u308a\u307e\u3059\u3002\u3053\u3053\u3067\u306f\u3001\u4f4e\u89e3\u50cf\u5ea6\u306e\u30ab\u30e1\u30e9\u6620\u50cf\u3092\u8aad\u307f\u53d6\u308a\u30011\u3064\u306e\u30d4\u30af\u30bb\u30eb\u30921\u3064\u306e\u56f3\u5f62\u3068\u3057\u3066\u63cf\u304d\u76f4\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"listCaption\">\u30ea\u30b9\u30c89<\/div>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>import processing.video.*;\n\nCapture video;\n\nvoid setup() {\n  size(640, 480);\n\n  String[] cameras = Capture.list();\n  while (cameras.length == 0) {\n    cameras = Capture.list();\n  }\n\n  video = new Capture(this, 80, 60, cameras[0]);\n  video.start();\n\n  noStroke();\n}\n\nvoid draw() {\n  if (video.available()) {\n    video.read();\n  }\n\n  video.loadPixels();\n  background(0);\n\n  float cellW = width \/ float(video.width);\n  float cellH = height \/ float(video.height);\n\n  for (int y = 0; y &lt; video.height; y++) {\n    for (int x = 0; x &lt; video.width; x++) {\n      int index = y * video.width + x;\n      color c = video.pixels[index];\n\n      float r = red(c);\n      float g = green(c);\n      float b = blue(c);\n      float brightness = (r + g + b) \/ 3;\n\n      \/\/ \u660e\u308b\u3044\u307b\u3069\u5927\u304d\u306a\u5186\u306b\u306a\u308b\n      float s = map(brightness, 0, 255, 2, cellW * 2.5);\n\n      fill(c);\n      ellipse(x * cellW, y * cellH, s, s);\n    }\n  }\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"imgP5Wrap\">\n  <div id=\"img-list9\" class=\"imgP5Canvas\"><\/div>\n  <div class=\"imgP5Controls\">\n    <button id=\"img-play9\" class=\"imgP5Button\" type=\"button\">\u518d\u751f<\/button>\n    <button id=\"img-reset9\" class=\"imgP5Button\" type=\"button\">\u30ea\u30bb\u30c3\u30c8<\/button>\n  <\/div>\n  <div class=\"imgP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1a\u660e\u308b\u3055\u306b\u5fdc\u3058\u305f\u30ab\u30e9\u30d5\u30eb\u306a\u5186\u3067\u6620\u50cf\u3092\u63cf\u304f<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u5143\u306e\u6620\u50cf\u3092\u5186\u306e\u96c6\u5408\u306b\u5909\u63db\u3059\u308b\u3060\u3051\u3067\u3082\u3001\u30ab\u30e1\u30e9\u6620\u50cf\u304c\u30dd\u30c3\u30d7\u306a\u30c9\u30c3\u30c8\u8868\u73fe\u306b\u306a\u308a\u307e\u3059\u3002\u30b3\u30fc\u30c9\u306f\u5358\u7d14\u3067\u3059\u304c\u3001\u8272\u3068\u5927\u304d\u3055\u306e\u5909\u5316\u304c\u5927\u304d\u3044\u305f\u3081\u3001\u898b\u305f\u76ee\u306e\u5909\u5316\u304c\u308f\u304b\u308a\u3084\u3059\u3044\u30b5\u30f3\u30d7\u30eb\u3067\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">9. \u660e\u308b\u3055\u3067\u6587\u5b57\u306e\u3088\u3046\u306a\u6a21\u69d8\u3092\u4f5c\u308b<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u6b21\u306f\u3001\u660e\u308b\u3055\u306b\u5fdc\u3058\u3066\u56f3\u5f62\u306e\u5927\u304d\u3055\u3092\u5909\u3048\u306a\u304c\u3089\u3001\u5c11\u3057\u3060\u3051\u56de\u8ee2\u3055\u305b\u307e\u3059\u3002\u77ed\u3044\u30b3\u30fc\u30c9\u3067\u3001\u5149\u308b\u30bf\u30a4\u30eb\u3084\u30c7\u30b8\u30bf\u30eb\u30b5\u30a4\u30cd\u30fc\u30b8\u306e\u3088\u3046\u306a\u6d3e\u624b\u306a\u8868\u73fe\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"listCaption\">\u30ea\u30b9\u30c810<\/div>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>import processing.video.*;\n\nCapture video;\n\nvoid setup() {\n  size(640, 480);\n\n  String[] cameras = Capture.list();\n  while (cameras.length == 0) {\n    cameras = Capture.list();\n  }\n\n  video = new Capture(this, 80, 60, cameras[0]);\n  video.start();\n\n  rectMode(CENTER);\n  noStroke();\n}\n\nvoid draw() {\n  if (video.available()) {\n    video.read();\n  }\n\n  video.loadPixels();\n  background(0);\n\n  float cellW = width \/ float(video.width);\n  float cellH = height \/ float(video.height);\n\n  for (int y = 0; y &lt; video.height; y += 2) {\n    for (int x = 0; x &lt; video.width; x += 2) {\n      int index = y * video.width + x;\n      color c = video.pixels[index];\n\n      float brightness = (red(c) + green(c) + blue(c)) \/ 3;\n      float s = map(brightness, 0, 255, 2, 24);\n\n      pushMatrix();\n      translate(x * cellW, y * cellH);\n      rotate(frameCount * 0.04);\n      fill(c);\n      rect(0, 0, s, s);\n      popMatrix();\n    }\n  }\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"imgP5Wrap\">\n  <div id=\"img-list10\" class=\"imgP5Canvas\"><\/div>\n  <div class=\"imgP5Controls\">\n    <button id=\"img-play10\" class=\"imgP5Button\" type=\"button\">\u518d\u751f<\/button>\n    <button id=\"img-reset10\" class=\"imgP5Button\" type=\"button\">\u30ea\u30bb\u30c3\u30c8<\/button>\n  <\/div>\n  <div class=\"imgP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1a\u660e\u308b\u3055\u306b\u5fdc\u3058\u305f\u56db\u89d2\u5f62\u304c\u56de\u8ee2\u3059\u308b<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u306e\u30b5\u30f3\u30d7\u30eb\u3067\u306f\u3001\u660e\u308b\u3055\u3092\u56db\u89d2\u5f62\u306e\u30b5\u30a4\u30ba\u306b\u5909\u63db\u3057\u3066\u3044\u307e\u3059\u3002\u3055\u3089\u306b<code>rotate(frameCount * 0.04)<\/code>\u3067\u5168\u3066\u306e\u56db\u89d2\u5f62\u3092\u56de\u8ee2\u3055\u305b\u308b\u3053\u3068\u3067\u3001\u7c21\u5358\u306a\u30b3\u30fc\u30c9\u3067\u3082\u52d5\u304d\u306e\u3042\u308b\u6620\u50cf\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u307e\u3068\u3081<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><th>\u547d\u4ee4\u30fb\u8003\u3048\u65b9<\/th><th>\u610f\u5473<\/th><\/tr><tr><td><code>Capture<\/code><\/td><td>\u30ab\u30e1\u30e9\u6620\u50cf\u3092\u53d6\u5f97\u3059\u308b<\/td><\/tr><tr><td><code>image()<\/code><\/td><td>\u753b\u50cf\u3084\u6620\u50cf\u3092\u753b\u9762\u306b\u8868\u793a\u3059\u308b<\/td><\/tr><tr><td><code>tint()<\/code><\/td><td>\u753b\u50cf\u3084\u6620\u50cf\u306b\u8272\u3092\u91cd\u306d\u308b<\/td><\/tr><tr><td><code>scale(-1, 1)<\/code><\/td><td>\u5de6\u53f3\u53cd\u8ee2\u3059\u308b<\/td><\/tr><tr><td><code>loadPixels()<\/code><\/td><td>\u30d4\u30af\u30bb\u30eb\u914d\u5217\u3092\u64cd\u4f5c\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b<\/td><\/tr><tr><td><code>pixels[y * width + x]<\/code><\/td><td>x,y\u5ea7\u6a19\u306e\u30d4\u30af\u30bb\u30eb\u3092\u914d\u5217\u756a\u53f7\u3067\u6307\u5b9a\u3059\u308b<\/td><\/tr><tr><td>\u30b0\u30ec\u30fc\u5909\u63db<\/td><td>RGB\u306e\u5e73\u5747\u3092\u660e\u308b\u3055\u3068\u3057\u3066\u4f7f\u3046<\/td><\/tr><tr><td>\u6642\u9593\u306e\u9045\u5ef6<\/td><td>\u884c\u3084\u5217\u3054\u3068\u306b\u9055\u3046\u6642\u9593\u306e\u6620\u50cf\u3092\u8a18\u9332\u3059\u308b<\/td><\/tr><tr><td>\u30c9\u30c3\u30c8\u8868\u73fe<\/td><td>\u660e\u308b\u3055\u3092\u5186\u306e\u5927\u304d\u3055\u306b\u5909\u63db\u3059\u308b<\/td><\/tr><tr><td>\u30bf\u30a4\u30eb\u8868\u73fe<\/td><td>\u660e\u308b\u3055\u3092\u56db\u89d2\u5f62\u306e\u5927\u304d\u3055\u3084\u56de\u8ee2\u306b\u5909\u63db\u3059\u308b<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u4eca\u65e5\u306e\u91cd\u8981\u30dd\u30a4\u30f3\u30c8\uff1a<\/strong>\u753b\u50cf\u51e6\u7406\u306e\u57fa\u672c\u306f\u3001\u6620\u50cf\u3092\u305d\u306e\u307e\u307e\u8868\u793a\u3059\u308b\u3053\u3068\u3067\u306f\u306a\u304f\u3001\u30d4\u30af\u30bb\u30eb\u306e\u8272\u3092\u53d6\u308a\u51fa\u3057\u3066\u3001\u5225\u306e\u8272\u3084\u5225\u306e\u56f3\u5f62\u306b\u5909\u63db\u3057\u3066\u63cf\u304d\u76f4\u3059\u3053\u3068\u3067\u3059\u3002<\/p>\n\n\n\n<script>\n(function() {\n  if (typeof p5 === 'undefined') {\n    console.warn('p5.js\u304c\u8aad\u307f\u8fbc\u307e\u308c\u3066\u3044\u307e\u305b\u3093\u3002');\n    return;\n  }\n\n  let sharedVideo = null;\n  let cameraReady = false;\n  const status = document.getElementById('img-camera-status');\n  const startButton = document.getElementById('img-start-camera');\n  const stopButton = document.getElementById('img-stop-camera');\n\n  async function startCamera() {\n    try {\n      if (!sharedVideo) {\n        sharedVideo = document.createElement('video');\n        sharedVideo.autoplay = true;\n        sharedVideo.muted = true;\n        sharedVideo.playsInline = true;\n        sharedVideo.width = 320;\n        sharedVideo.height = 240;\n        sharedVideo.style.display = 'none';\n        document.body.appendChild(sharedVideo);\n      }\n\n      const stream = await navigator.mediaDevices.getUserMedia({\n        video: { width: { ideal: 320 }, height: { ideal: 240 } },\n        audio: false\n      });\n\n      sharedVideo.srcObject = stream;\n      await sharedVideo.play();\n      cameraReady = true;\n      if (status) status.textContent = '\u30ab\u30e1\u30e9\u304c\u958b\u59cb\u3055\u308c\u307e\u3057\u305f\u3002\u5404\u30b5\u30f3\u30d7\u30eb\u306e\u518d\u751f\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3066\u304f\u3060\u3055\u3044\u3002';\n    } catch (e) {\n      cameraReady = false;\n      if (status) status.textContent = '\u30ab\u30e1\u30e9\u3092\u958b\u59cb\u3067\u304d\u307e\u305b\u3093\u3067\u3057\u305f\u3002\u30d6\u30e9\u30a6\u30b6\u306e\u8a31\u53ef\u8a2d\u5b9a\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002';\n      console.error(e);\n    }\n  }\n\n  function stopCamera() {\n    if (sharedVideo && sharedVideo.srcObject) {\n      sharedVideo.srcObject.getTracks().forEach(function(track) {\n        track.stop();\n      });\n      sharedVideo.srcObject = null;\n    }\n    cameraReady = false;\n    if (status) status.textContent = '\u30ab\u30e1\u30e9\u3092\u7d42\u4e86\u3057\u307e\u3057\u305f\u3002';\n  }\n\n  if (startButton) startButton.addEventListener('click', startCamera);\n  if (stopButton) stopButton.addEventListener('click', stopCamera);\n\n  function attachCanvas(p, id) {\n    \/\/ Retina\u74b0\u5883\u3067\u3082\u5185\u90e8\u89e3\u50cf\u5ea6\u3092320\u00d7240\u306b\u56fa\u5b9a\u3059\u308b\n    \/\/ putImageData()\u3067\u63cf\u3044\u305f\u753b\u50cf\u304c\u5de6\u4e0a\u534a\u5206\u3060\u3051\u306b\u306a\u308b\u554f\u984c\u3092\u9632\u3050\n    p.pixelDensity(1);\n    const c = p.createCanvas(320, 240);\n    c.parent(id);\n  }\n\n  function connectPlayButton(p, buttonId, resetFunction) {\n    const button = document.getElementById(buttonId);\n    let playing = false;\n    if (!button) return function() {};\n\n    button.addEventListener('click', function() {\n      if (!playing) {\n        p.loop();\n        button.textContent = '\u505c\u6b62';\n        playing = true;\n      } else {\n        p.noLoop();\n        button.textContent = '\u518d\u751f';\n        playing = false;\n      }\n    });\n\n    return function stopAndReset() {\n      p.noLoop();\n      button.textContent = '\u518d\u751f';\n      playing = false;\n      if (resetFunction) resetFunction();\n    };\n  }\n\n  function button(id, fn) {\n    const el = document.getElementById(id);\n    if (el) el.addEventListener('click', fn);\n  }\n\n  function setupControls(p, num, resetFn) {\n    const stopAndReset = connectPlayButton(p, 'img-play' + num, resetFn);\n    button('img-reset' + num, stopAndReset);\n  }\n\n  function drawWaiting(p) {\n    p.background(245);\n    p.fill(80);\n    p.noStroke();\n    p.textAlign(p.CENTER, p.CENTER);\n    p.textSize(13);\n    p.text('\u30ab\u30e1\u30e9\u958b\u59cb\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3066\u304f\u3060\u3055\u3044', p.width \/ 2, p.height \/ 2);\n  }\n\n  function makeSketch(num, drawFn, resetFn) {\n    new p5(function(p) {\n      p.setup = function() {\n        attachCanvas(p, 'img-list' + num);\n        drawWaiting(p);\n        p.noLoop();\n        setupControls(p, num, function() {\n          if (resetFn) resetFn(p);\n          drawWaiting(p);\n        });\n      };\n      p.draw = function() {\n        if (!cameraReady || !sharedVideo || sharedVideo.readyState < 2) {\n          drawWaiting(p);\n          return;\n        }\n        drawFn(p);\n      };\n    });\n  }\n\n  function getSmallFrame(p, w, h) {\n    \/\/ p5.js\u5074\u306e\u51e6\u7406\u5143\u30d5\u30ec\u30fc\u30e0\u3082320\u00d7240\u306b\u56fa\u5b9a\u3059\u308b\n    const sourceW = 320;\n    const sourceH = 240;\n\n    const off = document.createElement('canvas');\n    off.width = sourceW;\n    off.height = sourceH;\n\n    const octx = off.getContext('2d');\n    octx.drawImage(sharedVideo, 0, 0, sourceW, sourceH);\n\n    return octx.getImageData(0, 0, sourceW, sourceH).data;\n  }\n\n  makeSketch(1, function(p) {\n    p.background(255);\n    p.drawingContext.drawImage(sharedVideo, 0, 0, p.width, p.height);\n  });\n\n  makeSketch(2, function(p) {\n    p.background(255);\n    p.drawingContext.drawImage(sharedVideo, 0, 0, p.width, p.height);\n    p.noStroke();\n    p.fill(255, 40, 40, 90);\n    p.rect(0, 0, p.width, p.height);\n  });\n\n  makeSketch(3, function(p) {\n    p.background(0);\n    p.drawingContext.drawImage(sharedVideo, 0, 0, p.width\/2, p.height\/2);\n\n    p.push();\n    p.translate(p.width, 0);\n    p.scale(-1, 1);\n    p.drawingContext.drawImage(sharedVideo, 0, 0, p.width\/2, p.height\/2);\n    p.pop();\n\n    p.push();\n    p.translate(0, p.height);\n    p.scale(1, -1);\n    p.drawingContext.drawImage(sharedVideo, 0, 0, p.width\/2, p.height\/2);\n    p.pop();\n\n    p.push();\n    p.translate(p.width, p.height);\n    p.scale(-1, -1);\n    p.drawingContext.drawImage(sharedVideo, 0, 0, p.width\/2, p.height\/2);\n    p.pop();\n  });\n\n  makeSketch(4, function(p) {\n    if (p._angle === undefined) p._angle = 0;\n    p.background(0);\n    p.push();\n    p.translate(p.width \/ 2, p.height \/ 2);\n    p.rotate(p._angle);\n    p.drawingContext.drawImage(sharedVideo, -120, -90, 240, 180);\n    p.pop();\n    p._angle += 0.02;\n  }, function(p) {\n    p._angle = 0;\n  });\n\n  makeSketch(5, function(p) {\n    p.drawingContext.drawImage(sharedVideo, 0, 0, p.width, p.height);\n  });\n\n  button('img-mode-gray', function() {\n    if (window._imgModeTarget) window._imgModeTarget._mode = 'gray';\n  });\n  button('img-mode-invert', function() {\n    if (window._imgModeTarget) window._imgModeTarget._mode = 'invert';\n  });\n  button('img-mode-threshold', function() {\n    if (window._imgModeTarget) window._imgModeTarget._mode = 'threshold';\n  });\n\n  new p5(function(p) {\n    p.setup = function() {\n      attachCanvas(p, 'img-list6');\n      window._imgModeTarget = p;\n      p._mode = 'gray';\n      drawWaiting(p);\n      p.noLoop();\n      setupControls(p, 6, function() {\n        drawWaiting(p);\n      });\n    };\n\n    p.draw = function() {\n      if (!cameraReady || !sharedVideo || sharedVideo.readyState < 2) {\n        drawWaiting(p);\n        return;\n      }\n\n      \/\/ p5.js\u30b5\u30f3\u30d7\u30eb\u306f320\u00d7240\u306e\u30ad\u30e3\u30f3\u30d0\u30b9\u5168\u4f53\u306b\u63cf\u753b\u3059\u308b\n      const off = document.createElement('canvas');\n      off.width = p.width;\n      off.height = p.height;\n      const octx = off.getContext('2d');\n\n      \/\/ \u30ab\u30e1\u30e9\u6620\u50cf\u3092\u30ad\u30e3\u30f3\u30d0\u30b9\u5168\u4f53\u306b\u62e1\u5927\u30fb\u7e2e\u5c0f\u3057\u3066\u304b\u3089\u30d4\u30af\u30bb\u30eb\u51e6\u7406\u3059\u308b\n      octx.drawImage(sharedVideo, 0, 0, p.width, p.height);\n\n      const img = octx.getImageData(0, 0, p.width, p.height);\n      const data = img.data;\n      const mode = p._mode || 'gray';\n\n      for (let i = 0; i < data.length; i += 4) {\n        const r = data[i];\n        const g = data[i + 1];\n        const b = data[i + 2];\n        const gray = (r + g + b) \/ 3;\n\n        if (mode === 'gray') {\n          data[i] = gray;\n          data[i + 1] = gray;\n          data[i + 2] = gray;\n        } else if (mode === 'invert') {\n          data[i] = 255 - r;\n          data[i + 1] = 255 - g;\n          data[i + 2] = 255 - b;\n        } else {\n          const v = gray > 127 ? 255 : 0;\n          data[i] = v;\n          data[i + 1] = v;\n          data[i + 2] = v;\n        }\n        data[i + 3] = 255;\n      }\n\n      \/\/ \u51e6\u7406\u7d50\u679c\u3092\u30ad\u30e3\u30f3\u30d0\u30b9\u5168\u4f53\u306b\u8868\u793a\u3059\u308b\n      p.drawingContext.setTransform(1, 0, 0, 1, 0, 0);\n      p.drawingContext.putImageData(img, 0, 0);\n    };\n  });\n\n  new p5(function(p) {\n    let row = 0;\n    let buffer, bufferCtx;\n\n    p.setup = function() {\n      attachCanvas(p, 'img-list7');\n      buffer = document.createElement('canvas');\n      buffer.width = 320;\n      buffer.height = 240;\n      bufferCtx = buffer.getContext('2d');\n      resetBuffer();\n      p.noLoop();\n      setupControls(p, 7, function() { row = 0; resetBuffer(); });\n    };\n\n    function resetBuffer() {\n      bufferCtx.fillStyle = 'black';\n      bufferCtx.fillRect(0, 0, buffer.width, buffer.height);\n      p.background(0);\n    }\n\n    p.draw = function() {\n      if (!cameraReady || !sharedVideo || sharedVideo.readyState < 2) {\n        drawWaiting(p);\n        return;\n      }\n\n      const off = document.createElement('canvas');\n      off.width = p.width;\n      off.height = p.height;\n      const octx = off.getContext('2d');\n      octx.drawImage(sharedVideo, 0, 0, p.width, p.height);\n\n      const slice = octx.getImageData(0, row, p.width, 1);\n      bufferCtx.putImageData(slice, 0, row);\n\n      p.drawingContext.drawImage(buffer, 0, 0);\n      p.stroke(255, 0, 0);\n      p.line(0, row, p.width, row);\n\n      row = (row + 1) % p.height;\n    };\n  });\n\n  new p5(function(p) {\n    let column = 0;\n    let buffer, bufferCtx;\n\n    p.setup = function() {\n      attachCanvas(p, 'img-list8');\n      buffer = document.createElement('canvas');\n      buffer.width = 320;\n      buffer.height = 240;\n      bufferCtx = buffer.getContext('2d');\n      resetBuffer();\n      p.noLoop();\n      setupControls(p, 8, function() { column = 0; resetBuffer(); });\n    };\n\n    function resetBuffer() {\n      bufferCtx.fillStyle = 'black';\n      bufferCtx.fillRect(0, 0, buffer.width, buffer.height);\n      p.background(0);\n    }\n\n    p.draw = function() {\n      if (!cameraReady || !sharedVideo || sharedVideo.readyState < 2) {\n        drawWaiting(p);\n        return;\n      }\n\n      const off = document.createElement('canvas');\n      off.width = p.width;\n      off.height = p.height;\n      const octx = off.getContext('2d');\n      octx.drawImage(sharedVideo, 0, 0, p.width, p.height);\n\n      const slice = octx.getImageData(column, 0, 1, p.height);\n      bufferCtx.putImageData(slice, column, 0);\n\n      p.drawingContext.drawImage(buffer, 0, 0);\n      p.stroke(255, 0, 0);\n      p.line(column, 0, column, p.height);\n\n      column = (column + 1) % p.width;\n    };\n  });\n\n\n  makeSketch(9, function(p) {\n    const w = 320, h = 240;\n    const img = getSmallFrame(p, w, h);\n\n    p.background(0);\n    p.noStroke();\n\n    const cellW = p.width \/ w;\n    const cellH = p.height \/ h;\n\n    for (let y = 0; y < h; y += 4) {\n      for (let x = 0; x < w; x += 4) {\n        const idx = (y * w + x) * 4;\n        const r = img[idx];\n        const g = img[idx + 1];\n        const b = img[idx + 2];\n        const bright = (r + g + b) \/ 3;\n        const s = p.map(bright, 0, 255, 2, 10);\n\n        p.fill(r, g, b);\n        p.ellipse(x * cellW, y * cellH, s, s);\n      }\n    }\n  });\n\n  makeSketch(10, function(p) {\n    const w = 320, h = 240;\n    const img = getSmallFrame(p, w, h);\n\n    p.background(0);\n    p.noStroke();\n    p.rectMode(p.CENTER);\n\n    const cellW = p.width \/ w;\n    const cellH = p.height \/ h;\n\n    for (let y = 0; y < h; y += 8) {\n      for (let x = 0; x < w; x += 8) {\n        const idx = (y * w + x) * 4;\n        const r = img[idx];\n        const g = img[idx + 1];\n        const b = img[idx + 2];\n        const bright = (r + g + b) \/ 3;\n        const s = p.map(bright, 0, 255, 2, 18);\n\n        p.push();\n        p.translate(x * cellW, y * cellH);\n        p.rotate(p.frameCount * 0.04);\n        p.fill(r, g, b);\n        p.rect(0, 0, s, s);\n        p.pop();\n      }\n    }\n  });\n\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u3053\u306e\u30da\u30fc\u30b8\u3067\u306f\u3001Processing\u3067\u30ab\u30e1\u30e9\u6620\u50cf\u3092\u4f7f\u3063\u305f\u753b\u50cf&#8230; <a href=\"https:\/\/r-dimension.xsrv.jp\/classes_j\/image_processing1-2026\/\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,26],"tags":[],"class_list":["post-14388","post","type-post","status-publish","format-standard","hentry","category-processing","category-ii"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/posts\/14388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/comments?post=14388"}],"version-history":[{"count":33,"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/posts\/14388\/revisions"}],"predecessor-version":[{"id":14466,"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/posts\/14388\/revisions\/14466"}],"wp:attachment":[{"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/media?parent=14388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/categories?post=14388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/tags?post=14388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}