Last active
January 6, 2022 16:22
-
-
Save shspage/b0ceb5e4a489c843a9ff70202e5db615 to your computer and use it in GitHub Desktop.
cylinder tool for pen tool https://s.baku89.com/pentool/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// cylinder tool for pen tool https://s.baku89.com/pentool/ | |
// 使い方:リンク先の画面左の(+)をクリックしてから、右側のエディタに以下の内容を張り付け、 | |
// 右上の「Update」を押して反映させるとツールが使えるようになります。 | |
// キャンバス上でドラッグまたはクリックすると描画できます。 | |
// コードの最初の opt { ... } の中身の数字を変えて Update すると、 | |
// それ以降に描画する円柱の形や間隔などを変更できます。 | |
// 描いたものは左下の歯車メニューからSVG形式で書き出せます。 | |
const BLACK = '#282a2e' | |
//const GUIDE = '#3e999f' | |
const WHITE = '#f9faf9' | |
let opt = { | |
diameter: 10, | |
height: 30, | |
interval: 20, | |
jitter: 12, | |
lineWidth: 0.5, | |
outlineWidth: 1.0 | |
} | |
let lastPoint | |
let v0 = new Point(0, 0) | |
let v1 = new Point(1, 0) | |
function begin() { | |
lastPoint = mouse | |
} | |
function press() { | |
drawCylinder(mouse) | |
lastPoint = mouse | |
} | |
function release() { | |
} | |
function move() { | |
} | |
function drag() { | |
if(mouse.getDistance(lastPoint) > opt.interval){ | |
let pnt = mouse.add( | |
v1.rotate(Math.random() * 360, v0) | |
.multiply(Math.random() * opt.jitter)) | |
drawCylinder(pnt) | |
lastPoint = mouse | |
} | |
} | |
function end() { | |
} | |
function drawCylinder(pnt){ | |
let d = opt.diameter | |
let r = opt.diameter / 2 // radius | |
let h = opt.height | |
let rv = Math.random() * 0.95 + 0.05 | |
rv *= Math.PI / 2 | |
let sn = Math.sin(rv) | |
let cs = Math.cos(rv) | |
let t = Math.random() * 360 | |
h *= cs/sn | |
let gr = new Group() | |
let path = make_a_path(opt.outlineWidth, WHITE, true) | |
path.moveTo(v0) | |
path.arcTo(new Point(r, r), new Point(d, 0)) | |
path.lineTo(new Point(d, -h)) | |
path.arcTo(new Point(r, -h-r), new Point(0, -h)) | |
path.closePath() | |
gr.addChild(path) | |
let path1 = make_a_path(opt.lineWidth, null, false) | |
path1.moveTo(v0) | |
path1.arcTo(new Point(r, -r), new Point(d, 0)) | |
gr.addChild(path1) | |
gr.translate(-r, h/2) | |
gr.scale(1, sn) | |
gr.rotate(t) | |
gr.translate(pnt) | |
} | |
// ---------------------------------------------- | |
function make_a_path(w, c, is_closed){ | |
return new Path({ | |
closed: is_closed, | |
strokeWidth: w, | |
strokeColor: BLACK, | |
fillColor: c | |
}) | |
} |
このツール(cylinder)は実用性に寄りすぎというかちょっと用途が限定されすぎて、あまりサイトの雰囲気に合わないかと思ったので、こっそり公開していました。コメントまで頂けて恐縮しています。
現在でも大変使いやすいと思います。
URLからロードできる機能はいいですね!
ツールを人に紹介するときに、貼ってupdateして…という前置きをせずに済みます。
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
まだ雑なデモだったのですが、遊んでいただけて嬉しいです...!
色々不親切な仕様で申し訳ございません。。
冒頭にメタデータのJSONをコメントアウトして書いておくと、
からロードできるようにしました!
参考までにforkです: