{"id":14444,"date":"2026-06-17T09:16:41","date_gmt":"2026-06-17T00:16:41","guid":{"rendered":"https:\/\/r-dimension.xsrv.jp\/classes_j\/?p=14444"},"modified":"2026-06-17T10:18:27","modified_gmt":"2026-06-17T01:18:27","slug":"opencv-for-processing-2026","status":"publish","type":"post","link":"https:\/\/r-dimension.xsrv.jp\/classes_j\/opencv-for-processing-2026\/","title":{"rendered":"\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u5229\u7528\uff08OpenCV for Processing\uff09"},"content":{"rendered":"\n<style>\n.ocvP5Wrap {\n  margin: 1.2em 0 1.8em 0;\n}\n.ocvP5Canvas {\n  width: 320px;\n  max-width: 100%;\n  border: 1px solid #ddd;\n  background: #fff;\n}\n.ocvP5Canvas canvas {\n  width: 320px !important;\n  height: 240px !important;\n  max-width: 100%;\n  display: block;\n}\n.ocvP5Caption {\n  font-size: 0.9em;\n  color: #666;\n  margin-top: 0.4em;\n}\n.ocvP5Controls {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5em;\n  align-items: center;\n  margin-top: 0.55em;\n}\n.ocvP5Button {\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.ocvP5Button:hover {\n  background: #69c!important;\n  border-color: #111;\n  color: #fff;\n}\n.ocvP5Note {\n  border: 1px solid #ddd;\n  background: #fafafa;\n  padding: 1em;\n  margin: 1.2em 0;\n}\n.ocvP5Status {\n  font-size: 0.9em;\n  color: #666;\n  margin-top: 0.4em;\n}\n.ocvMiniLabel {\n  font-size: 0.82em;\n  color: #666;\n}\n.ocvSlider {\n  width: 160px;\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\u306b\u6a5f\u80fd\u3092\u8ffd\u52a0\u3059\u308b\u300c\u30e9\u30a4\u30d6\u30e9\u30ea\u300d\u306e\u4f7f\u3044\u65b9\u3092\u5b66\u3073\u307e\u3059\u3002\u3053\u3053\u3067\u306f\u753b\u50cf\u51e6\u7406\u3084\u30b3\u30f3\u30d4\u30e5\u30fc\u30bf\u30d3\u30b8\u30e7\u30f3\u306e\u305f\u3081\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3042\u308b <strong>OpenCV for Processing<\/strong> \u3092\u4f7f\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">OpenCV for Processing\u3092\u4f7f\u3046\u3068\u3001\u30ab\u30e1\u30e9\u6620\u50cf\u306b\u5bfe\u3057\u3066\u3001\u660e\u308b\u3055\u30fb\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u306e\u5909\u66f4\u3001\u30a8\u30c3\u30b8\u691c\u51fa\u3001\u4e8c\u5024\u5316\u3001\u307c\u304b\u3057\u3001\u9854\u691c\u51fa\u306a\u3069\u3092\u884c\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002p5.js\u306e\u5b9f\u884c\u6b04\u3067\u306f\u3001\u30d6\u30e9\u30a6\u30b6\u3067\u518d\u73fe\u3067\u304d\u308b\u7bc4\u56f2\u306e\u753b\u50cf\u51e6\u7406\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"ocvP5Note\">\n  <div class=\"ocvP5Controls\">\n    <button id=\"ocv-start-camera\" class=\"ocvP5Button\" type=\"button\">\u30ab\u30e1\u30e9\u958b\u59cb<\/button>\n    <button id=\"ocv-stop-camera\" class=\"ocvP5Button\" type=\"button\">\u30ab\u30e1\u30e9\u7d42\u4e86<\/button>\n  <\/div>\n  <div id=\"ocv-camera-status\" class=\"ocvP5Status\">\u30ab\u30e1\u30e9\u306f\u307e\u3060\u958b\u59cb\u3055\u308c\u3066\u3044\u307e\u305b\u3093\u3002<\/div>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">1. OpenCV for Processing\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h2>\n<p class=\"wp-block-paragraph\">Processing\u306e\u30e1\u30cb\u30e5\u30fc\u304b\u3089\u3001<strong>Sketch &gt; Import Library&#8230; &gt; Add Library&#8230;<\/strong> \u3092\u9078\u3073\u3001<strong>OpenCV for Processing<\/strong> \u3092\u691c\u7d22\u3057\u3066\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n<p class=\"wp-block-paragraph\">\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3067\u304d\u305f\u3089\u3001\u30b9\u30b1\u30c3\u30c1\u306e\u6700\u521d\u306b\u6b21\u306e\u3088\u3046\u306b\u66f8\u3044\u3066\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u8aad\u307f\u8fbc\u307f\u307e\u3059\u3002<\/p>\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>import gab.opencv.*;\nimport processing.video.*;\nimport java.awt.*;<\/code><\/pre><\/div>\n\n<h2 class=\"wp-block-heading\">2. \u30ab\u30e1\u30e9\u6620\u50cf\u306e\u8868\u793a<\/h2>\n<p class=\"wp-block-paragraph\">\u307e\u305a\u306f\u3001\u30ab\u30e1\u30e9\u6620\u50cf\u3092\u8868\u793a\u3057\u307e\u3059\u3002OpenCV\u3092\u4f7f\u3046\u524d\u306b\u3001\u30ab\u30e1\u30e9\u304b\u3089\u6620\u50cf\u3092\u53d6\u5f97\u3067\u304d\u308b\u304b\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/p>\n<div class=\"listCaption\">\u30ea\u30b9\u30c81<\/div>\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>import gab.opencv.*;\nimport processing.video.*;\nimport java.awt.*;\n\nCapture video;\nOpenCV opencv;\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  \/\/ \u6700\u521d\u306b\u898b\u3064\u304b\u3063\u305f\u30ab\u30e1\u30e9\u3092\u4f7f\u3046\n  video = new Capture(this, 640, 480, cameras[0]);\n\n  \/\/ OpenCV\u3067640\u00d7480\u306e\u753b\u50cf\u3092\u6271\u3046\n  opencv = new OpenCV(this, 640, 480);\n\n  video.start();\n}\n\nvoid draw() {\n  \/\/ \u30ab\u30e1\u30e9\u6620\u50cf\u3092OpenCV\u306b\u8aad\u307f\u8fbc\u3080\n  opencv.loadImage(video);\n\n  \/\/ \u30ab\u30e1\u30e9\u6620\u50cf\u3092\u305d\u306e\u307e\u307e\u8868\u793a\u3059\u308b\n  image(video, 0, 0, width, height);\n}\n\nvoid captureEvent(Capture c) {\n  c.read();\n}<\/code><\/pre><\/div>\n<div class=\"ocvP5Wrap\"><div id=\"ocv-list1\" class=\"ocvP5Canvas\"><\/div><div class=\"ocvP5Controls\"><button id=\"ocv-play1\" class=\"ocvP5Button\" type=\"button\">\u518d\u751f<\/button><button id=\"ocv-reset1\" class=\"ocvP5Button\" type=\"button\">\u30ea\u30bb\u30c3\u30c8<\/button><\/div><div class=\"ocvP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1a\u30ab\u30e1\u30e9\u6620\u50cf\u3092\u305d\u306e\u307e\u307e\u8868\u793a\u3059\u308b<\/div><\/div>\n\n<h2 class=\"wp-block-heading\">3. \u660e\u308b\u3055\u3068\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8<\/h2>\n<p class=\"wp-block-paragraph\">\u660e\u308b\u3055\u306f\u753b\u9762\u5168\u4f53\u3092\u660e\u308b\u304f\u3057\u305f\u308a\u6697\u304f\u3057\u305f\u308a\u3059\u308b\u51e6\u7406\u3067\u3059\u3002\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u306f\u3001\u660e\u308b\u3044\u90e8\u5206\u3068\u6697\u3044\u90e8\u5206\u306e\u5dee\u3092\u5f37\u304f\u3057\u305f\u308a\u5f31\u304f\u3057\u305f\u308a\u3059\u308b\u51e6\u7406\u3067\u3059\u3002<\/p>\n<div class=\"listCaption\">\u30ea\u30b9\u30c82<\/div>\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>import gab.opencv.*;\nimport processing.video.*;\nimport java.awt.*;\n\nCapture video;\nOpenCV opencv;\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  opencv = new OpenCV(this, 640, 480);\n  video.start();\n}\n\nvoid draw() {\n  opencv.loadImage(video);\n\n  \/\/ mouseX\u304c\u5de6\u7aef\u306a\u3089-255\u3001\u53f3\u7aef\u306a\u3089255\u306b\u306a\u308b\n  \/\/ \u3064\u307e\u308a\u3001\u30de\u30a6\u30b9\u306e\u6a2a\u4f4d\u7f6e\u3067\u660e\u308b\u3055\u3092\u5909\u3048\u308b\n  int b = int(map(mouseX, 0, width, -255, 255));\n  opencv.brightness(b);\n\n  \/\/ \u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u3092\u8a66\u3057\u305f\u3044\u5834\u5408\u306f\u3053\u3061\u3089\u3092\u4f7f\u3046\n  \/\/ float c = map(mouseX, 0, width, 0.0, 5.0);\n  \/\/ opencv.contrast(c);\n\n  image(opencv.getOutput(), 0, 0, width, height);\n}\n\nvoid captureEvent(Capture c) {\n  c.read();\n}<\/code><\/pre><\/div>\n<div class=\"ocvP5Wrap\"><div id=\"ocv-list2\" class=\"ocvP5Canvas\"><\/div><div class=\"ocvP5Controls\"><button id=\"ocv-play2\" class=\"ocvP5Button\" type=\"button\">\u518d\u751f<\/button><button id=\"ocv-reset2\" class=\"ocvP5Button\" type=\"button\">\u30ea\u30bb\u30c3\u30c8<\/button><span class=\"ocvMiniLabel\">\u660e\u308b\u3055<\/span><input id=\"ocv-brightness\" class=\"ocvSlider\" type=\"range\" min=\"-255\" max=\"255\" value=\"0\"><span class=\"ocvMiniLabel\">\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8<\/span><input id=\"ocv-contrast\" class=\"ocvSlider\" type=\"range\" min=\"0\" max=\"300\" value=\"100\"><\/div><div class=\"ocvP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1a\u660e\u308b\u3055\u3068\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u3092\u5909\u66f4\u3059\u308b<\/div><\/div>\n\n<h2 class=\"wp-block-heading\">4. \u30a8\u30c3\u30b8\u306e\u691c\u51fa<\/h2>\n<p class=\"wp-block-paragraph\">\u30a8\u30c3\u30b8\u691c\u51fa\u306f\u3001\u753b\u50cf\u306e\u4e2d\u3067\u8272\u3084\u660e\u308b\u3055\u304c\u5927\u304d\u304f\u5909\u5316\u3057\u3066\u3044\u308b\u5834\u6240\u3092\u53d6\u308a\u51fa\u3059\u51e6\u7406\u3067\u3059\u3002\u8f2a\u90ed\u7dda\u306e\u3088\u3046\u306a\u753b\u50cf\u3092\u4f5c\u308b\u3068\u304d\u306b\u4f7f\u3044\u307e\u3059\u3002<\/p>\n<div class=\"listCaption\">\u30ea\u30b9\u30c83<\/div>\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>import gab.opencv.*;\nimport processing.video.*;\nimport java.awt.*;\n\nCapture video;\nOpenCV opencv;\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  opencv = new OpenCV(this, 640, 480);\n  video.start();\n}\n\nvoid draw() {\n  opencv.loadImage(video);\n\n  \/\/ Canny\u30a8\u30c3\u30b8\u691c\u51fa\n  \/\/ 50\u3088\u308a\u5f31\u3044\u5909\u5316\u306f\u7121\u8996\u3057\u3001200\u3088\u308a\u5f37\u3044\u5909\u5316\u306f\u30a8\u30c3\u30b8\u3068\u3057\u3066\u6271\u3046\n  opencv.findCannyEdges(50, 200);\n\n  image(opencv.getOutput(), 0, 0, width, height);\n}\n\nvoid captureEvent(Capture c) {\n  c.read();\n}<\/code><\/pre><\/div>\n<div class=\"ocvP5Wrap\"><div id=\"ocv-list3\" class=\"ocvP5Canvas\"><\/div><div class=\"ocvP5Controls\"><button id=\"ocv-play3\" class=\"ocvP5Button\" type=\"button\">\u518d\u751f<\/button><button id=\"ocv-reset3\" class=\"ocvP5Button\" type=\"button\">\u30ea\u30bb\u30c3\u30c8<\/button><\/div><div class=\"ocvP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1a\u30a8\u30c3\u30b8\u691c\u51fa\u98a8\u306e\u51e6\u7406\u3002\u660e\u308b\u3055\u306e\u5dee\u304c\u5927\u304d\u3044\u5834\u6240\u3092\u7dda\u3068\u3057\u3066\u8868\u793a\u3059\u308b<\/div><\/div>\n\n<h2 class=\"wp-block-heading\">5. \u4e8c\u5024\u5316<\/h2>\n<p class=\"wp-block-paragraph\">\u4e8c\u5024\u5316\u306f\u3001\u753b\u50cf\u3092\u767d\u3068\u9ed2\u306e2\u8272\u306b\u5206\u3051\u308b\u51e6\u7406\u3067\u3059\u3002\u660e\u308b\u3055\u304c\u3057\u304d\u3044\u5024\u3088\u308a\u5927\u304d\u3051\u308c\u3070\u767d\u3001\u5c0f\u3055\u3051\u308c\u3070\u9ed2\u306b\u3057\u307e\u3059\u3002<\/p>\n<div class=\"listCaption\">\u30ea\u30b9\u30c84<\/div>\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>import gab.opencv.*;\nimport processing.video.*;\nimport java.awt.*;\n\nCapture video;\nOpenCV opencv;\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  opencv = new OpenCV(this, 640, 480);\n  video.start();\n}\n\nvoid draw() {\n  opencv.loadImage(video);\n\n  \/\/ \u3057\u304d\u3044\u502450\u3067\u767d\u9ed2\u306b\u5206\u3051\u308b\n  opencv.threshold(50);\n\n  image(opencv.getOutput(), 0, 0, width, height);\n}\n\nvoid captureEvent(Capture c) {\n  c.read();\n}<\/code><\/pre><\/div>\n<div class=\"ocvP5Wrap\"><div id=\"ocv-list4\" class=\"ocvP5Canvas\"><\/div><div class=\"ocvP5Controls\"><button id=\"ocv-play4\" class=\"ocvP5Button\" type=\"button\">\u518d\u751f<\/button><button id=\"ocv-reset4\" class=\"ocvP5Button\" type=\"button\">\u30ea\u30bb\u30c3\u30c8<\/button><span class=\"ocvMiniLabel\">\u3057\u304d\u3044\u5024<\/span><input id=\"ocv-threshold\" class=\"ocvSlider\" type=\"range\" min=\"0\" max=\"255\" value=\"127\"><\/div><div class=\"ocvP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1a\u3057\u304d\u3044\u5024\u3067\u767d\u9ed22\u8272\u306b\u5206\u3051\u308b<\/div><\/div>\n\n<h2 class=\"wp-block-heading\">6. \u307c\u304b\u3057<\/h2>\n<p class=\"wp-block-paragraph\">\u307c\u304b\u3057\u306f\u3001\u5468\u56f2\u306e\u30d4\u30af\u30bb\u30eb\u306e\u8272\u3092\u6df7\u305c\u3066\u3001\u753b\u50cf\u3092\u306a\u3081\u3089\u304b\u306b\u3059\u308b\u51e6\u7406\u3067\u3059\u3002\u30ce\u30a4\u30ba\u3092\u6e1b\u3089\u3057\u305f\u308a\u3001\u67d4\u3089\u304b\u3044\u5370\u8c61\u306b\u3057\u305f\u308a\u3067\u304d\u307e\u3059\u3002<\/p>\n<div class=\"listCaption\">\u30ea\u30b9\u30c85<\/div>\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>import gab.opencv.*;\nimport processing.video.*;\nimport java.awt.*;\n\nCapture video;\nOpenCV opencv;\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  opencv = new OpenCV(this, 640, 480);\n  video.start();\n}\n\nvoid draw() {\n  opencv.loadImage(video);\n\n  \/\/ \u5024\u3092\u5927\u304d\u304f\u3059\u308b\u3068\u3001\u307c\u304b\u3057\u304c\u5f37\u304f\u306a\u308b\n  opencv.blur(12);\n\n  image(opencv.getOutput(), 0, 0, width, height);\n}\n\nvoid captureEvent(Capture c) {\n  c.read();\n}<\/code><\/pre><\/div>\n<div class=\"ocvP5Wrap\"><div id=\"ocv-list5\" class=\"ocvP5Canvas\"><\/div><div class=\"ocvP5Controls\"><button id=\"ocv-play5\" class=\"ocvP5Button\" type=\"button\">\u518d\u751f<\/button><button id=\"ocv-reset5\" class=\"ocvP5Button\" type=\"button\">\u30ea\u30bb\u30c3\u30c8<\/button><span class=\"ocvMiniLabel\">\u307c\u304b\u3057<\/span><input id=\"ocv-blur\" class=\"ocvSlider\" type=\"range\" min=\"0\" max=\"12\" value=\"4\"><\/div><div class=\"ocvP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1a\u6620\u50cf\u3092\u307c\u304b\u3059<\/div><\/div>\n\n<h2 class=\"wp-block-heading\">7. \u9854\u306e\u691c\u51fa<\/h2>\n<p class=\"wp-block-paragraph\">OpenCV for Processing\u3067\u306f\u3001\u9854\u691c\u51fa\u7528\u306e\u30c7\u30fc\u30bf\u3092\u8aad\u307f\u8fbc\u3080\u3053\u3068\u3067\u3001\u9854\u306e\u4f4d\u7f6e\u3092\u56db\u89d2\u5f62\u3067\u56f2\u3080\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002OpenCV\u306b\u306f\u9854\u4ee5\u5916\u306b\u3082\u3001\u76ee\u3001\u9f3b\u3001\u53e3\u306a\u3069\u3092\u691c\u51fa\u3059\u308b\u305f\u3081\u306e\u30c7\u30fc\u30bf\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<div class=\"listCaption\">\u30ea\u30b9\u30c86<\/div>\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>import gab.opencv.*;\nimport processing.video.*;\nimport java.awt.*;\n\nCapture video;\nOpenCV opencv;\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  opencv = new OpenCV(this, 640, 480);\n\n  \/\/ \u9854\u691c\u51fa\u7528\u306e\u30c7\u30fc\u30bf\u3092\u8aad\u307f\u8fbc\u3080\n  opencv.loadCascade(OpenCV.CASCADE_FRONTALFACE);\n\n  video.start();\n}\n\nvoid draw() {\n  \/\/ 640\u00d7480\u306e\u6620\u50cf\u3092\u305d\u306e\u307e\u307e640\u00d7480\u3067\u8868\u793a\u3059\u308b\n\n  opencv.loadImage(video);\n  image(video, 0, 0, width, height);\n\n  Rectangle[] faces = opencv.detect();\n\n  noFill();\n  stroke(0, 255, 0);\n  strokeWeight(3);\n\n  for (int i = 0; i < faces.length; i++) {\n    rect(faces[i].x, faces[i].y, faces[i].width, faces[i].height);\n  }\n}\n\nvoid captureEvent(Capture c) {\n  c.read();\n}<\/code><\/pre><\/div>\n<div class=\"ocvP5Wrap\"><div id=\"ocv-list6\" class=\"ocvP5Canvas\"><\/div><div class=\"ocvP5Controls\"><button id=\"ocv-play6\" class=\"ocvP5Button\" type=\"button\">\u518d\u751f<\/button><button id=\"ocv-reset6\" class=\"ocvP5Button\" type=\"button\">\u30ea\u30bb\u30c3\u30c8<\/button><\/div><div class=\"ocvP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1a\u30d6\u30e9\u30a6\u30b6\u304cFaceDetector API\u306b\u5bfe\u5fdc\u3057\u3066\u3044\u308b\u5834\u5408\u3001\u9854\u3092\u7dd1\u306e\u56db\u89d2\u3067\u56f2\u3080<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">8. \u52d5\u304d\u306e\u691c\u51fa<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u524d\u306e\u30d5\u30ec\u30fc\u30e0\u3068\u73fe\u5728\u306e\u30d5\u30ec\u30fc\u30e0\u3092\u6bd4\u3079\u308b\u3068\u3001\u52d5\u3044\u3066\u3044\u308b\u90e8\u5206\u3092\u53d6\u308a\u51fa\u3059\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3053\u308c\u306f\u300c\u30d5\u30ec\u30fc\u30e0\u5dee\u5206\u300d\u3068\u547c\u3070\u308c\u308b\u8003\u3048\u65b9\u3067\u3059\u3002\u3053\u3053\u3067\u306fOpenCV\u306e<code>diff()<\/code>\u3068<code>threshold()<\/code>\u3092\u4f7f\u3044\u307e\u3059\u3002\u80cc\u666f\u304c\u3042\u307e\u308a\u52d5\u304b\u306a\u3044\u72b6\u614b\u3067\u3001\u4eba\u3084\u624b\u3060\u3051\u304c\u52d5\u304f\u3068\u3001\u305d\u306e\u90e8\u5206\u3060\u3051\u304c\u767d\u304f\u8868\u793a\u3055\u308c\u307e\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 gab.opencv.*;\nimport processing.video.*;\nimport java.awt.*;\n\nCapture video;\nOpenCV opencv;\nPImage previousFrame;\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  opencv = new OpenCV(this, 640, 480);\n\n  \/\/ \u524d\u306e\u30d5\u30ec\u30fc\u30e0\u3092\u4fdd\u5b58\u3057\u3066\u304a\u304f\u305f\u3081\u306e\u753b\u50cf\n  previousFrame = createImage(width, height, RGB);\n}\n\nvoid draw() {\n  if (video.available()) {\n    video.read();\n  }\n\n  \/\/ \u73fe\u5728\u306e\u30ab\u30e1\u30e9\u6620\u50cf\u3092OpenCV\u306b\u8aad\u307f\u8fbc\u3080\n  opencv.loadImage(video);\n\n  \/\/ \u73fe\u5728\u306e\u6620\u50cf\u3068\u524d\u306e\u30d5\u30ec\u30fc\u30e0\u306e\u5dee\u5206\u3092\u8a08\u7b97\u3059\u308b\n  \/\/ \u52d5\u3044\u3066\u3044\u308b\u90e8\u5206\u307b\u3069\u660e\u308b\u304f\u306a\u308b\n  opencv.diff(previousFrame);\n\n  \/\/ \u5dee\u5206\u3092\u767d\u9ed2\u306b\u5206\u3051\u308b\n  \/\/ \u5024\u3092\u5c0f\u3055\u304f\u3059\u308b\u3068\u5c0f\u3055\u306a\u52d5\u304d\u3082\u691c\u51fa\u3057\u3084\u3059\u304f\u306a\u308b\n  opencv.threshold(40);\n\n  image(opencv.getOutput(), 0, 0, width, height);\n\n  \/\/ \u6b21\u306edraw()\u3067\u6bd4\u8f03\u3059\u308b\u305f\u3081\u3001\u73fe\u5728\u306e\u6620\u50cf\u3092\u4fdd\u5b58\u3059\u308b\n  previousFrame.copy(video, 0, 0, video.width, video.height, 0, 0, width, height);\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"ocvP5Wrap\"><div id=\"ocv-list7\" class=\"ocvP5Canvas\"><\/div><div class=\"ocvP5Controls\"><button id=\"ocv-play7\" class=\"ocvP5Button\" type=\"button\">\u518d\u751f<\/button><button id=\"ocv-reset7\" class=\"ocvP5Button\" type=\"button\">\u30ea\u30bb\u30c3\u30c8<\/button><\/div><div class=\"ocvP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1a\u524d\u30d5\u30ec\u30fc\u30e0\u3068\u306e\u5dee\u5206\u3067\u3001\u52d5\u3044\u3066\u3044\u308b\u90e8\u5206\u3060\u3051\u3092\u767d\u304f\u8868\u793a\u3059\u308b<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u306e\u51e6\u7406\u306f\u3001\u30ab\u30e1\u30e9\u306e\u524d\u3067\u624b\u3092\u52d5\u304b\u3059\u3068\u52b9\u679c\u304c\u308f\u304b\u308a\u3084\u3059\u304f\u306a\u308a\u307e\u3059\u3002\u80cc\u666f\u304c\u9759\u6b62\u3057\u3066\u3044\u308b\u307b\u3069\u3001\u52d5\u3044\u3066\u3044\u308b\u90e8\u5206\u3060\u3051\u304c\u5f37\u8abf\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">9. RGB\u30c1\u30e3\u30f3\u30cd\u30eb\u3092\u305a\u3089\u3059<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u6620\u50cf\u306e\u8d64\u30fb\u7dd1\u30fb\u9752\u306e\u6210\u5206\u3092\u5c11\u3057\u305a\u3064\u305a\u3089\u3057\u3066\u8868\u793a\u3059\u308b\u3068\u3001\u8272\u53ce\u5dee\u3084\u30b0\u30ea\u30c3\u30c1\u306e\u3088\u3046\u306a\u52b9\u679c\u306b\u306a\u308a\u307e\u3059\u3002\u3053\u3053\u3067\u306fOpenCV\u306e<code>getR()<\/code>\u3001<code>getG()<\/code>\u3001<code>getB()<\/code>\u3067\u8272\u306e\u30c1\u30e3\u30f3\u30cd\u30eb\u3092\u53d6\u308a\u51fa\u3057\u307e\u3059\u3002\u753b\u50cf\u51e6\u7406\u306e\u57fa\u672c\u3067\u3042\u308b\u300c\u8272\u306e\u6210\u5206\u3092\u5206\u3051\u3066\u6271\u3046\u300d\u3053\u3068\u304c\u3001\u8996\u899a\u7684\u306b\u308f\u304b\u308a\u3084\u3059\u3044\u30b5\u30f3\u30d7\u30eb\u3067\u3059\u3002<\/p>\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 gab.opencv.*;\nimport processing.video.*;\nimport java.awt.*;\n\nCapture video;\nOpenCV opencv;\n\nPImage redImg;\nPImage greenImg;\nPImage blueImg;\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  opencv = new OpenCV(this, 640, 480);\n\n  redImg = createImage(width, height, RGB);\n  greenImg = createImage(width, height, RGB);\n  blueImg = createImage(width, height, RGB);\n\n  loadPixels();\n}\n\nvoid draw() {\n  if (video.available()) {\n    video.read();\n  }\n\n  \/\/ OpenCV\u3067\u30ab\u30e9\u30fc\u753b\u50cf\u3068\u3057\u3066\u8aad\u307f\u8fbc\u3080\n  opencv.loadImage(video);\n  opencv.useColor(RGB);\n\n  \/\/ OpenCV\u3067\u8d64\u30fb\u7dd1\u30fb\u9752\u306e\u30c1\u30e3\u30f3\u30cd\u30eb\u3092\u53d6\u308a\u51fa\u3059\n  opencv.toPImage(opencv.getR(), redImg);\n  opencv.toPImage(opencv.getG(), greenImg);\n  opencv.toPImage(opencv.getB(), blueImg);\n\n  redImg.loadPixels();\n  greenImg.loadPixels();\n  blueImg.loadPixels();\n  loadPixels();\n\n  int shift = 12;  \/\/ \u8272\u3092\u305a\u3089\u3059\u91cf\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\n      \/\/ \u8d64\u306f\u5c11\u3057\u5de6\u3001\u7dd1\u306f\u4e2d\u592e\u3001\u9752\u306f\u5c11\u3057\u53f3\u304b\u3089\u53d6\u308a\u51fa\u3059\n      int rx = constrain(x - shift, 0, width - 1);\n      int gx = x;\n      int bx = constrain(x + shift, 0, width - 1);\n\n      int rIndex = y * width + rx;\n      int gIndex = y * width + gx;\n      int bIndex = y * width + bx;\n\n      float r = brightness(redImg.pixels[rIndex]);\n      float g = brightness(greenImg.pixels[gIndex]);\n      float b = brightness(blueImg.pixels[bIndex]);\n\n      pixels[index] = color(r, g, b);\n    }\n  }\n\n  updatePixels();\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"ocvP5Wrap\"><div id=\"ocv-list8\" class=\"ocvP5Canvas\"><\/div><div class=\"ocvP5Controls\"><button id=\"ocv-play8\" class=\"ocvP5Button\" type=\"button\">\u518d\u751f<\/button><button id=\"ocv-reset8\" class=\"ocvP5Button\" type=\"button\">\u30ea\u30bb\u30c3\u30c8<\/button><span class=\"ocvMiniLabel\">\u305a\u308c<\/span><input id=\"ocv-rgb-shift\" class=\"ocvSlider\" type=\"range\" min=\"0\" max=\"40\" value=\"12\"><\/div><div class=\"ocvP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1aRGB\u30c1\u30e3\u30f3\u30cd\u30eb\u3092\u305a\u3089\u3057\u3066\u3001\u8272\u53ce\u5dee\u30fb\u30b0\u30ea\u30c3\u30c1\u98a8\u306b\u8868\u793a\u3059\u308b<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><code>shift<\/code>\u306e\u5024\u3092\u5927\u304d\u304f\u3059\u308b\u3068\u3001\u8d64\u30fb\u7dd1\u30fb\u9752\u306e\u305a\u308c\u304c\u5927\u304d\u304f\u306a\u308a\u307e\u3059\u3002\u8272\u3092\u5206\u89e3\u3057\u3066\u5225\u3005\u306b\u6271\u3046\u3060\u3051\u3067\u3082\u3001\u6620\u50cf\u306e\u5370\u8c61\u3092\u5927\u304d\u304f\u5909\u3048\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u307e\u3068\u3081<\/h2>\n<figure class=\"wp-block-table\"><table><tbody><tr><th>\u51e6\u7406<\/th><th>\u610f\u5473<\/th><\/tr><tr><td>\u30ab\u30e1\u30e9\u6620\u50cf\u306e\u8868\u793a<\/td><td>\u30ab\u30e1\u30e9\u304b\u3089\u306e\u6620\u50cf\u3092\u753b\u9762\u306b\u8868\u793a\u3059\u308b<\/td><\/tr><tr><td>\u660e\u308b\u3055<\/td><td>\u753b\u50cf\u5168\u4f53\u3092\u660e\u308b\u304f\uff0f\u6697\u304f\u3059\u308b<\/td><\/tr><tr><td>\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8<\/td><td>\u660e\u6697\u306e\u5dee\u3092\u5f37\u304f\uff0f\u5f31\u304f\u3059\u308b<\/td><\/tr><tr><td>\u30a8\u30c3\u30b8\u691c\u51fa<\/td><td>\u8f2a\u90ed\u3084\u5883\u754c\u7dda\u3092\u53d6\u308a\u51fa\u3059<\/td><\/tr><tr><td>\u4e8c\u5024\u5316<\/td><td>\u767d\u3068\u9ed2\u306e2\u8272\u306b\u5206\u3051\u308b<\/td><\/tr><tr><td>\u307c\u304b\u3057<\/td><td>\u5468\u56f2\u306e\u8272\u3092\u6df7\u305c\u3066\u753b\u50cf\u3092\u306a\u3081\u3089\u304b\u306b\u3059\u308b<\/td><\/tr><tr><td>\u9854\u691c\u51fa<\/td><td>\u753b\u50cf\u306e\u4e2d\u304b\u3089\u9854\u3089\u3057\u3044\u9818\u57df\u3092\u63a2\u3059<\/td><\/tr><tr><td>\u52d5\u304d\u306e\u691c\u51fa<\/td><td>\u524d\u30d5\u30ec\u30fc\u30e0\u3068\u306e\u5dee\u3092\u4f7f\u3063\u3066\u3001\u52d5\u3044\u3066\u3044\u308b\u90e8\u5206\u3092\u53d6\u308a\u51fa\u3059<\/td><\/tr><tr><td>RGB\u30c1\u30e3\u30f3\u30cd\u30eb\u305a\u3089\u3057<\/td><td>\u8d64\u30fb\u7dd1\u30fb\u9752\u306e\u6210\u5206\u3092\u5225\u3005\u306e\u4f4d\u7f6e\u304b\u3089\u53d6\u308a\u51fa\u3057\u3066\u3001\u30b0\u30ea\u30c3\u30c1\u98a8\u306b\u8868\u793a\u3059\u308b<\/td><\/tr><\/tbody><\/table><\/figure>\n<p class=\"wp-block-paragraph\"><strong>\u4eca\u65e5\u306e\u91cd\u8981\u30dd\u30a4\u30f3\u30c8\uff1a<\/strong>OpenCV for Processing\u3092\u4f7f\u3046\u3068\u3001\u8907\u96d1\u306a\u753b\u50cf\u51e6\u7406\u3092\u77ed\u3044\u30b3\u30fc\u30c9\u3067\u5b9f\u884c\u3067\u304d\u307e\u3059\u3002\u307e\u305a\u306f\u3001\u30ab\u30e1\u30e9\u6620\u50cf\u3092\u8aad\u307f\u8fbc\u307f\u3001\u660e\u308b\u3055\u3001\u30a8\u30c3\u30b8\u3001\u4e8c\u5024\u5316\u3001\u307c\u304b\u3057\u306e\u3088\u3046\u306a\u57fa\u672c\u51e6\u7406\u3092\u8a66\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n<script>\n(function(){\nif(typeof p5==='undefined'){console.warn('p5.js\u304c\u8aad\u307f\u8fbc\u307e\u308c\u3066\u3044\u307e\u305b\u3093\u3002');return;}\nlet sharedVideo=null,cameraReady=false,faceDetector=null;\nconst status=document.getElementById('ocv-camera-status');\nconst startButton=document.getElementById('ocv-start-camera');\nconst stopButton=document.getElementById('ocv-stop-camera');\nasync function startCamera(){try{if(!sharedVideo){sharedVideo=document.createElement('video');sharedVideo.autoplay=true;sharedVideo.muted=true;sharedVideo.playsInline=true;sharedVideo.style.display='none';document.body.appendChild(sharedVideo);}const stream=await navigator.mediaDevices.getUserMedia({video: { width: { ideal: 320 }, height: { ideal: 240 } },audio:false});sharedVideo.srcObject=stream;await sharedVideo.play();cameraReady=true;if('FaceDetector' in window){faceDetector=new FaceDetector({fastMode:true,maxDetectedFaces:5});}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';}catch(e){cameraReady=false;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';console.error(e);}}\nfunction stopCamera(){if(sharedVideo&&sharedVideo.srcObject){sharedVideo.srcObject.getTracks().forEach(function(track){track.stop();});sharedVideo.srcObject=null;}cameraReady=false;if(status)status.textContent='\u30ab\u30e1\u30e9\u3092\u7d42\u4e86\u3057\u307e\u3057\u305f\u3002';}\nif(startButton)startButton.addEventListener('click',startCamera);if(stopButton)stopButton.addEventListener('click',stopCamera);\nfunction attachCanvas(p,id){const c=p.createCanvas(400,400);c.parent(id);}function drawWaiting(p){p.background(245);p.fill(80);p.noStroke();p.textAlign(p.CENTER,p.CENTER);p.textSize(14);p.text('\u30ab\u30e1\u30e9\u958b\u59cb\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3066\u304f\u3060\u3055\u3044',p.width\/2,p.height\/2);}function connectPlayButton(p,buttonId,resetFunction){const button=document.getElementById(buttonId);let playing=false;if(!button)return function(){};button.addEventListener('click',function(){if(!playing){p.loop();button.textContent='\u505c\u6b62';playing=true;}else{p.noLoop();button.textContent='\u518d\u751f';playing=false;}});return function(){p.noLoop();button.textContent='\u518d\u751f';playing=false;if(resetFunction)resetFunction();};}function button(id,fn){const el=document.getElementById(id);if(el)el.addEventListener('click',fn);}function setupControls(p,num,resetFn){const stopAndReset=connectPlayButton(p,'ocv-play'+num,resetFn);button('ocv-reset'+num,stopAndReset);}function drawVideo(p){if(!cameraReady||!sharedVideo||sharedVideo.readyState<2){drawWaiting(p);return false;}p.drawingContext.drawImage(sharedVideo,0,0,p.width,p.height);return true;}function getFrame(p){if(!cameraReady||!sharedVideo||sharedVideo.readyState<2)return null;const ctx=p.drawingContext;ctx.drawImage(sharedVideo,0,0,p.width,p.height);return ctx.getImageData(0,0,p.width,p.height);}function putFrame(p,img){p.drawingContext.putImageData(img,0,0);}function makeSketch(num,drawFn){new p5(function(p){p.setup=function(){attachCanvas(p,'ocv-list'+num);drawWaiting(p);p.noLoop();setupControls(p,num,function(){drawWaiting(p);});};p.draw=function(){if(!cameraReady){drawWaiting(p);return;}drawFn(p);};});}\nmakeSketch(1,function(p){p.background(255);drawVideo(p);});\nmakeSketch(2,function(p){const img=getFrame(p);if(!img){drawWaiting(p);return;}const bs=document.getElementById('ocv-brightness'),cs=document.getElementById('ocv-contrast');const brightness=bs?Number(bs.value):0,contrast=cs?Number(cs.value)\/100:1;const data=img.data;for(let i=0;i<data.length;i+=4){data[i]=Math.max(0,Math.min(255,(data[i]-128)*contrast+128+brightness));data[i+1]=Math.max(0,Math.min(255,(data[i+1]-128)*contrast+128+brightness));data[i+2]=Math.max(0,Math.min(255,(data[i+2]-128)*contrast+128+brightness));}putFrame(p,img);});\nmakeSketch(3,function(p){const img=getFrame(p);if(!img){drawWaiting(p);return;}const src=img.data;const out=p.drawingContext.createImageData(p.width,p.height);const dst=out.data,w=p.width,h=p.height;for(let y=1;y<h-1;y++){for(let x=1;x<w-1;x++){const i=(y*w+x)*4,left=(y*w+x-1)*4,right=(y*w+x+1)*4,up=((y-1)*w+x)*4,down=((y+1)*w+x)*4;const gx=Math.abs(src[right]-src[left])+Math.abs(src[right+1]-src[left+1])+Math.abs(src[right+2]-src[left+2]);const gy=Math.abs(src[down]-src[up])+Math.abs(src[down+1]-src[up+1])+Math.abs(src[down+2]-src[up+2]);const edge=gx+gy>120?255:0;dst[i]=edge;dst[i+1]=edge;dst[i+2]=edge;dst[i+3]=255;}}putFrame(p,out);});\nmakeSketch(4,function(p){const img=getFrame(p);if(!img){drawWaiting(p);return;}const ts=document.getElementById('ocv-threshold');const threshold=ts?Number(ts.value):127;const data=img.data;for(let i=0;i<data.length;i+=4){const gray=(data[i]+data[i+1]+data[i+2])\/3;const v=gray>threshold?255:0;data[i]=v;data[i+1]=v;data[i+2]=v;}putFrame(p,img);});\nmakeSketch(5,function(p){p.background(255);if(!drawVideo(p))return;const bs=document.getElementById('ocv-blur');const blurValue=bs?Number(bs.value):4;if(blurValue>0)p.filter(p.BLUR,blurValue);});\nnew p5(function(p){let detectedFaces=[],lastDetectTime=0;p.setup=function(){attachCanvas(p,'ocv-list6');drawWaiting(p);p.noLoop();setupControls(p,6,function(){detectedFaces=[];drawWaiting(p);});};p.draw=async function(){if(!cameraReady||!sharedVideo||sharedVideo.readyState<2){drawWaiting(p);return;}p.background(255);p.drawingContext.drawImage(sharedVideo,0,0,p.width,p.height);if(!faceDetector){p.fill(255,0,0);p.noStroke();p.textAlign(p.CENTER,p.CENTER);p.textSize(13);p.text('\u3053\u306e\u30d6\u30e9\u30a6\u30b6\u3067\u306fFaceDetector API\u304c\u4f7f\u3048\u307e\u305b\u3093',p.width\/2,p.height-24);return;}const now=Date.now();if(now-lastDetectTime>400){lastDetectTime=now;try{detectedFaces=await faceDetector.detect(sharedVideo);}catch(e){detectedFaces=[];}}p.noFill();p.stroke(0,255,0);p.strokeWeight(3);for(let i=0;i<detectedFaces.length;i++){const box=detectedFaces[i].boundingBox;const sx=p.width\/sharedVideo.videoWidth;const sy=p.height\/sharedVideo.videoHeight;p.rect(box.x*sx,box.y*sy,box.width*sx,box.height*sy);}};});\n\n  makeSketch(7, function(p) {\n    const img = getFrame(p);\n    if (!img) {\n      drawWaiting(p);\n      return;\n    }\n\n    if (!p._previousFrame) {\n      p._previousFrame = new Uint8ClampedArray(img.data);\n    }\n\n    const data = img.data;\n    const prev = p._previousFrame;\n    const out = p.drawingContext.createImageData(p.width, p.height);\n    const dst = out.data;\n\n    for (let i = 0; i < data.length; i += 4) {\n      const diff = Math.abs(data[i] - prev[i])\n                 + Math.abs(data[i + 1] - prev[i + 1])\n                 + Math.abs(data[i + 2] - prev[i + 2]);\n\n      const v = diff > 80 ? 255 : 0;\n      dst[i] = v;\n      dst[i + 1] = v;\n      dst[i + 2] = v;\n      dst[i + 3] = 255;\n\n      prev[i] = data[i];\n      prev[i + 1] = data[i + 1];\n      prev[i + 2] = data[i + 2];\n      prev[i + 3] = 255;\n    }\n\n    putFrame(p, out);\n  });\n\n  makeSketch(8, function(p) {\n    const img = getFrame(p);\n    if (!img) {\n      drawWaiting(p);\n      return;\n    }\n\n    const slider = document.getElementById('ocv-rgb-shift');\n    const shift = slider ? Number(slider.value) : 12;\n\n    const src = img.data;\n    const out = p.drawingContext.createImageData(p.width, p.height);\n    const dst = out.data;\n    const w = p.width;\n    const h = p.height;\n\n    for (let y = 0; y < h; y++) {\n      for (let x = 0; x < w; x++) {\n        const i = (y * w + x) * 4;\n\n        const rx = Math.max(0, Math.min(w - 1, x - shift));\n        const gx = x;\n        const bx = Math.max(0, Math.min(w - 1, x + shift));\n\n        const ri = (y * w + rx) * 4;\n        const gi = (y * w + gx) * 4;\n        const bi = (y * w + bx) * 4;\n\n        dst[i] = src[ri];\n        dst[i + 1] = src[gi + 1];\n        dst[i + 2] = src[bi + 2];\n        dst[i + 3] = 255;\n      }\n    }\n\n    putFrame(p, out);\n  });\n\n\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u3053\u306e\u30da\u30fc\u30b8\u3067\u306f\u3001Processing\u306b\u6a5f\u80fd\u3092\u8ffd\u52a0\u3059\u308b\u300c\u30e9\u30a4\u30d6&#8230; <a href=\"https:\/\/r-dimension.xsrv.jp\/classes_j\/opencv-for-processing-2026\/\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,27],"tags":[],"class_list":["post-14444","post","type-post","status-publish","format-standard","hentry","category-processing","category-27"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/posts\/14444","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=14444"}],"version-history":[{"count":10,"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/posts\/14444\/revisions"}],"predecessor-version":[{"id":14456,"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/posts\/14444\/revisions\/14456"}],"wp:attachment":[{"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/media?parent=14444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/categories?post=14444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/tags?post=14444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}