今回は自動化のネタではなく、iPhone 6sのネタです。
iPhone 6sではForce touch（3D touch）という、押した強さに応じて処理を分けることができるようになりました。このForce touchですが、JavaScriptからでも押した強さを読み出すことができます。
ということで、Force touch機能を利用したお絵かきプログラムを作ってみました。お絵かきプログラムというと、何か凄そうな気がしますが、強さに応じてペンのサイズが変わるだけのものなので、プログラムは至ってシンプルです。
HTML+CSS+JavaScript全部まとめたものが以下のコードです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name = "viewport" content = "initial-scale=1.0, user-scalable=no">
<title>Sample</title>
<style>
* {
margin: 0;
padding: 0;
-webkit-user-select: none;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="900" height="1400"></canvas>
<script>
var ele = document.getElementById("myCanvas");
var ctx = ele.getContext("2d");
ctx.strokeStyle = "rgb(255, 0, 0)";
ctx.lineCap = ctx.lineJoin = "round";
ele.ontouchmove = function(evt){
evt.preventDefault();
var t = evt.touches[0];
ctx.lineWidth = Math.pow(60, t.force);
ctx.lineTo(t.clientX, t.clientY);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(t.clientX, t.clientY);
}
ele.ontouchend = function(evt){
ctx.beginPath();
}
</script>
</body>
</html>
Force touchでペンサイズを変更できるので、これまでのお絵かきソフトにあるペンのサイズを選択する機能やパネルはありません。カラーは選択できませんが、デフォルトのカラーは以下のコードの255, 0, 0の数値で設定できます。CSSで指定できるカラー名や#rrggbb形式による指定も可能です。
ctx.strokeStyle = "rgb(255, 0, 0)";
半透明にしたい場合は、以下のように rgba() を使ってカラーと不透明度を指定します。不透明度は0〜1.0までの小数値になります。
ctx.strokeStyle = "rgba(255, 0, 0, 0.25)";
ペンサイズは以下の部分で設定しています。
ctx.lineWidth = Math.pow(60, t.force);
60がペンの最大サイズになります。数値を大きくすると、強く押した時に大きな円が描かれます。
上記のプログラムはHTML+JavaScriptなので、あまり速くありません。なので、あまり高速に指を動かすと処理が追いつかずに、直線で結ばれてしまうことがあります。
あと、iOS 9.0.2だとCanvasに円を描いた時に、右側と下側に線が描画されてしまうことがあります。多分、バグだと思いますが上記プログラムでは、そこらへんは無視しています。
【古籏一浩】openspc@alpha.ocn.ne.jp
http://www.openspc2.org/
シンプルなプログラムなので、改良して面白いお絵かきソフトでも作ってみるとよいかもしれません。
iPhone 6s Plusの4K映像撮影してみましたが、パナソニックやソニーよりもきれいですね。とは言ってもズームすると駄目だったり、やはり制限はあります。思ったよりもバッテリーが長持ちするので、4K映像の撮影機材のひとつとしてはいいかもしれません。
オライリーから「JavaScriptによるデータビジュアライゼーション入門」が発売中です。よろしく。
・JavaScriptによるデータビジュアライゼーション入門
http://www.amazon.co.jp/dp/4873117461/
・Photoshop自動化基本編
http://www.amazon.co.jp/dp/B00W952JQW/
・Illustrator自動化基本編
http://www.amazon.co.jp/dp/B00R5MZ1PA
・Adobe JavaScriptリファレンス
http://www.amazon.co.jp/dp/B00FZEK6J6/
・ExtendScript Toolkit（ESTK）基本編
http://www.amazon.co.jp/dp/B00JUBQKKY/
・データビジュアライゼーションのためのD3.js徹底入門
http://www.amazon.co.jp/dp/4797368861
・4K/ハイビジョン映像素材集
http://www.openspc2.org/HDTV/
・クリエイター手抜きプロジェクト
http://www.openspc2.org/projectX/