Skip to content

Instantly share code, notes, and snippets.

@shspage
Last active January 6, 2022 16:22
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save shspage/b0ceb5e4a489c843a9ff70202e5db615 to your computer and use it in GitHub Desktop.
Save shspage/b0ceb5e4a489c843a9ff70202e5db615 to your computer and use it in GitHub Desktop.
cylinder tool for pen tool https://s.baku89.com/pentool/
// 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
})
}
@baku89
Copy link

baku89 commented Jul 29, 2018

まだ雑なデモだったのですが、遊んでいただけて嬉しいです...!
色々不親切な仕様で申し訳ございません。。

冒頭にメタデータのJSONをコメントアウトして書いておくと、

からロードできるようにしました!
参考までにforkです:

@shspage
Copy link
Author

shspage commented Jul 29, 2018

このツール(cylinder)は実用性に寄りすぎというかちょっと用途が限定されすぎて、あまりサイトの雰囲気に合わないかと思ったので、こっそり公開していました。コメントまで頂けて恐縮しています。
現在でも大変使いやすいと思います。
URLからロードできる機能はいいですね!
ツールを人に紹介するときに、貼ってupdateして…という前置きをせずに済みます。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment