asobi
71語 · 9グループ
asobi が知っているすべての言葉。どの例も実際に動き、動きの例は動いて見えます。
circlecircle(radius: 10)塗りつぶした丸。
どの形も、中心が絵の真ん中にあります。数字はどれも省けます。
最初の数字は名前なしでも書けます。circle(12) は circle(radius: 12) と同じです。
長さに単位はありません。絵は画面に合わせて収まるので、大事なのは比率だけです。
show circle
show circle(radius: 30)
ellipseellipse(width: 30, height: 20)塗りつぶした楕円。
width(幅)と height(高さ)は、半径ではなく全体の大きさです。最初の2つは名前なしでも書けます。ellipse(40, 10)。
show ellipse
show ellipse(width: 12, height: 40)
rectrect(width: 30, height: 20)塗りつぶした長方形。
辺の長さが同じなら、square のほうが短く書けます。
show rect
show rect(width: 60, height: 8)
squaresquare(size: 20)塗りつぶした正方形。
size は1辺の長さです。
show square
show square(size: 40).rotate(45)
triangletriangle(size: 20)上を向いた、正三角形。
size は1辺の長さです。外側の四角の中心に置かれるので、ほかの形ときれいに揃います。
show triangle
show triangle(size: 50).colored(:orange)
polygonpolygon(sides: 6, radius: 10)辺の長さがそろった多角形。頂点が1つ上を向きます。
sides(辺の数)は3以上です。radius は中心から頂点までの長さです。最初の2つは名前なしでも書けます。polygon(8, 20)。
show polygon
show polygon(sides: 8, radius: 30).colored(:teal)
starstar(points: 5, radius: 10, inner: radius * 0.45)塗りつぶした星。
points は角の数、radius は角の先までの長さ、inner はへこんだ部分までの長さです。inner を小さくすると鋭い星に、大きくするとふっくらした星になります。
最初の2つは名前なしでも書けます。star(8, 30)。
show star
show star(points: 8, radius: 30, inner: 24).colored(:gold)
lineline(length: 20)横向きの黒い線。
線には塗りがなく、線だけです。だから colored は線の色を変え、outlined(色, width:) は色と太さを変えます。
好きな点をつなぐ線を引きたいときは path を使います。
show line
show line(length: 80).outlined(:crimson, width: 6)
texttext(string = "asobi", size: 16, font: nil)文字の絵。
文字も、ほかの形と同じ絵です。色を塗ったり、増やしたり、回したり、並べたりできます。文字列やシンボルは to_art でも同じ絵になるので、"hello".to_art は text("hello") と同じです。
size は文字の大きさ、font はフォントの名前です("serif" など)。省くと、ページの標準のフォントになります。
show text
show text("hello", size: 40, font: "serif").colored(:navy)
関連
to_art
pathpath(*points, closed: false, smooth: false)点を順につなぐ。
点は [x, y] で書きます。x は右、y は下に向かって大きくなります(画面と同じです)。だから [40, -30] は右上です。
そのままなら黒い線です。closed: true にすると最後の点が最初の点につながり、塗りつぶされた形になります。smooth: true にすると、角が滑らかな曲線になります。
できた絵は、外側の四角の中心に置かれるので、ほかの形と揃います。点を1つも書かなければ、見本の線が出ます。
show path
show path([0, 0], [40, -60], [80, 0], [120, -60], smooth: true).outlined(:crimson, width: 3)
show path([0, 0], [40, -60], [80, 0], closed: true).colored(:orange)
arcarc(radius: 20, from: 0, to: 180)円の一部を、線で描いたもの。
角度は度で、時計回りです。0 が真上なので、from: 0, to: 180 は右半分になります。
絵の中心は円の中心です。同じ円の弧どうしは、ぴたりと重なります。
show arc
show arc(radius: 30, from: 90, to: 360).outlined(:navy, width: 5)
wavewave(length: 100, height: 10, waves: 3)滑らかな波の線。
waves は length の中にいくつ波が入るか、height は波の山のてっぺんから谷の底までの高さです。
show wave
show wave(length: 120, height: 20, waves: 5).outlined(:teal, width: 3)
ringring(radius: 20, thickness: 4)ドーナツ型。穴は本当に空いています。
thickness は輪の太さで、radius から内側へ測ります。穴の向こうにあるものは透けて見えます。
show ring
show ring(radius: 40, thickness: 12).colored(:crimson)
heartheart(size: 20)ハート。
size はハート全体の幅です。
show heart.colored(:crimson)
show heart(size: 60).colored(:hotpink)
petalpetal(length: 20, width: 10)中心から真上へ伸びる、花びらの形。
ほかの形と違って、花びらは中心に置かれません。根元が絵の中心です。わざとそうしてあります。コピーを中心のまわりに回すと、花になります。
show petal
show petal(length: 40, width: 16).repeat(8).in_fan.colored(:crimson, :navy)
moonmoon(size: 20)右に開いた三日月。
size は月の高さです。左向きにしたいときは mirror を使います。
show moon.colored(:gold)
show moon(size: 60).mirror.colored(:ivory), on: :midnightblue
dropdrop(size: 20)しずく。先が上を向きます。
size はしずくの高さです。
show drop.colored(:deepskyblue)
show drop(size: 50).colored(:steelblue).flip
cloudcloud(size: 30)底が平らな、やわらかい雲。
size は雲の幅です。
show cloud.colored(:lightsteelblue)
show cloud(size: 80).colored(:white), on: :skyblue
spacespace(width: 10, height: width)見えないけれど、場所を取るもの。
show circle.beside(space(30)).beside(circle)
show square.above(space(width: 10, height: 40)).above(square)
nothingnothing何もない絵。
大きさがなく、場所も取りません。change_each の中で「この絵は消す」と言いたいときに便利です。nil や 0 も to_art で何もない絵になります。
dots = circle(8).repeat(9).in_row(gap: 4)
show dots.change_each { |dot, t, i| i.even? ? dot : nothing }
関連
space
change_each
hslhsl(hue = 0, saturation = 70, lightness = 50)色相・彩度・明るさから作る色。
hue(色相)は 0 から 360 の角度です(0 は赤、120 は緑、240 は青)。saturation(彩度)と lightness(明るさ)は 0 から 100 です。
色を書くところなら、どこにでも使えます。虹を作るのにいちばん簡単な方法です。
show circle(30).colored(hsl(200))
dots = circle(8).repeat(12).change_each { |dot, t| dot.colored(hsl(t * 360, 80, 55)) }
show dots.in_ring
graygray(lightness = 50)灰色。0 が黒、100 が白。
色を書くところなら、どこにでも使えます。
show circle(30).colored(gray(30))
squares = square(24).repeat(5).change_each { |s, t| s.colored(gray(t * 100)) }
show squares.in_row.stroke(:black)
ona.on(b)b の上に a を置く。
できあがりも、1枚の絵です。a が手前になります。
b には、絵になれるものなら何でも(たとえば数字)渡せます。どちらかが動きなら、結果も動きになります。
show circle(8).colored(:gold).on(circle(20).colored(:navy))
show star(radius: 20).colored(:gold).on(30)
undera.under(b)a の上に b を置く。
on の逆で、あとに書いたほうが手前になります。a + b と同じ意味です。
show circle(20).colored(:navy).under(circle(8).colored(:gold))
+a + b絵を重ねる。あとに書いたほうが手前。
a.under(b) と同じです。asobi の記号は * とこの + の2つだけです。
sun = circle(30).colored(:gold)
show sun + circle(14).colored(:orange) + circle(5).colored(:crimson)
repeatrepeat(count = 2)絵を増やす。
増えた絵はみんな同じ場所に重なっているので、そのままでは違いが見えません。in_row、in_ring、in_fan などの並べる言葉で並べます。
できあがりは「絵の集まり」(Many)です。1枚の絵でもあり、リストでもあります。a * 12 は a.repeat(12) と同じです。
show circle.repeat(5).in_row
show star.repeat(times: 7).in_ring(radius: 40)
*a * count絵を増やす(repeat と同じ)。
circle * 12 は circle.repeat(12) と同じです。asobi の記号は + とこの * の2つだけです。
hearts = heart * 6
show hearts.in_row(gap: 4).colored(:crimson)
besidea.beside(b, gap: 0)a の右に b を並べる。
できあがりは1枚の絵で、全体が中心にそろいます。gap は2つの間のすき間です。
show circle.beside(square)
show circle.colored(:crimson).beside(square.colored(:navy), gap: 8).beside(star)
abovea.above(b, gap: 0)a の下に b を並べる(a が上)。
できあがりは1枚の絵で、全体が中心にそろいます。gap は2つの間のすき間です。
show circle.above(square)
show text("asobi", size: 24).above(wave(60, 6, 3), gap: 6)
movemove(right: 0, left: 0, up: 0, down: 0)絵を動かす(位置をずらす)。
数え方ではなく、行き先で書きます。right(右)、left(左)、up(上)、down(下)。y がどちら向きかを考える必要はありません。
1枚だけの絵は、いつも画面の真ん中に収まります。だから単独で動かしても見た目は変わりません。ほかの絵と並べるときや、中心のまわりで回すとき(rotate を見てください)に意味が出ます。
show square(40).colored(:gold) + circle(8).colored(:navy).move(right: 20, up: 20)
show circle(6).repeat(3).change_each { |dot, t, i| dot.move(right: i * 20, down: i * 10) }
rotaterotate(degrees = 45)時計回りに回す。
角度は度です。rotate(90) で4分の1回転。回転数で書きたいときは 0.25.turn が使えます(90.0 になります)。
回るのは絵の中心のまわりです(作ったばかりの形が置かれる場所)。形を中心から外して動かしてから回すと、中心のまわりをぐるっと回ります。petal と in_fan で花ができるのは、このおかげです。
show rect(50, 10).rotate(30)
stick = rect(50, 8).repeat(6).change_each { |r, t| r.rotate(t * 180) }
show stick.colored(:teal).opacity(0.6)
scalescale(factor = 2, width: factor, height: factor)拡大・縮小する。
scale(2) で2倍、scale(0.5) で半分です。片方向だけ伸ばしたいときは方向を書きます。scale(width: 2, height: 1)。マイナスの数を渡すと反転します。
show circle.scale
show circle(20).scale(width: 2, height: 0.5).colored(:orange)
growgrow(to: 2)大きくする(scale の読みやすい形)。
grow(to: 3) で3倍になります。grow(3) とも書けます。
show star.grow
show star.grow(to: 3).colored(:gold)
shrinkshrink(to: 0.5)小さくする(scale の読みやすい形)。
shrink(to: 0.25) で4分の1になります。shrink(0.25) とも書けます。
show circle(30) + circle(30).shrink.colored(:crimson)
show circle(30) + circle(30).shrink(to: 0.2).colored(:crimson)
mirrormirror左右を反転する。
絵の中心を軸に反転します。
leaf = petal.rotate(30)
show leaf.beside(leaf.mirror)
flipflip上下を反転する。
絵の中心を軸に反転します。
show petal.beside(petal.flip)
coloredcolored(*colors, from: nil, to: nil, angle: 0, around: false)色を塗る(1色でも、複数色でも、グラデーションでも)。
色は、CSS の色名のシンボル(:crimson、:navy、:skyblue)、"#ff0066" のような文字列、または hsl や gray の結果で書きます。何も書かなければ :crimson です。
絵の集まりに色を複数渡すと、順番にぐるぐる使われます。petal.repeat(8).in_fan.colored(:crimson, :navy)。1枚の絵なら、最初の色が使われます。
何も塗らなければ、白い紙に黒です。同じ絵に2回塗ると、あとの色が勝ちます。集まり全体に塗った色は、中の絵に個別に塗った色を上書きしません。
グラデーションにするときは、始まりの色と終わりの色を書きます。colored(from: :gold, to: :crimson)。上から下へ色が変わります。angle: で向きを変えられます(度、時計回り)。angle: 90 は右から左へ向かいます。around: true にすると、中心から外へ向かいます。from を省くと crimson から、to を省くと navy までです。
絵の集まりに使うと、グラデーションは1枚ごとではなく、集まり全体にまたがって1回流れます。中の絵の色は、グラデーションに道をゆずります。グラデーションは絵についてくるので、動かしても、回しても、大きさを変えても、いっしょに動きます。
show heart.colored
show square(20).repeat(6).in_row(gap: 4).colored(:gold, :teal, :crimson)
show circle(40).colored(from: :gold, to: :crimson)
show circle(40).colored(from: :white, to: :navy, around: true)
dots = circle(8).repeat(12).in_row(gap: 4)
show dots.colored(from: :gold, to: :crimson, angle: 90)
outlinedoutlined(color = :black, width: 1)塗りをやめて、線だけにする。
show star.outlined
show star(radius: 30).outlined(:crimson, width: 4)
strokestroke(color = :black, width: 1)塗りはそのままで、輪郭の線を足す。
show heart(40).colored(:hotpink).stroke
show heart(40).colored(:hotpink).stroke(:crimson, width: 4)
opacityopacity(value = 0.5)透明度を変える。
0 で見えなくなり、1 で完全に不透明です。透けた絵が重なると、色が混ざります。
show circle(20).colored(:navy) + circle(20).colored(:crimson).opacity.move(right: 16)
show circle(20).colored(:navy) + circle(20).colored(:crimson).opacity(0.2).move(right: 16)
glowingglowing(size: 4, color: nil)縁をにじませて光らせる。
絵自身の色がにじんで、外へ広がります。別の色で光らせたいときは color: を渡します。size は絵と同じ単位です。名前なしでも書けます。glowing(8)。
光は暗い背景でないと見えません。on: :black や濃い青を使ってください。白い紙の上では、光る相手がありません。
光は絵の外へはみ出します。画面への収め方は、はみ出したぶんも含めて決まります。効果の言葉は、動きにもそのまま使えます。
petals = petal(40, 16).repeat(8).in_fan.colored(:hotpink, :gold)
show petals.glowing, on: :black
show star(radius: 30).colored(:white).glowing(size: 12, color: :orange), on: :black
blurredblurred(amount: 2)ぼかす。
amount は絵と同じ単位です。名前なしでも書けます。blurred(6)。
ぼかしは絵の外へはみ出します。画面への収め方は、はみ出したぶんも含めて決まります。少ない形を大きくぼかすと、オーロラのようなやわらかい光になります。
show circle(30).colored(:crimson).blurred, on: :black
show star(radius: 30).colored(:gold).blurred(amount: 5), on: :navy
blendedblended(mode = :screen)下にある絵との混ざり方を選ぶ。
名前を省くと :screen になります。絵が重なったところの色が明るくなります(壁に当たった光のように)。ほかには :multiply(暗くなる、インクのように)、:overlay、:lighten、:darken、:difference、:normal(混ぜない)があります。
blended は、その絵が下にある絵とどう混ざるかを変えます。だから下に何かあるときだけ効きます。背景の色も「下にあるもの」です。白い背景に :screen を使っても、白はもう最大に明るいので何も変わりません。暗い背景には :screen、明るい背景には :multiply を使ってください。
モードの名前を間違えると、使える名前を並べたエラーが出ます。
red = circle(30).colored(:crimson).move(left: 14)
blue = circle(30).colored(:dodgerblue).move(right: 14)
show red.blended + blue.blended, on: :black
yellow = circle(30).colored(:gold).move(left: 14)
cyan = circle(30).colored(:deepskyblue).move(right: 14)
show yellow + cyan.blended(:multiply)
shadowedshadowed(down: 2, right: 0, blur: 3, color: :black, opacity: 0.4)影を落とす。
down と right は影の落ちる方向、blur はぼかし具合、opacity は濃さです。最初の数字は名前なしでも書けます。shadowed(6) は shadowed(down: 6) です。大きさは絵と同じ単位です。
影は明るい背景でないと見えません。紙を切り抜いて重ねたような絵になります。
show star(radius: 30).colored(:tomato).shadowed, on: :linen
show star(radius: 30).colored(:tomato).shadowed(down: 8, right: 6, blur: 6, opacity: 0.5), on: :linen
clipped_byclipped_by(shape = nil)ある形の窓から覗いたように切り抜く。
窓の形は置かれた位置のまま使われます。動かせば、見える場所を選べます。数字を渡すと丸い窓になります。clipped_by(8) は clipped_by(circle(8)) と同じです。何も渡さなければ、絵より少し小さな丸い窓になります。
窓には、絵になれるものなら何でも(自作のクラスでも)使えます。模様やグラデーションや動きと組み合わせると、形の窓から覗いたような絵になります。
stripes = rect(10, 80).repeat(10).in_row.colored(:crimson, :gold)
show stripes.clipped_by
stripes = rect(10, 80).repeat(10).in_row.colored(:crimson, :gold)
show stripes.clipped_by(heart(60))
show wave(120, 20, 4).outlined(:white, width: 8).clipped_by(circle(40)), on: :navy
in_rowin_row(gap: 0)横一列に並べる。
show circle.repeat(5).in_row
show star.repeat(5).in_row(gap: 6).colored(:gold)
in_columnin_column(gap: 0)縦一列に並べる。
gap は隣どうしの間のすき間です。全体は中心にそろいます。
show circle.repeat(4).in_column
show rect(40, 8).repeat(4).in_column(gap: 6).colored(:teal)
in_gridin_grid(columns: nil, gap: 0)表のように並べる(1行ずつ埋める)。
columns(列の数)を省くと、縦横がほぼ同じになります。gap はマスの間のすき間です。
マスの大きさは、いちばん大きい絵に合わせます。列の数は名前なしでも書けます。in_grid(4)。
show square.repeat(9).in_grid
show circle(8).repeat(20).in_grid(columns: 5, gap: 4).colored(:crimson, :navy)
in_ringin_ring(radius: nil, facing_out: false)円周に等しい間隔で並べる(真上から時計回り)。
radius(半径)を省くと、隣どうしがぶつからないちょうどいい大きさの円になります。facing_out: true にすると、それぞれの絵が、上を外側に向けるように回ります。
半径は名前なしでも書けます。in_ring(60)。1枚の絵でも円周に置けて、そのときは真上に来ます。
show circle(5).repeat(12).in_ring
show triangle(14).repeat(10).in_ring(radius: 40, facing_out: true).colored(:orange)
in_fanin_fan(over: 360)中心のまわりで、少しずつ回しながら並べる。
花びらのための言葉です。中心から外れた絵をコピーして扇のように広げると、花になります。
over は扇が開く角度(度)です。360 なら一周します。それより小さければ、均等に広がり、真上が中央になります。
show petal.repeat(8).in_fan
show petal(50, 8).repeat(7).in_fan(over: 120).colored(:teal)
in_spiralin_spiral(spacing: nil)ひまわりの種のような渦巻きに並べる(中心から外へ)。
1つ進むごとに黄金角だけ回り、少しずつ外へ出ていきます。spacing を省くと、いちばん大きい絵の大きさになります。
名前なしでも書けます。in_spiral(8)。
show circle(3).repeat(100).in_spiral
show circle(2).repeat(200).in_spiral(spacing: 5).colored(:gold, :orange)
scatteredscattered(over: nil, seed: nil)ばらまく(ランダムな場所に置く)。
over を省くと、個数と絵の大きさから広さが決まります。over: 200 は 200 × 200 の正方形、over: [300, 100] は横 300、縦 100 です。中心は真ん中です。
実行するたびに違う絵になります。ただしライブ表示している間は変わりません。ファイルを保存し直しても、ばらまき方は保たれます。seed: 7(好きな整数)と書くと、いつ、どのパソコンで実行しても同じ絵になります。
show circle(3).repeat(30).scattered
show star(radius: 4).repeat(40).scattered(over: [200, 100], seed: 7).colored(:gold), on: :midnightblue
change_eachchange_each { |one, t, i| ... }1つずつ変える。
ブロックには、それぞれの絵(one)、何番目あたりか(t:最初が 0.0、最後に向かって 1.0 に近づく)、番号(i、0 から)が渡されます。変えたあとの絵を返してください。
絵はその場所に残るので、change_each は並べる言葉の前でも後でも使えます。ひとつだけ注意:動かす・回す・拡大するは、全体の中心を基準に行われます。1つ1つがその場で回ったり大きくなったりしてほしいときは、例のように、並べる前に変えてください。
dots = circle(6).repeat(10).change_each { |dot, t| dot.grow(to: 1 + t * 2) }
show dots.in_row(gap: 4)
tiles = square(18).repeat(25).change_each { |s, t, i| s.rotate(t * 90).colored(i.even? ? :tomato : :navy) }
show tiles.in_grid(5, gap: 4)
to_artto_art(as: nil)どんなものにも「絵になって」と頼む。
asobi の中心になる言葉です。オブジェクトを絵として扱い、絵をオブジェクトとして扱います。
それぞれ、こんな絵になります。
数字は、その半径の丸。マイナスの数は、同じ大きさで線だけの丸。0 は何もない絵です。
as: で形を渡すと、数字がその大きさ(大きいほうの辺の半分)になります。8.to_art(as: star) は半径 8 の星です。
配列と範囲は、中身をそれぞれ絵にして、小さなすき間をあけて横に並べます。as: は中身すべてに伝わります。配列の配列は表になり、内側の配列が1行になります。文字列とシンボルは、text と同じ文字の絵です。ハッシュは1組ごとに1行で、キーの絵の隣に値の絵が並びます。nil は何もない絵です。
動きを含む配列は、全体が動きになります。
絵を出すだけなら、自分で to_art を呼ぶ必要はありません。show や on、under、beside、above が、代わりに頼んでくれます。
自作のクラスは、to_art というメソッドを書くだけで絵になれます(最後の例を見てください)。そのオブジェクトに planet.rotate(20) のように絵の言葉を直接使いたいときだけ、クラスに include Asobi::Art を足します。each だけ書けば Enumerable が使えるのと同じ考え方です。
show 20.to_art
show [3, 6, 9, -12, 0, 12].to_art
show [1, 2, 3, 5, 8].to_art(as: star).colored(:gold, :orange), on: :black
hearts = (1..5).to_art(as: heart)
show hearts.colored(:crimson)
show [[1, 2, 3], [4, 5, 6], [7, 8, 9]].to_art(as: square).colored(:teal, :navy)
show "asobi".chars.to_art.colored(:crimson, :navy)
show({ 3 => 12, 5 => 6 }.to_art.colored(:teal))
class Planet
def initialize(size, color)
@size = size
@color = color
end
def to_art
circle(@size).colored(@color)
end
end
show [Planet.new(6, :tomato), Planet.new(10, :gold), Planet.new(4, :skyblue)].to_art
class Planet
include Asobi::Art
def initialize(size, color)
@size = size
@color = color
end
def to_art
circle(@size).colored(@color)
end
end
show Planet.new(10, :gold).spin(every: 4).move(right: 20).on(40)
spinspin(every: 4, clockwise: true)回り続ける。
every は1回転にかかる秒数です。clockwise: false にすると逆向きに回ります。
動きは「時刻から絵を返す関数」です。フレーム番号も記憶も持たないので、同じ時刻なら必ず同じ絵になります。動きの言葉は続けて書けます。flower.spin(every: 8).pulse(every: 1)。絵の言葉は、動きにもそのまま使えます。flower.spin.colored(:crimson)。
組み合わせた動きの1周は、それぞれの周期の最小公倍数です(1分を超えるときは、いちばん長いもの)。
show star.spin
show star(radius: 30).spin(every: 2, clockwise: false).colored(:gold)
flower = petal(40, 16).repeat(8).in_fan.colored(:crimson, :navy)
show flower.spin(every: 8).pulse(every: 1)
pulsepulse(every: 1, to: 1.2)膨らんで戻る。
to は何倍まで膨らむかです(to: 2 なら2倍)。every は1回の脈にかかる秒数で、名前なしでも書けます。pulse(2)。
show heart.colored(:crimson).pulse
show heart(40).colored(:crimson).pulse(every: 0.8, to: 1.5)
関連
spin
fade
one_by_one
swaysway(every: 2, by: 10)左右に揺れる。
by は左右に何度ずつ揺れるか、every は行って戻るまでの秒数です。
揺れるのは絵の中心のまわりです。ある点からぶら下がっているように見せたいなら、その点を中心に置きます。petal.flip.sway は鐘のように揺れます。
show petal(40, 16).flip.colored(:teal).sway
show petal(40, 16).repeat(3).in_fan(over: 90).colored(:crimson).sway(every: 3, by: 20)
orbitorbit(radius: nil, every: 4)円周を回る。
絵そのものは回らず、radius の円周の上を時計回りに、真上から進みます。radius を省くと、絵の大きいほうの辺の長さの円になります。
半径は名前なしでも書けます。orbit(40)。
show circle(5).colored(:crimson).orbit
show circle(10).colored(:gold) + circle(4).colored(:skyblue).orbit(radius: 30, every: 3), on: :black
fadefade(every: 2, to: 0.2)薄くなって戻る。
to はどこまで薄くなるかです。0 で見えなくなり、1 では何も起きません。
show circle(20).colored(:navy).fade
show star(radius: 20).repeat(6).in_ring.colored(:gold).fade(every: 3, to: 0).one_by_one, on: :black
bouncebounce(height: 20, every: 1)ボールのように弾む。
height は跳ぶ高さです。頂点でゆっくり、地面の近くで速くなります。高さは名前なしでも書けます。bounce(40)。
show circle(8).colored(:tomato).bounce
show circle(6).repeat(10).in_row(gap: 4).colored(:teal).bounce(height: 30, every: 2).one_by_one
関連
drift
one_by_one
driftdrift(right: nil, left: nil, up: nil, down: nil, every: 4)なめらかに行って戻る。
move と同じように行き先を書きます。drift(right: 40)。何も書かなければ、絵の幅だけ右へ行って戻ります。
show circle.colored(:orange).drift
show square(20).colored(:navy).drift(right: 30, up: 20, every: 3)
shift_colorshift_color(from: nil, to: :crimson, every: 4)色がゆっくり移り変わって戻る。
色を2つ渡すと、1つ目から2つ目へ移って戻ります。shift_color(:navy, :gold)。1つなら、黒からその色へ。何も渡さなければ、黒から crimson へ移ります。
名前を付けて書くこともできます。shift_color(from: :navy, to: :gold, every: 6)。
show circle(20).shift_color
show heart(40).shift_color(:navy, :hotpink, every: 3)
関連
colored
hsl
one_by_one
one_by_oneone_by_one(gap: nil)並んだ絵の動きを、1つずつ時間をずらす。
並んだ絵(絵の集まり)に付けた動きの言葉(spin、pulse、bounce など)の、すぐあとに書きます。1つ前の絵から少し遅れて、同じ動きをします。何も書かなければ、1周をちょうど等分した時間差になり、波のように見えます。
gap は、隣の絵との時間差(秒)です。それぞれの絵は、自分の中心で動きます。だから、丸が並んだ輪を1つずつ脈打たせても、輪の形はそのままです。
one_by_one は、ずらしたい動きの言葉のすぐあとに書きます。2つの動きをずらしたいときは、それぞれのあとに書きます。下のハートの例では、色の動きのあとと、弾みのあとに1回ずつ書いています。
show circle(6).repeat(12).in_ring(40).colored(:crimson).pulse(every: 1.5, to: 1.8).one_by_one
show circle(5).repeat(16).in_row(gap: 5).colored(:teal).bounce(height: 20, every: 2).one_by_one(gap: 0.1)
hearts = heart(20).repeat(5).in_row(gap: 6)
show hearts.shift_color(:crimson, :orchid).one_by_one.bounce(height: 24).one_by_one
trailtrail(count: 5, gap: nil)動く絵のうしろに、少し前の姿を薄く残す(残像)。
gap 秒前の姿、その2倍前の姿、と続けて、だんだん薄くして下に重ねます。gap を省くと、見た目のよい短い間隔になります。count はコピーの数で、名前なしでも書けます。trail(10)。
止まった絵に付けても何も変わりません(少し前、というものがないからです)。コピーはそれぞれ1枚の絵なので、大きな絵に長い残像を付けると、重いアニメーションになります。
show circle(5).colored(:gold).orbit(30).trail, on: :black
show circle(5).colored(:hotpink).orbit(radius: 30, every: 3).trail(count: 12).glowing, on: :black
animateanimate(seconds = 4) { |picture, t| ... }自分で動きを作る。
ブロックには、絵と t が渡されます。t は seconds 秒ごとに、0.0 から(1.0 未満まで)進んでは最初に戻ります。その瞬間の絵を返してください。
ブロックの中では、ほかの言葉がそのまま使えます。言葉でできることは、すべて自作の動きにも使えます。
show star.animate(4) { |picture, t| picture.rotate(t * 360).grow(to: 1 + t) }
dots = circle(5).repeat(8).in_ring(30)
show dots.animate(3) { |ring, t| ring.change_each { |dot, u| dot.colored(hsl((t + u) * 360)) } }
atat(seconds = 0)動きの、ある時刻の絵。(あわせて every、frames)
motion.at(1.5) は、1.5 秒の時点の止まった絵です。時間の単位は秒で、繰り返します。every が 4 の動きなら、0.5 秒と 4.5 秒は同じ絵です。
motion.every は1周にかかる秒数です。motion.frames(fps: 30) は、1秒に30枚の割合で並べた1周ぶんの絵のリスト(必要になるまで計算しない遅延リスト)です。
動きを見せるだけなら、これらは要りません。そのまま show してください。
show circle(5).colored(:crimson).orbit(radius: 30, every: 4).at(1)
trail = circle(3).colored(:navy).orbit(radius: 30, every: 4).frames(fps: 6)
show trail.reduce(:+)
showshow(picture, on: :white, paper: nil, grain: nil)絵(や動き)を画面に出す。
絵は画面にぴったり収まります。ウィンドウの大きさを考える必要はありません。
on: は背景の色です。paper: [800, 800] は、その大きさ(幅と高さ)の紙の真ん中に絵を置きます。はみ出た部分は切れます。
grain: は、紙やフィルムのような細かい粒を全体に乗せます。grain: true はやわらかい粒(0.12)で、0 から 1 の数字で強さを決められます。grain: 0.3。これは絵ではなく出し方の指定なので、背景も含めて全体にかかります。
show を何度か呼んだら、最後のものが出ます。
ruby flower.rb か asobi flower.rb で実行するとブラウザが開きます。ファイルを保存するたびに、絵が変わります。止めるときは Ctrl-C です。書き間違いがあっても閉じたりしません。最後に出せた絵を残したまま、画面の下にエラーとヒントが出ます。
マウスを動かすと、数秒だけ端に小さな操作が出ます。c キーでコードが絵の上に重なり、r キーで動画の録画を始めたり止めたりします(ファイルはブラウザが保存します)。
show star(radius: 30).colored(:gold)
show star(radius: 30).colored(:gold), on: :midnightblue
show circle(40).colored(:crimson), paper: [300, 200]
show star(radius: 30).colored(:gold).glowing, on: :black, grain: true
savesave(path, on: :white, paper: nil, grain: nil)絵をファイルに書き出す。
止まった絵は SVG ファイルになります。flower.save("flower.svg")。動きは、どのブラウザでもひとりでに動く HTML ページになります。flower.spin.save("flower.html")。どちらも show と同じ on:、paper:、grain: を受け付けます。flower.save("flower.svg", grain: true)。
動きのある瞬間だけを SVG にしたいときは、at で取り出します。flower.spin.at(1).save("still.svg")。
flower = petal(40, 16).repeat(8).in_fan.colored(:crimson, :navy)
# Remove the "#" to write the file:
# flower.save("flower.svg")
show flower
to_svgto_svg(on: :white, paper: nil)絵を SVG の文字列にする。
SVG の文字列を返します。save("x.svg") は、同じ文字列をファイルに書きます。止まった絵に使えます。動きは、先に at で瞬間を取り出してください。
svg = circle(10).colored(:crimson).to_svg
show text("#{svg.length} characters of SVG", size: 8)
boundsbounds, width, height絵の大きさを測る。
width と height は、絵をぴったり囲む四角の幅と高さです。bounds はその四角で、x0、y0、x1、y1 を持ちます。動きの場合は、1周のあいだに通る範囲すべてです。
shape = star(radius: 20)
show text("#{shape.width.round(1)} x #{shape.height.round(1)}", size: 12)
turnturn回転数で書いた角度。
asobi の角度は度で、時計回りです。0.25.turn は 90.0 なので、rotate(0.25.turn) は4分の1回転です。turns も同じ意味です。2.turns は 720.0 です。
show rect(50, 10).colored(:navy).on(rect(50, 10).colored(:crimson).rotate(0.25.turn))