Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【試行錯誤】ハートマークを描こう!

f:id:little_strange:20210309232914p:plain

 どうも!LSSです!!

 

 今回はただ、ハートマークの描き方に試行錯誤してみただけの記事になります。

 

 おとといの「ちぎり絵風枠ジェネレータ」にいただいた、ブクマコメントで、 

yasumarutaiwan LSSさんの作品たちにはいつもお世話になっております☺️✨ ちぎり絵かわいい!これバリエーション豊富にいけそうですね。1枚1枚の紙をハート型にするとか、星型にするとか。ブログが華やかになりますね💕

というアイデアをいただきました^^
なるほど、無数のハートマークをちりばめた枠、ウケが良さそうです!!

破片のカタチを何種類かから選択できるようにするとかも良さそうですね。

 

…さて、実際にそれを作るとしたら…ハートマークはどう表現するべきか?

普通に文字変換して出てくる❤を配置するのはカンタンですが、環境依存文字で、ツール使用者の環境によっては色が反映されないとかもありそうな気がします。

となると、破片のカタチを生成していたように、ハートのカタチを描き出すほうが確実ですね^^

 

って、ハートマークってどんな風にプログラムから描きだすんだろう?

という経緯から、挑戦してみる事にしました!

 

ちぎり絵ツールはJavaScriptcanvasで描きだしますが、今回は少し慣れたSVGでカタチだけ身につける事にします。(SVGcanvasはできる事がよく似ていて、SVGで出来ればcanvasでもできるハズ)

 

 

ざっくり描くとこういう感じ

 

まず、まっすぐな線でだいたいのポイントを取る感じに描いてみました。

カクカクですが、だいたいの配置はこれで良さそうな気がしますね^^

 

コード

<svg xmlns="http://www.w3.org/2000/svg" width="70%" viewbox="0 0 20 20" stroke="black" style="border: 1px solid black;">
<path d="M 10,20 L 0,10 5,5 10,10 15,5 20,10 10,20" fill="pink" stroke-width="0.1">
</path>
</svg>

 

 

ベジェ曲線で丸みを与えてみよう!

 

…うん、なんか違いますねwwwww

でも、下のほうの曲線はいい感じのような気がします!

 

ただ…やっぱりコレジャナイw

 

コード

<svg xmlns="http://www.w3.org/2000/svg" width="70%" viewbox="0 0 20 20" stroke="black" style="border: 1px solid black;">
<path d="M 10,20 Q 0,15 0,10 Q 5,0 10,10 Q 15,0 20,10 Q 20,15 10,20" fill="pink" stroke-width="0.1">
</path>
</svg>

赤文字ベジェ曲線の制御点を指定している部分

 

 

途中の経過点を端折っていたのをちゃんと描く

 

 最初の画像の、上の2つの頂点部分、あれをナシにしてベジェ曲線で曲げただけにしていたのが、うまく行かない要因かな?と思い、描き直してみました。 

 

コード

<svg xmlns="http://www.w3.org/2000/svg" width="70%" viewbox="0 0 20 20" stroke="black" style="border: 1px solid black;">
<path d="M 10,20 Q 0,15 0,10 Q 0,5 5,5 Q 10,5 10,10 Q 10,5 15,5 Q 20,5 20,10 Q 20,15 10,20" fill="pink" stroke-width="0.1">
</path>
</svg>

 

 

これは…できてるのか、できてないのか?

右端・左端がとがらなくなった、という点では解決しているとも言えます。

一方で、上部の丸みがなんか違う感じも。

 

ちなみに、ベジェ曲線をこういう描き方した場合、純粋な円弧よりも少し外側に膨らむ感じになります。

より円に近づけるには3次ベジェ曲線(制御点が2つのベジェ)にするといいとか。

 

…とはいえ、これ以上、点を増やしても後が大変になりそうな気もしますしw

JavaScriptcanvasには指定角度の円弧を描く機能もあるので、canvasを使う分には円弧に置き換えたらいいか、と思ってたら、SVGのpathにも円弧を描く機能はあるようです!

 

  

コード

<svg xmlns="http://www.w3.org/2000/svg" width="70%" viewbox="0 0 20 20" stroke="black" style="border: 1px solid black;">
<path d="M 10,20 Q 0,15 0,10 A 5,5 0 0 1 10,10 A 5,5 0 0 1 20,10 Q 20,15,10,20" fill="pink" stroke-width="0.1">
</path>
</svg>

 

2つの上部の膨らみを、円弧にしてみました。(path内のAとか初めて使いましたw)

これは…もう文句つけらないレベルかな?^^

  

 

これでOK!

下半分はベジェ曲線、上半分は半円を2つ乗せた、この形で良さそうですね^^

 

イデアをくださった やすまる様、 ありがとうございます!

実際に作るのはちょっと先になるかもです。

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^