Archived entries for

Study HTML5 & JavaScript (4) – Draw App (1)

JavaScript+HTML5 Study Book

DrawApp_01

久々に本からJavaScriptとHTML5のお勉強です。

マウスで線を描く、らくがきアプリの制作を学習しました。

 

↓できたもの。

http://shokolog.com/study/draw

(とりあえずマウスイベントしか拾っていないので、タッチイベントは不可)

 

マウスお絵描きのコード自体はそんなに難しくないので、

マウスの動きにあわせて線が引ける仕組みだけ分かればいい感じです。

DrawApp_02

学習した内容は以下。

・マウスで線を描く

onMouseDown = “関数名(event)”

onMouseDownイベント(マウスボタンが押されたら関数〇〇を実行する)

ex.) <canvas id=”main” width=”640″ height=”480″ onMouseDown=”startDraw(event)”></canvas>

onMouseMove = “関数名(event)”

onMouseMoveイベント(マウスボタンが移動したら関数〇〇を実行する)

ex.) <canvas id=”main” width=”640″ height=”480″  onMouseMove=”draw(event)”></canvas>

onMouseUp = “関数名(event)”

onMouseUpイベント(マウスボタンが離されたとき関数〇〇を実行する)

ex.) <canvas id=”main” width=”640″ height=”480″ onMouseUp=”endDraw(event)”></canvas>

※eventオブジェクトは、 イベントが発生したときのマウスカーソルの位置やイベントの種類などが格納されている

 rgba(赤成分、緑成分、青成分、透明度)

色・透明度の指定

赤成分、緑成分、青成分は、0~255の値をとる

透明度は、0~1の値をとる(0:透明、1:不透明)

event.clientX

ウィンドウ(ブラウザー)上のX座標

event.clientY

ウィンドウ(ブラウザー)上のY座標

※マウス座標の取得はブラウザごとに異なっているので注意

※firefox以外のブラウザーでは、

event.offsetX, event.offsetY(イベントが発生した要素上のX,Y座標)で

キャンパス上の正確な座標を取得できる

コンテキスト.lineWidth

線の太さの指定

コンテキスト.lineCap

線の両端の形の指定

round:円

butt:ぶつ切り

square:四角形

 

らくがきアプリのコードはこれだけです。

そのままコピペすれば、使えます。


<!DOCTYPE html>
 <html>
 <head>
 <meta charset="Shift_JIS">
 <title>らくがき帳</title>

<script>

//マウスが押されているかどうか調べる変数を宣言
 var mouseDown = false;

//ペンの設定
 var penX = 0;
 var penY = 0;
 var penColor = "rgba(0,0,0,1)";
 var penWidth = 10;

//描画の開始
 function startDraw(event){

//マウスボタンが押された
 mouseDown = true;

//ペンの座標をセット
 penX = event.clientX;
 penY = event.clientY;

}
 //描画
 function draw(event){

//マウスボタンが押されていれば描画
 if (mouseDown){

//キャンバスの取得
 var canvas = document.getElementById("main");

//コンテキストの取得
 var context = canvas.getContext("2d");

//ペンのセット
 context.strokeStyle = penColor;
 context.lineWidth = penWidth;
 context.lineCap = "round";

//マウスカーソルの座標を取得
 var x = event.clientX;
 var y = event.clientY;

//パスの開始
 context.beginPath();

//座標の移動
 context.moveTo(penX,penY);

//線の描画
 context.lineTo(x,y);

//パスの描画
 context.stroke();

//ペン座標の切替
 penX = x;
 penY = y;

}

}

//描画の終了
 function endDraw(event){

//マウスボタンが離された
 mouseDown = false;

}

</script>
 <style>
 canvas{
 border:solid #999999 1px;
 }
 </style>

</head>

<body>
 <canvas id="main" width="640" height="480"
 onMouseDown="startDraw(event)"
 onMouseMove="draw(event)"
 onMouseUp="endDraw(event)"></canvas>

</body>
</html>

ChatPerf × Hackathon

ChatperfHackathon_01

2月23日-24日、初めてハッカソンに参加してきました。

開発者、デザイナー、プランナー三位一体で

ChatPerfという、スマホで香りが送れるディバイスを用いて

バカアプリを作ろうという内容です。

香りの種類は自分たちで決めることができました。

 

真面目な提案は禁止ということで

どうしようもなく不毛なアプリを提案した所、

思いがけずうちのチーム優勝しました。

かなりの棚からぼたもちっぷり!!

賞金も頂きました、ありがとうございます。

 

提案した不毛なアプリが、こちら。

DanmitsuGokko_01

『壇蜜ごっこ』!!!

 

このアプリは、

壇蜜さんをSEXYに育成してしていくことにより、

壇蜜さんがフェロモン(香り)を噴霧

そのフェロモンを浴びることにより

自身のエロティシズムや女子力を開花させていく、という内容です。

 

簡単に言えば、育成ゲームとアロマテラピーが融合されたアプリです。

 (*当アプリは壇蜜さん個人と一切関係がなく、壇蜜さんリスペクトのもと勝手に作ったものです)
 
 

DanmitsuGokko_03

育成方法はいたってシンプル、胸をひたすら擦るのみ!

壇蜜さんの胸元を擦り続けると、

女子力がアップするいい匂いフェロモンを噴射します。

 

フェロモンを実際に浴びることで、

自身の美容や心身の健康を増進させることができるというわけです。

 

DanmitsuGokko_02

「女子力」は、5つ(妖艶力 / 嫁力 / 清楚力 / 潤い力 / 知性力)から

選択することができます。

例えば、嫁力=柔軟剤の香り、潤い力=ジャスミンの香り

など効能によって、それぞれ違う香りフェロモンが出てきます。

 

DanmitsuGokko_04

一定のスコアを越えると、

壇蜜さんは言葉を覚えたり、表情や仕草が変わったりと、

バージョンがアップしていきます。

また、一定時間放置すると各スコアは低下して行き、

壇蜜さんはすねたり、言葉を忘れたりしていきます。

 

制作したプロトタイプ動画。

当日は、妖艶な香りを入れプレゼンしました。

 

なんて親父の発想、と思われるかもしれませんが、

オール女子チームでの提案でした。

 

内容はエロティックですが、あくまで「女性向け」にしたかったので

下品にならないよう女子っぽいUIを目指しました。

しかし、女子っぽいUIなんて普段ほとんどやらないので、

何度やっても「AVパッケージ」のような雰囲気にしかならず、

デザイン担当の私は、1日目の夜だいぶ焦りました。

 

「女子っぽいデザインが全然できない…」

 

夜な夜な夜な自己嫌悪に襲われつつ、

壇蜜さんがしゃべりそうな言葉を真剣に妄想したり、

今までダウンロードしなかったキラキラやらハートの素材を落としたりして、

過ごしました。

壇蜜さんを真剣に思い続けた2日間だったと思います。

 

デザイナーになって初めて頂いたawardが

「着パフハッカソン・バカアプリ制作優勝」

だなんて心中若干複雑ですが、みんなの心に刺さったようでよかったです。

これも、チーム編成がよかったからだと思います。

 

不毛なアイディアを理論的に形作ってくださった まなさん、

香りの種類や効能の知識を存分に発揮してくださった しまさん、

また、サポートで開発実装してくださった山谷さんありがとうございます。

 

そして、壇蜜さん勝手にすみません、リスペクトの上で考えました。

ありがとうございます。

 

そしてそして、全ての発想の原点は

吉本のシルクねぇさんの「胸を擦るとグレープフルーツの匂いがする」という

衝撃的な発言からなので、

シルクねぇさんにも感謝の意を表したいと思います。

 

ChatperfHackathon_02

 チームメンバー、着パフ社長坪内さん、審査委員カヤック柳澤さん
 
 


Copyright © 2011 Shoko Tanaka. All rights reserved.

RSS Feed.