Categories

Description

Nodebox用の最も古いライブラリの一つである。
Pixieの筆跡は、毎度異なるように見え、ミスを含み、不安定な下線で、変化する色の圧力を持つ。
筆跡はTom De Smedtの筆跡をベースにしている。

Download

略

Documentation

• How to get the library up and running
• Headings
• Paragraph text
• Doodles
• Diagrams

画像略 Pixie、WordNet、wikipediaの組み合わせ。 あらゆる与えられた問題について、無限の数の不完全な注意、計画、冗談、大言 壮語を作成。

How to get the library up and running

スクリプトと同じフォルダにpixieライブラリフォルダをおけばライブラリを見つけることができる。
また~/Library/Application Support/NodeBox/に置くことも可能である。

pixie = ximport("pixie")

Headings

heading()コマンドはテキストを太いフォントで描画させる

heading(str, x, y, width, pt=30, slant=0.0)

文字列strをポジションx,yにて与えられたline width、フォントサイズptで描画する。
コマンドはheadingの右下の角のポジションを(x,y)タプルで返す。
例

txt  = "Fat trendy Pixie headers!"
pixie.heading(txt, 100, 100, 200, pt=15)

Paragraph text

text()コマンドは不完全な筆跡のブロックを描画させる。

text(str, x, y, width, pt=15, slant=0.5, line=False, serif=False)

文字列strをポジションx,yにて与えられたline width、フォントサイズptで描画する。
オプションのlineパラメータをTrueにすると、パラグラフに下線を引く。
selifをTrueにすると、テキストのキャラクタをselifに見えるようにする。
コマンドはheadingの右下の角のポジションを(x,y)タプルで返す。
例

str += "Pixie was originally a part of the Aunt Hillary code package,"
str += "a handwriting that looks different each time, contains mistakes,"
str += "has wobbly baselines and variable color pressure."
pixie.text(str, 20, 20, 200, pt=15)

tuzuku

しようと思ったけど、色んなことをすっかりさっぱり忘れてる…

とりあえずヘッダロゴを変えてみた

http://generation1986.g.hatena.ne.jp/VoQn/20080428/1209402555
を参考にして、というかovalをrectに変更して多少の数値を弄っただけなんだけど、random()のおかげでそれなりの見栄え。

原文http://nodebox.net/code/index.php/Math

しばしば、NodeBoxスクリプトのプログラミングをすると、少しの数学が関わる。
流体の動作の、行動の軌跡、内外への緩和、全て数学の定石を必要とする。
多分我々の多くは数学のクラスにおいて注意を払ってないので、このドキュメントは幾つかの有用な数学テクニックを説明する。

Math geometry

2点の座標がある場合に、この2点間の角度(もしくは距離)を知りたいことがある。
もしくは調節された1点があり、角度と距離を基にして2つめの点を知りたい時。
次のmathコマンドは手助けになるかもしれない。
またsineとcosineを基に見付けることも出来る。 http://nodebox.net/code/index.php/Math_trigonometry

2点間の角度

def angle(x0, y0, x1, y1):
    from math import degrees, atan2
    a = degrees( atan2(y1-y0, x1-x0) )
    return a

2点間の距離

ef distance(x0, y0, x1, y1):
    from math import sqrt, pow
    return sqrt(pow(x1-x0, 2) + pow(y1-y0, 2))

距離と角度を基にした点の位置

def coordinates(x0, y0, distance, angle):
    from math import radians, sin, cos
    x1 = x0 + cos(radians(angle)) * distance
    y1 = y0 + sin(radians(angle)) * distance
    return x1, y1

点に関して対称

def reflect(x0, y0, x1, y1, d=1.0, a=180):
    d *= distance(x0, y0, x1, y1)
    a += angle(x0, y0, x1, y1)
    x, y = coordinates(x0, y0, d, a)
    return x, y

これらのコマンドをスクリプト内で使うにはシンプルにこれらをimportする。

from nodebox.geo import angle, distance, coordinates, reflect

いくつかの例:

randomポイントの中心からの方向

x0, y0, r = WIDTH/2, HEIGHT/2, 2

for i in range(5):
    x1 = random(WIDTH)
    y1 = random(HEIGHT)
    oval(x1-r, y1-r, r*2, r*2)
    a = angle(x0, y0, x1, y1)
    transform(CORNER)
    translate(x0, y0)
    rotate(-a)
    arrow(30, 0, 10)
    reset()

x0, y0への軌跡

x0, y0, r = WIDTH/2, HEIGHT/2, 2
oval(x0-r, y0-r, r*2, r*2)

for i in range(10):
    a = 36*i
    x1, y1 = coordinates(x0, y0, 85, a)
    oval(x1-r, y1-r, r*2, r*2)
    line(x0, y0, x1, y1)

円パス上の垂直線: 点と-90度操作したものの角度

path = oval(100, 100, 105, 105)
for t in range(50):
    pt = path.point(float(t) / 50)
    a = angle(pt.x, pt.y, 
        pt.ctrl2.x, pt.ctrl2.y)
    transform(CORNER)
    push()
    translate(pt.x, pt.y)
    rotate(-a+90)
    line(0, 0, 35, 0)
    pop()

時々、オブジェクトの位置やサイズを、お互いに関連づけ、ある種の注文や調和があるような方法で、与えたいことがある。
例えば、サイン波は、動作を記述するのに良い。なぜなら、ゆるやかにin outする。
別の面白い比例した原則は黄金比、3-5-8ルールである。
長い長い時間、回りには美的感覚がある。
その素晴しい事柄は、数学のシリーズ、フィナボッチ配列として表すことができる。

def fib(n):
    if n == 0: return 0
    if n == 1: return 1
    if n >= 2: return fib(n-1) + fib(n-2)

def goldenratio(n, f=4):
    # Returns two proportional numbers whose sum is n.
    f = max(1, min(f, 10))
    n /= float(fib(f+2))
    return n*fib(f+1), n*fib(f)

着色された矩形が黄金比で形成される。

w1, w2 = goldenratio(260)
h1, h2 = goldenratio(260)
b1, b2 = goldenratio(1.0)
b3, b4 = goldenratio(b1)

fill(0, b1/2, b1)
rect(0, 0, w1, h1)

fill(0, b2/2, b2)
rect(w1, 0, w2, h1)

fill(0, b4/2, b4)
rect(0, h1, w1+w2, h2)

x, y = 0, 0
w, h = 260, 260

th = h # top height
bh = 0 # bottom height
for i in range(10):
    th, bh = goldenratio(th)
    v = float(th)/w + 0.3
    fill(0, v/2, v)
    rect(x, y, w, th)
    y += th
    th = bh

NodeBoxのcolor()コマンドから返されたColorはいくつかの有用なattributeを持ち、同時に異なる色空間を考えさせる。
例えば、ランダムな色でグリッド線を描画したい時、次のようなコードを使う。:

for i in range(HEIGHT):
  c = color(random(), random(), random())
  stroke(c)
  strokewidth(1)
  line(0, i, WIDTH, i)

しかし、各lineがランダムなstrokeだと、幾つかのlineはさえなく、明るく見える傾向がある。
色を持ち上げるために、異なる色空間に切り替えせず、lineのサチュレーションを簡単に調節できる。
同じ理由から、strokewidthを1の代りに2を使用し、lineをオーバーラッピングさせ、より明るくさせる。

for i in range(HEIGHT):
  c = color(random(), random(), random())
  c.saturation = 1.0
  stroke(c)   
  strokewidth(2)
  line(0, i, WIDTH, i)

Color attributes

color()コマンド(さらに言えばfill()やstroke()コマンド)から返されたColorは、次にattributeを持つ:

color.r: the RGB red component
color.g: the RGB green component
color.b: the RGB blue component
color.a: the alpha component
color.c: the CMYK cyan component
color.m: the CMYK magenta component
color.y: the CMYK yellow component
color.k: the CMYK black component
color.hue: the HSB hue component
color.saturation: the HSB saturation component
color.brightness: the HSB brightness component

これらはスクリプト内でいつでも使用出来、NodeBoxは正確にcolorを計算する。

CMYK output?

出力の為に何の色空間が使われていますか?
スクリプト内でどのようなcolormode()が使用されていても、出力はoutputmode()に追随する。
これは、技術的詳細について心配する必要がないような印刷ドキュメントを働かせる時、それを簡単にし、好きなcolorに焦点を合わせることが出来る。
もっとも、全てのRGBカラーが印刷可能であるわけではないことを覚えておくこと。

Colors are stored in the graphics state

NodeBoxは最後に定義したcolorを覚えており、異なるものを定義するまで、fillやstroke colorが使っているcolorを留める。

Harmonious colors

調和のある、一貫したcolorを作る為のトリックは、完全にランダムにしないで、一定の範囲で制限する。
一般的な落とし穴は、colorを可能なかぎり全て使うことである。
これは、しばしば、一貫したデザインを作らない。

HSBカラーモードはcolorのハーモニーを作るために優秀である。

次のサンプルを考察せよ。:

colormode(HSB)
nofill()
for i in range(10):
  c = color(0.5, random(0.5), random(0.5,1.0))
  stroke(c)
  strokewidth(random(50))
  radius = random(200)
  oval(random(WIDTH), random(HEIGHT), radius, radius)

色相(Hue)はいつも同じ、0.5もしくは180の色相(シアン)である。
彩度(Saturation)と明度(Brightnes)だけが少し変えられる。

これは、いつも青の色を持つことを確実にし、全てフィットする。
彩度(Saturation)は、色褪せて見えるため、0.0から0.5間で制限された。
その上、明度(Brightnes)が0.0から0.5間(50%から100%)で制限されたので、我々はブライトなcolorを得る。
これらの「color range」の素晴しいサポートを持つ colorライブラリを見よ。

画像略

Gradients

NodeBoxにおいて、lineをfor-loopで描画し、各lineの透明度を増大することによって、グラーションを作ることが出来る。
例では、color cの透明度を0.0から1.0に下げた。 (浮動小数点を得る為に、1.0で乗算していることに注意せよ。)

colormode(HSB)
c = color(0.5, 1, 1)
for i in range(HEIGHT):
  c.a = 1.0 * i / HEIGHT
  stroke(c) 
  line(0, i, WIDTH, i)

colorライブラリはより複雑なグラデーションを操縦する、手軽なgradientコマンドを持つ。

原文http://www.nodebox.net/code/index.php/Fatpath

Fatpathはパス上の点において数学的処理をする。
本質的に、テキストのパスを加算する。
公式は以下になる。:

p1 + (p2 - p1) * fatness

この機能はテキストの形態に、(マルチプル-マスター フォントのように)細くしたり太くしたり出来、
同様に輪郭を越え、極細、極太フォントを計算出来る、ような機能をもたらす。

Screenshot

略

下のパスは上二つのパスより計算された。

Restrictions

fatpathはかなり馬鹿である。:
パスはポイントポイントで正確に合わなければならない。そうでないと、アルゴリズムは動かない。
これは(一般的に)、同じフォントファミリーのフォントのみ使用でき、その時でさえ、文字がマッチする保証は何もない、ことを意味する。
カーブを持った文字は特に厄介である。
特別なボタン(lettersthatwork)は、与えられたフォントにどの文字を使用できるかを示す。

Download

略