2016-03-05

nature of code：今日の練習「再帰関数」

nature of code

See the Pen Recursive(再帰) by kanaparty (@kanaparty) on CodePen.

2016-03-05

jsスケッチ　水面

jsスケッチ

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

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

今回のルール

次の状態を決めるルール

セル自身は　前の状態、今の状態、次の状態を持っている。
次の状態　= 自分の周りの８個の前の状態の平均 + 今の状態 - 前の状態とする
もし周りの平均が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;
}

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

2016-03-05

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

nature of code

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

ライフゲーム

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

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

ルール

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;
  }
  //セルが生きていて周りに４つ以上→死
  else if(this.prevState && count > 3){
    this.state = false;
  }
  //セルが死んでいて３つだと誕生
  else if(!this.prevState && count === 3){
    this.state = true;
  }
  else{
    this.state = this.prevState;
  }
}

2016-03-03

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

読書メモ

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

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

近代建築の形のあゆみ

「モダニズム」（モダニズム建築 - Wikipedia）
　 ミースファンデルローエ
　ル・コルビジェ
　 「形態は機能に従う」
　機能主義
　 立方体をユニットとして扱う
　ガラスと鉄の箱(ガラス張りの高層ビル群)
「ポストモダニズム」東京都庁など。ファサードに装飾を取り入れる動き
1925～アールデコ
1930半ば～ストリームラインの流行
脱構築主義（否定形の希求が見られる　京都駅のファサード、など）

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

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

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

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

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

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

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

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

よいほんでした。

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

作者: 三井秀樹
出版社/メーカー: 日本放送出版協会
発売日: 2000/03
メディア: 単行本
購入: 5人クリック: 11回
この商品を含むブログ (8件) を見る

2016-02-16

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

hexo ejs

まずブログのデザインを決め普通に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にあげます・・。

2016-02-14

hexoでブログ構築(2) EJSテンプレートエンジンことはじめ

node.js ejs hexo

hexoでテーマをカスタマイズするためにちょっとだけejsを触ったときのメモ。

ejsとは

テンプレートエンジン。node.jsで動く github.com

インストール

npm install ejs

html内に書くタグ

スクリプト側で用意した変数などを表示するのに使う(エスケープ処理あり)

<%= 値 %>

エスケープ処理なしは

<%- 値 %>

node.js内で実行するスクリプトタグ

<% スクリプト %>

改行する場合

-%>

というふうに閉じる

配列を順番に処理するとき

<% data.forEach(function(val){ %>
    <li><%= val %></li>
<% }) %>

<% %>内では、何かを書き出して表示することはできない。処理部分だけを<% %>内に書き、出力は<%= %>に書く。

レンダリング

.ejs拡張子で保存する。

例

<body>
    <header>
        <h1 id="h1"><%=title %></h1>
    </header>
    <div role="main">
        <p><%-content %></p>
    </div>
</body>

サーバーを起動して、レンダリングする。

var http = require('http');
var fs = require('fs');
//ejsの読み込み
var ejs = require('ejs');

var filedeta = fs.readFileSync('./index.ejs', 'utf8');

//サーバーを起動
var server = http.createServer();
//requestイベントハンドラを定義
server.on('request', doRequest);
//ポート番号400で待ち受け
server.listen(4000);

// リクエストの処理
function doRequest(req, res) {
    //テンプレートのレンダリング
    var filetext = ejs.render(/*テンプレートデータ*/filedeta, /*オプション*/ {
        title:"タイトル",
        content:"コンテンツ"
    });
    //ヘッダー情報にCintent-Typeを書く
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(filetext);
    res.end();
}

なんとなく分かったきがするのと、hexoにはレンダリングの機能があるので今回はその処理は書かなくていいということで、とりあえずここまで。

2016-02-12

css設計はじめの一歩

sass css設計

今更ですが・・・。
sassの基本とsassをつかったときの基本的な設計の仕方を教えて貰ったのでメモ。

BEMは命名ルールが厳格なので納期の短いものやメンバーのスキル状態によっては向かないことも。 oocssやsmacssはBEMにくらべて自由度が高いため取り入れやすい。

sass基本構文

ネスト

.header {
  background-color: #999;
  .logo{
    width: 100px;
    height: 200px;
    > a{
      color: red;
    }
  }
}

変数

カラーコードなど名前を決めておくとよい。

$color-default : #333;

a{
  color: $color-default;
}

&

親を継承できる。擬似クラス、複合クラスで使用すると便利。

  .buton{
    display: block;
    &.button-primary{
      background-color: yellow;
    }
    &.button-secondary{
      background-color: orange;
    }
  }

@import

読み込まれるscssはアンダーバーから始まる名前にする。
そうするとコンパイル対象でなくなるのでインポートするファイルは_から始めると良い。

@import '_base';

cssでも残したい場合は
/*コメント*/
cssでは残さない場合は
//コメント

OOCSS

まず機能によって切り分ける。似た機能の中で使いまわせるものを使い回す。

ストラクチャーとスキンに分ける

少ない記述でクラスを組み合わせて、たくさんのバリエーションを作ることができる。

ストラクチャー（構造　共通するパーツ）
スキン（カラーやサイズ）

<button type="button" name="button" class="button button-defalut">ボタン</button>
<button type="button" name="button" class="button button-blue button-large">ボタン</button>
<button type="button" name="button" class="button button-red">ボタン</button>

//ストラクチャー
.button{
  display: block;
  border-radius: 3px;
  border : 0;
  text-align: center;
  padding: 10px 30px;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
}

//スキン
.button-defalut{
  background-color: #000;
}
.button-blue{
  background-color: blue;
}
.button-red{
  background-color: red;
}
.button-large{
  font-size: 24px;
}

より厳しく書くなら

//ストラクチャー
.button{
  display: inline-block;
  border-radius: 3px;
  border : 0;
  text-align: center;
  padding: 10px 30px;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
  //スキン
  &.button-defalut{
    background-color: #000;
  }
  &.button-blue{
    background-color: blue;
  }
  &.button-red{
    background-color: red;
  }
  &.button-large{
    font-size: 24px;
  }
}

コンテナとコンテンツに分ける

<!--検索フォーム-->
<form class="search" action="index.html" method="post">
  <input class="input" type="text" name="name" value="">
  <button class="button">search</button>
</form>
<!--ログインフォーム-->
<form class="login" action="index.html" method="post">
  <input class="input" type="button" name="name" value="">
  <input class="input" type="button" name="name" value="">
  <button class="button" type="button" name="button">login</button>
</form>

//コンテナ
.search{
  display: inline-block;
  padding: 10px;
  border : 1px solid #000;
}
.login{
  display: inline-block;
  padding: 10px;
  border : 1px solid #000;
  width: 230px;
  text-align: center;
  .input{
    margin-bottom: 10px;
    width: 100%;
  }
}
//コンテンツ
.input
  border-radius: 3px;
  background-color: #fff;
  font-size: 16px;
  padding: 10px 30px;
}

SMACSS

カテゴライズする。

base
layout
module
state
theme

カテゴライズしたものをディレクトリ構成に活かす。それにsassの機能をつかうときにつかう分のディレクトリ(settingやtoolなど)を足してつくるといい。

layout、stateなどはSMACSSの推奨命名ルール通り.l-や.is~などつけて命名するとわかりやすくなる。

stateはmoduleディレクトリの各モジュールのscssファイルの中で書いていくといい。読み込みの順番に気をつける。

.
├── css
│   └── style.css
├── index.html
├── js
├── layout
│   └── _l-header.scss
├── prepros.cfg
└── sass
    ├── base
    │   ├── _generic.scss
    │   └── _normalize.scss
    ├── layout
    │   ├── _l-contents.scss
    │   └── _l-header.scss
    ├── module
    │   ├── _botton.scss
    │   ├── _card.scss
    │   └── _mainVisual.scss
    ├── setting
    │   └── _settings.scss
    ├── style.scss
    └── tool
        └── _keyframes.scss

style.scss内

//setting
@import "setting/_settings.scss";
@import "tool/_keyframes.scss";
// base
@import "base/_normalize.scss";
@import "base/_generic.scss";
// layout
@import "layout/_l-contents.scss";
@import "layout/_l-header.scss";
// module
@import "module/_botton.scss";
@import "module/_card.scss";
@import "module/_mainVisual.scss"

最強のCSS設計チーム開発を成功に導くケーススタディ

作者: 堀口誠人
出版社/メーカー: SBクリエイティブ
発売日: 2015/10/24
メディア: 単行本
この商品を含むブログ (1件) を見る