{"id":14332,"date":"2026-05-20T10:42:40","date_gmt":"2026-05-20T01:42:40","guid":{"rendered":"https:\/\/r-dimension.xsrv.jp\/classes_j\/?p=14332"},"modified":"2026-05-27T00:23:50","modified_gmt":"2026-05-26T15:23:50","slug":"random-2026","status":"publish","type":"post","link":"https:\/\/r-dimension.xsrv.jp\/classes_j\/random-2026\/","title":{"rendered":"\u5076\u7136\u6027\u306e\u30c7\u30b6\u30a4\u30f3\uff08\u30e9\u30f3\u30c0\u30e0\u30fb\u30ce\u30a4\u30ba\uff09"},"content":{"rendered":"\n<style>\n.randomP5Wrap {\n  margin: 1.2em 0 1.8em 0;\n}\n.randomP5Canvas {\n  width: 400px;\n  max-width: 100%;\n  border: 1px solid #ddd;\n  background: #fff;\n}\n.randomP5Caption {\n  font-size: 0.9em;\n  color: #666;\n  margin-top: 0.4em;\n}\n.randomP5Controls {\n  display: flex;\n  gap: 0.5em;\n  align-items: center;\n  margin-top: 0.55em;\n}\n.randomP5Button {\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.randomP5Button:hover {\n  background: #69c!important;\n  border-color: #111;\n  color: #fff;\n}\n.randomConsole {\n  width: 400px;\n  max-width: 100%;\n  min-height: 120px;\n  padding: 12px;\n  border: 1px solid #ddd;\n  background: #111;\n  color: #eee;\n  font-family: Menlo, Consolas, monospace;\n  font-size: 0.86em;\n  line-height: 1.6;\n  white-space: pre-wrap;\n  box-sizing: border-box;\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\u306e<code>random()<\/code>\u3068<code>noise()<\/code>\u3092\u4f7f\u3063\u3066\u3001\u5076\u7136\u6027\u306e\u3042\u308b\u8868\u73fe\u3092\u4f5c\u308b\u65b9\u6cd5\u3092\u5b66\u3073\u307e\u3059\u3002<code>random()<\/code>\u306f\u30b5\u30a4\u30b3\u30ed\u306e\u3088\u3046\u306b\u6bce\u56de\u30d0\u30e9\u30d0\u30e9\u306a\u5024\u3092\u4f5c\u308a\u3001<code>noise()<\/code>\u306f\u6ce2\u306e\u3088\u3046\u306b\u306a\u3081\u3089\u304b\u306b\u5909\u5316\u3059\u308b\u5024\u3092\u4f5c\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u6700\u521d\u306f\u6570\u5024\u3060\u3051\u3092\u78ba\u8a8d\u3057\u3001\u305d\u306e\u3042\u3068\u56f3\u5f62\u306e\u4f4d\u7f6e\u30fb\u5927\u304d\u3055\u30fb\u8272\u30fb\u52d5\u304d\u306b\u5fdc\u7528\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. random()\u3068\u306f<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><code>random()<\/code>\u306f\u3001\u30e9\u30f3\u30c0\u30e0\u306a\u6570\u5024\u3092\u4f5c\u308b\u547d\u4ee4\u3067\u3059\u3002\u305f\u3068\u3048\u3070<code>random(5)<\/code>\u3068\u66f8\u304f\u3068\u3001<code>0.0<\/code>\u4ee5\u4e0a\u3001<code>5.0<\/code>\u672a\u6e80\u306e\u6570\u5024\u304c\u4f5c\u3089\u308c\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>void setup() {\n}\n\nvoid draw() {\n  \/\/ 0\u4ee5\u4e0a5\u672a\u6e80\u306e\u30e9\u30f3\u30c0\u30e0\u306a\u6570\u5024\u3092\u8868\u793a\u3059\u308b\n  println(random(5));\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"randomP5Wrap\">\n  <div id=\"random-console1\" class=\"randomConsole\"><\/div>\n  <div class=\"randomP5Controls\">\n    <button id=\"random-btn1\" class=\"randomP5Button\" type=\"button\">\u518d\u751f\u6210<\/button>\n  <\/div>\n  <div class=\"randomP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1a0\u4ee5\u4e0a5\u672a\u6e80\u306e\u30e9\u30f3\u30c0\u30e0\u306a\u5024\u3092\u8868\u793a<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b9f\u884c\u3059\u308b\u3068\u3001\u30b3\u30f3\u30bd\u30fc\u30eb\u306b<code>0.0<\/code>\u304b\u3089<code>5.0<\/code>\u672a\u6e80\u306e\u6570\u5024\u304c\u6b21\u3005\u3068\u8868\u793a\u3055\u308c\u307e\u3059\u3002\u3053\u3053\u3067\u91cd\u8981\u306a\u306e\u306f\u3001<code>5.0<\/code>\u306f\u542b\u307e\u308c\u306a\u3044\u3068\u3044\u3046\u70b9\u3067\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><th>\u66f8\u304d\u65b9<\/th><th>\u4f5c\u3089\u308c\u308b\u5024<\/th><\/tr><tr><td><code>random(5)<\/code><\/td><td><code>0.0<\/code>\u4ee5\u4e0a\u3001<code>5.0<\/code>\u672a\u6e80<\/td><\/tr><tr><td><code>random(10)<\/code><\/td><td><code>0.0<\/code>\u4ee5\u4e0a\u3001<code>10.0<\/code>\u672a\u6e80<\/td><\/tr><tr><td><code>random(-5, 5)<\/code><\/td><td><code>-5.0<\/code>\u4ee5\u4e0a\u3001<code>5.0<\/code>\u672a\u6e80<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><code>random()<\/code>\u306e\u7d50\u679c\u306f<code>float<\/code>\u578b\u3067\u3059\u3002\u6574\u6570\u3068\u3057\u3066\u4f7f\u3044\u305f\u3044\u5834\u5408\u306f\u3001<code>int()<\/code>\u3067\u5909\u63db\u3057\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>void setup() {\n  \/\/ random(5)\u306f0.0\u4ee5\u4e0a5.0\u672a\u6e80\u306e\u5c0f\u6570\u3092\u4f5c\u308b\n  \/\/ int()\u3067\u5c0f\u6570\u3092\u6574\u6570\u306b\u5909\u63db\u3059\u308b\n  int n = int(random(5));\n\n  println(n);\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"randomP5Wrap\">\n  <div id=\"random-console2\" class=\"randomConsole\"><\/div>\n  <div class=\"randomP5Controls\">\n    <button id=\"random-btn2\" class=\"randomP5Button\" type=\"button\">\u518d\u751f\u6210<\/button>\n  <\/div>\n  <div class=\"randomP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1a0\u301c4\u306e\u6574\u6570\u3092\u8868\u793a<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u306e\u5834\u5408\u3001<code>0<\/code>\u3001<code>1<\/code>\u3001<code>2<\/code>\u3001<code>3<\/code>\u3001<code>4<\/code>\u306e\u3069\u308c\u304b\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. \u30e9\u30f3\u30c0\u30e0\u306a\u4f4d\u7f6e\u306b\u5186\u3092\u63cf\u304f<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u6b21\u306b\u3001<code>random()<\/code>\u3092\u4f7f\u3063\u3066\u5186\u3092\u30e9\u30f3\u30c0\u30e0\u306a\u4f4d\u7f6e\u306b\u63cf\u3044\u3066\u307f\u307e\u3059\u3002<code>random(width)<\/code>\u306f\u753b\u9762\u306e\u6a2a\u5e45\u306e\u7bc4\u56f2\u3001<code>random(height)<\/code>\u306f\u753b\u9762\u306e\u9ad8\u3055\u306e\u7bc4\u56f2\u3067\u5024\u3092\u4f5c\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>void setup() {\n  size(400, 400);\n  background(255);\n}\n\nvoid draw() {\n  \/\/ x\u5ea7\u6a19\u3068y\u5ea7\u6a19\u3092\u30e9\u30f3\u30c0\u30e0\u306b\u6c7a\u3081\u3066\u5186\u3092\u63cf\u304f\n  ellipse(random(width), random(height), 30, 30);\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"randomP5Wrap\">\n  <div id=\"random-list3\" class=\"randomP5Canvas\"><\/div>\n  <div class=\"randomP5Controls\">\n    <button id=\"random-play3\" class=\"randomP5Button\" type=\"button\">\u518d\u751f<\/button>\n    <button id=\"random-reset3\" class=\"randomP5Button\" type=\"button\">\u30ea\u30bb\u30c3\u30c8<\/button>\n  <\/div>\n  <div class=\"randomP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1a\u30e9\u30f3\u30c0\u30e0\u306a\u4f4d\u7f6e\u306b\u5186\u304c\u63cf\u304b\u308c\u3066\u3044\u304f<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u306e\u30b5\u30f3\u30d7\u30eb\u3067\u306f\u3001<code>draw()<\/code>\u304c\u7e70\u308a\u8fd4\u3055\u308c\u308b\u305f\u3073\u306b\u3001\u9055\u3046\u5834\u6240\u3078\u5186\u304c\u63cf\u304b\u308c\u307e\u3059\u3002\u80cc\u666f\u3092\u6bce\u56de\u6d88\u3057\u3066\u3044\u306a\u3044\u306e\u3067\u3001\u5186\u304c\u753b\u9762\u306b\u6b8b\u3063\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u30dd\u30a4\u30f3\u30c8\uff1a<\/strong><code>random(width)<\/code>\u306f\u3001\u753b\u9762\u306e\u5de6\u7aef\u304b\u3089\u53f3\u7aef\u307e\u3067\u306e\u3069\u3053\u304b\u306e\u4f4d\u7f6e\u3092\u4f5c\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. \u30af\u30ea\u30c3\u30af\u3059\u308b\u305f\u3073\u306b\u30e9\u30f3\u30c0\u30e0\u306a\u7d75\u3092\u4f5c\u308b<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u6b21\u306e\u30b5\u30f3\u30d7\u30eb\u3067\u306f\u3001\u30af\u30ea\u30c3\u30af\u3059\u308b\u305f\u3073\u306b\u5186\u306e\u914d\u7f6e\u304c\u5909\u308f\u308a\u307e\u3059\u3002<code>noLoop()<\/code>\u3067\u81ea\u52d5\u66f4\u65b0\u3092\u6b62\u3081\u3001<code>mousePressed()<\/code>\u306e\u4e2d\u3067<code>redraw()<\/code>\u3092\u547c\u3076\u3053\u3068\u3067\u3001\u30af\u30ea\u30c3\u30af\u3057\u305f\u3068\u304d\u3060\u3051\u63cf\u304d\u76f4\u3057\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>void setup() {\n  size(400, 400);\n  noLoop();  \/\/ draw()\u306e\u81ea\u52d5\u304f\u308a\u8fd4\u3057\u3092\u6b62\u3081\u308b\n}\n\nvoid draw() {\n  background(255);\n\n  for (int i = 0; i &lt; 100; i++) {\n    ellipse(random(width), random(height), 30, 30);\n  }\n}\n\nvoid mousePressed() {\n  redraw();  \/\/ \u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u3068\u304d\u3060\u3051draw()\u30921\u56de\u5b9f\u884c\u3059\u308b\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"randomP5Wrap\">\n  <div id=\"random-list4\" class=\"randomP5Canvas\"><\/div>\n  <div class=\"randomP5Controls\">\n    <button id=\"random-btn4\" class=\"randomP5Button\" type=\"button\">\u518d\u751f\u6210<\/button>\n  <\/div>\n  <div class=\"randomP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1a\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u305f\u3073\u306b\u5186\u306e\u914d\u7f6e\u304c\u5909\u308f\u308b<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u306e\u66f8\u304d\u65b9\u306b\u3059\u308b\u3068\u3001\u6bce\u30d5\u30ec\u30fc\u30e0\u63cf\u304d\u5909\u308f\u308b\u306e\u3067\u306f\u306a\u304f\u3001\u30af\u30ea\u30c3\u30af\u3057\u305f\u3068\u304d\u3060\u3051\u65b0\u3057\u3044\u753b\u9762\u304c\u751f\u6210\u3055\u308c\u307e\u3059\u3002\u30e9\u30f3\u30c0\u30e0\u306a\u4f5c\u54c1\u3092\u4f5c\u308b\u3068\u304d\u306b\u4fbf\u5229\u3067\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. \u5927\u304d\u3055\u3068\u8272\u3082\u30e9\u30f3\u30c0\u30e0\u306b\u3059\u308b<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u5186\u306e\u4f4d\u7f6e\u3060\u3051\u3067\u306a\u304f\u3001\u5927\u304d\u3055\u3084\u8272\u306b\u3082<code>random()<\/code>\u3092\u4f7f\u3063\u3066\u307f\u307e\u3059\u3002\u3053\u308c\u3060\u3051\u3067\u3001\u5076\u7136\u6027\u306e\u3042\u308b\u753b\u9762\u3092\u4f5c\u308b\u3053\u3068\u304c\u3067\u304d\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>void setup() {\n  size(400, 400);\n  noLoop();\n}\n\nvoid draw() {\n  background(255);\n\n  for (int i = 0; i &lt; 100; i++) {\n    float s = random(5, 60);  \/\/ \u5186\u306e\u5927\u304d\u3055\u3092\u30e9\u30f3\u30c0\u30e0\u306b\u6c7a\u3081\u308b\n\n    stroke(random(50, 150), random(0, 100), random(50, 200), 200);\n    fill(random(0, 200), random(0, 100), random(100, 255), 50);\n\n    ellipse(random(width), random(height), s, s);\n  }\n}\n\nvoid mousePressed() {\n  redraw();\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"randomP5Wrap\">\n  <div id=\"random-list5\" class=\"randomP5Canvas\"><\/div>\n  <div class=\"randomP5Controls\">\n    <button id=\"random-btn5\" class=\"randomP5Button\" type=\"button\">\u518d\u751f\u6210<\/button>\n  <\/div>\n  <div class=\"randomP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1a\u4f4d\u7f6e\u30fb\u5927\u304d\u3055\u30fb\u8272\u304c\u30e9\u30f3\u30c0\u30e0\u306b\u5909\u308f\u308b<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><code>s<\/code>\u306f\u5186\u306e\u5927\u304d\u3055\u3067\u3059\u3002<code>random(5, 60)<\/code>\u306b\u3088\u3063\u3066\u30015\u304b\u308960\u672a\u6e80\u306e\u5927\u304d\u3055\u304c\u6bce\u56de\u9078\u3070\u308c\u307e\u3059\u3002<code>stroke()<\/code>\u3084<code>fill()<\/code>\u306b\u3082\u30e9\u30f3\u30c0\u30e0\u306a\u5024\u3092\u5165\u308c\u308b\u3053\u3068\u3067\u3001\u7dda\u306e\u8272\u3084\u5857\u308a\u306e\u8272\u3082\u5909\u5316\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. \u52d5\u304d\u306brandom()\u3092\u4f7f\u3046<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><code>random()<\/code>\u306f\u3001\u52d5\u304d\u306b\u3082\u4f7f\u3048\u307e\u3059\u3002\u6b21\u306e\u30b5\u30f3\u30d7\u30eb\u3067\u306f\u3001\u5186\u306e\u4f4d\u7f6e\u306b\u5c11\u3057\u3060\u3051\u30e9\u30f3\u30c0\u30e0\u306a\u5024\u3092\u8db3\u3057\u3066\u3001\u9707\u3048\u3066\u3044\u308b\u3088\u3046\u306a\u52d5\u304d\u3092\u4f5c\u308a\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>void setup() {\n  size(400, 400);\n  noStroke();\n}\n\nvoid draw() {\n  background(255);\n\n  \/\/ \u753b\u9762\u4e2d\u592e\u306e\u4f4d\u7f6e\u306b\u3001\u5c11\u3057\u3060\u3051\u30e9\u30f3\u30c0\u30e0\u306a\u305a\u308c\u3092\u8db3\u3059\n  float x = width\/2 + random(-5, 5);\n  float y = height\/2 + random(-5, 5);\n\n  fill(0);\n  ellipse(x, y, 100, 100);\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"randomP5Wrap\">\n  <div id=\"random-list6\" class=\"randomP5Canvas\"><\/div>\n  <div class=\"randomP5Controls\">\n    <button id=\"random-play6\" class=\"randomP5Button\" type=\"button\">\u518d\u751f<\/button>\n    <button id=\"random-reset6\" class=\"randomP5Button\" type=\"button\">\u30ea\u30bb\u30c3\u30c8<\/button>\n  <\/div>\n  <div class=\"randomP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1a\u5186\u304c\u7d30\u304b\u304f\u9707\u3048\u308b<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><code>random(-5, 5)<\/code>\u306b\u3088\u3063\u3066\u3001\u4e2d\u5fc3\u4f4d\u7f6e\u304b\u3089\u5c11\u3057\u3060\u3051\u305a\u308c\u305f\u5834\u6240\u306b\u5186\u304c\u63cf\u304b\u308c\u307e\u3059\u3002\u6bce\u30d5\u30ec\u30fc\u30e0\u305a\u308c\u65b9\u304c\u5909\u308f\u308b\u305f\u3081\u3001\u5186\u304c\u7d30\u304b\u304f\u632f\u52d5\u3057\u3066\u3044\u308b\u3088\u3046\u306b\u898b\u3048\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">6. \u8272\u306brandom()\u3092\u4f7f\u3046<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u80cc\u666f\u8272\u306b<code>random()<\/code>\u3092\u4f7f\u3046\u3068\u3001\u8272\u304c\u30c1\u30ab\u30c1\u30ab\u5909\u5316\u3057\u307e\u3059\u3002\u5b8c\u5168\u306b\u30e9\u30f3\u30c0\u30e0\u306b\u3059\u308b\u3068\u5909\u5316\u304c\u6fc0\u3057\u3059\u304e\u308b\u306e\u3067\u3001\u3053\u3053\u3067\u306f\u30b0\u30ec\u30fc\u306b\u8fd1\u3044\u8272\u306b\u5c11\u3057\u3060\u3051\u30e9\u30f3\u30c0\u30e0\u306a\u5024\u3092\u8db3\u3057\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>float gray = 120;\n\nvoid setup() {\n  size(400, 400);\n}\n\nvoid draw() {\n  \/\/ \u57fa\u6e96\u306e\u660e\u308b\u3055\u306b\u3001\u5c11\u3057\u3060\u3051\u30e9\u30f3\u30c0\u30e0\u306a\u5909\u5316\u3092\u8db3\u3059\n  float r = gray + random(-20, 20);\n  float g = gray + random(-20, 20);\n  float b = gray + random(-20, 20);\n\n  background(r, g, b);\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"randomP5Wrap\">\n  <div id=\"random-list7\" class=\"randomP5Canvas\"><\/div>\n  <div class=\"randomP5Controls\">\n    <button id=\"random-play7\" class=\"randomP5Button\" type=\"button\">\u518d\u751f<\/button>\n    <button id=\"random-reset7\" class=\"randomP5Button\" type=\"button\">\u30ea\u30bb\u30c3\u30c8<\/button>\n  <\/div>\n  <div class=\"randomP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1a\u80cc\u666f\u8272\u304c\u7d30\u304b\u304f\u5909\u5316\u3059\u308b<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u306e\u30b5\u30f3\u30d7\u30eb\u3067\u306f\u3001\u8d64\u30fb\u7dd1\u30fb\u9752\u306e\u5024\u304c\u6bce\u56de\u5c11\u3057\u305a\u3064\u5909\u308f\u308a\u307e\u3059\u3002\u305d\u306e\u305f\u3081\u3001\u80cc\u666f\u8272\u304c\u7d30\u304b\u304f\u63fa\u308c\u3066\u3044\u308b\u3088\u3046\u306b\u898b\u3048\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">7. noise()\u3068\u306f<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><code>noise()<\/code>\u3082\u4e0d\u898f\u5247\u306a\u5024\u3092\u4f5c\u308b\u547d\u4ee4\u3067\u3059\u304c\u3001<code>random()<\/code>\u3068\u306f\u5927\u304d\u304f\u9055\u3044\u307e\u3059\u3002<code>random()<\/code>\u306f\u6bce\u56de\u30d0\u30e9\u30d0\u30e9\u306a\u5024\u3092\u4f5c\u308a\u307e\u3059\u304c\u3001<code>noise()<\/code>\u306f\u524d\u5f8c\u306e\u5024\u304c\u306a\u3081\u3089\u304b\u306b\u3064\u306a\u304c\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><th>\u547d\u4ee4<\/th><th>\u7279\u5fb4<\/th><th>\u5411\u3044\u3066\u3044\u308b\u8868\u73fe<\/th><\/tr><tr><td><code>random()<\/code><\/td><td>\u6bce\u56de\u30d0\u30e9\u30d0\u30e9\u306b\u5909\u5316\u3059\u308b<\/td><td>\u3061\u3089\u3064\u304d\u3001\u5076\u7136\u306e\u914d\u7f6e\u3001\u7a81\u7136\u306e\u5909\u5316<\/td><\/tr><tr><td><code>noise()<\/code><\/td><td>\u306a\u3081\u3089\u304b\u306b\u5909\u5316\u3059\u308b<\/td><td>\u6ce2\u3001\u96f2\u3001\u5730\u5f62\u3001\u3086\u3063\u304f\u308a\u3057\u305f\u52d5\u304d<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><code>noise()<\/code>\u306e\u7d50\u679c\u306f\u3001\u5e38\u306b<code>0.0<\/code>\u304b\u3089<code>1.0<\/code>\u306e\u7bc4\u56f2\u306b\u306a\u308a\u307e\u3059\u3002\u305d\u306e\u307e\u307e\u3060\u3068\u5c0f\u3055\u3044\u5024\u306a\u306e\u3067\u3001\u753b\u9762\u306e\u5ea7\u6a19\u3084\u8272\u306b\u4f7f\u3046\u3068\u304d\u306f\u3001<code>height<\/code>\u3084<code>255<\/code>\u3092\u304b\u3051\u3066\u4f7f\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">8. noise()\u3067\u306a\u3081\u3089\u304b\u306a\u7dda\u3092\u4f5c\u308b<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u6b21\u306e\u30b5\u30f3\u30d7\u30eb\u3067\u306f\u3001<code>noise()<\/code>\u3092\u4f7f\u3063\u3066\u3001\u306a\u3081\u3089\u304b\u306b\u5909\u5316\u3059\u308b\u7e26\u7dda\u306e\u9577\u3055\u3092\u4f5c\u308a\u307e\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>float n = 0;\nfloat step = 0.02;\n\nvoid setup() {\n  size(400, 400);\n}\n\nvoid draw() {\n  background(255);\n  n = 0;  \/\/ \u5de6\u7aef\u304b\u3089\u540c\u3058\u5f62\u3092\u63cf\u304d\u59cb\u3081\u308b\u305f\u3081\u3001n\u30920\u306b\u623b\u3059\n\n  for (int x = 0; x &lt; width; x += 3) {\n    float y = noise(n) * height;\n    line(x, height, x, height - y);\n    n += step;\n  }\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"randomP5Wrap\">\n  <div id=\"random-list8\" class=\"randomP5Canvas\"><\/div>\n  <div class=\"randomP5Controls\">\n    <button id=\"random-btn8\" class=\"randomP5Button\" type=\"button\">\u518d\u751f\u6210<\/button>\n  <\/div>\n  <div class=\"randomP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1anoise()\u3067\u9ad8\u3055\u304c\u306a\u3081\u3089\u304b\u306b\u3064\u306a\u304c\u308b<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><code>noise(n)<\/code>\u306f<code>0.0<\/code>\u304b\u3089<code>1.0<\/code>\u306e\u5024\u3092\u8fd4\u3057\u307e\u3059\u3002\u305d\u3053\u306b<code>height<\/code>\u3092\u304b\u3051\u308b\u3053\u3068\u3067\u3001\u753b\u9762\u306e\u9ad8\u3055\u306b\u5408\u3063\u305f\u5024\u306b\u5909\u63db\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>step<\/code>\u306f\u3001\u30ce\u30a4\u30ba\u306e\u5909\u5316\u306e\u7d30\u304b\u3055\u3092\u6c7a\u3081\u308b\u5024\u3067\u3059\u3002\u5c0f\u3055\u3044\u307b\u3069\u306a\u3081\u3089\u304b\u306b\u3001\u5927\u304d\u3044\u307b\u3069\u5909\u5316\u304c\u6fc0\u3057\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">9. random()\u3068noise()\u3092\u6bd4\u3079\u308b<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u6b21\u306e\u30b5\u30f3\u30d7\u30eb\u3067\u306f\u3001\u4e0a\u534a\u5206\u306b<code>random()<\/code>\u3001\u4e0b\u534a\u5206\u306b<code>noise()<\/code>\u3092\u4f7f\u3063\u3066\u7dda\u3092\u63cf\u304d\u307e\u3059\u3002\u9055\u3044\u3092\u898b\u6bd4\u3079\u3066\u307f\u307e\u3057\u3087\u3046\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>float n = 0;\nfloat step = 0.02;\n\nvoid setup() {\n  size(400, 400);\n}\n\nvoid draw() {\n  background(255);\n  stroke(0);\n\n  \/\/ \u4e0a\u534a\u5206\uff1arandom()\u3067\u30d0\u30e9\u30d0\u30e9\u306a\u9ad8\u3055\u306e\u7dda\u3092\u63cf\u304f\n  for (int x = 0; x &lt; width; x += 4) {\n    float y = random(180);\n    line(x, 180, x, 180 - y);\n  }\n\n  \/\/ \u4e0b\u534a\u5206\uff1anoise()\u3067\u306a\u3081\u3089\u304b\u306b\u3064\u306a\u304c\u308b\u9ad8\u3055\u306e\u7dda\u3092\u63cf\u304f\n  n = 0;\n  for (int x = 0; x &lt; width; x += 4) {\n    float y = noise(n) * 180;\n    line(x, 400, x, 400 - y);\n    n += step;\n  }\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"randomP5Wrap\">\n  <div id=\"random-list9\" class=\"randomP5Canvas\"><\/div>\n  <div class=\"randomP5Controls\">\n    <button id=\"random-btn9\" class=\"randomP5Button\" type=\"button\">\u518d\u751f\u6210<\/button>\n  <\/div>\n  <div class=\"randomP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1a\u4e0a\u306frandom()\u3001\u4e0b\u306fnoise()<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e0a\u306e<code>random()<\/code>\u306f\u3001\u7dda\u306e\u9ad8\u3055\u304c\u6bce\u56de\u30d0\u30e9\u30d0\u30e9\u3067\u3059\u3002\u4e0b\u306e<code>noise()<\/code>\u306f\u3001\u96a3\u306e\u7dda\u3068\u9ad8\u3055\u304c\u306a\u3081\u3089\u304b\u306b\u3064\u306a\u304c\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">10. step\u306e\u5024\u3092\u30de\u30a6\u30b9\u3067\u5909\u3048\u308b<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><code>noise()<\/code>\u3067\u306f\u3001<code>step<\/code>\u306e\u5024\u304c\u5927\u5207\u3067\u3059\u3002\u6b21\u306e\u30b5\u30f3\u30d7\u30eb\u3067\u306f\u3001\u30de\u30a6\u30b9\u306e\u6a2a\u4f4d\u7f6e\u306b\u3088\u3063\u3066<code>step<\/code>\u3092\u5909\u3048\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>float start = 0;\n\nvoid setup() {\n  size(400, 400);\n}\n\nvoid draw() {\n  background(255);\n\n  float n = start;\n  float step = map(mouseX, 0, width, 0.005, 0.1);\n\n  for (int x = 0; x &lt; width; x += 3) {\n    float y = noise(n) * height;\n    line(x, height, x, height - y);\n    n += step;\n  }\n\n  fill(0);\n  text(\"step = \" + step, 20, height - 20);\n}\n\nvoid mousePressed() {\n  start = random(10);\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"randomP5Wrap\">\n  <div id=\"random-list10\" class=\"randomP5Canvas\"><\/div>\n  <div class=\"randomP5Controls\">\n    <button id=\"random-btn10\" class=\"randomP5Button\" type=\"button\">\u518d\u751f\u6210<\/button>\n  <\/div>\n  <div class=\"randomP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1a\u30de\u30a6\u30b9\u306e\u6a2a\u4f4d\u7f6e\u3067step\u304c\u5909\u308f\u308b<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u30de\u30a6\u30b9\u3092\u5de6\u306b\u52d5\u304b\u3059\u3068\u3001<code>step<\/code>\u304c\u5c0f\u3055\u304f\u306a\u308a\u3001\u5f62\u304c\u306a\u3081\u3089\u304b\u306b\u306a\u308a\u307e\u3059\u3002\u53f3\u306b\u52d5\u304b\u3059\u3068\u3001<code>step<\/code>\u304c\u5927\u304d\u304f\u306a\u308a\u3001\u5f62\u306e\u5909\u5316\u304c\u8352\u304f\u306a\u308a\u307e\u3059\u3002\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u3001\u30ce\u30a4\u30ba\u306e\u958b\u59cb\u4f4d\u7f6e\u304c\u5909\u308f\u308b\u305f\u3081\u3001\u5225\u306e\u5f62\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">11. \u8272\u306bnoise()\u3092\u4f7f\u3046<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><code>noise()<\/code>\u306f\u8272\u306b\u3082\u4f7f\u3048\u307e\u3059\u3002\u6b21\u306e\u30b5\u30f3\u30d7\u30eb\u3067\u306f\u3001\u6a2a\u65b9\u5411\u306b\u5c11\u3057\u305a\u3064\u660e\u308b\u3055\u304c\u5909\u308f\u308b\u30b9\u30c8\u30e9\u30a4\u30d7\u3092\u4f5c\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"listCaption\">\u30ea\u30b9\u30c811<\/div>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>float start = 0;\nfloat step = 0.02;\n\nvoid setup() {\n  size(400, 400);\n}\n\nvoid draw() {\n  float n = start;\n\n  for (int x = 0; x &lt; width; x++) {\n    float gray = noise(n) * 255;\n    stroke(gray);\n    line(x, 0, x, height);\n    n += step;\n  }\n}\n\nvoid mousePressed() {\n  start = random(10);\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"randomP5Wrap\">\n  <div id=\"random-list11\" class=\"randomP5Canvas\"><\/div>\n  <div class=\"randomP5Controls\">\n    <button id=\"random-btn11\" class=\"randomP5Button\" type=\"button\">\u518d\u751f\u6210<\/button>\n  <\/div>\n  <div class=\"randomP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1anoise()\u3067\u660e\u308b\u3055\u304c\u306a\u3081\u3089\u304b\u306b\u5909\u5316\u3059\u308b<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><code>noise(n) * 255<\/code>\u306b\u3088\u3063\u3066\u3001<code>0<\/code>\u304b\u3089<code>255<\/code>\u306e\u660e\u308b\u3055\u3092\u4f5c\u3063\u3066\u3044\u307e\u3059\u3002\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u3001\u30ce\u30a4\u30ba\u306e\u958b\u59cb\u4f4d\u7f6e\u304c\u5909\u308f\u308b\u305f\u3081\u3001\u9055\u3046\u6a21\u69d8\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">12. RGB\u305d\u308c\u305e\u308c\u306bnoise()\u3092\u4f7f\u3046<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u6700\u5f8c\u306b\u3001\u8d64\u30fb\u7dd1\u30fb\u9752\u305d\u308c\u305e\u308c\u306b\u5225\u306e\u30ce\u30a4\u30ba\u3092\u4f7f\u3063\u3066\u307f\u307e\u3059\u3002\u306a\u3081\u3089\u304b\u306b\u8272\u304c\u5909\u5316\u3059\u308b\u30ab\u30e9\u30d5\u30eb\u306a\u30b9\u30c8\u30e9\u30a4\u30d7\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"listCaption\">\u30ea\u30b9\u30c812<\/div>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>float rStart = 0;\nfloat gStart = 10;\nfloat bStart = 20;\nfloat step = 0.01;\n\nvoid setup() {\n  size(400, 400);\n}\n\nvoid draw() {\n  float rNoise = rStart;\n  float gNoise = gStart;\n  float bNoise = bStart;\n\n  for (int x = 0; x &lt; width; x++) {\n    float r = noise(rNoise) * 255;\n    float g = noise(gNoise) * 255;\n    float b = noise(bNoise) * 255;\n\n    stroke(r, g, b);\n    line(x, 0, x, height);\n\n    rNoise += step;\n    gNoise += step;\n    bNoise += step;\n  }\n}\n\nvoid mousePressed() {\n  rStart = random(10);\n  gStart = random(10);\n  bStart = random(10);\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"randomP5Wrap\">\n  <div id=\"random-list12\" class=\"randomP5Canvas\"><\/div>\n  <div class=\"randomP5Controls\">\n    <button id=\"random-btn12\" class=\"randomP5Button\" type=\"button\">\u518d\u751f\u6210<\/button>\n  <\/div>\n  <div class=\"randomP5Caption\">\u5b9f\u884c\u7d50\u679c\uff1aRGB\u305d\u308c\u305e\u308c\u306bnoise()\u3092\u4f7f\u3063\u305f\u8272\u306e\u5909\u5316<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">RGB\u305d\u308c\u305e\u308c\u306b\u5225\u306e\u30ce\u30a4\u30ba\u3092\u4f7f\u3046\u3053\u3068\u3067\u3001\u8272\u306e\u5909\u5316\u304c\u8907\u96d1\u306b\u306a\u308a\u307e\u3059\u3002<code>random()<\/code>\u3060\u3051\u3067\u8272\u3092\u6c7a\u3081\u308b\u3068\u30c1\u30ab\u30c1\u30ab\u3057\u305f\u5370\u8c61\u306b\u306a\u308a\u307e\u3059\u304c\u3001<code>noise()<\/code>\u3092\u4f7f\u3046\u3068\u3001\u306a\u3081\u3089\u304b\u306b\u3064\u306a\u304c\u308b\u8272\u306e\u5909\u5316\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<\/th><th>\u610f\u5473<\/th><\/tr><tr><td><code>random(a)<\/code><\/td><td><code>0.0<\/code>\u4ee5\u4e0a\u3001<code>a<\/code>\u672a\u6e80\u306e\u30e9\u30f3\u30c0\u30e0\u306a\u5024\u3092\u4f5c\u308b<\/td><\/tr><tr><td><code>random(a, b)<\/code><\/td><td><code>a<\/code>\u4ee5\u4e0a\u3001<code>b<\/code>\u672a\u6e80\u306e\u30e9\u30f3\u30c0\u30e0\u306a\u5024\u3092\u4f5c\u308b<\/td><\/tr><tr><td><code>int(random(a))<\/code><\/td><td>\u30e9\u30f3\u30c0\u30e0\u306a\u5024\u3092\u6574\u6570\u306b\u5909\u63db\u3059\u308b<\/td><\/tr><tr><td><code>noise(n)<\/code><\/td><td><code>0.0<\/code>\u304b\u3089<code>1.0<\/code>\u306e\u3001\u306a\u3081\u3089\u304b\u306b\u5909\u5316\u3059\u308b\u5024\u3092\u4f5c\u308b<\/td><\/tr><tr><td><code>step<\/code><\/td><td>\u30ce\u30a4\u30ba\u306e\u5909\u5316\u306e\u7d30\u304b\u3055\u3092\u6c7a\u3081\u308b\u5024<\/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><code>random()<\/code>\u306f\u6bce\u56de\u30d0\u30e9\u30d0\u30e9\u306a\u5909\u5316\u3001<code>noise()<\/code>\u306f\u306a\u3081\u3089\u304b\u306b\u3064\u306a\u304c\u308b\u5909\u5316\u3067\u3059\u3002\u5076\u7136\u6027\u3092\u4f7f\u3063\u305f\u8868\u73fe\u3067\u306f\u3001\u3053\u306e2\u3064\u306e\u9055\u3044\u3092\u610f\u8b58\u3057\u3066\u4f7f\u3044\u5206\u3051\u308b\u3053\u3068\u304c\u5927\u5207\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  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 writeConsole(id, lines) {\n    const el = document.getElementById(id);\n    if (el) el.textContent = lines.join('\\n');\n  }\n\n  function showList1() {\n    const lines = [];\n    for (let i = 0; i < 8; i++) lines.push(String(Math.random() * 5));\n    writeConsole('random-console1', lines);\n  }\n  showList1();\n  button('random-btn1', showList1);\n\n  function showList2() {\n    writeConsole('random-console2', [String(Math.floor(Math.random() * 5))]);\n  }\n  showList2();\n  button('random-btn2', showList2);\n\n  new p5(function(p) {\n    p.setup = function() {\n      attachCanvas(p, 'random-list3');\n      p.background(255);\n      p.noLoop();\n      const reset = function() { p.background(255); };\n      const stopAndReset = connectPlayButton(p, 'random-play3', reset);\n      button('random-reset3', stopAndReset);\n    };\n    p.draw = function() {\n      p.noFill();\n      p.stroke(0);\n      p.ellipse(p.random(p.width), p.random(p.height), 30, 30);\n    };\n  });\n\n  new p5(function(p) {\n    p.setup = function() {\n      attachCanvas(p, 'random-list4');\n      drawRandomCircles();\n      p.noLoop();\n      button('random-btn4', drawRandomCircles);\n    };\n    function drawRandomCircles() {\n      p.background(255);\n      p.noFill();\n      p.stroke(0);\n      for (let i = 0; i < 100; i++) {\n        p.ellipse(p.random(p.width), p.random(p.height), 30, 30);\n      }\n    }\n  });\n\n  new p5(function(p) {\n    p.setup = function() {\n      attachCanvas(p, 'random-list5');\n      drawColorCircles();\n      p.noLoop();\n      button('random-btn5', drawColorCircles);\n    };\n    function drawColorCircles() {\n      p.background(255);\n      for (let i = 0; i < 100; i++) {\n        const s = p.random(5, 60);\n        p.stroke(p.random(50, 150), p.random(0, 100), p.random(50, 200), 200);\n        p.fill(p.random(0, 200), p.random(0, 100), p.random(100, 255), 50);\n        p.ellipse(p.random(p.width), p.random(p.height), s, s);\n      }\n    }\n  });\n\n  new p5(function(p) {\n    p.setup = function() {\n      attachCanvas(p, 'random-list6');\n      p.noStroke();\n      drawFrame();\n      p.noLoop();\n      const reset = function() { drawFrame(); };\n      const stopAndReset = connectPlayButton(p, 'random-play6', reset);\n      button('random-reset6', stopAndReset);\n    };\n    function drawFrame() {\n      p.background(255);\n      const x = p.width \/ 2 + p.random(-5, 5);\n      const y = p.height \/ 2 + p.random(-5, 5);\n      p.fill(0);\n      p.ellipse(x, y, 100, 100);\n    }\n    p.draw = drawFrame;\n  });\n\n  new p5(function(p) {\n    const gray = 120;\n    p.setup = function() {\n      attachCanvas(p, 'random-list7');\n      drawFrame();\n      p.noLoop();\n      const reset = function() { drawFrame(); };\n      const stopAndReset = connectPlayButton(p, 'random-play7', reset);\n      button('random-reset7', stopAndReset);\n    };\n    function drawFrame() {\n      const r = gray + p.random(-20, 20);\n      const g = gray + p.random(-20, 20);\n      const b = gray + p.random(-20, 20);\n      p.background(r, g, b);\n    }\n    p.draw = drawFrame;\n  });\n\n  new p5(function(p) {\n    let start = 0;\n    const step = 0.02;\n    p.setup = function() {\n      attachCanvas(p, 'random-list8');\n      drawNoiseLines();\n      p.noLoop();\n      button('random-btn8', function() {\n        start = p.random(10);\n        drawNoiseLines();\n      });\n    };\n    function drawNoiseLines() {\n      p.background(255);\n      p.stroke(0);\n      let n = start;\n      for (let x = 0; x < p.width; x += 3) {\n        const y = p.noise(n) * p.height;\n        p.line(x, p.height, x, p.height - y);\n        n += step;\n      }\n    }\n  });\n\n  new p5(function(p) {\n    let start = 0;\n    const step = 0.02;\n    p.setup = function() {\n      attachCanvas(p, 'random-list9');\n      drawCompare();\n      p.noLoop();\n      button('random-btn9', function() {\n        start = p.random(10);\n        drawCompare();\n      });\n    };\n    function drawCompare() {\n      p.background(255);\n      p.stroke(0);\n      for (let x = 0; x < p.width; x += 4) {\n        const y = p.random(180);\n        p.line(x, 180, x, 180 - y);\n      }\n      let n = start;\n      for (let x = 0; x < p.width; x += 4) {\n        const y = p.noise(n) * 180;\n        p.line(x, 400, x, 400 - y);\n        n += step;\n      }\n    }\n  });\n\n  new p5(function(p) {\n    let start = 0;\n    p.setup = function() {\n      attachCanvas(p, 'random-list10');\n      drawInteractiveNoise();\n      button('random-btn10', function() {\n        start = p.random(10);\n        drawInteractiveNoise();\n      });\n    };\n    p.draw = drawInteractiveNoise;\n    function drawInteractiveNoise() {\n      p.background(255);\n      let n = start;\n      const step = p.map(p.mouseX, 0, p.width, 0.005, 0.1);\n      p.stroke(0);\n      for (let x = 0; x < p.width; x += 3) {\n        const y = p.noise(n) * p.height;\n        p.line(x, p.height, x, p.height - y);\n        n += step;\n      }\n      p.noStroke();\n      p.fill(0);\n      p.text('step = ' + step.toFixed(3), 20, p.height - 20);\n    }\n  });\n\n  new p5(function(p) {\n    let start = 0;\n    const step = 0.02;\n    p.setup = function() {\n      attachCanvas(p, 'random-list11');\n      drawGrayNoise();\n      p.noLoop();\n      button('random-btn11', function() {\n        start = p.random(10);\n        drawGrayNoise();\n      });\n    };\n    function drawGrayNoise() {\n      let n = start;\n      for (let x = 0; x < p.width; x++) {\n        const gray = p.noise(n) * 255;\n        p.stroke(gray);\n        p.line(x, 0, x, p.height);\n        n += step;\n      }\n    }\n  });\n\n  new p5(function(p) {\n    let rStart = 0;\n    let gStart = 10;\n    let bStart = 20;\n    const step = 0.01;\n    p.setup = function() {\n      attachCanvas(p, 'random-list12');\n      drawRgbNoise();\n      p.noLoop();\n      button('random-btn12', function() {\n        rStart = p.random(10);\n        gStart = p.random(10);\n        bStart = p.random(10);\n        drawRgbNoise();\n      });\n    };\n    function drawRgbNoise() {\n      let rNoise = rStart;\n      let gNoise = gStart;\n      let bNoise = bStart;\n      for (let x = 0; x < p.width; x++) {\n        const r = p.noise(rNoise) * 255;\n        const g = p.noise(gNoise) * 255;\n        const b = p.noise(bNoise) * 255;\n        p.stroke(r, g, b);\n        p.line(x, 0, x, p.height);\n        rNoise += step;\n        gNoise += step;\n        bNoise += step;\n      }\n    }\n  });\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u3053\u306e\u30da\u30fc\u30b8\u3067\u306f\u3001Processing\u306erandom()\u3068no&#8230; <a href=\"https:\/\/r-dimension.xsrv.jp\/classes_j\/random-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,26],"tags":[],"class_list":["post-14332","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\/14332","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=14332"}],"version-history":[{"count":9,"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/posts\/14332\/revisions"}],"predecessor-version":[{"id":14428,"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/posts\/14332\/revisions\/14428"}],"wp:attachment":[{"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/media?parent=14332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/categories?post=14332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/tags?post=14332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}