…L@ aß@' q×€X K" Y^ÒšTy"È¡a"²* µöz½0uü°êN(x`¶X@$ ‡UØj·ÏG㶠½Áioé«ùߣê-N* õŠ›X„{Ž– „d”JÞjÝ ŠO²
À·xcýãC¦æY
¦bid
‚ddates2022-01-12T23:55:00etitlex[踊る虹色丸四角 - Paper.jsã‚’forkã—ã¦ESモジュール化ã—ãŸã€ŒPaper-esã€ä½œä¾‹dtagsh#js #PCNcurlxhttps://fukuno.jig.jp/3458dbodyyQ
ã‹ã‚ã„ã„ベクトルæ画ライブラリ「Paper.jsã€ãŒã„ã„æ„Ÿã˜ãªã®ã§ã€ä»–ã®ãƒ©ã‚¤ãƒ–ラリã¨æ··ãœã¦ä½¿ã„ã‚„ã™ã„ESモジュール化ã—ã¾ã—ãŸã€‚
「Paper-es forked Paper.jsã€
インストールä¸è¦ã€JavaScriptã®ESモジュールã¨ã—ã¦ã‚·ãƒ³ãƒ—ルã«ä½¿ãˆã¾ã™ï¼
「rounded-rectangles - Paper-esã€src on GitHub
マウスã®å‹•ãã«è¿½å¾“ã™ã‚‹ã€æ„‰å¿«ã«è¸Šã‚‹ã€è™¹è‰²ã®ä¸¸å››è§’（ラウンドレクト）ã¯ã€Paper.js例ã‹ã‚‰ã€ŒPaper.js — Rounded Rectanglesã€ã‚’ã€è™¹è‰²ã®å…‰ãƒ—ãƒã‚°ãƒ©ãƒŸãƒ³ã‚°ã—ãŸè¶Šå‰å¸‚味真野å°å¦æ ¡ã®ç§‘å¦ã‚¯ãƒ©ãƒ–ã®å°å¦ç”Ÿï¼†PCNæ¦ç”Ÿã®ä½œå“ã‹ã‚‰ç€æƒ³å¾—ã¦ã€forkã—ãŸESモジュール版ã¨ã—ã¦ä½œæˆã€‚HTML1ファイルãªã®ã§ã€ES-Jam上ã§éŠã¹ã¾ã™ï¼
（å‚考ã€è™¹è‰²ã®å…‰ãƒ—ãƒã‚°ãƒ©ãƒŸãƒ³ã‚°ã€€è¶Šå‰å¸‚味真野å°ãƒ»ç§‘å¦ã‚¯ãƒ©ãƒ–　階段手ã™ã‚Šã«ï¼¬ï¼¥ï¼¤ã€€ã¿ã‚“ãªã§èªã‚‚ㆠ| å¦æ ¡ãƒ»æ•™è‚² | ç¦äº•ã®ãƒ‹ãƒ¥ãƒ¼ã‚¹ | ç¦äº•æ–°èžï¼¤åˆŠï¼‰
ES-Jamã«ä¸‹è¨˜HTMLをコピペã—ã¦ã¿ã‚ˆã†ï¼
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width">
<title>rounded-rectangles - Paper-es</title>
<script type="module">
import { Paper, Tool, Path, Rectangle } from "https://code4fukui.github.io/Paper-es/Paper.js";
Paper.install(window); // -> project, tool, view
window.onload = () => {
Paper.setup("canvas");
let mousePoint = view.center;
Paper.view.onMouseMove = (e) => {
mousePoint = e.point;
};
//const colors = ['red', 'white', 'blue', 'white'];
const colors = ["red", "orange", "yellow", "green", "aqua", "blue", "purple"];
const amount = colors.length * 3;
const size = 20;
for (let i = 0; i < amount; i++) {
const rect = new Rectangle([0, 0], [size, size]);
rect.center = mousePoint;
const path = new Path.Rectangle(rect, size / 4);
path.fillColor = colors[i % colors.length];
const scale = (1 - i / amount) * 20;
path.scale(scale);
}
const children = project.activeLayer.children;
Paper.view.onFrame = (e) => {
for (let i = 0; i < children.length; i++) {
const item = children[i];
const deltax = (mousePoint.x - item.position.x) / (i + 1);
const deltay = (mousePoint.y - item.position.y) / (i + 1);
item.rotate(Math.sin((e.count + i) / 8) * 7);
if (deltax * deltax + deltay * deltay > 0.1 * .1) {
item.position.x += deltax;
item.position.y += deltay;
}
}
}
};
</script>
</head>
<body>
<h1>rounded-rectangles - Paper-es</h1>
<canvas id="canvas" resize></canvas>
<style>
body {
margin: 0;
height: 100vh;
text-align: center;
}
canvas {
display: block;
width: 100%;
height: 80%;
}
</style>
</body>
</html>