HTML5入門その14-お絵かきツール2

お絵かきツール(PC版)です

<!DOCTYPE html>
<html>
<head>
<title>touch paint</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<!-- metaタグで スマホの挙動を制限している -->
</head>
<body>
<h1>Key2</h1>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>

<script type="text/javascript">
var canvas;
var paintSwitch = false;//pantSwitchというスイッチを作ってとりあえず最初はオフね
var oldX = 0;//クリック始めた位置のX座標を入れる
var oldY = 0;//クリック始めた位置のY座標を入れる

//---スマホのOS取得(PC用では使わない)
var ua = navigator.userAgent;//User Agent(まぁ機種名みたいなの)を取得して変数uaに代入しなさい
//---


//以下iPhoneの時の挙動(PC用では使わない)
if (ua.indexOf("iPad") >= 0 || ua.indexOf("iPhone") >= 0 || ua.indexOf("iPod") >= 0){
//特に挙動はまだ決めていない
}

//以下Androidの時の挙動(PC用では使わない)
if (ua.indexOf("Android") >= 0){
//特に挙動はまだ決めていない
}


//---------
window.onload = function() {//これを読み込んだら
 syokika();//初期化というfunctionを実行してね
};

function syokika(){//で,これが初期化のfunction
canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
canvas.addEventListener("mousemove", draw, true);//マウスが動いたとき波drawをやりな
canvas.addEventListener("mousedown", myMove, false);//マウスが押された時はmyMoveをやりな
canvas.addEventListener("mouseup", myMouseUp, false);//マウスが上がったときはmtMouseUpをやっとかめ


}

function myMove(atai){//クリック開始時に実行させて線の描き始めの場所をoldX,oldYに入れちゃうよfunction
        paintSwitch = true;
        oldX = atai.clientX - canvas.offsetLeft;//オフセット(ずれ)の修正=よこ clientXの代わりにpageXを使うときもあるらしい
        oldY = atai.clientY - canvas.offsetTop;//オフセット(ずれ)の修正=たて clientYの代わりにpageYを使うときもあるらしい
}

function myMouseUp(){
		paintSwitch = false;//pantSwitchはオフね
}

//setInterval(draw, 10);//10msec起きに描いてね 今回は使いません

function draw(atai) {
if (!paintSwitch) return;
	var x = atai.clientX - canvas.offsetLeft;
    var y = atai.clientY - canvas.offsetTop;
    //var can = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.strokeStyle = "rgba(255,0,0,1)";
    context.lineWidth = 1;
    context.beginPath();
    context.moveTo(oldX, oldY);
    context.lineTo(x, y);
    context.stroke();
    context.closePath();
    oldX = x;
    oldY = y;
}



//---ファイルに書き出すよう

function screenshot(){
  var png = canvas.toDataURL();
  document.getElementById("newImg").src = png;
}
//---

</script>

<form>
<input type="button" value="画像に変換" onclick="screenshot()">
</form>
<div><img id="newImg"></div>
<!-- このDIVのIDを探してここに画像を入れる -->
</body>
</html>

次に,これをスマートホン版で作ってみます

HTML5入門その13-お絵かきツール1

マウス入力を利用してお絵かきツールを作りましょう(これはPC用)

以下をコピペしてPCで実行してみましょう

<!DOCTYPE html>
<html>
<head>
<title>Mouse Paint</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<!-- metaタグで スマホの挙動を制限している -->
</head>
<body>
<h1>Mouse paint</h1>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>

<script type="text/javascript">
var canvas;
var paintSwitch = false;//pantSwitchというスイッチを作ってとりあえず最初はオフね
var oldX = 0;//クリック始めた位置のX座標を入れる
var oldY = 0;//クリック始めた位置のY座標を入れる

//---スマホのOS取得(PC用では使わない)
var ua = navigator.userAgent;//User Agent(まぁ機種名みたいなの)を取得して変数uaに代入しなさい
//---


//以下iPhoneの時の挙動(PC用では使わない)
if (ua.indexOf("iPad") >= 0 || ua.indexOf("iPhone") >= 0 || ua.indexOf("iPod") >= 0){
//特に挙動はまだ決めていない
}

//以下Androidの時の挙動(PC用では使わない)
if (ua.indexOf("Android") >= 0){
//特に挙動はまだ決めていない
}


//---------
window.onload = function() {//これを読み込んだら
 syokika();//初期化というfunctionを実行してね
};

function syokika(){//で,これが初期化のfunction
canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
canvas.addEventListener("mousemove", draw, true);//マウスが動いたとき波drawをやりな
canvas.addEventListener("mousedown", myMove, false);//マウスが押された時はmyMoveをやりな
canvas.addEventListener("mouseup", myMouseUp, false);//マウスが上がったときはmtMouseUpをやっとかめ


}

function myMove(atai){//クリック開始時に実行させて線の描き始めの場所をoldX,oldYに入れちゃうよfunction
        paintSwitch = true;
        oldX = atai.clientX;//clientXの代わりにpageXを使うときもあるらしい
        oldY = atai.clientY;//clientYの代わりにpageYを使うときもあるらしい
}

function myMouseUp(){
		paintSwitch = false;//pantSwitchはオフね
}

//setInterval(draw, 10);//10msec起きに描いてね 今回は使いません

function draw(atai) {
if (!paintSwitch) return;
	var x = atai.clientX;
    var y = atai.clientY;
    //var can = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.strokeStyle = "rgba(255,0,0,1)";
    context.lineWidth = 1;
    context.beginPath();
    context.moveTo(oldX, oldY);
    context.lineTo(x, y);
    context.stroke();
    context.closePath();
    oldX = x;
    oldY = y;
}



//---ファイルに書き出すよう

function screenshot(){
  var png = canvas.toDataURL();
  document.getElementById("newImg").src = png;
}
//---

</script>

<form>
<input type="button" value="画像に変換" onclick="screenshot()">
</form>
<div><img id="newImg"></div>
<!-- このDIVのIDを探してここに画像を入れる -->
</body>
</html>

うまく動きませんね.

原因は何でしょうか?


 

オフセットをとるコマンドがあります.まずこれを入れてみましょう.

どこに?

	var x = atai.clientX - canvas.offsetLeft;

64行目です.

うまく行くなら65行目も改変してみましょう.


 

開始点がおかしくなりますね.

開始点はoldX,oldYですがこれを代入しているfunctionは50〜54行目です.

ここも修正しましょう.

HTML5その12-加速度センサでお絵かき

改良版です 改良箇所はハイライト表示しています.

<!DOCTYPE html>
<html>
<head>
<title>DeviceGravity</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<!-- metaタグで スマホの挙動を制限している -->
</head>
<body>
<h1>Key2</h1>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>

<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var myX = 0;
var myY = 0;

var grX =0;
var grY =0;
//---スマホのOS取得

var ua = navigator.userAgent;//User Agent(まぁ機種名みたいなの)を取得して変数uaに代入しなさい

//---

//----以下加速度検出用
window.addEventListener("devicemotion", function(evt){//これの反応をみててください,その反応がdevidemotionという種類であればその値をevtに入れなさい
grX = evt.accelerationIncludingGravity.x;  // evtのx軸の傾きを出してgrXに入れなさい
grY = evt.accelerationIncludingGravity.y;  // evtのx軸の傾きを出してgrXに入れなさい
//重力なので出力される値は-9.8~9.8(G)です

//以下iPhoneの時の挙動
if (ua.indexOf("iPad") >= 0 || ua.indexOf("iPhone") >= 0 || ua.indexOf("iPod") >= 0){
myX = myX + grX * 2;//myXの値に傾きを足す
myY = myY + grY * -2;//myYの値に傾きをを足す
}

//以下Androidの時の挙動
if (ua.indexOf("Android") >= 0){
myX = myX + grX * -2;//myXの値に傾きを足す
myY = myY + grY * 2;//myYの値に傾きをを足す
}


});
//---------

function draw() {

//--以下真ん中に表示させる用
if(myX < -130){
myX = -130;
}

if(myX > 130){
myX = 130;
}

if(myY < -130){
myY = -130;
}
if(myY > 130){
myY = 130;
}
//----

//ランダム色で塗るrandom color
context.fillStyle = '#'+ Math.floor(Math.random()*16777215).toString(16);//Math.floorはもらった数で小さい方の整数を出す.10.9なら10 -5.9なら-6. Math.randomは0〜1のランダム値を実数で出す.なのでfloat扱い.それにフルカラーの数1677万をかけて,toString(16)で16進数に変更する.個人的にはRGB別々に色を扱っていないので強引なやり方に見えます

context.beginPath();//線を描き始めます
context.arc((myX + 150),(myY + 150),(Math.random()*30),0,Math.PI*2,false);
//context.arc(myX,myY,(Math.random()*10),0,Math.PI*2,false);//円形はmyX,myYの位置から,1〜0の乱数出して,乱数小さいんで10倍して,ラジアンで0度の位置から始めて,Math.PI*2はラジアンで言うところの1=すなわち360度で描き終えて,描く方向は反時計回りやで
context.fill();//塗りつぶせ
}
setInterval(draw, 10);//10msec起きに描いてね

//---ファイルに書き出すよう

function screenshot(){
  var png = canvas.toDataURL();
  document.getElementById("newImg").src = png;
}
//---

</script>

<form>
<input type="button" value="画像に変換" onclick="screenshot()">
</form>
<div><img id="newImg"></div>
<!-- このDIVのIDを探してここに画像を入れる -->
</body>
</html>

 

24行目で動作しているデバイスの情報を取得し,35〜44行目でAndoridとiPhone等と別々の挙動をさせています.

HTML5入門その11-加速度センサで描く

加速度センサを使って抽象画というかミニマルアートっぽいのを描きます

IMG_6727

<!DOCTYPE html>
<html>
<head>
<title>DeviceGravity</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<!-- metaタグで ブラウザの挙動を制限している -->
</head>
<body>
<h1>Key2</h1>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>

<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");




//---------以下加速度検出用
window.addEventListener("devicemotion", function(evt){//これの反応をみててください,その反応がdevidemotionという種類であればその値をevtに入れなさい
var grX = evt.accelerationIncludingGravity.x;  // evtのx軸の傾きを出してgrXに入れなさい
var grY = evt.accelerationIncludingGravity.y;  // evtのx軸の傾きを出してgrXに入れなさい
//重力なので出力される値は-9.8~9.8(G)です
var myX = 0;
var myY = 0;

myX = myX + grX;//myXの値に傾きを足す
myY = myY + grY;//myYの値に傾きをを足す(iPhoneならここに-1をかけ算する)
 
});
//---------

function draw() {

if(myX < 0){
myX = 0;
}

if(myX > 320){
myX = 320;
}

if(myY < 0){
myY = 0;
}
if(myY > 320){
myY = 320;
}

//ランダム色で塗るrandom color
context.fillStyle = '#'+ Math.floor(Math.random()*16777215).toString(16);//Math.floorはもらった数で小さい方の整数を出す.10.9なら10 -5.9なら-6. Math.randomは0〜1のランダム値を実数で出す.なのでfloat扱い.それにフルカラーの数1677万をかけて,toString(16)で16進数に変更する.個人的にはRGB別々に色を扱っていないので強引なやり方に見えます

context.beginPath();//線を描き始めます
context.arc(myX,myY,(Math.random()*10),0,Math.PI*2,false);//円形はmyX,myYの位置から,1〜0の乱数出して,乱数小さいんで10倍して,ラジアンで0度の位置から始めて,Math.PI*2はラジアンで言うところの1=すなわち360度で描き終えて,描く方向は反時計回りやで
context.fill();//塗りつぶせ
}
setInterval(draw, 10);//10msec毎に描いてね

</script>


<div id="screen"></div>
</body>
</html>

2カ所間違えているのでこのままでは動作しません.グローバル変数とローカル変数に気をつけて,どこが間違っているのかよく探してみましょう.

誤りを見つけて修正してみてください.

Unity-他のスクリプトへメッセージ送信

C#なんてわしゃやらんよ,,けどちびっとかいてみる,,

Unityでの他のオブジェクトへメッセージを送る方法です

SendMessageというものをつかいます.

同じゲームオブジェクト内のスクリプトであれば,こんなことしなくても,関数名だけで動きますよ〜

またこのほかにfindで探させる方法もあります.この場合はタグをつけてあげるのもいいでしょう.また,BroadcastMessageというのもあります.

たぶんその面クリア!なんていうときに,「敵というタグ」のついたオブジェクト全部に一斉に自爆指令を放送してメッセージを送るとかに使うのかな?


本題です.

スクリプトは2つからなります

(1)受信側のスクリプト test1.cs

16行目にpublicがついています.これが必要なようです.

using UnityEngine;
using System.Collections;

public class test1 : MonoBehaviour {

	// Use this for initialization
	void Start () {

	}

	// Update is called once per frame
	void Update () {

	}

	public void neko(bool mybool){//publicで他からsendできます.メッセージがここで受信します.引数はブーリアンでmyboolに格納します
		Debug.Log(mybool);//myboolに格納されたブーリアンを出力します
	}
}

 (2)送信側のスクリプト  testzero.cs

これを実行すると画面にボタンが表示されます.

using UnityEngine;
using System.Collections;

public class testzero : MonoBehaviour {
	public GameObject player;//playerという名のゲームオブジェクトを指定します
//UnityのGUI側にゲームオブジェクトを選択できるGUIができますので,そこに受信側のスクリプトが含まれているゲームオブジェクトをアサインしてください.例えばCreate EmptyでスクリプトだけあてたゲームオブジェクトでもOKです

	// Use this for initialization
	void Start () {

	}
	void OnGUI() {

		if (GUI.Button(new Rect(10, 70, 50, 30), "Click"))//GUIボタン表示
		player.SendMessage("neko", true);//playerにアサインされたスクリプトのうち neko というクラスにアクセスし trueを引数で渡します
	}
	// Update is called once per frame
	void Update () {

	}
}

そのボタンをクリックするとコンソールにtrueと表示されます.

これ,Javascriptでは

function neko(mybool:bool){//引数の型の定義は不要だったかな?
//処理
}

 

では動作しません

static function neko(mybool:bool){
//処理
}

staticをつけると動きます.

どこかに書いてましたが static は「神の領域」らしいです.

HTML5入門その10-実機で動作させる(準備)

実機での動作にはWEBサーバが必要です

  1. WEBサーバにプログラムを保存
  2. スマホでそのページへアクセス
  3. 実行結果を見てみる

という流れです。

無料のWEBサーバをうまく探せなかった方は、Wドライブを使ってください。
ただしWドライブは来年度以降なくなる予定です。

いずれにしろ、自分が権利を保持していないコンテンツはアップロードしないようにしましょう.

 


まずはグローバル変数とローカル変数についておさらいしておきましょう

変数の扱いについて

変数には,(例えば)hogeという関数 function hoge(){  ~  } 内でだけ使えるローカル変数と,プログラム内のどこでも使えるグローバル変数があります.

<!DOCTYPE html>
<html>
<head>
<title>Global or Local</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Global or Local</h1>
<script type="text/javascript">
var neko = 10;
function inu(){
var dog = 5;
}
inu();
console.log("neko=" + neko);
console.log("dog=" + dog);
</script>
</body>
</html>

このHTMLを実行し,WEBコンソールを確認してみてください.cosole-global

このように表示され,14,14行目のconsole.logのうち,15行目が実行されていません.

10行目の var neko = 10;nekoはfunctionの外で宣言されています.ので,プログラム内のどこでも(function の中でも)使用できます.これをグローバル変数と言います.世界用ですね.

しかし12行目のvar dog = 5; はfunction inu中で宣言されています.この変数dogfunction inu中でしか使えません.これをローカル変数と呼びます.ご近所さん用ですね.

carGlobal

では.14行目,15行目を変更せず,コンソールに両方の変数が表示されるためにはどうしたら良いでしょうか?


解答例(1)

<!DOCTYPE html>
<html>
<head>
<title>Global or Local</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Global or Local</h1>
<script type="text/javascript">
var neko = 10;
var dog = 5;//ここで宣言するとグローバル変数になるのでどこでも使える♪
function inu(){
//var dog = 5;//コメントアウトして無効にしています
}
inu();
console.log("neko=" + neko);
console.log("dog=" + dog);
</script>
</body>
</html>

解答例(2)

<!DOCTYPE html>
<html>
<head>
<title>Global or Local</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Global or Local</h1>
<script type="text/javascript">
var neko = 10;
var dog = 0;//変数 dogをグローバルで宣言
function inu(){
dog = 5;//dogに5を代入
}
inu();//function inu を実行
console.log("neko=" + neko);
console.log("dog=" + dog);
</script>
</body>
</html>