Strokesというストロークを再生出来るお絵描きWebアプリ的なのを作りました

はじめに

　2日ほど前の夜中に@kojiraと@hamatzらが

絵描きさんに描いてもらった絵を、1ストロークずつ再生して絵が完成するまでの過程を鑑賞するだけのコンテンツとかボク個人的には結構欲しいす （*´ω｀*）

— hamatzさん (@hamatz) 2013年4月26日

といった感じで語らっていたので、

@hamatz @kojira とりあえず作るわー

— 八木さん (@sys1yagi) 2013年4月26日

　という事で作りました。ものはこちらです。HTML5的なWebアプリです。

Strokes

できる事

　大体以下の事が出来ます。メインはトレースモードでしょうか。書いた絵を1ストロークずつ再生し、それをなぞる感じです。　

線画を書く

アンドゥ・リドゥ

絵を保存する(localStorage)

保存した絵の再編集

保存した絵の削除

書いた絵のストロークを再生

絵のトレースモード

デモ

詳しくは以下の動画を。絵描きさんの絵をトレースモードでなぞって練習とか色々捗るんじゃないかなと。

おわりに

　まだ排他処理やってなかったりだとか、サーバへのデータ保存出来なかったりだとか、ペイントツール部分もしょぼかったりします。なんか要望とかアイデアあればStrokes Issuesに書いて下さい。あわよくばpull request下さい。あとUIデザイン周りと、コンテンツとして良さげな線画書いてくれる方募集。

Javascriptによるドラゴン曲線。辰年だし。

辰年だしドラゴン曲線だよね。という事でjavascriptで。Canvasで。

新年あけましてドラゴン曲線 - jsdo.it - share JavaScript, HTML5 and CSS

ソース

<html>
<script>
window.onload =function(){
 var $ = function(id){ return document.getElementById(id); }
 var canvas = $("canvas");
 var ctx = canvas.getContext('2d');
 var clear =function(){
  ctx.fillStyle = 'rgb(200, 200, 200)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
 }
 var line = function(ctx, sx, sy, ex, ey){
  ctx.beginPath();
  ctx.moveTo(sx, sy);
  ctx.lineTo(ex, ey);
  ctx.closePath();
  ctx.stroke();
 }
 var dline = function(ctx, sx, sy, ex, ey, cx, cy){
  ctx.beginPath();
  ctx.moveTo(sx, sy);
  ctx.lineTo(cx, cy);
  ctx.moveTo(ex, ey);
  ctx.lineTo(cx, cy);
  ctx.closePath();
  ctx.stroke();
 };
 var dragon = function(ctx, depth, sx, sy, ex, ey, d){
  if(depth ==0){
   line(ctx,sx,sy,ex,ey);
   return;
  }
  var dx = (ex-sx)/2;
  var dy = (ey-sy)/2;
  var centerX = ex-dx;
  var centerY = ey-dy;
  var cx = centerX + (d?dy:-dy);
  var cy = centerY + (d?-dx:dx);
  if(depth == 1){
   dline(ctx,sx,sy,ex,ey,cx,cy);
   return;
  }
  else{
   dragon(ctx, depth-1, sx, sy, cx, cy, true);
   dragon(ctx, depth-1, cx, cy, ex, ey, false);
  }
 }
 var dragon_call = function(depth){
  return function(){
   clear();
   dragon(ctx, depth, 50, canvas.height/3, canvas.width-100, canvas.height/3,false);
   if(depth < 15){
    setTimeout(dragon_call(depth+1), 1000);
   }
  }
 };
 $("start").onclick = function(){
  dragon_call(0)();
 }
 dragon_call(15)();
}
</script>
<body>

<canvas id="canvas" width=400 height=400 ></canvas>
<br/>
<input type="button" id="start" value="start" ></input>
</body>
</html>

まとめ

今年も頑張る。