家族の成長をプログラミングで多彩に表現
次の動的表現はブラウザChrome, edge, Firefox, operaで動作します。
ショートメッセージ一覧
下の図はすべてテキストでありUnicodeが定める絵文字です。モダーンブラウザならば問題なく表示されますがデザインは微妙に異なります。
🌺 🎏 🎎 🎷 🐘 🚸 🎃 🏃 🎣 🎵 🎐 🏫 🙂 📖 👩 🎓
成長一覧図
応用するときの注意事項
HTMLプログラミングコードを次項に示します。サンプル成長記の画像はイラストですが実際にはスナップ写真、卒業証書をスキャンした画像などを載せます。
左の中央部には大きな絵文字を表示していますが、小さなフォントサイズでひとことメッセージにするのも面白いでしょう。
時計回りに回転するメッセージはサイズを小さめにして多くの文字を入れることができます。ブログなどに発表することがなければもっと茶目っ気、センセーショナル、とっておきの自慢話や失敗談を載せるのもいいかもしれません。
プログラミングに精通した暁には途中の開発過程を秘密にしておき、誕生日などの記念日にサプライズプレゼントされてはいかがでしょう。
両親がプログラミングに得意であれば、息子、娘の結婚祝いに、そうでなければ、息子、娘から父親の30年勤務祝いに手作りプレゼントを目指すのもいいのではないでしょうか。
プログラミングコードはCTRL+Uで引き出すことができますが、次に掲載します。
プログラミングコード
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<Div style="float:left; width:500px; height:500px; background:ivory; overflow:hidden; border:1px green solid;">
<canvas id="sample" width="500" height="500"></canvas>
<img id="btn" src="https://aidesign.lolipop.jp/wp-content/uploads/2019/12/startButton.png" width="48" height="48" style="margin-left:440px; margin-top:-485px; display:block;">
<span id="num" style="margin-left:440px; margin-top:-495px; font-size:48px; display:none;">❶</span>
</Div>
<DIV style="float:left; position:relative; width:500px; height:500px; overflow:hidden; border:1px solid pink;">
<div id="month5" style="position:absolute; left:60px; top:70px; width:500px; weight:500px;">
<img id="growth" src="https://aidesign.lolipop.jp/wp-content/uploads/2020/04/simple_family-300x300-1.png" width="400" height="400">
</div>
<div id="music" style="visibility:hidden; position:absolute; left:15px; top:485px; font-size:11px; border:0px blue solid;">
参照音楽：フリーBGM・音楽素材 H/MIX GALLERY「遅めのランチ」 ©TacM,2020 Ver0.01
</div>
</DIV>
<audio id="bgm1" src="https://aidesign.lolipop.jp/wp-content/uploads/2020/04/lateLunch.mp3"></audio>
<script type="text/javascript" charset="utf-8">
// ❶ ❷ ❸ ❹ ❺ ❻ ❼ ❽ ❾ ❿ ⓫ ⓬ ⓭ ⓮ ⓯ ⓰
const festival = ["🌺", "🎏", "🎎", "🎷", "🐘", "🚸", "🎃", "🏃", "🎣", "🎵", "🎐", "🏫", "🙂", "📖", "👩", "🎓"];
const N=15; //分割数
const HK=200; //半径
const ZX=250; //中心点x
const ZY=245; //中心点y
const tcolor=["limegreen", "blue", "cyan", "green", "red", "purple", "chocolate", "deeppink"];
const msg=[ " ふたりにわんぱくぼうず授かる", " はしゃぎ回る元気な男の子 ", " ぼんぼりに灯りをつけて雛祭り", " 堂々たる鼓笛隊の晴れ姿 ",
" みんなに祝福されて入園式 ", " 横断歩道は気をつけて渡って ", " 手づくり竹とんぼで遊ぶ ", " 選抜選手リレー競走 ",
" お父さんといっしょつり大会 ", " ピアノ発表会の晴れすがた ", " うまいおいしいバーベキュー ", " 晴れの入学式 ",
" 弁論大会の勇姿 ", " 少年老い易く学成り難し ", " 卒業式 仲間との悲しい別れ ", " 卒業式 新たな旅立ちへ "];
var FS=62; //フォントサイズ
var FX=28; //x
var FY=24; //y
var x=[], y=[];
var v=[], w=[];
var ctx, m, t, count=time=0;
var evnt = document.getElementById("bgm1"); //BGMのイベントオブジェクト
var DT = 360 / N; //多角形の１角の値
for(var i=0; i<N; ++i){
var t=(i*DT+114)*Math.PI/180.0; //114=360/15+90
x[i]=Math.cos(t);
y[i]=Math.sin(t);
//console.log("i=", i, x[i], y[i]);
}
var canvas1 = document.getElementById('sample'); // canvasの要素を取得する
canvas1.addEventListener("mousedown", mouseDownListner, false);
ctx = canvas1.getContext('2d'); //次から具体的な描画内容を指定する
textOut(192, "💒", 120, 330); //指定座標にテキスト描画
ctx.fillStyle = "darkviolet";
textOut(56, "家族の成長記録", 20, 110); //指定座標にテキスト描画
textOut(12, "by TacM", 10, 495); //credit
function start(){ //開始指定
document.getElementById('btn').style.display = "none";
document.getElementById('num').style.display = "block";
//ctx.strokeRect(20, 55, 415, 65);
ctx.clearRect(20, 55, 415, 65); //20, 65, 420, 60
evnt.play(); //bgm
pentagon(HK, ZX, ZY, 'snow'); //多角形を描画
}
function pentagon(hk, px, py, color){
ctx.beginPath(); //パスの描画を始める
ctx.lineWidth = 6;
for(var i=0; i<N; ++i){
v[i] = px + x[i] * hk; //始点
w[i] = py - y[i] * hk; //終点
}
ctx.moveTo(v[N-1], w[N-1]); //線の開始位置 (xの座標値 , yの座標値)
for(var j=0; j<N; ++j){
ctx.lineTo(v[j], w[j]);
}
ctx.closePath();
ctx.strokeStyle = color;
ctx.stroke(); //指定された色の多角形を描画
document.getElementById('growth').src = "https://aidesign.lolipop.jp/wp-content/uploads/2020/04/1440-400.png";
document.getElementById('growth').width = "3600";
document.getElementById('growth').height = "1000";
catchCopy();
}
function mouseDownListner(e) {
var rect = e.target.getBoundingClientRect(); //座標取得
mouseX1 = e.clientX - rect.left;
mouseY1 = e.clientY - rect.top;
console.log("mouseDownListner", mouseX1, e.clientX, rect.left, mouseY1, e.clientY, rect.top);
if (mouseX1 > 195 && mouseX1 < 195 + 300) { //作り方
if (mouseY1 > 478 && mouseY1 < 478 + 20) {
location.href = "https://bit.ly/34upht5"; //「音や映像が飛び出すプログラミングつぶやき本」の概要
}
}
if (mouseX1 > 440 && mouseX1 < 485) { //開始
if (mouseY1 > 18 && mouseY1 < 58) {
start(); //開始指定
}
}
}
function catchCopy(){ //キャッチコピー
time=Math.floor(count / N); //T i m e, 0～15
m = time % 8; //0～7
t = Math.floor(time / 8); //0～1,//console.log("count="+count+" "+m+" "+t);
var l=(1484+N-count-time)%N;
//ctx.lineWidth=1;ctx.strokeStyle = 'black';ctx.strokeRect(v[l]-FX-2, w[l]-FY-11, FS+10, FS+5); //4, 8, 8
ctx.clearRect(v[l]-FX-2, w[l]-FY-11, FS+10, FS+5); //4, 8, 8 circle
var cn = count % N; //0～14
var s = msg[time][cn];
ctx.fillStyle = tcolor[time%tcolor.length]; //'deeppink'
textOut(FS, s, v[l]-FX, w[l]+FY); //指定座標にテキスト描画
//console.log("CN=", count, cn, m, t, time, s, tcolor[time%tcolor.length]);
if(cn==0){ //メッセージの始まり
document.getElementById("num").innerHTML = "❶❷❸❹❺❻❼❽❾❿⓫⓬⓭⓮⓯⓰".substr(time, 1);
drawGrowth();
}
if(++count < 240) setTimeout('catchCopy()', (cn==14) ? /*3000*/1500 : 60);
else{ //credit
ctx.fillStyle = 'black';
textOut(16, "作り方、楽しみ方➡ https://bit.ly/34upht5", 200, 494);
ctx.strokeStyle="blue";ctx.lineWidth=1; // 線の色を青に指定
ctx.strokeRect(195, 478, 300, 20); // 四角形（輪郭）
ctx.clearRect(8, 480, 60, 18);
textOut(16, "presented by grandfather.", 2, 495);
document.getElementById('music').style.visibility = "visible";
count=0; //for rerun
}
}
function drawGrowth() { // 180*200 -> 450*500
var x=time % 8;
var y=Math.floor(time / 8);
document.getElementById('month5').style.left = (-x*450) + "px"; //450:500
document.getElementById('month5').style.top = (-y*500) + "px";
setTimeout(function(){
console.log("TIME, X, Y", time, festival[time], x, y);
//ctx.lineWidth=1;ctx.strokeStyle = 'black';ctx.strokeRect(140, 140, 225, 225);
ctx.clearRect(140, 140, 225, 235);
textOut(192, festival[time], 120, 320); //指定座標にテキスト描画
},400); //delay
}
function textOut(fnt, msg, x, y){
ctx.font = fnt + 'px Arial';
ctx.fillText(msg, x, y);
}
</script>
</body>
</html>