See the Pen 獲物に向かうように進化するビークル by kanaparty (@kanaparty) on CodePen.
久しぶりにnature of codeの課題!
前回の進化の課題の表現を文字列から運動に変えて、
解を「獲物(画面右端の丸)にたどり着くこと」とした。
はじめはてんでバラバラの方向に向かう集団が、世代を進めるとだんだん獲物に辿り着けるように進化していく。
See the Pen 獲物に向かうように進化するビークル by kanaparty (@kanaparty) on CodePen.
久しぶりにnature of codeの課題!
前回の進化の課題の表現を文字列から運動に変えて、
解を「獲物(画面右端の丸)にたどり着くこと」とした。
はじめはてんでバラバラの方向に向かう集団が、世代を進めるとだんだん獲物に辿り着けるように進化していく。
URL(リソースの場所)、URN(リソースの名前)、URI(リソースの識別)
REST・・・webのアーキテクチャスタイル(指針・作法・流儀、システムを設計するときの指針)
「クールなURIは変わらない」
Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)
ソケット・・・ネットワークのデータのやりとりを抽象化したAPI。
HTTPはステートレスなプロトコル。
ステートレスでは・・ - アプリケーション状態を保持しない
ステートフル
アプリケーション状態・・セッション状態(ログインしてからログアウトするまで)のこと
どっちでもリソースの作成ができる。でも、クライアントがURIを決めたいときはPUTが適しているが そのURIが存在しているか調べたり、クライアントが内部実装を熟知していないといけなかったりするので 特別な理由がない場合はPOSTでリソース生成をしたほうがよい
冪等 - Wikipedia 「ある操作を1回行っても複数回行っても結果が同じであること」
GET PUT DELETE で実現できる機能はべき等と安全性が利用できるのでなるべくそれで実現する
クライアントの挙動を左右するのでステータスコードの選択は重要。
Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)
関係モデル(関係モデル - Wikipedia)RBDMS(関係データベース管理システム - Wikipedia)などのER図から考える
オブジェクト指向モデルのクラス図から考える
情報アーキテクチャ(よくわからなかったのでまたいつか・・)
Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)
See the Pen Genetic Algorithms(遺伝的アルゴリズム) by kanaparty (@kanaparty) on CodePen.
遺伝的アルゴリズムを使ってランダムな文字列から「音はしぐれか」 種田山頭火 - Wikipediaへ進化させる。
ステップは大きく分けて3つ
これを繰り返して進化させていくアルゴリズム (「進化させていく」って表現でいいのかしらと思ったら本には「特定の問題を解決することを意図して実装される」と書いてあった。 遺伝的アルゴリズム - Wikipedia wikipediaでは「解を探索する」と書いてあった。) 解は決まっていて、そこまでたどり着くための手法。 この経過の様子を眺めているのが結構楽しい。
遺伝的アルゴリズムを実装するときに必要な、ダーウィンの進化論の中核の3つの要素
初期化部分。 解、初期集団を生成する。 コードでいうとこの部分
//ターゲット句 var target = 'おとはしぐれか'; //集団の初期化 var population = new Population(); population.init(); //個体 class DNA{ constructor(){ this.genes = []; this.fitness = 0;//適合度 } //初期化 init(){ for (var i = 0; i < targetLength; i++) { this.genes[i] = String.fromCharCode(Math.floor(Math.random() * 81) + 12354); } } } //個体群 class Population{ constructor(){ this.List = []; this.length = 100; this.children = []; this.finished = false; } init(){ for (var i = 0; i < this.length; i++) { this.List.push(new DNA()); this.List[i].init(); } } }
目指す句の文字列を決めて、ランダムな文字列の句の集団を100個作る。
今回は7文字の文字列が「おとはしぐれか」に近いものをより選択しやすくする状況を作る。 選択するときは、一致している具合に応じた数(適応度が高ければ多く、低ければ少ない)親を入れ物(配列)にコピーしていれておいて そこから次の世代の親を2つ拾うようにする。 結果的に適応度が高い個体が選ばれやすくなる。
適応度に応じてプールにいれているところ↓
//プール var matingPool = []; //個体 class DNA{ //適合度をはかる calcFitness(){ var score = 0; for (var i = 0; i < targetLength; i++) { if(this.genes[i] === target.charAt(i)){ score++; } } this.fitness = score / targetLength; } } //個体群 class Population{ //淘汰 naturalSelection(){ matingPool = []; for (var i = 0; i < this.length; i++) { this.List[i].calcFitness(); var fitness = this.List[i].fitness; //完全一致していたら止める if(fitness === 1){ this.finished = true; } //適応度に応じた数をプールに入れる for (var j = 0; j < count; j++) { matingPool.push(population.List[i]); } } } }
親をプールから選んで次の世代を作っているところ
//個体群 class Population{ createNextGenelation(){ //プールから親二つを取り出す for (var i = 0; i < this.length; i++) { var parentA = matingPool[Math.floor(Math.random() * matingPool.length)]; var parentB = matingPool[Math.floor(Math.random() * matingPool.length)]; //生殖(突然変異含む) this.children[i] = parentA.crossover(parentB); } } } //個体 class DNA{ //交配 crossover(partner){ var child = new DNA(); var midpoint = Math.floor(Math.random() * targetLength); var mutate = (Math.random() < 0.1) ? true : false ; //突然変異 if(mutate){ child.init(); } else{ for (var i = 0; i < targetLength; i++) { if(i < midpoint){ child.genes[i] = this.genes[i]; } else{ child.genes[i] = partner.genes[i]; } } } return child; } }
という感じでこれを繰り返すといつか「おとはしぐれか」になる!
See the Pen tree(L-system) by kanaparty (@kanaparty) on CodePen.
L-systemを使って、藻みたいな描写をする課題。
L-system - Wikipedia
フラクタル構造を管理するメカニズム。必要な要素は3つあって、
作ったL-systemのところはこんな感じ
//L-system class Lsystem { constructor(axiom, rule) { this.rule = rule; this.sentence = axiom; this.generation = 0; } //次の世代の文字列を作る generate() { var nextgen = ""; for (var i = 0; i < this.sentence.length; i++) { var crr = this.sentence.charAt(i); for (var j = 0; j < this.rule.length; j++) { var a = this.rule[j].getA(); if (a === crr) { nextgen += this.rule[j].getB(); } else { nextgen += crr; } } } this.generation++; this.sentence = nextgen; } getSentence() { return this.sentence; } getGeneration() { return this.generation; } } //ルール class Rule { constructor(chr, sentence) { this.a = chr; this.b = sentence; } getA() { return this.a; } getB() { return this.b; } }
書いていくときにはタートルグラフィックという描画フレームワークを使うのが一般的。
F G + - [ ]などは亀(ポインタ)にだす直進、回転、などの指示のこと。
今回書いたのでいうとここのぶぶん
//描写 class Turtle { constructor(todo, length, theta) { this.sentence = todo; this.length = length; this.angle = theta; } draw() { for (var i = 0; i < this.sentence.length; i++) { var chr = this.sentence.charAt(i); switch (chr) { case 'F': ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, -this.length); ctx.stroke(); ctx.closePath(); ctx.translate(0, -this.length); break; case '+': ctx.rotate(this.angle); break; case '-': ctx.rotate(-this.angle); break; case '[': ctx.save(); break; case ']': ctx.restore(); break; default: } } } //長さを変更 changeLength(ratio) { this.length *= ratio; } //新しい文字列を取得 updateSentense(axiom) { this.sentence = axiom; } }
初めて知ったLOGO言語
LOGO - Wikipedia www.wizforest.com
ポインタを亀にみたたて動かすっていうのが面白いなぁと思ったら もともと教育のための言語なんですね。 LOGO開発者 シーモア・パパート
「オブジェクト指向がタートル・グラフィックスに起源を持つことはよく知られている」 らしい。そうなんだ!
そしてこの連載がかなり面白い。また読む。
See the Pen tree(2) by kanaparty (@kanaparty) on CodePen.
木っぽいやつ
コッホ曲線を書いた時のようにベクトルオブジェクト(とそれをまとめるarraylist)でつくってみたのは↓ こっちは枝の長さが一定に短くなるようにしてます。
See the Pen tree by kanaparty (@kanaparty) on CodePen.