編集履歴

質問編集履歴

現在のコードを追記します。jquery使っています。Chromeで動作検証しています。

2019/09/04 05:25

投稿

kittycut

スコア9

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -47,3 +47,521 @@
 代替案など、どんな情報でもいただけるとありがたいです。
 よろしくお願いします。
+## 追記・現在のコード
+参考のリンクそのままです。文字数ではじかれてしまったので、jsは②だけ載せておきます。他に①のjsがあり、2つのjsを読み込んでいます。
+```html
+<?xml version="1.0" encoding="utf-8"?>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:ibooks="http://vocabulary.itunes.apple.com/rdf/ibooks/vocabulary-extensions-1.0" epub:prefix="ibooks: http://vocabulary.itunes.apple.com/rdf/ibooks/vocabulary-extensions-1.0">
+<head>
+  <title>test</title>
+  <meta name="viewport" content="width=1024, height=768"/>
+  <meta charset="UTF-8"/>
+  <script src="js/media-overlay.js" type="text/javascript"></script>
+  <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
+  <script src="js/ibooks.js" type="text/javascript"></script>
+  <link href="css/stylesheet.css" type="text/css" rel="stylesheet"/>
+  <link href="css/page.css" type="text/css" rel="stylesheet"/>
+</head>
+<body>
+<div class="page">
+	<div id="rice_field">
+	<canvas id="canvas1" width="1020" height="300"></canvas>
+	<canvas id="canvas2" width="1020" height="300"></canvas>
+	</div>
+</div>
+<script src="js/page.js" type="text/javascript"></script>
+<script src="js/page_2.js" type="text/javascript"></script>
+</body>
+</html>
+```
+```js
+var canvas = document.getElementById("canvas2");
+var ctx = canvas.getContext("2d");
+var canvasOffset = $("#canvas2").offset();
+var offsetX = canvasOffset.left;
+var offsetY = canvasOffset.top;
+var cHeight = canvas.height;
+var showControls = true;
+var lastMouseX = 0;
+var lastTouchX = 0;
+// preset styling CONSTANTS
+var SWAY = .55; // max endpoint sway from center
+var C1Y = .10; // fixed Y of cp#1
+var C2SWAY = .20 // max cp#2 sway from center
+var C2Y = .75; // fixed Y of cp#2
+var YY = 60; // max height of ellipse at top of hair
+var PIPERCENT = Math.PI / 100;
+var hairs = [];
+// create hairs
+var newHairX = 100;
+var hairCount = 20;
+for (var i = 0; i < hairCount; i++) {
+    var randomLength = 100 + parseInt(Math.random() * 20);
+    addHair(newHairX + (i * 30), randomLength);
+}
+function addHair(x, length) {
+    hairs.push({
+        x: x,
+        length: length,
+        left: 0,
+        right: 0,
+        top: 0,
+        s: {
+            x: 0,
+            y: 0
+        },
+        c1: {
+            x: 0,
+            y: 0
+        },
+        c2: {
+            x: 0,
+            y: 0
+        },
+        e: {
+            x: 0,
+            y: 0
+        },
+        isInMotion: false,
+        currentX: 0
+    });
+}
+for (var i = 0; i < hairs.length; i++) {
+    var h = hairs[i];
+    setHairPointsFixed(h);
+    setHairPointsPct(h, 50);
+    draw(h);
+}
+function setHairPointsFixed(h) {
+    h.s.x = h.x;
+    h.s.y = cHeight;
+    h.c1.x = h.x;
+    h.c1.y = cHeight - h.length * C1Y;
+    h.c2.y = cHeight - h.length * C2Y;
+    h.top = cHeight - h.length;
+    h.left = h.x - h.length * SWAY;
+    h.right = h.x + h.length * SWAY;
+}
+function setHairPointsPct(h, pct) {
+    // endpoint
+    var a = Math.PI + PIPERCENT * pct;
+    h.e.x = h.x - ((h.length * SWAY) * Math.cos(a));
+    h.e.y = h.top + (YY * Math.sin(a));
+    // controlpoint#2
+    h.c2.x = h.x + h.length * (C2SWAY * 2 * pct / 100 - C2SWAY);
+}
+//////////////////////////////
+$("#canvas2").on('mousemove', function(e) {
+    mouseX = parseInt(e.clientX - offsetX);
+    mouseY = parseInt(e.clientY - offsetY);
+    // draw this frame based on mouse moves
+    ctx.clearRect(0, 0, cWidth, cHeight);
+    for (var i = 0; i < hairs.length; i++)
+        {hairMoves(hairs[i], mouseX, mouseY);
+    }
+    lastMouseX = mouseX;
+})
+$("#canvas2").on('touchstart touchmove', function(e) {
+    e.preventDefault();
+    touchX = parseInt(e.changedTouches[0].clientX - offsetX);
+    touchY = parseInt(e.changedTouches[0].clientY  - offsetY);
+    // draw this frame based on touchmoves
+    ctx.clearRect(0, 0, cWidth, cHeight);
+    for (var i = 0; i < hairs.length; i++) {
+        hairMoves2(hairs[i], touchX, touchY);
+    };
+    lastTouchX = touchX;
+});
+function hairMoves(h, mouseX, mouseY) {
+    // No hair movement if not touching hair
+    if (mouseY < cHeight - h.length - YY) {
+        if (h.isInMotion) {
+            h.isInMotion = false;
+            setHairPointsPct(h, 50);
+        }
+        draw(h);
+        return;
+    }
+    // No hair movement if too deep in hair
+    if (mouseY > h.c1.y) {
+        draw(h);
+        return;
+    }
+    //
+    var pct = 50;
+    if (mouseX >= h.left && mouseX <= h.right) {
+        if (h.isInMotion) {
+            var pct = -(mouseX - h.right) / (h.right - h.left) * 100;
+            setHairPointsPct(h, pct);
+            draw(h);
+        } else {
+            // if hair is at rest
+            // but mouse has just contacted hair
+            // set hair in motion
+            if ((lastMouseX <= h.x && mouseX >= h.x) || (lastMouseX >= h.x && mouseX <= h.x)) {
+                h.isInMotion = true;
+                var pct = -(mouseX - h.right) / (h.right - h.left) * 100;
+            }
+            setHairPointsPct(h, pct);
+            draw(h);
+        }
+    } else {
+        if (h.isInMotion) {
+            h.isInMotion = false;
+            setHairPointsPct(h, 50);
+        };
+        draw(h);
+    }
+}
+function hairMoves2(h, touchX, touchY) {
+    // No hair movement if not touching hair
+    if (touchY < cHeight - h.length - YY) {
+        if (h.isInMotion) {
+            h.isInMotion = false;
+            setHairPointsPct(h, 50);
+        }
+        draw(h);
+        return;
+    }
+    // No hair movement if too deep in hair
+    if (touchY > h.c2.y) {
+        draw(h);
+        return;
+    }
+    //
+    var pct = 50;
+    if (touchX >= h.left && touchX <= h.right) {
+        if (h.isInMotion) {
+            var pct = -(touchX - h.right) / (h.right - h.left) * 100;
+            setHairPointsPct(h, pct);
+            draw(h);
+        } else {
+            // if hair is at rest
+            // but mouse has just contacted hair
+            // set hair in motion
+            if ((lastTouchX <= h.x && touchX >= h.x) || (lastTouchX >= h.x && touchX <= h.x)) {
+                h.isInMotion = true;
+                var pct = -(touchX - h.right) / (h.right - h.left) * 100;
+            }
+            setHairPointsPct(h, pct);
+            draw(h);
+        }
+    } else {
+        if (h.isInMotion) {
+            h.isInMotion = false;
+            setHairPointsPct(h, 50);
+        };
+        draw(h);
+    }
+}
+function dot(pt, color) {
+    ctx.beginPath();
+    ctx.arc(pt.x, pt.y, 5, 0, Math.PI * 2, false);
+    ctx.closePath();
+    ctx.fillStyle = color;
+    ctx.fill();
+}
+function draw(h) {
+    ctx.beginPath();
+    ctx.moveTo(h.s.x, h.s.y);
+    ctx.bezierCurveTo(h.c1.x, h.c1.y, h.c2.x, h.c2.y, h.e.x, h.e.y);
+    ctx.strokeStyle = "orange";
+    ctx.lineWidth = 3;
+    ctx.stroke();
+    if (showControls) {
+        dot(h.s, "green");
+        dot(h.c1, "red");
+        dot(h.c2, "blue");
+        dot(h.e, "purple");
+        ctx.beginPath();
+        ctx.rect(h.left, h.top - YY, (h.right - h.left), h.length * (1 - C1Y) + YY)
+        ctx.lineWidth = 1;
+        ctx.strokeStyle = "lightgray";
+        ctx.stroke();
+    }
+}
+```