!!!七角形を描画
とりあえず[描画|http://www21051ue.sakura.ne.jp/polygon]してみる
#!/usr/bin/env perl
use Mojolicious::Lite;
app->types->type(data => 'application/octet-stream');
app->types->type(mem => 'application/octet-stream');
app->types->type(wasm => 'application/wasm');
get '/:n' => {n => 7} => sub {
my $c = shift;
$c->render(template => 'index');
};
app->start;
__DATA__
@@ index.html.ep
% layout 'default';
% title '七角形';
@@ layouts/default.html.ep
<%= title %>
<%= content %>
!!LINE ART
LINE ARTで書いた七角形をperlで書いてみた。webperl+mojoliciousでcanvasに七角形を描画してみた。
!webperl de canvas
*getElementByIdメソッドでHTMLと関連付けて、getContextメソッドで描画機能を有効にする
**getElementByIdメソッドでid名を指定してHTML側と関連付けます。 次に、getContextメソッドで描画機能を有効にします。JavaScriptとほぼ同じ書き方です。
my $canvas = js('document')->getElementById('canvas');
my $ctx = $canvas->getContext("2d");
*canvasのメソッドには $object->Method()でアクセスする。
$ctx->stroke();
*canvasのプロパティには$object->{Property}でアクセスする。
$ctx->{strokeStyle} = 'rgba(0,0,100,0.5)';
!mojolicious de webperl
mojoliciousでwebperlを使ってみる。まずは雛形をつくる。
$ mojo generate lite_app polygon.pl
pubulicの下にhttps://webperl.zero-g.net/よりダウンロードしたファイルを展開する。
$ tree .
.
├── polygon.pl
└── public
├── emperl.data
├── emperl.js
├── emperl.wasm
├── LICENSE_artistic.txt
├── LICENSE_gpl.txt
├── lineArt.css
├── mini_ide
│ ├── emscr_ide.css
│ ├── emscr_ide.js
│ └── webperl_mini_ide.html
├── README.md
├── regex_tester.html
├── runtests.html
├── webperl_demo.html
├── webperl.js
└── webperl.psgi
雛形にMIMEを追加する
app->types->type(data => 'application/octet-stream');
app->types->type(mem => 'application/octet-stream');
app->types->type(wasm => 'application/wasm');
テンプレートにwebperl.jsを追加してperlを書く
!perl de Heptagon
*多角形を書くために頂点の位置を計算する。
**半径１の円を考えると、座標 ( Cos(radian) , Sin(radian) ) が頂点になる([【Unity】Texture2Dに多角形を描く|https://blog.narumium.net/2017/02/03/%E3%80%90unity%E3%80%91texture2d%E3%81%AB%E5%A4%9A%E8%A7%92%E5%BD%A2%E3%82%92%E6%8F%8F%E3%81%8F/]より)
*ラジアン
**180°= π[rad]
**正n角形の各頂点は、単位円の中心をn等分しているので、等分した1コ当りの中心角は
***中心角 = 2π÷n
my $n = 7;
my @paricles = ();
push(@paricles,particle($_,$n)) for (1 .. $n);
sub particle{
my ($i,$n) = @_;
my $ret = {};
$ret->{x} = $r * cos($i*2*$pi/$n);
$ret->{y} = $r * sin($i*2*$pi/$n);
return $ret;
}
**度(deg)からラジアン(rad)を求める計算式
***rad=deg*(π/180)
**ラジアン(rad)から度(deg)を求める計算式
***deg=rad*(180/π)
*https://ja.wikipedia.org/wiki/%E4%B8%83%E8%A7%92%E5%BD%A2
正七角形とは、各辺と全ての内角の大きさがそれぞれ等しい七角形。ひとつの内角の大きさはラジアン角で5π/7（約128.57度）である。
正七角形をコンパスと定規（長さの計測が不可能なもの）で作図することは不可能であるが、コンパスと目盛り付の定規（長さの計測が可能なもの）を用いたり、あるいは折り紙を用いるなどすれば描画可能である。
*[正７角形のある性質|http://shochandas.xsrv.jp/figure/heptagon.htm]
辺をa、対角線をb,cとすると １/ａ＝１/ｂ＋１/ｃ が成り立つ
!webperl
CDNからwebperlコードをロードすれば自身のサーバーでこれをホストする必要すらありません。よって[htmlだけ配置|http://www21051ue.sakura.ne.jp/polygon.html]すればwebperlが使えます。
[polygon.html]
perl de 七角形
角形を書く