{"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-05-27T00:17:47","modified_gmt":"2026-05-26T15:17:47","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: 400px;\n  max-width: 100%;\n  border: 1px solid #ddd;\n  background: #fff;\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\u3068\u3044\u3046\u3068\u96e3\u3057\u304f\u805e\u3053\u3048\u307e\u3059\u304c\u3001\u57fa\u672c\u306f\u300c\u6620\u50cf\u3092\u8aad\u307f\u8fbc\u3080\u300d\u300c\u8272\u3092\u5909\u3048\u308b\u300d\u300c1\u30d4\u30af\u30bb\u30eb\u305a\u3064\u8abf\u3079\u308b\u300d\u300c\u5225\u306e\u56f3\u5f62\u3067\u63cf\u304d\u76f4\u3059\u300d\u3068\u3044\u3046\u6d41\u308c\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">p5.js\u306e\u5b9f\u884c\u6b04\u3067\u306f\u3001\u30d6\u30e9\u30a6\u30b6\u306e\u30ab\u30e1\u30e9\u3092\u4f7f\u3063\u3066Processing\u306e\u30b5\u30f3\u30d7\u30eb\u306b\u8fd1\u3044\u52d5\u304d\u3092\u518d\u751f\u3057\u307e\u3059\u3002\u6700\u521d\u306b\u30ab\u30e1\u30e9\u958b\u59cb\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3001\u30d6\u30e9\u30a6\u30b6\u306e\u30ab\u30e1\u30e9\u4f7f\u7528\u3092\u8a31\u53ef\u3057\u3066\u304f\u3060\u3055\u3044\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(400, 400);\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  \/\/ \u6700\u521d\u306b\u898b\u3064\u304b\u3063\u305f\u30ab\u30e1\u30e9\u3092\u4f7f\u3046\n  video = new Capture(this, 400, 400, cameras[0]);\n  video.start();\n}\n\nvoid draw() {\n  \/\/ \u65b0\u3057\u3044\u6620\u50cf\u304c\u6765\u3066\u3044\u305f\u3089\u8aad\u307f\u8fbc\u3080\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<p class=\"wp-block-paragraph\"><code>video.read()<\/code>\u3067\u30ab\u30e1\u30e9\u306e\u6620\u50cf\u3092\u8aad\u307f\u8fbc\u307f\u3001<code>image(video, 0, 0)<\/code>\u3067\u753b\u9762\u306b\u8868\u793a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\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<code>tint(r, g, b, alpha)<\/code>\u306e\u3088\u3046\u306b\u66f8\u304f\u3068\u3001\u4e0d\u900f\u660e\u5ea6\u3082\u6307\u5b9a\u3067\u304d\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(400, 400);\n  String[] cameras = Capture.list();\n  while (cameras.length == 0) {\n    cameras = Capture.list();\n  }\n  video = new Capture(this, 400, 400, 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\u305f\u3060\u3057x\u65b9\u5411\u304c\u53cd\u8ee2\u3059\u308b\u306e\u3067\u3001\u8868\u793a\u4f4d\u7f6e\u3092<code>-width<\/code>\u306b\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\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(400, 400);\n  String[] cameras = Capture.list();\n  while (cameras.length == 0) {\n    cameras = Capture.list();\n  }\n  video = new Capture(this, 200, 200, 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, 200, 200);  \/\/ \u5de6\u4e0a\uff1a\u6b63\u50cf\n\n  pushMatrix();\n  scale(-1, 1);                  \/\/ \u5de6\u53f3\u53cd\u8ee2\n  image(video, -400, 0, 200, 200);\n  popMatrix();\n\n  pushMatrix();\n  scale(1, -1);                  \/\/ \u4e0a\u4e0b\u53cd\u8ee2\n  image(video, 0, -400, 200, 200);\n  popMatrix();\n\n  pushMatrix();\n  scale(-1, -1);                 \/\/ \u4e0a\u4e0b\u5de6\u53f3\u53cd\u8ee2\n  image(video, -400, -400, 200, 200);\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\u3082\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\u308b\u306e\u304c\u30dd\u30a4\u30f3\u30c8\u3067\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(400, 400);\n  String[] cameras = Capture.list();\n  while (cameras.length == 0) {\n    cameras = Capture.list();\n  }\n  video = new Capture(this, 240, 180, cameras[0]);\n  video.start();\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);  \/\/ \u56de\u8ee2\u306e\u4e2d\u5fc3\u3092\u753b\u9762\u4e2d\u592e\u306b\u3059\u308b\n  rotate(angle);\n  image(video, 0, 0);\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\u3002Processing\u3067\u306f\u3001<code>loadPixels()<\/code>\u3067\u30d4\u30af\u30bb\u30eb\u914d\u5217\u3092\u4f7f\u3048\u308b\u3088\u3046\u306b\u3057\u3001<code>pixels[y * width + x]<\/code>\u3067\u76ee\u7684\u306e\u30d4\u30af\u30bb\u30eb\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<figure style=\"margin:1.2em 0 1.8em 0;\"><div style=\"max-width:520px;border:1px solid #ddd;background:#fff;padding:14px;box-sizing:border-box;\"><svg viewBox=\"0 0 520 280\" width=\"100%\" height=\"auto\" role=\"img\" aria-label=\"\u30d4\u30af\u30bb\u30eb\u914d\u5217\u306e\u8aac\u660e\u56f3\"><rect width=\"520\" height=\"280\" fill=\"#fff\"\/><g stroke=\"#aaa\" fill=\"none\"><rect x=\"60\" y=\"40\" width=\"320\" height=\"200\"\/><g><line x1=\"100\" y1=\"40\" x2=\"100\" y2=\"240\"\/><line x1=\"140\" y1=\"40\" x2=\"140\" y2=\"240\"\/><line x1=\"180\" y1=\"40\" x2=\"180\" y2=\"240\"\/><line x1=\"220\" y1=\"40\" x2=\"220\" y2=\"240\"\/><line x1=\"260\" y1=\"40\" x2=\"260\" y2=\"240\"\/><line x1=\"300\" y1=\"40\" x2=\"300\" y2=\"240\"\/><line x1=\"340\" y1=\"40\" x2=\"340\" y2=\"240\"\/><\/g><g><line x1=\"60\" y1=\"80\" x2=\"380\" y2=\"80\"\/><line x1=\"60\" y1=\"120\" x2=\"380\" y2=\"120\"\/><line x1=\"60\" y1=\"160\" x2=\"380\" y2=\"160\"\/><line x1=\"60\" y1=\"200\" x2=\"380\" y2=\"200\"\/><\/g><\/g><rect x=\"180\" y=\"120\" width=\"40\" height=\"40\" fill=\"#222\"\/><text x=\"200\" y=\"145\" text-anchor=\"middle\" font-size=\"13\" fill=\"#fff\">x,y<\/text><text x=\"410\" y=\"90\" font-size=\"15\" fill=\"#333\">index = y * width + x<\/text><text x=\"410\" y=\"125\" font-size=\"13\" fill=\"#333\">\u6a2a\u306b\u4e26\u3093\u3060\u30d4\u30af\u30bb\u30eb\u3092<\/text><text x=\"410\" y=\"145\" font-size=\"13\" fill=\"#333\">1\u672c\u306e\u914d\u5217\u3068\u3057\u3066\u6570\u3048\u308b<\/text><text x=\"60\" y=\"262\" font-size=\"13\" fill=\"#666\">\u4f8b\uff1ax=3, y=2 \u306e\u30d4\u30af\u30bb\u30eb\u3092\u53d6\u308a\u51fa\u3059<\/text><\/svg><\/div><figcaption style=\"font-size:0.9em;color:#666;margin-top:0.4em;\">\u56f3\uff1a2\u6b21\u5143\u306e\u5ea7\u6a19\u3092\u30011\u6b21\u5143\u306e\u914d\u5217\u756a\u53f7\u306b\u5909\u63db\u3059\u308b\u8003\u3048\u65b9<\/figcaption><\/figure>\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(400, 400);\n  String[] cameras = Capture.list();\n  while (cameras.length == 0) {\n    cameras = Capture.list();\n  }\n  video = new Capture(this, width, height, cameras[0]);\n  video.start();\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 < height; y++) {\n    for (int x = 0; x < width; x++) {\n      \/\/ x,y\u5ea7\u6a19\u3092\u914d\u5217\u756a\u53f7\u306b\u5909\u63db\u3059\u308b\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<figure class=\"wp-block-table\"><table><tbody><tr><th>\u51e6\u7406<\/th><th>\u8003\u3048\u65b9<\/th><\/tr><tr><td>\u30b0\u30ec\u30fc\u5909\u63db<\/td><td>\u8d64\u30fb\u7dd1\u30fb\u9752\u306e\u5e73\u5747\u3092\u4f7f\u3046<\/td><\/tr><tr><td>\u8272\u306e\u53cd\u8ee2<\/td><td><code>255 - \u8272<\/code>\u306b\u3059\u308b<\/td><\/tr><tr><td>2\u8272\u5316<\/td><td>\u660e\u308b\u3055\u304c\u3057\u304d\u3044\u5024\u4ee5\u4e0a\u306a\u3089\u767d\u3001\u672a\u6e80\u306a\u3089\u5225\u306e\u8272\u306b\u3059\u308b<\/td><\/tr><\/tbody><\/table><\/figure>\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(400, 400);\n  String[] cameras = Capture.list();\n  while (cameras.length == 0) {\n    cameras = Capture.list();\n  }\n  video = new Capture(this, width, height, cameras[0]);\n  video.start();\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 < height; y++) {\n    for (int x = 0; x < 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  }\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(400, 400);\n  String[] cameras = Capture.list();\n  while (cameras.length == 0) {\n    cameras = Capture.list();\n  }\n  video = new Capture(this, width, height, cameras[0]);\n  video.start();\n  loadPixels();\n}\n\nvoid draw() {\n  if (video.available()) {\n    video.read();\n  }\n\n  video.loadPixels();\n  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 < 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 >= 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(400, 400);\n  String[] cameras = Capture.list();\n  while (cameras.length == 0) {\n    cameras = Capture.list();\n  }\n  video = new Capture(this, width, height, cameras[0]);\n  video.start();\n  loadPixels();\n}\n\nvoid draw() {\n  if (video.available()) {\n    video.read();\n  }\n\n  video.loadPixels();\n  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 < 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 >= 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\u7dda\u753b\u306e\u3088\u3046\u306a\u8868\u73fe\u304c\u3067\u304d\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(400, 400);\n  String[] cameras = Capture.list();\n  while (cameras.length == 0) {\n    cameras = Capture.list();\n  }\n  video = new Capture(this, 80, 80, cameras[0]);\n  video.start();\n  rectMode(CENTER);\n  noFill();\n}\n\nvoid draw() {\n  if (video.available()) {\n    video.read();\n  }\n\n  video.loadPixels();\n  background(0);\n\n  for (int y = 0; y < video.height; y++) {\n    for (int x = 0; x < video.width; x++) {\n      int index = y * video.width + x;\n      color c = video.pixels[index];\n      float brightness = (red(c) + green(c) + blue(c)) \/ 3;\n\n      float rectSize = brightness \/ 255 * 20;\n      stroke(c);\n      rect(x * 5, y * 5, rectSize, rectSize);\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\u56db\u89d2\u5f62\u3067\u6620\u50cf\u3092\u63cf\u304f<\/div>\n<\/div>\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(400, 400);\n  String[] cameras = Capture.list();\n  while (cameras.length == 0) {\n    cameras = Capture.list();\n  }\n  video = new Capture(this, 80, 80, cameras[0]);\n  video.start();\n}\n\nvoid draw() {\n  if (video.available()) {\n    video.read();\n  }\n\n  video.loadPixels();\n  background(0);\n\n  for (int y = 0; y < video.height; y++) {\n    for (int x = 0; x < video.width; x++) {\n      int index = y * video.width + x;\n      color c = video.pixels[index];\n      float brightness = (red(c) + green(c) + blue(c)) \/ 3;\n\n      float lineSize = brightness \/ 255 * 30;\n      stroke(c);\n      line(x * 5 - lineSize\/2, y * 5,\n           x * 5 + lineSize\/2, y * 5);\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\u7dda\u3067\u6620\u50cf\u3092\u63cf\u304f<\/div>\n<\/div>\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><\/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.style.display = 'none';\n        document.body.appendChild(sharedVideo);\n      }\n\n      const stream = await navigator.mediaDevices.getUserMedia({\n        video: { width: 400, height: 400 },\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      const tracks = sharedVideo.srcObject.getTracks();\n      tracks.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\u518d\u958b\u3059\u308b\u5834\u5408\u306f\u300c\u30ab\u30e1\u30e9\u958b\u59cb\u300d\u3092\u62bc\u3057\u3066\u304f\u3060\u3055\u3044\u3002';\n  }\n\n  if (startButton) {\n    startButton.addEventListener('click', startCamera);\n  }\n\n  if (stopButton) {\n    stopButton.addEventListener('click', stopCamera);\n  }\n\n  function attachCanvas(p, id) {\n    const c = p.createCanvas(400, 400);\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(14);\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 drawVideoCover(p, x, y, w, h, flipX, flipY) {\n    if (!cameraReady || !sharedVideo || sharedVideo.readyState < 2) {\n      drawWaiting(p);\n      return;\n    }\n    p.push();\n    p.translate(x + (flipX ? w : 0), y + (flipY ? h : 0));\n    p.scale(flipX ? -1 : 1, flipY ? -1 : 1);\n    p.drawingContext.drawImage(sharedVideo, 0, 0, w, h);\n    p.pop();\n  }\n\n  function getVideoImageData(p) {\n    if (!cameraReady || !sharedVideo || sharedVideo.readyState < 2) return null;\n    const ctx = p.drawingContext;\n    ctx.drawImage(sharedVideo, 0, 0, p.width, p.height);\n    return ctx.getImageData(0, 0, p.width, p.height);\n  }\n\n  function makeSimpleVideoSketch(num, drawFn) {\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() { drawWaiting(p); });\n      };\n      p.draw = function() {\n        if (!cameraReady) {\n          drawWaiting(p);\n          return;\n        }\n        drawFn(p);\n      };\n    });\n  }\n\n  makeSimpleVideoSketch(1, function(p) {\n    p.background(255);\n    drawVideoCover(p, 0, 0, p.width, p.height, false, false);\n  });\n\n  makeSimpleVideoSketch(2, function(p) {\n    p.background(255);\n    drawVideoCover(p, 0, 0, p.width, p.height, false, false);\n    p.noStroke();\n    p.fill(255, 40, 40, 90);\n    p.rect(0, 0, p.width, p.height);\n  });\n\n  makeSimpleVideoSketch(3, function(p) {\n    p.background(0);\n    drawVideoCover(p, 0, 0, 200, 200, false, false);\n    drawVideoCover(p, 200, 0, 200, 200, true, false);\n    drawVideoCover(p, 0, 200, 200, 200, false, true);\n    drawVideoCover(p, 200, 200, 200, 200, true, true);\n  });\n\n  new p5(function(p) {\n    let angle = 0;\n    p.setup = function() {\n      attachCanvas(p, 'img-list4');\n      drawWaiting(p);\n      p.noLoop();\n      setupControls(p, 4, function() { angle = 0; drawWaiting(p); });\n    };\n    p.draw = function() {\n      if (!cameraReady) { drawWaiting(p); return; }\n      p.background(0);\n      p.push();\n      p.translate(p.width \/ 2, p.height \/ 2);\n      p.rotate(angle);\n      p.drawingContext.drawImage(sharedVideo, -120, -90, 240, 180);\n      p.pop();\n      angle += 0.02;\n    };\n  });\n\n  makeSimpleVideoSketch(5, function(p) {\n    const img = getVideoImageData(p);\n    if (!img) return;\n    p.drawingContext.putImageData(img, 0, 0);\n  });\n\n  new p5(function(p) {\n    let mode = 'gray';\n    p.setup = function() {\n      attachCanvas(p, 'img-list6');\n      drawWaiting(p);\n      p.noLoop();\n      setupControls(p, 6, function() { drawWaiting(p); });\n      button('img-mode-gray', function() { mode = 'gray'; });\n      button('img-mode-invert', function() { mode = 'invert'; });\n      button('img-mode-threshold', function() { mode = 'threshold'; });\n    };\n    p.draw = function() {\n      if (!cameraReady) { drawWaiting(p); return; }\n      const img = getVideoImageData(p);\n      if (!img) return;\n      const data = img.data;\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        if (mode === 'gray') {\n          data[i] = gray; data[i + 1] = gray; data[i + 2] = gray;\n        } else if (mode === 'invert') {\n          data[i] = 255 - r; data[i + 1] = 255 - g; data[i + 2] = 255 - b;\n        } else {\n          if (gray >= 127) {\n            data[i] = 255; data[i + 1] = 255; data[i + 2] = 255;\n          } else {\n            data[i] = 255; data[i + 1] = 0; data[i + 2] = 0;\n          }\n        }\n      }\n      p.drawingContext.putImageData(img, 0, 0);\n    };\n  });\n\n  new p5(function(p) {\n    let row = 0;\n    let buffer;\n    let bufferCtx;\n\n    p.setup = function() {\n      attachCanvas(p, 'img-list7');\n\n      \/\/ \u6642\u9593\u5dee\u306e\u6620\u50cf\u3092\u84c4\u7a4d\u3059\u308b\u305f\u3081\u306e\u5185\u90e8\u30ad\u30e3\u30f3\u30d0\u30b9\n      buffer = document.createElement('canvas');\n      buffer.width = 400;\n      buffer.height = 400;\n      bufferCtx = buffer.getContext('2d');\n\n      resetBuffer();\n      p.noLoop();\n      setupControls(p, 7, function() {\n        row = 0;\n        resetBuffer();\n      });\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      \/\/ \u73fe\u5728\u306e\u30ab\u30e1\u30e9\u6620\u50cf\u3092\u4e00\u6642\u30ad\u30e3\u30f3\u30d0\u30b9\u306b\u63cf\u304f\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      \/\/ \u73fe\u5728\u306erow\u306e1\u884c\u3060\u3051\u3092\u3001\u8a18\u9332\u7528\u30ad\u30e3\u30f3\u30d0\u30b9\u306b\u30b3\u30d4\u30fc\u3059\u308b\n      const slice = octx.getImageData(0, row, p.width, 1);\n      bufferCtx.putImageData(slice, 0, row);\n\n      \/\/ \u8a18\u9332\u7528\u30ad\u30e3\u30f3\u30d0\u30b9\u5168\u4f53\u3092\u8868\u793a\u3059\u308b\n      p.drawingContext.drawImage(buffer, 0, 0);\n\n      \/\/ \u8d64\u3044\u7dda\u306f\u8868\u793a\u7528\u306b\u91cd\u306d\u308b\u3060\u3051\u306a\u306e\u3067\u3001\u8a18\u9332\u7528\u30ad\u30e3\u30f3\u30d0\u30b9\u306b\u306f\u6b8b\u3089\u306a\u3044\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;\n    let bufferCtx;\n\n    p.setup = function() {\n      attachCanvas(p, 'img-list8');\n\n      \/\/ \u6642\u9593\u5dee\u306e\u6620\u50cf\u3092\u84c4\u7a4d\u3059\u308b\u305f\u3081\u306e\u5185\u90e8\u30ad\u30e3\u30f3\u30d0\u30b9\n      buffer = document.createElement('canvas');\n      buffer.width = 400;\n      buffer.height = 400;\n      bufferCtx = buffer.getContext('2d');\n\n      resetBuffer();\n      p.noLoop();\n      setupControls(p, 8, function() {\n        column = 0;\n        resetBuffer();\n      });\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      \/\/ \u73fe\u5728\u306e\u30ab\u30e1\u30e9\u6620\u50cf\u3092\u4e00\u6642\u30ad\u30e3\u30f3\u30d0\u30b9\u306b\u63cf\u304f\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      \/\/ \u73fe\u5728\u306ecolumn\u306e1\u5217\u3060\u3051\u3092\u3001\u8a18\u9332\u7528\u30ad\u30e3\u30f3\u30d0\u30b9\u306b\u30b3\u30d4\u30fc\u3059\u308b\n      const slice = octx.getImageData(column, 0, 1, p.height);\n      bufferCtx.putImageData(slice, column, 0);\n\n      \/\/ \u8a18\u9332\u7528\u30ad\u30e3\u30f3\u30d0\u30b9\u5168\u4f53\u3092\u8868\u793a\u3059\u308b\n      p.drawingContext.drawImage(buffer, 0, 0);\n\n      \/\/ \u8d64\u3044\u7dda\u306f\u8868\u793a\u7528\u306b\u91cd\u306d\u308b\u3060\u3051\u306a\u306e\u3067\u3001\u8a18\u9332\u7528\u30ad\u30e3\u30f3\u30d0\u30b9\u306b\u306f\u6b8b\u3089\u306a\u3044\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  makeSimpleVideoSketch(9, function(p) {\n    if (!cameraReady || !sharedVideo || sharedVideo.readyState < 2) { drawWaiting(p); return; }\n    p.background(0);\n    const step = 5;\n    const off = document.createElement('canvas');\n    off.width = 80; off.height = 80;\n    const octx = off.getContext('2d');\n    octx.drawImage(sharedVideo, 0, 0, 80, 80);\n    const img = octx.getImageData(0, 0, 80, 80).data;\n    p.rectMode(p.CENTER);\n    p.noFill();\n    for (let y = 0; y < 80; y++) {\n      for (let x = 0; x < 80; x++) {\n        const idx = (y * 80 + x) * 4;\n        const r = img[idx], g = img[idx + 1], b = img[idx + 2];\n        const bright = (r + g + b) \/ 3;\n        const s = bright \/ 255 * 20;\n        p.stroke(r, g, b);\n        p.rect(x * step, y * step, s, s);\n      }\n    }\n  });\n\n  makeSimpleVideoSketch(10, function(p) {\n    if (!cameraReady || !sharedVideo || sharedVideo.readyState < 2) { drawWaiting(p); return; }\n    p.background(0);\n    const step = 5;\n    const off = document.createElement('canvas');\n    off.width = 80; off.height = 80;\n    const octx = off.getContext('2d');\n    octx.drawImage(sharedVideo, 0, 0, 80, 80);\n    const img = octx.getImageData(0, 0, 80, 80).data;\n    for (let y = 0; y < 80; y++) {\n      for (let x = 0; x < 80; x++) {\n        const idx = (y * 80 + x) * 4;\n        const r = img[idx], g = img[idx + 1], b = img[idx + 2];\n        const bright = (r + g + b) \/ 3;\n        const lineSize = bright \/ 255 * 30;\n        p.stroke(r, g, b);\n        p.line(x * step - lineSize \/ 2, y * step, x * step + lineSize \/ 2, y * step);\n      }\n    }\n  });\n})();\n<\/script>\n\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":22,"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/posts\/14388\/revisions"}],"predecessor-version":[{"id":14423,"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/posts\/14388\/revisions\/14423"}],"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}]}}