GDの描画とテキストの例

PHPの拡張モジュール、GDでも描画関数が用意されており$image=imagecreatefromjpeg(filename) で既存のjpegファイルを読み込めるほか、imageline, imagefilledrectangle, imagearc 関数で線、矩形、円弧などを描画できます。（例：black.php

<?php
$image = imagecreate(200,200);
$white = imagecolorallocate($image, 0xFF, 0xFF, 0xFF);
$black = imagecolorallocate($image, 0x00, 0x00, 0x00);
imagefilledrectangle($image, 50, 50, 150, 150, $black);
imagestring($image, 5, 50, 160,"A Black Box", $black);
header("Content-Type: image/png");
imagepng($image);
?>

imagestringは、imagestring(image, font-id, x, y, text, color) で定義されテキストを画像に追加します。font-idは組み込みのフォントidを[1-5] で指定します。

imagefilledrectangle とimagestring の color パラメータを$black から$white に改変してみます。（例：white.php

<?php
$image = imagecreate(200,200);
$black = imagecolorallocate($image, 0x00, 0x00, 0x00);
$white = imagecolorallocate($image, 0xFF, 0xFF, 0xFF);
imagefilledrectangle($image, 50, 50, 150, 150, $white);
imagestring($image, 5, 50, 160,"A White Box", $white);
header("Content-Type: image/png");
imagepng($image);
?>

PHP リロードしない

Google 先生にPHPでページの自動リロード方法を聞いた処、

<?php
    $rel = $_GET['reload'];
    if ($rel == 'true') {
      header("Location: " . $_SERVER['PHP_SELF']);
    }
    /*デバッグ用*/
    echo($_SERVER['PHP_SELF'].'<br/>');
    echo($_SERVER['SCRIPT_NAME'].'<br/>');
?>

header()を書き込むと良いとのことで試してみましたがダメでした。（たぶん、GETするフラグの作り方が分からないことが分かっている。迷推理）次にJavaScript でリファラを参照して特定のページからアクセスした場合にlocation.reload() するとしてみましたが、何故か無限ループになります。

var myRef = document.referrer;
if (myRef.indexOf("http://hoge.jp/foo.php") == 0) {
  location.reload();
  Object.defineProperty(document,"referrer",{value:"null"});
}

http://oshiete.goo.ne.jp/qa/77766.html で紹介されていた方法で

rload = setTimeout( "location.reload()", 100 );
 clearTimeout( rload );

も試しましたがリロードしませんでした。結局、HTMLで手動リンク

<a href="./bar.php">リロード</a>

が丸いと思いました。（粉ミカン

https://www.ipentec.com/document/document.aspx?page=php-page-reload

PHP のGDをビルド

PHP をビルドしたとき、–with-gd-sharedで拡張モジュールに追加したつもりでした、がphpinfo を確認するとGDがインストールされていないようでした。（apache error.log がImageCreateFromJpeg()でエラーを出すので。）改めてGDをビルドしました。

wget https://github.com/libgd/libgd/releases/download/gd-2.2.3/libgd-2.2.3.tar.gz
./configure --prefix=/usr/local
make && make install

してGDをビルド、PHPを–with-gd(=shared では上手く行かなかった）オプションでビルドしましたがlibwebp、gd-lastでコケます。yum でgdのパッケージが足りないのだろうと思い、remi リポジトリを導入

wget http://rpms.famillecollet.com/enterprise/remi-release-6.rpm
rpm -Uvh remi-release-6.rpm

して

yum --enablerepo=epel,remi install libwebp
yum install gd-last-2.2.3-1.el6.remi.x86_64
yum install gd-devel
yum --enablerepo=remi install php56-php-gd.x86_64

して再びビルドしたところ phpinfo でGDを確認できました。

回線工事、完了です・・・。

今日は朝からNTTの人が来てフレッツ光を上位スループットの光ネクストに工事をしました。光ファイバーケーブルを宅内配線して古いCTUの代わりにモデムを設置しました。

ファイアウォール設定、静的IPマスカレード、サーバーやひかりTVのポート開放などの設定をして1日が終わりました。3台が1台になってかなりスッキリですね。

リンク速度は無線ルーターから飛ばして15Mbps、

LANケーブルからモデム直結で33Mbpsでした。

pushとpop

配列に要素を追加したり、追加した要素を取り出す配列操作のメソッドにpush と popがあります。組み合わせると先入れ後出し(first in, last out)のスタックが実現します。

var stack = [];

stack.push('Lightning Bolt');
　// スタックの内容：['Lightning Bolt'] 1 を返す
stack.push('Brainstorm');
　// スタックのの内容：['Lightning Bolt', 'Brainstorm'] 2を返す
stack.pop();
　// スタックの内容 ['Lightning Bolt'] Brainstorm を返す
stack.push('Counterspell','Price of Progress');
　// スタックの内容['Lightning Bolt','Counterspell','Price of Progress'] 3を返す
stack.pop();
　// スタックの内容['Lightning Bolt','Counterspell'] Price of Progress を返す

stack.pop();
 // スタックの内容['Lightning Bolt']  Counterspellを返す

Counterspell されてもpop() しない限りstack の’Lightning Bolt’ は取り出せませんけど・・・ね。

JavaScriptでCSVファイルを読む

XMLHttpRequest を使って外部CSVファイルを2次元配列として読み込み、テーブルとして出力しています。

.open メソッドの第1引数は、HTTPメソッドを指定します。通常のリクエストにはGETが使われます。URLでリクエストするリソースをすべて表せて、リクエストによりサーバー側に副作用がなく、サーバーのレスポンスがキャッシュ可能であればGETリクエストを使うのが適切です。POSTはフォームデータの送信をするときに使います。
第2引数は、ファイルのURLを指定します。
第3引数は省略可能ですが true で非同期通信、false で同期通信をします。リクエストが完了して、成功した場合 .responseText メソッドを使ってテーブル出力関数に渡しています。

loadCSV.js

window.onload = function() {
  function getText(path) {
    var request = new XMLHttpRequest();  // 新しいリクエストを作成する
    request.open("GET", path, true);    // 取得するファイルパスを指定する
    request.onreadystatechange = function() { // イベントリスナーを定義
      // リクエストが完了し、成功した場合。
      if (request.readyState === 4 && request.status === 200) {
        var type = request.getResponseHeader("Content-Type");
        if (type.match(/^text/))
          parseCSV(request.responseText); // コールバック関数に渡す
      }
    };
    request.send(null);　　// ここでリクエストを送信する
  }
  function parseCSV(str) {
    var CR = String.fromCharCode(13);
    var LF = String.fromCharCode(10);
    var csvData = new Array();
    var lines = str.split(LF);
    for (var i = 0; i < lines.length; i++) {
      var cells = lines[i].split(",");
     if( cells.length != 1 ) csvData.push(cells);
    }
    var result = "<table>";
    for (var i = 0; i < csvData.length; i++) {
      result += "<tr>";
      for (var j = 0; j < csvData[i].length; j++) {
        result += "<td>";
        result += csvData[i][j];
        result += "</td>";
      }
      result += "</tr>";
    }
    result += "</table>";
    document.getElementById("result").innerHTML = result;
  }
  getText('./example.csv');
}

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <script type="text/javascript" src="./loadCSV.js"></script>
 </head>
 <body>
 <div id="result"></div>
 </body>
 </html>

CSVファイルは文字化けしないように保存形式によって文字コードを指定しています。

参考URL：http://blog.cles.jp/item/2691

JavaScriptの座標変換の例

今回はJavaScriptの座標変換を使って正五角形をCanvasに描画してみました。

半径 r の円に内接する正五角形の円の中心から各辺に下した垂線の長さ [pmath]ay={{1+sqrt{5}}/{4}}r [/pmath] , 円の中心を原点として各辺の一辺の長さ[pmath]a=2ax={{sqrt{10-2sqrt{5}}}/{2}}r[/pmath] が既知としています。

https://stuffy.mydns.jp/~gusachan/javascript/pentagon.html

var c=document.getElementById("graph");
var ctx=c.getContext("2d");
var dgr =  Math.PI/180;
function pentagon() {
  var r = 160, ax, ay, bx, by;
  ax = -(Math.sqrt(10 - 2*Math.sqrt(5)))*r/4;
  ay = (1 + Math.sqrt(5))*r/4;
  bx = -ax;
  by = ay;
  ctx.beginPath();
  ctx.save();
  ctx.translate(200 + ax, 200 + ay);
  ctx.moveTo(0,0);
  leg();
  ctx.rotate(-72*dgr);
  leg();
  ctx.rotate(-72*dgr);
  leg();
  ctx.rotate(-72*dgr);
  leg();
  ctx.rotate(-72*dgr);
  leg();
  ctx.closePath();
  ctx.restore();
  function leg() {
    ctx.save();
    ctx.lineTo(2*bx,0);
    ctx.restore();
    ctx.translate(2*bx,0);
  }
}
pentagon();
ctx.stroke();
beginPath();
ctx.arc(200,200,160,0,360*dgr,false);
ctx.stroke();

円の中心を原点として五角形の左下隅の角の座標(ax, ay) =(-(Math.sqrt(10 – 2*Math.sqrt(5)))*r/4, -(1 + Math.sqrt(5))*r/4) をCanvasの座標の（左上隅を(0,0)とする）原点からtranslate(200 + ax, 200 + ay)) して始点とし、leg() 関数を呼び出して底辺を一回描画したのち、restore()で座標系変換を元に戻しtranslate(2*bx, 0)でレグの終点を(0,0) になるように移動してrotate(-72*dgr)で72°反時計回りに回転 、次の底辺の再描画～を4回繰り返してstroke()しています。

テキストではフラクタル雪片を再帰レベル4で描画していました。

振り子

回転関数の応用で振り子を作ってみました。振り子 の初期角度 rads(init)=π/6 に対して角運動量 rads(init)*Math.cos(rads(d)), （ただし角振動数、d = +5[°/100ms] ）です。ここの所はアバウトにして正確な物理計算はしていません。

https://stuffy.mydns.jp/~gusachan/javascript/pendulum.html

var d = 0;
var c=document.getElementById("graph");
var ctx=c.getContext("2d");
var init = Number(document.getElementById('degree').value);
window.onload = function() {
  function rads(x) {
    return Math.PI*x/180;
  }
  function coordinate() {
    ctx.beginPath();
    ctx.moveTo(0,200);
    ctx.lineTo(400,200);
    ctx.moveTo(200,0);
    ctx.lineTo(200,400);
    ctx.closePath();
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(200,200,150,0,rads(360),false);
    ctx.stroke();
  }
  function furiko() {
    var init = Number(document.getElementById('degree').value);
    d += 5;
    arg = rads(init)*Math.cos(rads(d))+rads(-90);
    ctx.clearRect(0,0,400,400);
    coordinate();
    ctx.beginPath();
    ctx.moveTo(200,200);
    ctx.lineTo(200 + 150*Math.cos(arg), 200 - 150*Math.sin(arg));
    ctx.closePath();
    ctx.stroke();
  }
  coordinate();
  setInterval(furiko, 100);
}

参考URL: http://www.daido-it.ac.jp/~harashin/pdf/note/10riki2_note9.pdf

pendulum_