nature of code:今日の練習「コッホ曲線」

See the Pen KochLine(コッホ曲線) by kanaparty (@kanaparty) on CodePen.

これ コッホ曲線 - Wikipedia

今までは回転をさせる時、rotateでcanvasを回転させて描く、みたいなことばかりしかやっていなかったが
今回のをつくるのにあたって自作ベクトルクラスに回転させる機能を追加した。

    //回転
  rotate(angle) {
    var cos = Math.cos(angle);
    var sin = Math.sin(angle);

    var newX = this.x * cos - this.y * sin;
    var newY = this.x * sin + this.y * cos;
    this.x = newX;
    this.y = newY;
    return this;
  }

ので自作ベクトルクラスがちょっと長くなった

//ベクトル
class Vector {
  constructor(x, y) {
      this.x = x;
      this.y = y;
      return this;
    }
    //加算
  add(x, y) {
    if (x instanceof Vector) {
      this.x += x.x;
      this.y += x.y;
      return this;
    } else {
      this.x += x;
      this.y += y;
      return this;
    }
  }
  static add(vectorA, vectorB) {
      var x = vectorA.x + vectorB.x;
      var y = vectorA.y + vectorB.y;
      return new Vector(x, y);
    }
    //減算
  sub(x, y) {
    if (x instanceof Vector) {
      this.x -= x.x;
      this.y -= x.y;
      return this;
    } else {
      this.x -= x;
      this.y -= y;
      return this;
    }
  }
  static sub(vectorA, vectorB) {
      var x = vectorA.x - vectorB.x;
      var y = vectorA.y - vectorB.y;
      return new Vector(x, y);
    }
    // ベクトル乗算
  mult(n) {
    this.x = this.x * n;
    this.y = this.y * n;
    return this;
  }
    //ベクトル除算
  div(n) {
      this.x = this.x / n;
      this.y = this.y / n;
      return this;
    }
    //ベクトルの大きさを返す
  mag() {
      return Math.sqrt(this.x * this.x + this.y * this.y);
    }
    //正規化する
  normalize() {
      var size = this.mag();
      if (size === 0) {
        return this;
      }
      this.x = this.x * (1 / size);
      this.y = this.y * (1 / size);
      return this;
    }
    //最大値
  limit(max) {
      if (this.mag() > max) {
        return this.normalize().mult(max);
      } else {
        return this;
      }
    }
    //回転
  rotate(angle) {
    var cos = Math.cos(angle);
    var sin = Math.sin(angle);

    var newX = this.x * cos - this.y * sin;
    var newY = this.x * sin + this.y * cos;
    this.x = newX;
    this.y = newY;
    return this;
  }
    //ベクトルの角度を返す
  static angle(vectorA) {
      var theta = Math.atan2(vectorA.y, vectorA.x);
      return theta;
    }
    //長さ1のランダムな値を返す
  static random2D() {
      this.x = (Math.random() * 2) - 1;
      this.y = (Math.random() * 2) - 1;
      return this.normalize();
    }
    //角度から長さ1のベクトルを返す
  static fromAngle(angle) {
      return new Vector(Math.cos(angle), Math.sin(angle));
    }
    //同じ値をもったVectorを返す
  static copy(vectorA) {
      return new Vector(vectorA.x, vectorA.y);
    }
    //ベクトル内積
  static dot(vectorA, vectorB) {
      return vectorA.x * vectorB.x + vectorA.y * vectorB.y;
    }
    //ベクトル間の角度を返す
  static angleBetween(vectorA, vectorB) {
    var theta = Math.acos((this.dot(vectorA, vectorB)) / (vectorA.mag() * vectorB.mag()));
    return theta;
  }
}

Goole app script をちょっとだけ触ったときのメモ

リファレンス https://developers.google.com/apps-script/reference/calendar/

ここにいろいろまとまっている http://libro.tuyano.com/index2?id=638001

メニューから実行させたいとき https://developers.google.com/apps-script/guides/triggers/#onopen

//メニューから実行する
function onOpen() {
  var menuEntries = [ {name: "run", functionName: "run"} ];
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  ss.addMenu("Custom Menu", menuEntries);
}

oauth1ライブラリ https://github.com/googlesamples/apps-script-oauth1

スクリプト内で保持しておきたい情報とかにはこれをつかう https://developers.google.com/apps-script/reference/properties/properties-service

var props = PropertiesService.getScriptProperties();
//取得
var hoge = props.getProperty("hoge") || "";
//設定
props.setProperty("hoge", str);

jsスケッチ 水面

See the Pen 水面 by kanaparty (@kanaparty) on CodePen.

ライフゲームのルールを少し変えると水面みたいになる!

今回のルール

次の状態を決めるルール

  • セル自身は 前の状態、今の状態、次の状態を持っている。
  • 次の状態 = 自分の周りの8個の前の状態の平均 + 今の状態 - 前の状態とする
  • もし周りの平均が255か0になっていたらその逆にする(波が収まった地点でまた波が起こるようにする)

表現のルール

  • 状態は0~255、その状態をセルの青色に適用する
//周りのセルの状態を見る
updateState() {
  var sum = 0;
  for (var i = 0; i < 8; i++) {
    sum += this.neighbours[i].state;
  }
  //周りの平均値を出す
  var average = Math.floor(sum / 8);

  if (average == 255) {
    this.nextState = 0;
  } else if (average == 0) {
    this.nextState = 255;
  } else {
    this.nextState = this.state + average - this.lastState;
    if (this.nextState > 255) {
      this.nextState = 255;
    } else if (this.nextState < 0) {
      this.nextState = 0;
    }
  }
  this.lastState = this.state;
}

その他少し悩んだこと
セルの状態をアップデートするタイミングは、セル全員が次のセルの状態が決まってから、描くときまでにしなければならない

nature of code:今日の練習「ライフゲーム」

See the Pen life game by kanaparty (@kanaparty) on CodePen.

ライフゲーム

ライフゲーム - Wikipedia 複雑系の特徴をもった セルの系

セルオートマトンのときは
一つの世代を一つの列として表現し、次の世代を下二追加していったけれど
ライフゲームのときは
2次元のセルを使って、次の世代を次のアニメーションフレームで表現するのが一般的。
そうすると細菌がシャーレのなかで成長していくような動きが楽しめる!

ルール

updateState(){
  var neighborhood = cellList.neighborhood(this.colIndex, this.rowIndex);
  var count = 0;
  for (var i = 0; i < 8; i++) {
    if(neighborhood[i].prevState === true){
      count ++ ;
    }
  }

  //セルが生きていて周りにいきているセルが1しかない→死
  if(this.prevState && count < 2){
    this.state = false;
  }
  //セルが生きていて周りに4つ以上→死
  else if(this.prevState && count > 3){
    this.state = false;
  }
  //セルが死んでいて3つだと誕生
  else if(!this.prevState && count === 3){
    this.state = true;
  }
  else{
    this.state = this.prevState;
  }
}

読書メモ:形の美とは何か(5)

まとめの章から面白いなぁと思ったところだけメモ

茶の湯で鑑賞対象になっている茶碗、釈薬や火まわりのムラや貫入、茶室に使用する廃材など
(自然の現象によってできた形、景色と呼ぶ)はカオスやフラクタル系そのもの。


近代建築の形のあゆみ


機能美+造形美 + 心理的付加価値 曖昧さの科学 フィジー理論(ファジィ論理 - Wikipedia


コンピュータグラフィクス 作者が頭で思い描いた形を再現することもできるが
少しのパラメータの差で生じる全く予想つかないような数学的な形を計算させて出力することもできる

「なにか新しい感覚をつかめるのではないかというハッピーミステイクを期待して黙々と制作にはげむ」


自然が作り出す形が美しいのは 長い年月をかけて改良されて結果的に機能的な形になったから。
もっと自然の形から学べることがあるのでは?
自然の形が形の美しさの原点
* 自然の法則に準拠した機能美
* 無駄がなくなめらかなオーガニック形体
* フラクタル性のある形は自己同一性による黄金比のもつ美しさを内包している
* セルオートマトンによるリズムのあるパターンが見られる


全体的にかなり面白い本だった!
今までグラッフィックかなにかの授業で散々黄金比白銀比など意識した構成を、と言われていたり
また染めの最初のほうの講義で原始の模様についても学んだはず...。でもそれぞれが独立した考え方だとおもっていた。

原始模様、美術の長い間主流だった写実主義から
工業化を経て生産性のある形体、装飾の排除された形体(キュビズム)への流れ
そしてまた装飾が強くなって、また削ぎ落とされて、丸みのあるデザイン→キュービックなデザインの流行が繰り返しおこって、
いままでは偶発的だと思われていた形に秩序があることがわかってきた
という大まかな流れをつかむことができて(そして原始模様〜カオス系まで連続したものだと捉え直すことができて)
だいぶ頭の中がすっきりしました。

抽象表現主義フラクタル系と似通った性質を持っていることもしっくりきたし、 このあいだ展示で見てきたフランクの建築はその流れの先にあったのがわかった。

ちょうど今the nature of code をやっていてカオスとか複雑系とかがなんなのかわからなかったので
コードを書いて理解することだけでは補えなかった、背景を含んだ概念的な部分を触ることができてよかった。
幸い今は簡単に偶発性のある形を作り出すことができることだし、
「なにか新しい感覚をつかめるのではないかというハッピーミステイクを期待して黙々と制作にはげむ」ことにいつかわたしも取り組みたいなぁ。

よいほんでした。

形の美とは何か (NHKブックス)

形の美とは何か (NHKブックス)

hexoでブログ構築(3) テンプレートをカスタマイズする

まずブログのデザインを決め普通にhtmlで書き起こし、スタイルを整えて機能にわけて使えるようにした。

デフォルトで入っているテーマを変更しながら自分の好きなようにテーマを作っていく。
とはいえ・・・初めてテンプレートというものを使ってみる&ejsの基本的なところを読んだだけではどうしていいのかわからなかったため
こちらの方の記事を参考に
http://dev.shikakun.com/post/hexo-init/
コミット歴をなぞりつつ、こうやるのか・・・と覚えながら変更を加えていきました。(ありがとうございます・・・!)

テーマの階層はこんな感じ。

.
└── themeName
    ├── _config.yml
    ├── gulpfile.js
    ├── layout
    │   ├── _partial
    │   │   ├── archive.ejs・・アーカイブのレイアウトを定義
    │   │   ├── article.ejs・・各記事のレイアウトを定義
    │   │   ├── head.ejs・・・・headの中身が書いてある
    │   │   ├── header.ejs・・・ページのヘッダーが書いてある
    │   │   └── post・・・・・・ここに記事の型を入れていく
    │   │       ├── date.ejs
    │   │       ├── nav.ejs
    │   │       ├── tag.ejs
    │   │       └── title.ejs
    │   ├── archive.ejs
    │   ├── index.ejs
    │   └── layout.ejs・・・ページの雛型
    ├── node_modules
    ├── package.json
    └── source・・・cssなど

layout.ejsの中はこんな感じ。

<!DOCTYPE html>
<html>
  <%- partial('_partial/head') %>
  <body>
    <%- partial('_partial/header') %>
    <main class="articleWrap">
      <!-- 記事 -->
      <%- body %>
      <!-- /記事 -->
    </main>
    <footer>
    </footer>
  </body>
</html>

今回はアーカイブもindexも同じレイアウトにしたかったのでindex.ejsもarchive.ejsも

<%- partial('_partial/archive', {pagination: config.archive, index: true}) %>

というふうにした。
partial/archive.ejs内で各記事を繰り返し書くようにしている

<% page.posts.each(function(post){ %>
  <%- partial('article', {post: post, index: true}) %>
<% }) %>
<% if (page.total > 1){ %>
  <nav id="page-nav">
    <%- paginator({
      prev_text: '&laquo; Prev',
      next_text: 'Next &raquo;'
    }) %>
  </nav>
<% } %>

hexoには用意されている変数がいくつかある。

詳しくは https://hexo.io/docs/helpers.html

ファイルを呼び出すときは

<%- partial(layout, [locals], [options]) %>

cssを呼び出すときは

<%- css(path, ...) %>

ページネーターは

<%- paginator(options) %>

という感じで・・・。楽チン!


各記事は

<article class="article">
  <header class="article-header">
    <%- partial('post/date', {class_name: 'article-date', date_format: null}) %>
    <%- partial('post/title', {class_name: 'article-title'}) %>
    <%- partial('post/tag') %>
  </header>
  <main class="article-main">
    <%- post.content %>
  </main>
</article>

というふうにして、日付、タイトル、タグ、コンテンツを分けてある。

ページの中身もhexoで変数が用意されていて、

page.title(タイトル)
page.date(日付)
page.content(コンテンツ)
page.tags(タグ)

タグリストも変数があるので、

<%- list_tags([options]) %>

クラスをつけて全て表示したいときは

<% if (post.tags && post.tags.length){ %>
  <%- list_tags(post.tags, {
    show_count: false,
    class: 'article-ingredient'
  }) %>
<% } %>

という感じで書くことができる。


また設定ファイルの中も変数になっていて
config.yaml内のいろんな情報も使いやすい!
https://hexo.io/docs/configuration.html

たとえばhead内は

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="<%= config.description %>">
  <title><%- config.title %></title>
  <%- css('/css/style') %>
</head>

こんな感じでかける。


なんとなくテンプレートの使い方がわかった気がする。 ブログ完成したらgithbにあげます・・。