Swift Playgrounds on WD Terminus

iPadでBooksをはじめる

Tue, 19 Dec 2023 00:00:00 +0000

iPadでのLily Playground Booksの導入手順

導入に関しては公式ページのiPadの手順を参考にしてください.

MacでBooksをはじめる

Tue, 19 Dec 2023 00:00:00 +0000

macOSでのLily Playground Booksの導入手順

導入に関しては公式ページのmacOSでの導入手順を参考にしてください.

1-1. タッチ位置に円を描く

Sat, 16 Dec 2023 00:00:00 +0000

このBookでは、タッチに反応して図形を描くプログラミングしていきます。タッチに合わせて動くエフェクトはとても魅力的です。表現を工夫して楽しいエフェクトを作っていきましょう。

手始めに、タッチしたところに円を描くプログラムを書きましょう。

前のBookでは実行時に1度だけ処理するdesign関数をつかいました。このBookから、design関数に加え、update関数をつかいます。 update関数は繰り返し呼ばれる関数です。呼ばれるたびにタッチの情報を更新するため、今タッチしている位置が得られます。screen.latestTouch が最新の触れた位置の情報です。

design関数に screen.clearColor = .lightGrey を書きます。背景を薄灰色に設定します。
update関数を用意します。
update関数のはじめに、screen.removeAllShapes() を書きます。一度すべての図形を消す処理です。updateは繰り返し呼ばれるので前のフレームの図形が残ります。今回は前フレームの図形を消すため、removeAllShapes()を呼びます。
let touch = screen.latestTouchを書きます。最新のタッチ情報がtouchに入ります。
PGCircle() を書きます。
PGCircle()に .position( touch.xy ) を追加します。 touch.xyはタッチ情報のxy座標が得られます。

func design( screen:PGScreen ) {
   screen.clearColor = .lightGrey
}

func update( screen:PGScreen ) {
   screen.removeAllShapes()
   
   let touch = screen.latestTouch
   
   PGCircle()
   .position( touch.xy )
}

「コードを実行」を押します。

目標

実行後、タッチした位置に丸が描けたら成功です。
(+1) PGCircle() を PGRectangle() や PGTriangle() など別の形に変えてみましょう。

1-1. 位置のアニメート

Sat, 16 Dec 2023 00:00:00 +0000

このBookでは、LilyPlaygroundで描いた図形を動かすプログラミングを学びます。工夫をこらして、美しいアニメーションをつくっていきましょう。

LilyPlaygroundでは、1秒間に最大60回、画面をリフレッシュします。その1回ごとに図形のパラメータを変えることで、動きを表現します。 1回ごとに加算する値を delta と呼びます。たとえば、 position の加算値は deltaPosition です。

てはじめに deltaPosition を使ってみましょう。

design関数内に、 PGCircle() を書きます。
PGCircleに .deltaPosition(dx:dy:) を追加します。

func design( screen:PGScreen ) {
   PGCircle()
   .deltaPosition( dx:0.5, dy:1.0 )
}

「コードを実行」を押します。

目標

中心から右上に移動する円が出たら成功です。

終わったら次のページへ進みます。

1-1. 四角を描く

Sat, 16 Dec 2023 00:00:00 +0000

LilyPlaygroundへようこそ。たのしく絵を描きながら、Swiftでプログラミングを学んでいきましょう。最終的に色々な図形を自由に操って美しい表現を目指します。この1章はその第一歩です。まず画面に四角を描いてみます。

下のプログラムの入力部分に PGRectangle() と書きます。

1
2
3

func design( screen:PGScreen ) {
   PGRectangle()
}

「コードを実行」を押したら、すこし待ちます。

目標

画面の真ん中に黒い四角が出たら成功です。

終わったら次のページへ進みます。

実行例

1-10. 図形の再利用

Sat, 16 Dec 2023 00:00:00 +0000

前ページでは life がなくなった時の処理、 .completion{ } を紹介しました。ここでは .completion{ } を活用して、図形を再利用してアニメーションを繰り返してみましょう。

PGCircle() を書きます。
フレームごとの移動量 .deltaPosition( dx:0.0, dy:-1.0 ) を指定します。
初期ライフとして .life( 1.0 ) を指定します。またlifeに合わせて .alpha( 1.0 ) を指定します。
フレームごとの減り量として、 .deltaLife( -0.01 ) と deltaAlpha( -0.01 ) を指定します。
.completion のブロック内で図形を再設定します。 .position(), .life(), .alpha() を使って、それぞれ初期化します。
フレーバーとして .color( .random ) を追加します。

func design( screen:PGScreen ) {
   PGCircle()
   .deltaPosition( dx:0.0, dy:-1.0 )
   .life( 1.0 )
   .deltaLife( -0.01 )
   .alpha( 1.0 )
   .deltaAlpha( -0.01 )
   .completion {
       $0
       .position( cx:0, cy:0 )
       .life( 1.0 )
       .alpha( 1.0 )
       .color( .random )
   }
}

「コードを実行」を押します。

目標

円が下に移動しながら消えます。円が消えたあと、中央から異なる色の円が再度現れ、繰り返しアニメーションすれば成功です。

終わったら次のページへ進みます。

1-11. 毎フレームの処理

Sat, 16 Dec 2023 00:00:00 +0000

前ページで終了時の操作を学びました。ここでは、毎フレームの処理を自分で書いてみましょう。

PGCircle() を書きます。
.position(cx:cy:), deltaPosition(dx:dy:), .life(), deltaLife() を指定します。はじめの初期化です。
.completion{ } で再利用を行います。 .position(cx:cy:)、deltaPosition(dx:dy:), .life() をそれぞれ元の値に戻します。 .color()　は前回と同じくランダムにします。
続けて .iterate{ } を書きます。そのブロック内で $0.deltaPosition(dx:dy:) を書きます。deltaPosition.yの値を1.08倍します。

func design( screen:PGScreen ) {
   PGCircle()
   .position( cx:0.0, cy:200.0 )
   .deltaPosition( dx:0.0, dy:-1.0 )
   .life( 1.0 )
   .deltaLife( -0.01 )
   .completion {
       $0
       .position( cx:0.0, cy:200.0 )
       .deltaPosition( dx:0.0, dy:-1.0 )
       .life( 1.0 )
       .color( .random )
   }
   .iterate {
       $0
       .deltaPosition( 
           dx: 0.0,
           dy: $0.deltaPosition.y * 1.08 )
   }
}

「コードを実行」を押します。

目標

円が少しずつ加速して落ちるアニメーションが繰り返されれば成功です。

終わったら次のページへ進みます。

1-12. フリーコード

Sat, 16 Dec 2023 00:00:00 +0000

前ページまでに、LilyPlaygroundでの色々なアニメーションの方法を学んできました。この章のまとめとして、ここまでに学んだ機能を自由に組み合わせ、試してみましょう。

1フレームあたりの移動量を指定する:
.deltaPosition(dx:dy:)
1フレームあたりの大きさ変化を指定する:
.deltaScale(dw:dh:)
1フレームあたりの色の変化量を指定する:
.deltaColor(red:green:blue:)
1フレームあたりの回転量を指定する:
.deltaAngle(degrees:)
.deltaAngle(radians:)
1フレームあたりのアルファ変化量を指定する:
.deltaAlpha()
図形のライフを指定する(0.0~1.0):
.life()
1フレームあたりのライフの変化量を指定する:
.deltaLife()
一定間隔で実行する($0は図形):
.interval(sec:秒数) { $0.実行する処理 }
ライフが0になった時実行する($0は図形):
.completion { $0.実行する処理 }
毎フレーム実行する:
.iterate { $0.実行する処理 }

目標

ここまで学んできたコードを使って楽しんでください。

1章はこれでおわりです。おつかれさまでした。次の章へ進みましょう。

1-2. サイズのアニメート

Sat, 16 Dec 2023 00:00:00 +0000

前ページで円を移動させました。このページでは、大きさを変えてみましょう。大きさのフレームごとの変化量は .deltaScale　で指定します。

PGCircle() に .deltaScale(dw:dh:) を追加します。

func design( screen:PGScreen ) {
   PGCircle()
   .deltaScale( dw:0.4, dh:-0.1 )
}

「コードを実行」を押します。

目標

横に伸びて縦に縮まる円が出たら成功です。

終わったら次のページへ進みます。

1-2. タッチの軌跡を描く

Sat, 16 Dec 2023 00:00:00 +0000

前のページでは、updateのはじめに screen.removeAllShapes() をつかって前の図形を消していました。そのため図形はタッチ位置に1つのみでした。

今回は、前のタッチ位置に描いた図形を残します。さらに新たなタッチ位置に図形を加えます。

しかし、図形が増えすぎてもいけません。.deltaLife と .deltaAlpha を使って、時間が経つと消滅するように工夫します。

design関数に screen.clearColor = .lightGrey を書きます。背景を薄灰色に設定します。
update関数を用意します。
let touch = screen.latestTouchを書きます。最新のタッチ情報を取得します。
PGCircle() を書きます。
PGCircle()に .position( touch.xy ) を追加します。
続けて .deltaLife( -0.05 )、 .deltaAlpha( -0.05 ) を追加します。lifeが減っていくようになります。lifeが0.0になるとPGCircleが消滅します。lifeと合わせてalphaも減らすことで、徐々に消える様子を表現します。

func design( screen:PGScreen ) {
    screen.clearColor = .lightGrey
}

func update( screen:PGScreen ) {
    let touch = screen.latestTouch
    
    PGCircle()
    .position( touch.xy )
    .deltaLife( -0.05 )
    .deltaAlpha( -0.05 )
}

「コードを実行」を押します。

目標

実行後、タッチの軌跡が描ければ成功です。

終わったら次のページへ進みます。

1-2. 色を変える

Sat, 16 Dec 2023 00:00:00 +0000

四角を描くことができました。次に四角の色を変えてみましょう。

PGRectangle()に続けて.color( .red )を書きます。このように .(ドット) で続けて作成した四角に指示ができます。

func design( screen:PGScreen ) {
   PGRectangle()
   .color( .red )
}

「コードを実行」を押します。

目標

四角が赤くなれば成功です。
(+1) .red を .blue や .green などに変更してみましょう。
(+2) .color( red: 0.5, green: 0.8, blue: 0.7 )と記述すると自由に色が作れます。0.0~1.0の間で値を変更してみましょう。

終わったら次のページへ進みます。

Note: colorの初期値は .black です。

実行例

1-3. タッチと図形のアニメーション1　- 回転とズーム

Sat, 16 Dec 2023 00:00:00 +0000

前のページでは、タッチ位置に図形を生成し、.lifeの値を用いて徐々に消えていくようにしました。前のフレームで描いた図形が少し残るため、タッチの軌跡を表現できました。

今回は、図形の角度と大きさの変化を加えて、図形の表現を豊かにしていきましょう。

design関数に screen.clearColor = .white を書きます。背景は白に設定します。
update関数を用意します。
if screen.touches.count == 0 { return }を書きます。タッチしている指の数が0のとき、図形を描かないようになります。
let touch = screen.latestTouchを書きます。最新のタッチ情報を取得します。
let d_scale = (0.5...1.0).randomizeを書き、0.5~1.0のランダム値をd_scaleに代入します。後述する.deltaScaleに用います。
PGRectangle() を書きます。
PGRectangle()に .position( touch.xy )を加えます。前ページと同様です。
続けて、.color( .random ), .scale( .zero ), .angle( .random )を追加します。図形作成時の初期値です。色、角度はランダム、大きさはゼロにします。
次に、.deltaAngle( degrees:1.0 )を追加して回転を加えます。また.deltaScale(dw:dh)を追加し、変数d_scaleを用いて拡大を行います。
.deltaLife( -0.05 )、 .deltaAlpha( -0.05 ) を前ページと同様に追加します。lifeが減っていき、同時にalphaも減らすことで透明になっていきます。

func design( screen:PGScreen ) {
    screen.clearColor = .white
}

func update( screen:PGScreen ) {
    if screen.touches.count == 0 { return }
    
    let touch = screen.latestTouch
    
    let d_scale = (0.5...1.0).randomize
    
    PGRectangle()
    .position( touch.xy )
    .color( .random )
    .scale( .zero )
    .angle( .random )
    .deltaAngle( degrees:1.0 )
    .deltaScale(
        dw:d_scale,
        dh:d_scale 
    )
    .deltaLife( -0.01 )
    .deltaAlpha( -0.01 )
}

「コードを実行」を押します。

目標

実行後、タッチの軌跡に回転と拡大する四角が描画がされれば成功です。

終わったら次のページへ進みます。

1-3. 色のアニメート

Sat, 16 Dec 2023 00:00:00 +0000

前ページで円の大きさをアニメーションしました。。このページでは、色の変化を楽しみましょう。

PGCircle() に続けて、.deltaColor(red:green:blue:) を追加します。

func design( screen:PGScreen ) {
   PGCircle()
   .deltaColor( red:0.002,
              green:0.001,
               blue:0.0015 )
}

「コードを実行」を押します。

目標

少しずつ色が変わっていく円がでたら成功です。

終わったら次のページへ進みます。

1-3. 大きさを変える

Sat, 16 Dec 2023 00:00:00 +0000

前ページで色を変えました。今度は大きさを変えましょう。

.color( .red )に続けて、.scale( width:200, height:300 )を追加します。

func design( screen:PGScreen ) {
   PGRectangle()
   .color( .red )
   .scale( width:200, height:300 )
}

「コードを実行」を押します。

目標

縦長の赤い四角が表示できたら成功です。
(+1) widthとheightの値をいろいろ変えてみましょう。
(+2) .color()の色も合わせて変えてみましょう。

終わったら次のページへ進みます。

Note: scaleの初期値は width:100, height:100 です。

実行例

1-4. タッチと図形のアニメーション2 - 移動と複数描画

Sat, 16 Dec 2023 00:00:00 +0000

前のページでは、タッチで生成した図形に大きさや角度のアニメーションを加えました。

今回は、1度のタッチで複数の図形を描き、動かしてみましょう。

design関数に screen.clearColor = .white を書きます。背景は白に設定します。
update関数を用意します。
if screen.touches.count == 0 { return }を書きます。タッチしている指の数が0のとき、図形を描かないようになります。
let touch = screen.latestTouchを書きます。最新のタッチ情報を取得します。
for _ in 0 ..< 4を書きます。1度のタッチで4つの図形を生成します。
for分の中でPGRectangle()を書きます。
PGRectangle()に前ページと同様の記述を追加します。ただし、let d_scaleのランダム値の範囲は(0.25...0.5).randomizeに変更します。
次に、.deltaPosition(dx:dy)を追加し、(-2.0...2.0).randomizeでランダムな方向に図形が移動するようにします。

func design( screen:PGScreen ) {
    screen.clearColor = .white
}

func update( screen:PGScreen ) {
    if screen.touches.count == 0 { return }
    
    let touch = screen.latestTouch
    
    for _ in 0 ..< 4 {
        let d_scale = (0.25...0.5).randomize
        
        PGRectangle()
        .position( touch.xy )
        .deltaPosition(
            dx:(-2.0...2.0).randomize,
            dy:(-2.0...2.0).randomize
        )
        .color( .random )
        .scale( .zero )
        .angle( .random )
        .deltaAngle( degrees:1.0 )
        .deltaScale( 
            dw:d_scale,
            dh:d_scale            
        )
        .deltaLife( -0.01 )
        .deltaAlpha( -0.01 )
    }
}

「コードを実行」を押します。

目標

実行後、タッチの軌跡から四角が拡散し、紙吹雪のようなエフェクトが表示されたら成功です。

終わったら次のページへ進みます。

1-4. 位置を変える

Sat, 16 Dec 2023 00:00:00 +0000

前ページで大きさを変えました。図形は表示位置を変えることができます。

.position( cx:100, cy:100 )を追加します。cx,cyは図形の中央の座標です。cxはcenter-x, cyはcenter-yの略です。

図形の位置をxとyのプラスとマイナスで表現します。下の図はxとyの関係を示す1つの例です。

中心は(x:0,y:0)です。xプラスは右方向へ移動し、xマイナスは左方向へ移動します。 yプラスは上方向へ移動、yマイナスは下方向へ移動します。

画面端の値は、画面サイズによって変わります（例：画面の横サイズが100だった場合、x=-50で左端、x=+50で右端になります）。

func design( screen:PGScreen ) {
   PGRectangle()
   .color( .red )
   .scale( width:200, height:300 )
   .position( cx:100, cy:100 )
}

「コードを実行」を押します。

目標

右上に移動した四角が表示されれば成功です。
(+1) cx, cyの値をいろいろ変えてみましょう。

終わったら次のページへ進みます。

Note: positionの初期値は cx:0, cy:0 です。

Note: 画面端の値は screen.minX, screen.maxX, screen.minY, screen.maxY で得ることができます。

実行例

1-4. 角度のアニメート

Sat, 16 Dec 2023 00:00:00 +0000

前ページで色の変化を試しました。次に、図形を回してみましょう。

回転がわかるように四角 PGRectangle() を使います。
続けて .deltaAngle(degrees:) を追加します。

func design( screen:PGScreen ) {
   PGRectangle()
   .deltaAngle( degrees:1.0 )
}

「コードを実行」を押します。

目標

回転する四角がでたら成功です。

終わったら次のページへ進みます。

1-5. アルファのアニメート

Sat, 16 Dec 2023 00:00:00 +0000

前ページでは回転のアニメーションを行いました。1-3で色のアニメートを扱いましたが、ここでは不透明度(アルファ値)を使って、徐々に消えるアニメーションを作ります。

四角 PGRectangle() を書きます。
続けて .deltaAlpha() を追加し、マイナスの値を指定します。

func design( screen:PGScreen ) {
   PGRectangle()
   .deltaAlpha( -0.005 )
}

「コードを実行」を押します。

目標

徐々に消えていく四角が表示されたら成功です。

終わったら次のページへ進みます。

1-5. マルチタッチ

Sat, 16 Dec 2023 00:00:00 +0000

前のページまでで、タッチ位置に複数の図形を描き、アニメーションを表現しました。

ここではマルタタッチに挑戦します。LilyPlaygroundでは、screen.touchesで複数のタッチ位置を得られます。 for文を用いて、複数の指の位置に図形を描いてみましょう。

design関数に screen.clearColor = .white を書きます。背景は白に設定します。
update関数を用意します。
for touch in screen.touchesの繰り返しブロックを書きます。touchにはタッチの座標が順に代入されます。
forのブロックの中でPGRectangle()を書きます。加えて、前ページと同様の記述を追加します。

func design( screen:PGScreen ) {
    screen.clearColor = .white
}

func update( screen:PGScreen ) {
    for touch in screen.touches {
        let d_scale = (0.25...0.5).randomize
            
        PGRectangle()
        .position( touch.xy )
        .color( .random )
        .scale( .zero )
        .angle( .random )
        .deltaAngle( degrees:1.0 )
        .deltaScale( 
            dw:d_scale,
            dh:d_scale            
        )
        .deltaLife( -0.01 )
        .deltaAlpha( -0.01 )
    }
}

「コードを実行」を押します。

目標

実行後、複数のタッチに反応したら成功です。なお結果例はシングルタッチの結果です。iPadでマルチタッチを試してみてください。

終わったら次のページへ進みます。

1-5. 回転させる

Sat, 16 Dec 2023 00:00:00 +0000

色, 大きさ, 位置などを操作してきました。ここでは図形を回転させてみましょう。

.angle( degrees:45.0 )を追加します。45度回転させます。

func design( screen:PGScreen ) {
   PGRectangle()
   .color( .red )
   .scale( width:200, height:300 )
   .position( cx:100, cy:100 )
   .angle( degrees: 45.0 )
}

「コードを実行」を押します。

目標

右上側で45度回転した赤い長方形が出てきたら成功です。
(+1) 色々な角度を試してみましょう。
(+2) .angle(radians:) を使ってみましょう。ラジアンで設定できます。

終わったら次のページへ進みます。

Note: angleの初期値はdegrees:0です。

実行例

1-6. 指が離れたときを捉える

Sat, 16 Dec 2023 00:00:00 +0000

前のページでは、マルチタッチを試しました。

Lily Playgroundではタッチしたときのように、指が離れた瞬間をとることもできます。

screen.releasesで指が離れた瞬間に異なるエフェクトを加えてみましょう。

準備として、前回のコードを用意してあります。ここにコードを追加していきます。
screen.touchesのループの下に、screen.releasesのfor文を追加します。使い方はscreen.touchesと同様です。
screen.releasesのfor文の中に、for _ in 0 ..< 32を書きます。
上の32回のループの中で、PGRectangle()を書きます。.position()にrelease.xyを設定して、指を離した位置に図形を描きます。
続いて、.deltaPosition(dx:dy:), .color(), .scale(), .angle(),.deltaAngle(degrees:), .deltaScale(dw:dh:), .deltaLife(), .deltaAlpha()を追加します。ランダムに図形が散らばるアニメーションです。

func design( screen:PGScreen ) {
    screen.clearColor = .white
}

func update( screen:PGScreen ) {
    for touch in screen.touches {
        let d_scale = (0.25...0.5).randomize
            
        PGRectangle()
        .position( touch.xy )
        .color( .random )
        .scale( width:0.0, height:0.0 )
        .angle( .random )
        .deltaAngle( degrees:1.0 )
        .deltaScale( 
            dw:d_scale,
            dh:d_scale            
        )
        .deltaLife( -0.01 )
        .deltaAlpha( -0.01 )
    }
    
    for release in screen.releases {
        for _ in 0 ..< 32 {
            let d_scale = (0.25...0.5).randomize
            
            PGRectangle()
            .position( release.xy )
            .deltaPosition(
                dx:(-2.0...2.0).randomize,
                dy:(-2.0...2.0).randomize
            )
            .color( .random )
            .scale( .zero )
            .angle( .random )
            .deltaAngle( degrees:1.0 )
            .deltaScale( 
                dw:d_scale,
                dh:d_scale   
            )
            .deltaLife( -0.01 )
            .deltaAlpha( -0.01 )
        }
    }
}

「コードを実行」を押します。

目標

実行後、タッチの軌跡を描き、指を離したときに図形が散るエフェクトが描けたら成功です。

終わったら次のページへ進みます。

1-6. 組み合わせる

Sat, 16 Dec 2023 00:00:00 +0000

前ページまでのアニメーションを組み合わせてみましょう。

四角PGRectangle() を使います。
続けて .deltaPosition(dx:dy:), .deltaScale(dw:dh:), .deltaColor(red:green:blue:), .deltaAngle(degrees:), .deltaAlpha() を追加して、以下の例のように書きます。

func design( screen:PGScreen ) {
   PGRectangle()
   .deltaPosition( dx:0.2, dy:0.5 )
   .deltaScale( dw:0.4, dh:-0.1 )
   .deltaColor( red:0.002,
              green:0.003,
               blue:0.001 )
   .deltaAngle( degrees:2.0 )
   .deltaAlpha( -0.002 )
}

「コードを実行」を押します。

目標

形、位置、色を変えながら消えていく四角が表示されたら成功です。

終わったら次のページへ進みます。

1-6. 透かす

Sat, 16 Dec 2023 00:00:00 +0000

1-2で色を取り扱いましたが、色の操作の1つとしてalpha（透明度)の操作があります。ここでは図形を透かしてみます。

PGRectangleに.alpha( 0.3 )を追加します。
PGRectangleの前にあるscreen.clearColor = .whiteを.lightGreyに書き換えます。

func design( screen:PGScreen ) {
   screen.clearColor = .lightGrey

   PGRectangle()
   .color( .red )
   .scale( width:200, height:300 )
   .angle( degrees: 45.0 )
   .alpha( 0.3 )
}

「コードを実行」を押します。

目標

薄い灰色の背景に透けた赤の四角が表示されたら成功です。

終わったら次のページへ進みます。

1-7. フリーコード

Sat, 16 Dec 2023 00:00:00 +0000

前ページまででLilyで基本的な図形操作ができるようになりました。ここで一度整理して、次の章にのぞみます。

背景の色を変える:
screen.clearColor = .lightGrey
四角を描く:
PGRectangle()
色を変える:
.color( .cyan )
.color( red:0.5, green:0.7, blue:1.0 )
大きさを変える:
.scale( width:200, height:300 )
位置を変える:
.position( cx: -150, cy:100 )
回転させる:
.angle( degrees:45.0 ) : 360度法
.angle( radians:45.0 * Double.pi / 180.0 ) : 弧度法
上記の二つの式は同じ効果が得られます。
図形を透過する:
.alpha( 0.5 )

目標

自由に色々試してみましょう。楽しめたらベストです。

1章はこれでおわりです。おつかれさまでした。次の章へ進みましょう。

1-7. フリーコード

Sat, 16 Dec 2023 00:00:00 +0000

前のページまでで、タッチに反応させてエフェクトをつくるコードを学びました。この章のまとめとして、ここまでに学んだ機能を自由に組み合わせ、試してみましょう。

Lily Playgroundで毎フレーム呼ばれる関数:
func update( screen:PGScreen ) { ... }
最新のタッチ位置を取得する:
screen.latestTouch
タッチの数を得る:
screen.touches.count
タッチしている位置をすべて取得する:
for touch in screen.touches { ... }
指を離した位置を取得する:
for relase in screen.releases { ... }

目標

ここまで学んできたコードを使って楽しんでください。

1章はこれでおわりです。おつかれさまでした。次の章へ進みましょう。

1-7. 一定間隔で実行する

Sat, 16 Dec 2023 00:00:00 +0000

前ページまでに、基本的なdeltaの使い方を紹介しました。ここでは一定間隔で実行する処理を紹介します。

四角 PGRectangle() を使います。サイズは .scale( square:200 ) を指定して大きめにします（見やすくするためです）。
.deltaAngle(degrees:) を追加し、回転させます。
.inteval(sec:) を追加し、続けて { } で処理ブロックを書きます。
作った処理ブロックの中に $0 と、続けて .color( .random ) を書きます。

func design( screen:PGScreen ) {
   PGRectangle()
   .scale( square:200 )
   .deltaAngle( degrees:1.0 )
   .interval( sec:1.0 ) {
       $0
       .color( .random )
   }
}

「コードを実行」を押します。

目標

回転しながら、1秒ごとに色がランダムに変化する四角が表示されたら成功です。

終わったら次のページへ進みます。

1-8. 図形のライフ

Sat, 16 Dec 2023 00:00:00 +0000

前ページでは、一定間隔の処理を行いました。さて、ここでは少しテーマを変えましょう。 LilyPlaygroundの図形は、 life の値を持っています。 life が0.0以下になると図形が消えます。試してみましょう。

PGCircle() を書きます。
.life( 1.0 ) を追加し、初期のライフを指定します。
.deltaLife( -0.005 ) を記述して、フレームごとのライフの減り量を指定します。

func design( screen:PGScreen ) {
   PGCircle()
   .life( 1.0 )
   .deltaLife( -0.005 )
}

「コードを実行」を押します。

目標

円が表示されたあと、3~4秒待って円が消えたら成功です。

終わったら次のページへ進みます。

Note: life の初期値は1.0です。life の値は0.0~1.0です。フレームの更新時、 life の値をチェックします。その時 life が0.0以下になった図形を削除します。

1-9. 終了処理とライフの復活

Sat, 16 Dec 2023 00:00:00 +0000

前ページで、 life を紹介しました。 life が0.0になった時、図形が消える前の終了処理を行えます。 .completion{ } を使ってみましょう。

PGCircle() を書きます。
初期ライフとして .life( 1.0 ) を指定します。またlifeに合わせて .alpha( 1.0 ) を指定します。
フレームごとの減り量として、 .deltaLife( -0.005 ) と deltaAlpha( -0.005 ) を指定します。
.completion のブロック内で $0 と、続けて .life( 1.0 ) を指定して1.0に戻します。アルファ値も .alpha( 1.0 ) で戻します。

func design( screen:PGScreen ) {
   PGCircle()
   .life( 1.0 )
   .deltaLife( -0.005 )
   .alpha( 1.0 )
   .deltaAlpha( -0.005 )
   .completion {
       $0
       .life( 1.0 )
       .alpha( 1.0 )
   }
}

「コードを実行」を押します。

目標

円が表示されたあと、3~4秒待って円が消え、また表示されるのを繰り返したら成功です。

終わったら次のページへ進みます。

2-1. 拡散光エフェクト

Sat, 16 Dec 2023 00:00:00 +0000

前の章で、タッチ位置の使い方の基礎を学びました。

この章では、これまで学んだことを応用して、タッチ時のエフェクトのバライエティを生み出していきましょう。

このページでは、BlurryCircleの加算合成で光の粒を表現し、鮮やかに拡散する光のエフェクトをつくります。

func design( screen:PGScreen ) {
    screen.clearColor = .darkGrey
}

func update( screen:PGScreen ) {
    for touch in screen.touches {
        for _ in 0 ..< 8 {
            let speed = (2.0...4.0).randomize
            let rad  = (0.0...2.0 * Double.pi).randomize
            
            PGAddBlurryCircle()
            .color( LLColor( 0.4, 0.6, 0.95, 1.0 ) )
            .position( touch.xy )
            .deltaPosition( 
                dx: speed * cos( rad ),
                dy: speed * sin( rad ) 
            )
            .scale(
                width:(5.0...40.0).randomize,
                height:(5.0...40.0).randomize )
            .angle( .random )
            .deltaAngle( degrees: (-2.0...2.0).randomize )
            .life( 1.0 )
            .deltaLife( -0.016 )
            .alpha( 1.0 )
            .deltaAlpha( -0.016 )
        }
    }
}

design関数に screen.clearColor = .darkGrey を書きます。背景は濃い灰色です。

update関数を用意します。

for touch in screen.touchesでタッチのループを作ります。触れている指すべてをとらえます。

さらに、touchのループの中でfor _in 0 ..< 8で8回ループを行い、加算合成のブラー円PGAddBlurryCiecle()を作ります。

図形を動かすため、スピードと角度を計算した変数speed,radを作ります。
- speedは2.0~~4.0のランダム値、radは0~~2πのラジアンのランダム値です。

初期設定のコードを書きます。
- .color( LLColor( 0.4, 0.6, 0.95, 1.0 ) )
  - 色。薄青を設定します。
- .position( touch.xy )
  - 位置。タッチ位置を設定します。
- .deltaPosition( dx: speed * cos( rad ), dy: speed * sin( rad ) )
  - 毎フレームの移動量。speedとradを用いて、タッチ位置から360度方向にランダムに飛び散ります。
- .scale( width:(5.0...40.0).randomize, height:(5.0...40.0).randomize )
  - 大きさ。5.0~40.0のランダム値です。縦と横のサイズを一致させないことでランダムの楕円になります。
- .angle( .random )
  - 角度。ランダムを設定します。
- .deltaAngle( degrees: (-2.0...2.0).randomize )
  - 毎フレームの角度変化量。-2.0~2.0度でランダムに回転します。
- .life( 1.0 )
  - ライフ。1.0から開始します。
- .deltaLife( -0.016 )
  - 毎フレームのライフ変化量。-0.016で約60フレームでライフが0になります。
- .alpha( 1.0 )
  - アルファ。1.0を設定します。
- .deltaAlpha( -0.016 )
  - 毎フレームのアルファ変化量。-0.016で約60フレームで透明になります。

2-1. 三角・丸・四角

Sat, 16 Dec 2023 00:00:00 +0000

前章でLilyPlaygroundの使い方に導入しました。この章ではいろいろな形を描いてバラエティを増やしましょう。

PGRectangle()に加えて、PGCircle()、PGTriangle()、PGBlurryCircle()を追加します。
またそれぞれの.positionと.colorを以下のように設定します。

func design( screen:PGScreen ) {
   PGRectangle()
   .color( .green )
   .position( cx:-100, cy:100 )

   PGTriangle()
   .color( .red )
   .position( cx:100, cy:100 )

   PGCircle()
   .color( .blue )
   .position( cx:-100, cy:-100 )

   PGBlurryCircle()
   .color( .magenta )
   .position( cx:100, cy:-100 )
}

「コードを実行」を押します。

目標

四角、三角、円、ぼやけた円が表示されたら成功です。

終わったら次のページへ進みます。

2-1. 視覚表現の導入コード

Sat, 16 Dec 2023 00:00:00 +0000

前の章で、アニメーションで使う基本的な操作を学びました。この章では、機能を組み合わせて視覚表現を作っていきましょう。

はじめに、ランダムにたくさんの四角がアニメーションする視覚表現を目指します。

ここでは、まず複数の円を描き、フェードアウトを繰り返すアニメをつくります。

forで繰り返し、20個のPGRectangle() を書きます。
.position()はランダム座標のscreen.randomPointを指定します。 .color(), .life() は .random、そして deltaLife() には-0.01を指定して初期化します。
続けて、.completion{ } で再利用を行います。 .position()はランダム座標で初期化、 .life()は1.0に戻します。 .color()　はランダムにしましょう。
続けて .iterate{ } を書きます。そのブロック内で $0.alpha( $0.life ) を書きます。

func design( screen:PGScreen ) {
   for _ in 0 ..< 20 {
       PGRectangle()
       .position( screen.randomPoint )
       .color( .random )
       .life( .random )
       .deltaLife( -0.005 )
       .completion {
           $0
           .position( screen.randomPoint )
           .color( .random )
           .life( 1.0 )
       }
       .iterate {
           $0.alpha( $0.life )
       }
   }
}

「コードを実行」を押します。

目標

ランダムに表示される四角が薄くなって消えていき、別のところに四角が現れるアニメーションが描けたら成功です。

終わったら次のページへ進みます。

2-10. 図形をランダムに

Sat, 16 Dec 2023 00:00:00 +0000

ランダムな色・大きさを改良し、さらに色々な形を描いてみましょう。

前回のコードにlet a = (0.0...3.0).randomizeを記述します。 (0.0…3.0)と小数で指定します。得られるランダム値も小数となります。
aの値でifの条件をつくり、3つの図形を描きわけます。

func design( screen:PGScreen ) {
   for _ in 0 ..< 100 {
       let a = (0.0...3.0).randomize
       if a < 1.0 {
           PGCircle()
           .color( .random )
           .scale( square:(20...100).randomize )
           .position( screen.randomPoint )
       }
       else if a < 2.0 {
           PGTriangle()
           .color( .random )
           .scale( square:(20...100).randomize )
           .position( screen.randomPoint )
       }
       else {
           PGRectangle()
           .color( .random )
           .scale( square:(20...100).randomize )
           .position( screen.randomPoint )     
       }
   }
}

「コードを実行」を押します。

目標

画面上の不定な位置に色や大きさが様々な図形が描かれれば成功です。
(+1) 「コードを実行」を何度か試してください。結果が変わります。

終わったら次のページへ進みます。

2-11. ランダムをつかいこなす

Sat, 16 Dec 2023 00:00:00 +0000

前回のものにさらにランダム要素を加えましょう。

前回のそれぞれの図形に.angle( .random )や.alpha( .random )を追加します。

func design( screen:PGScreen ) {
   for _ in 0 ..< 100 {
       let a = (0.0...3.0).randomize
       if a < 1.0 {
           PGCircle()
           .color( .random )
           .scale( square:(20...100).randomize )
           .position( screen.randomPoint )
           .angle( .random )
           .alpha( .random )
       }
       else if a < 2.0 {
           PGTriangle()
           .color( .random )
           .scale( square:(20...100).randomize )
           .position( screen.randomPoint )
           .angle( .random )
           .alpha( .random )
       }
       else {
           PGRectangle()
           .color( .random )
           .scale( square:(20...100).randomize )
           .position( screen.randomPoint )   
           .angle( .random )
           .alpha( .random )
       }
   }
}

「コードを実行」を押します。

目標

たくさんの円、三角、四角が透けたり、回転していれば成功です。
(+1) 「コードを実行」を何度か試してください。結果が変わります。

終わったら次のページへ進みます。

2-12. フリーコード

Sat, 16 Dec 2023 00:00:00 +0000

いろいろなランダムを使って、複数の図形をたくさん描くコードを学んできました。この章のまとめとして、ここまでに学んだ機能を自由に組み合わせ、試してみましょう。

四角を描く:
PGRectangle()
三角を描く:
PGTriangle()
円を描く:
PGCircle()
ぼかし円を描く:
PGBlurryCircle()
繰り返し処理:
for a in 0 ..< 繰り返し回数 { 繰り返す処理 }
条件分岐:
if 条件 { 条件を満たした時 }
else { 条件を満たさない時 }
ランダムの位置:
.position( screen.randomPoint )
ランダムの色:
.color( .random )
ランダムの大きさ:
.scale( square:(20...100).randomize )
ランダムの角度:
.angle( .random )
ランダムの不透明度:
.alpha( .random )

目標

ここまで学んできたコードを使って楽しんでください。

2章はこれでおわりです。おつかれさまでした。次の章へ進みましょう。

2-2. シャワー

Sat, 16 Dec 2023 00:00:00 +0000

このページでは、タッチ位置から水が噴き出すシャワーを表現してみましょう。

func design( screen:PGScreen ) {
    screen.clearColor = .darkGrey
}

func update( screen:PGScreen ) {
    for touch in screen.touches {
        for _ in 0 ..< 16 {
            PGAddBlurryCircle()
            .color( LLColor( 0.16, 0.3, 0.5, 0.8 ) )
            .position( 
                cx: touch.x + (-5.0...5.0).randomize,
                cy: touch.y + (-5.0...5.0).randomize
            ) 
            .deltaPosition( 
                dx:(-1.0...1.0).randomize,
                dy:(1.0...3.0).randomize
            )
            .scale( square: 24.0 )
            .iterate {
                $0.deltaPosition.y -= 0.25
                
                if $0.position.y < Float( screen.minY ) {
                    $0.life( 0.0 )
                }
            }
        }
    }
}

design関数に screen.clearColor = .darkGrey を書きます。背景は濃い灰色です。

update関数を用意します。

for touch in screen.touchesでタッチのループを作ります。触れている指すべてをとらえます。

3のループ内でfor _ in 0 ..< 16を作り、加算合成のブラー円PGAddBlurryCiecle()を作ります。

初期設定のコードを書きます。
- .color( LLColor( 0.16, 0.3, 0.5, 0.8 ) )
  - 色。重なると薄青になるような色を指定します。
- .position( cx: touch.x + (-5.0...5.0).randomize, cy: touch.y + (-5.0...5.0).randomize )
  - 位置。タッチ位置から-5.0~5.0のブレがある範囲を設定します。
- .deltaPosition( dx:(-1.0...1.0).randomize, dy:(1.0...3.0).randomize )
  - 毎フレームの移動量。dxは左右方向にわずかな移動,dyは上方向に向いた移動を行うよう設定します。
- .scale( square: 24.0 )
  - 大きさ。24.0で固定です。

2-2. 横に並べる

Sat, 16 Dec 2023 00:00:00 +0000

前ページで色々な図形を描きました。ここでは円を横に並べてみましょう。

繰り返し文(for文)を使って円を複数並べます。繰り返し回数を7にします。 for文の中にPGCircle()を入れることで複数の円を描きます。
.position(cx: で繰り返しのカウンタxに70を掛けて加算します。

func design( screen:PGScreen ) {
   for x in 0 ..< 7 {
       PGCircle()
       .color( .blue )
       .scale( width:50, height:50 )
       .position( cx:-210 + x * 70, cy:0 )
   }
}

「コードを実行」を押します。

目標

横に並んだ円が表示されたら成功です。
(+1) 繰り返し回数、また.positionでの掛け算の値を変えてみましょう。
(+2) 円をぼやけた円(PGBlurryCircle)などに変えてみましょう。

終わったら次のページへ進みます。

2-3. キラキラ輝く軌跡

Sat, 16 Dec 2023 00:00:00 +0000

このページでは、タッチした軌跡がキラキラと光るエフェクトを表現してみます。

func design( screen:PGScreen ) {
    screen.clearColor = .darkGrey
}

func update( screen:PGScreen ) {
    for touch in screen.touches {
        let max_dist = 80.0
    
        let radians = (0.0...2.0).randomize * Double.pi
        let d2 = max_dist * (0.0...1.0).randomize
        let dx = d2 * cos( radians )
        let dy = d2 * sin( radians )
        
        PGAddMask( "mask-sparkle" )
        .color( LLColor( 1.0, 0.6, 0.4, 1.0 ) )
        .position( 
            cx: touch.x + Float( dx ),
            cy: touch.y + Float( dy )
        )
        .alpha( 0.0 )
        .scale( square:24.0 )
        .deltaScale(
            dw:0.5,
            dh:0.5
        )
        .deltaAngle( degrees:(0.5...1.0).randomize )
        .deltaLife( -0.03 )
        .iterate {
            $0.alpha = sin( $0.life * Float.pi )
        }
    }
}

design関数に screen.clearColor = .darkGrey を書きます。背景は濃い灰色です。

update関数を用意します。

for touch in screen.touchesでタッチのループを作ります。触れている指すべてをとらえます。

初期化のための値を計算し、変数に代入します。
- let max_dist = 80.0
  - タッチ位置からの最大距離。80.0を代入します。
- let radians = (0.0...2.0).randomize * Double.pi
  - 進行方向の角度。0~~2πラジアン(=0~~360度)のランダムの値を代入します。
- let d2 = max_dist * (0.0...1.0).randomize
  - タッチ位置からの距離。最大値に0.0~1.0を掛けた値を代入します。
- let dx = d2 * cos( radians )
  - x方向移動量。d2にradiansのコサイン値をかけて代入します。
- let dy = d2 * sin( radians )
  - y方向移動量。d2にradiansのサイン値をかけて代入します。

2-3. さらに縦に並べる

Sat, 16 Dec 2023 00:00:00 +0000

横に並べる繰り返しを行いました。さらにそれを縦に展開しましょう。

前ページのプログラムに続き、繰り返し文(for文)をもう1つ使って円を縦にも並べます。繰り返し回数を7にします。
.position(cx: に繰り返しカウンタのxに70を掛け算した値を加算します。
.position(cy: に繰り返しカウンタのyに70を掛け算した値を加算します。

func design( screen:PGScreen ) {
   for y in 0 ..< 7 {
       for x in 0 ..< 7 {
           PGCircle()
           .color( .blue )
           .scale( width:50, height:50 )
           .position( cx:-210 + x * 70,
                      cy:-210 + y * 70 )
       }
   }
}

「コードを実行」を押します。

目標

縦横に並んだたくさんの円が表示されたら成功です。
(+1) 繰り返し回数、また.positionでの掛け算の値を変えてみましょう。
(+2) 円を別の形状に変えてみましょう。

終わったら次のページへ進みます。

2-3. 移動表現の追加

Sat, 16 Dec 2023 00:00:00 +0000

前ページで、四角のアニメーションにスケーリングの変化を加えました。次に、ランダムな移動を加えてみましょう。

前ページと同じコードを書きます。
PGRectangle()に .deltaPosition(dx:dy:) を追加します。値は(-1.0…1.0).randomizeを指定します。
.completion{ } 内の$0に .deltaPosition(dx:dy:) を追加します。値は(-1.0…1.0).randomizeを指定します。

func design( screen:PGScreen ) {
   for _ in 0 ..< 20 {
       PGRectangle()
       .position( screen.randomPoint )
       .deltaPosition(
           dx:(-1.0...1.0).randomize,
           dy:(-1.0...1.0).randomize
       )
       .scale( square: 0.0 )
       .deltaScale( dw:1.0, dh:1.0 )
       .color( .random )
       .life( .random )
       .deltaLife( -0.005 )
       .completion {
           $0
           .position( screen.randomPoint )
           .deltaPosition( 
               dx:(-1.0...1.0).randomize,
               dy:(-1.0...1.0).randomize 
           )
           .scale( square: 0.0 )
           .color( .random )
           .life( 1.0 )
       }
       .iterate {
           $0.alpha( $0.life )
       }
   }
}

「コードを実行」を押します。

目標

ランダム表示の四角が薄く大きくなりながら、ランダムに移動する絵が表示されたら成功です。

終わったら次のページへ進みます。

2-4. 回転表現の追加

Sat, 16 Dec 2023 00:00:00 +0000

前ページで、四角の移動のアニメーションを加えました。次に、回転を加えてみましょう。

前ページと同じコードを書きます。
PGRectangle()に .angle() を追加します。値はランダムを指定します。続けて .deltaAngle(degrees:) を追加します。値は1.0を指定します。
.completion{ } 内の$0に .angle() を追加し、ランダムで初期化します。

func design( screen:PGScreen ) {
   for _ in 0 ..< 20 {
       PGRectangle()
       .position( screen.randomPoint )
       .deltaPosition(
           dx:(-1.0...1.0).randomize,
           dy:(-1.0...1.0).randomize
       )
       .scale( square: 0.0 )
       .deltaScale( dw:1.0, dh:1.0 )
       .angle( .random )
       .deltaAngle( degrees:1.0 )
       .color( .random )
       .life( .random )
       .deltaLife( -0.005 )
       .completion {
           $0
           .position( screen.randomPoint )
           .deltaPosition( 
               dx:(-1.0...1.0).randomize,
               dy:(-1.0...1.0).randomize 
           )
           .scale( square: 0.0 )
           .angle( .random )
           .color( .random )
           .life( 1.0 )
       }
       .iterate {
           $0.alpha( $0.life )
       }
   }
}

「コードを実行」を押します。

目標

ランダム表示の四角が薄く大きくなりながら回転と移動する絵が表示されたら成功です。

終わったら次のページへ進みます。

2-4. 図形を交互に並べる

Sat, 16 Dec 2023 00:00:00 +0000

縦横に並べるを発展させて、複数の図形を描きます。

前ページのプログラムにif文を追加して、条件によって描く形を変えます。ここではxが偶数の時に円、奇数の時に三角を描くようにします。

func design( screen:PGScreen ) {
   for y in 0 ..< 7 {
       for x in 0 ..< 7 {
           if x % 2 == 0 {
               PGCircle()
               .color( .blue )
               .scale( width:50, height:50 )
               .position( cx:-210 + x * 70,
                          cy:-210 + y * 70 )
           }
           else {
               PGTriangle()
               .color( .red )
               .scale( width:50, height:50 )
               .position( cx:-210 + x * 70,
                          cy:-210 + y * 70 )       
           }
       }
   }
}

「コードを実行」を押します。

目標

横方向に丸と三角が交互に表示されたら成功です。

終わったら次のページへ進みます。

2-4. 燃える軌跡

Sat, 16 Dec 2023 00:00:00 +0000

このページでは、なぞった位置から炎が立ち上がるエフェクトを作ってみましょう。

func design( screen:PGScreen ) {
 screen.clearColor = .darkGrey
}

func update( screen:PGScreen ) {
    for touch in screen.touches {
        for _ in 0 ..< 2 {
            PGAddMask( "mask-smoke" )
            .color( LLColor( 1.0, 0.4, 0.3, 1.0 ) )
            .position( 
                cx: touch.x + (-4.0...4.0).randomize,
                cy: touch.y + (-4.0...4.0).randomize
            )
            .deltaPosition(
                dx: (-1.0...1.0).randomize,
                dy: (2.0...3.0).randomize
            )
            .scale( square:(20.0...90.0).randomize )
            .deltaScale(
                dw:1.0,
                dh:1.0
            )
            .angle( .random )
            .deltaAngle( degrees:(-2.0...2.0).randomize )
            .deltaLife( -0.02 )
            .iterate {
                $0.alpha = $0.life
                $0.color.R -= 0.02
                $0.color.G -= 0.009
                $0.color.B -= 0.007
            }
        }
    }
}

design関数に screen.clearColor = .darkGrey を書きます。背景は濃い灰色です。

update関数を用意します。

for touch in screen.touchesでタッチのループを作ります。触れている指すべてをとらえます。

3のループ内でfor _ in 0 ..< 2を書き、加算合成の煙模様PGAddMask( "mask-smoke" )を作ります。

図形の初期設定のコードを書きます。
- .color( LLColor( 1.0, 0.4, 0.3, 1.0 ) )
  - 色。明るい赤色を設定します。少しだけ黄色に近づけます。
- .position( cx:touch.x + (-4.0...4.0).randomize, cy:touch.y + (-4.0...4.0).randomize )
  - 位置。タッチ位置から-4.0~4.0のランダム値を設定します。
- .deltaPosition( dx:(-1.0...1.0).randomize, dy:(2.0...3.0).randomize )
  - 位置の変化量。x方向は-1.0~~1.0のランダム値で横にわずかに移動します。y方向は2.0~~3.0のランダム値で上方向に移動します。
- .scale( square:(20.0...90.0).randomize )
  - 大きさ。20.0~90.0のランダム値で色々な大きさをとります。
- .deltaScale( dw:1.0, dh:1.0 )
  - 大きさの変化量。毎フレーム1.0ずつ大きくしていきます。
- .angle( .random )
  - 初期の角度。ランダムを設定します。
- .deltaAngle( degrees:(-2.0...2.0).randomize )
  - 角度の変化量。毎フレーム-2.0~2.0のランダム値で回転します。
- .deltaLife( -0.02 )
  - ライフの変化量。-0.02を設定し、50フレームで図形が消えるようにします。

2-5. 加速する

Sat, 16 Dec 2023 00:00:00 +0000

前ページで、四角のアニメーション表現を一通り作成しました。

ここでは、アニメーションを少し工夫してみます。毎フレームの処理を参考に、 .iterate{ } で計算を加えて四角を加速させましょう。

前ページと同じコードを書きます。
.iterate{ } 内の$0 に .deltaPosition(dx:dy:) を追加します。deltaPosition.x と deltaPosition.y を 1.04倍した値 を設定します。1フレームごとに移動量が増えていきます。

func design( screen:PGScreen ) {
   for _ in 0 ..< 20 {
       PGRectangle()
       .position( screen.randomPoint )
       .deltaPosition(
           dx:(-1.0...1.0).randomize,
           dy:(-1.0...1.0).randomize
       )
       .scale( square: 0.0 )
       .deltaScale( dw:1.0, dh:1.0 )
       .angle( .random )
       .deltaAngle( degrees:1.0 )
       .color( .random )
       .life( .random )
       .deltaLife( -0.005 )
       .completion {
           $0
           .position( screen.randomPoint )
           .deltaPosition( 
               dx:(-1.0...1.0).randomize,
               dy:(-1.0...1.0).randomize 
           )
           .scale( square: 0.0 )
           .angle( .random )
           .color( .random )
           .life( 1.0 )
       }
       .iterate {
           $0
           .alpha( $0.life )
           .deltaPosition( 
             dx:$0.deltaPosition.x * 1.04,
             dy:$0.deltaPosition.y * 1.04
           )
       }
   }
}

「コードを実行」を押します。

目標

四角がだんだん加速する動きが描けたら成功です。

終わったら次のページへ進みます。

2-5. 図形のチェッカー

Sat, 16 Dec 2023 00:00:00 +0000

前回のプログラムの条件を工夫すると、チェッカー模様にできます。条件だけ変えてみましょう。

前ページのプログラムのif文の条件を変えます。条件には (x + y) % 2 == 0 を入れます。

func design( screen:PGScreen ) {
   for y in 0 ..< 7 {
       for x in 0 ..< 7 {
           if (x + y) % 2 == 0 {
               PGCircle()
               .color( .blue )
               .scale( width:50, height:50 )
               .position( cx:-210 + x * 70,
                          cy:-210 + y * 70 )
           }
           else {
               PGTriangle()
               .color( .red )
               .scale( width:50, height:50 )
               .position( cx:-210 + x * 70,
                          cy:-210 + y * 70 )       
           }
       }
   }
}

「コードを実行」を押します。

目標

色違いのパネルが表示されたら成功です。

終わったら次のページへ進みます。

2-5. 離した時に光線を描く

Sat, 16 Dec 2023 00:00:00 +0000

ここでは趣向を変えて、指を離した時に指の移動した方向に光の線を描きます。

func design( screen:PGScreen ) {
    screen.clearColor = .darkGrey
}

func update( screen:PGScreen ) {  
    for release in screen.releases {
        for k in 0 ..< 4 {
            let dx = release.x - release.startPos.x
            let dy = release.y - release.startPos.y
            let angle = Double( atan2( dy, dx ) )
            let base_size = Float( 40 + 10 * k )
            
            PGAddBlurryCircle()
            .color( LLColor( 0.2, 0.4, 0.6, 1.0 ) )
            .position( release.startPos )
            .angle( radians:angle )
            .deltaPosition( 
                dx: dx * 0.08,
                dy: dy * 0.08
            )
            .deltaLife( -0.02 )
            .scale( square: base_size )
            .iterate {                
                $0.deltaPosition.x *= 0.93
                $0.deltaPosition.y *= 0.93
                 
                let speed = sqrt(
                    $0.deltaPosition.x * $0.deltaPosition.x + 
                    $0.deltaPosition.y * $0.deltaPosition.y
                ) 
                 
                $0
                .width( base_size * ( 1.0 + speed / 10.0 ) )
                .alpha( $0.life )
            }
        }
    }
}

design関数に screen.clearColor = .darkGrey を書きます。背景は濃い灰色です。

update関数を用意します。

for release in screen.releasesでリリースのループを作ります。離れた指をとらえます。

3のループ内でfor k in 0 ..< 4を書き、加算合成のブラー円PGAddBlurryCircle()を作ります。ブラー円を4つ重ねます。

図形の初期化に用いる値を計算し、変数に代入します。
- let dx = release.x - release.startPos.x
  - タッチを始めた位置(release.startPos)、指を離した位置(release)のx方向の距離をdxに代入します。
- let dy = release.y - release.startPos.y
  - タッチを始めた位置(release.startPos)、指を離した位置(release)のy方向の距離をdyに代入します。
- let angle = Double( atan2( dy, dx ) )
  - dx, dyを使って図形の角度を計算します。atan2という関数で角度が得られます。
- let base_size = Float( 40 + 10 * k )
  - 4つのブラー円の大きさです。kを使って少しずつ大きくした円を重ねます。

2-6. カウンタで彩りを

Sat, 16 Dec 2023 00:00:00 +0000

2-3で並べた円の色を変えてみましょう。.colorの値の計算にfor文のカウンタx, yを使います。

.colorの値にxとyを用いて計算します。

func design( screen:PGScreen ) {
   for y in 0 ..< 7 {
       for x in 0 ..< 7 {
           PGCircle()
           .color( red: Double( x ) / 7.0,
                 green: Double( y ) / 7.0,
                  blue: Double( x + y ) / 14.0 )
           .scale( width:50, height:50 )
           .position( cx:-210 + x * 70,
                      cy:-210 + y * 70 )
       }
   }
}

「コードを実行」を押します。

目標

丸の色が徐々に変わって表示されたら成功です。

終わったら次のページへ進みます。

2-6. タッチに集まるパーティクル

Sat, 16 Dec 2023 00:00:00 +0000

ここでは、もともとある図形をタッチ位置に誘導するエフェクトを表現してみます。今回は、design関数を用います。

func design( screen:PGScreen ) {
    screen.clearColor = .black
    
    for _ in 0 ..< 150 {
        let speed = (1.5...4.0).randomize
        let radians = (0.0...2.0).randomize * Double.pi
        let dx = speed * cos( radians )
        let dy = speed * sin( radians )
        
        PGAddBlurryCircle()
        .color( LLColor( 0.4, 0.7, 0.7, 1.0 ) )
        .position( 
            cx: (screen.minX + 10 ... screen.maxX - 10).randomize,
            cy: (screen.minY + 10 ... screen.maxY - 10).randomize
        )
        .deltaPosition( 
            dx:dx,
            dy:dy
        )
        .scale( square:20 )
        .iterate {
            if $0.position.x - 10 <= Float( screen.minX ) {
                $0.deltaPosition.x *= -1
            }
            
            if Float( screen.maxX ) <= $0.position.x + 10 {
                $0.deltaPosition.x *= -1
            }
            
            if $0.position.y - 10 <= Float( screen.minY ) {
                $0.deltaPosition.y *= -1
            }
            
            if Float( screen.maxY ) <= $0.position.y + 10 {
                $0.deltaPosition.y *= -1
            }
            
            if 0　< screen.touches.count {
                let touch = screen.touches[0]
                let dx = (touch.x - $0.position.x) * 0.04
                let dy = (touch.y - $0.position.y) * 0.04
                
                $0.position.x += dx
                $0.position.y += dy
            }
        }    
    }
}

func update( screen:PGScreen ) {

}

design関数に screen.clearColor = .balck を書きます。背景は黒にします。

update関数を用意します。今回update関数は空です。

design関数の背景色の後にfor _ in 0 ..< 150のループを書き、加算合成のブラー円PGAddBlurryCircle()を作ります。

図形の初期化に用いる値を計算し、変数に代入します。
- let speed = (1.5...4.0).randomize
  - スピードを計算します。1.5~4.0のランダム値を代入します。
- let radians = (0.0...2.0).randomize * Double.pi
  - 進む方向の角度を計算します。0~360度のランダム値です。
- let dx = speed * cos( radians )
  - x方向の移動量を計算します。
- let dy = speed * sin( radians )
  - y方向の移動量を計算します。

2-6. どんどん大きく

Sat, 16 Dec 2023 00:00:00 +0000

前ページで、iterate{ } を使って四角を加速させる表現を作りました。

合わせて、スケーリング変化も加速させて、迫ってくる四角を表現しましょう。

前ページと同じコードを書きます。
.completion{ }内の $0 に .deltaScale(dx:dy:) を追加します。値は dw:1.0, dh:1.0 を指定します。
.iterate{ } 内の $0 に .deltaScale(dw:dh:) を追加します。deltaScale.width と deltaScale.height を1.02倍した値を設定します。1フレームごとに拡大量が増えていきます。

func design( screen:PGScreen ) {
   for _ in 0 ..< 20 {
       PGRectangle()
       .position( screen.randomPoint )
       .deltaPosition(
           dx:(-1.0...1.0).randomize,
           dy:(-1.0...1.0).randomize
       )
       .scale( square: 0.0 )
       .deltaScale( dw:1.0, dh:1.0 )
       .angle( .random )
       .deltaAngle( degrees:1.0 )
       .color( .random )
       .life( .random )
       .deltaLife( -0.005 )
       .completion {
           $0
           .position( screen.randomPoint )
           .deltaPosition( 
               dx:(-1.0...1.0).randomize,
               dy:(-1.0...1.0).randomize 
           )
           .scale( square: 0.0 )
           .deltaScale( dw:1.0, dh:1.0 )
           .angle( .random )
           .color( .random )
           .life( 1.0 )
       }
       .iterate {
           $0
           .alpha( $0.life )
           .deltaPosition( 
             dx:$0.deltaPosition.x * 1.04,
             dy:$0.deltaPosition.y * 1.04
           )
           .deltaScale(
             dw:$0.deltaScale.width * 1.02,
             dh:$0.deltaScale.height * 1.02
           )
       }
   }
}

「コードを実行」を押します。

目標

四角がだんだん加速して迫ってくる動きが描けたら成功です。

終わったら次のページへ進みます。

2-7. フリーコード

Sat, 16 Dec 2023 00:00:00 +0000

ここまで2-5の図形パターン, 2-6の色パターンなどを学んできました。おさらいとして、自由にコードを書いてみましょう。forや``if`｀を使って複数の図形をたくさん書いてみてください。

四角を描く:
PGRectangle()
三角を描く:
PGTriangle()
円を描く:
PGCircle()
ぼかし円を描く:
PGBlurryCircle()
繰り返し処理:
for a in 0 ..< 繰り返し回数 { 繰り返す処理 }
条件分岐:
if 条件 { 条件を満たした時 }
else { 条件を満たさない時 }

目標

色々な形を描いたり、繰り返し・条件分岐を使って楽しんでください。

終わったら次のページへ進みます。

2-7. 触れて弾ける

Sat, 16 Dec 2023 00:00:00 +0000

前のページの仕組みを応用して、図形に触れた時反応するエフェクトをつくってみましょう。

func design( screen:PGScreen ) {
    screen.clearColor = .black
    
    for _ in 0 ..< 30 {
        let speed = (2.5...4.0).randomize
        let radians = (0.0...2.0).randomize * Double.pi
        let dx = speed * cos( radians )
        let dy = speed * sin( radians )
        
        PGAddCircle()
        .color( .random )
        .position( 
            cx: (screen.minX + 25 ... screen.maxX - 25).randomize,
            cy: (screen.minY + 25 ... screen.maxY - 25).randomize
        )
        .deltaPosition( 
            dx:dx,
            dy:dy
        )
        .scale( square:50 )
        .iterate {
            if $0.position.x - 25 <= Float( screen.minX ) {
                $0.deltaPosition.x *= -1
            }
            
            if Float( screen.maxX ) <= $0.position.x + 25 {
                $0.deltaPosition.x *= -1
            }
            
            if $0.position.y - 25 <= Float( screen.minY ) {
                $0.deltaPosition.y *= -1
            }
            
            if Float( screen.maxY ) <= $0.position.y + 25 {
                $0.deltaPosition.y *= -1
            }
            
            if 0 < screen.touches.count {
                let touch = screen.touches[0]
                
                // タッチ位置と図形の距離
                let dx = touch.x - $0.position.x
                let dy = touch.y - $0.position.y
                // 図形の円内部をタッチしていたら、弾けさせる
                if sqrt( dx * dx + dy * dy ) < 25 {
                    // 本体のライフを0にして無くす
                    $0.life( 0.0 )
                
                    // 本体を中心に60個新しい図形を作る
                    for _ in 0 ..< 60 {
                        let speed = (4.0...6.0).randomize
                        let radians = (0.0...2.0).randomize * Double.pi
                        let vx = speed * cos( radians )
                        let vy = speed * sin( radians )
                        
                        PGAddCircle()
                        .color( $0.color )
                        .position( $0.position )
                        .deltaPosition( 
                            dx:vx,
                            dy:vy
                        )
                        .scale( square:10 )
                        .deltaLife( -0.01 )
                        .iterate {
                            $0.deltaPosition.x *= 0.95
                            $0.deltaPosition.y *= 0.95
                            $0.alpha( $0.life )
                        }
                    }
                }
            }
        }    
    }
}

func update( screen:PGScreen ) {

}

design関数に screen.clearColor = .black を書きます。背景は黒にします。

update関数を用意します。今回update関数は空です。

design関数の背景色の後にfor _ in 0 ..< 30のループを書き、加算合成の円PGAddCircle()を作ります。

図形の初期化に用いる値を計算し、変数に代入します。
- let speed = (2.5...4.0).randomize
  - スピードを計算します。2.5~4.0のランダム値を代入します。
- let radians = (0.0...2.0).randomize * Double.pi
  - 進む方向の角度を計算します。0~360度のランダム値です。
- let dx = speed * cos( radians )
  - x方向の移動量を計算します。
- let dy = speed * sin( radians )
  - y方向の移動量を計算します。

2-7. 複数図形で視覚表現

Sat, 16 Dec 2023 00:00:00 +0000

前ページで、四角が迫ってくるアニメーションを表現しました。このように基本動作を組み合わせて、さまざまな表現が可能です。この章の締めくくりに、四角以外の形状も混ぜてみる例を紹介します。

図形オブジェクトを入れる let shape:PGActor! を書きます。
shape の形を決めるため、ランダム値 let rnd を作成します。
rndの値を使って、 if、else if、else の条件分岐を書きます。条件によって shape に異なる形(円、四角、三角)を作成して、格納します。
前ページと同じ動作のコードを shape に対して記述します。

func design( screen:PGScreen ) {
   for _ in 0 ..< 20 {
       let shape:PGActor!
       let rnd = (0.0...3.0).randomize

       if rnd < 1.0 {
          shape = PGRectangle()
       }
       else if rnd < 2.0 {
          shape = PGTriangle()
       }
       else {
          shape = PGCircle()
       }
        
       shape
       .position( screen.randomPoint )
       .deltaPosition(
           dx:(-1.0...1.0).randomize,
           dy:(-1.0...1.0).randomize
       )
       .scale( square: 0.0 )
       .deltaScale( dw:1.0, dh:1.0 )
       .angle( .random )
       .deltaAngle( degrees:1.0 )
       .color( .random )
       .life( .random )
       .deltaLife( -0.005 )
       .completion {
           $0
           .position( screen.randomPoint )
           .deltaPosition( 
               dx:(-1.0...1.0).randomize,
               dy:(-1.0...1.0).randomize 
           )
           .scale( square: 0.0 )
           .deltaScale( dw:1.0, dh:1.0 )
           .angle( .random )
           .color( .random )
           .life( 1.0 )
       }
       .iterate {
           $0
           .alpha( $0.life )
           .deltaPosition( 
             dx:$0.deltaPosition.x * 1.04,
             dy:$0.deltaPosition.y * 1.04
           )
           .deltaScale(
             dw:$0.deltaScale.width * 1.02,
             dh:$0.deltaScale.height * 1.02
           )
       }
   }
}

「コードを実行」を押します。

目標

四角・丸・三角が加速して迫ってくる動きが描けたら成功です。

終わったら次のページへ進みます。

2-8. フリーコード

Sat, 16 Dec 2023 00:00:00 +0000

前ページまでで、1章のしくみを組み合わせて、視覚効果を生み出す表現を学んできました。この章の締めくくりに、自由に効果を表現してみてください。基本コードとして2-7のコードを用意しています。カスタマイズして楽しんでみましょう。

目標

ここまで学んできたコードを使って楽しんでください。

2章はこれでおわりです。おつかれさまでした。次の章へ進みましょう。

2-8. フリーコード

Sat, 16 Dec 2023 00:00:00 +0000

ここまででタッチのエフェクトのバライエティを表現してきました。工夫すればより豊かな表現が可能になるでしょう。

2章で出てきた要素をまとめます。

Lily Playgroundで毎フレーム呼ばれる関数:
func update( screen:PGScreen ) { ... }
最新のタッチ位置を取得する:
screen.latestTouch
タッチの数を得る:
screen.touches.count
タッチしている位置をすべて取得する:
for touch in screen.touches { ... }
指を離した位置を取得する:
for release in screen.releases { ... }
指を離した時、そのタッチが開始した位置を取得する:
release.startPos.x
release.startPos.y

目標

ここまで学んできたコード、Books1, Books2も合わせて、色々なビジュアルエフェクトを作ってみてください。

これでビジュアルエフェクトのプログラミングに導入する「Lily Playground Books」は完了です！ありがとうございました。

ビジュアルエフェクト編は一旦終わりになりますが、さらに広い世界が待っています。また、App開発には多くの可能性が秘められています。

このBooksが一人でも多く、App開発に興味を持ってくださるきっかけになることを願っています。

Booksについてのご意見、より本格的なApp開発を志す方々、ぜひ執筆者にお気軽にご連絡ください。お待ちしています。

渡辺電気のお問い合わせフォーム

2-8. ランダムな配置

Sat, 16 Dec 2023 00:00:00 +0000

繰り返しでたくさんの図形を描きました。では次は繰り返しにランダム要素を加えてみましょう。

繰り返しの数を20回にして、PGCircle()を描きます。カウンタは _ にします。
.position()にscreen.randomPointを記述します。

func design( screen:PGScreen ) {
   for _ in 0 ..< 20 {
       PGCircle()
       .color( .blue )
       .position( screen.randomPoint )
   } 
}

「コードを実行」を押します。

目標

画面上の不定な位置に円が描かれれば成功です。
(+1) 「コードを実行」を何度か試してください。結果が変わります。

終わったら次のページへ進みます。

Note: forのカウンタ _ は、カウンタを計算で使わない場合の記述です。

Note: 　screen は画面領域です。screen.randomPoint は画面領域の中の座標をランダムに1つ取得します。

実行例

2-9. ランダムな色・大きさ

Sat, 16 Dec 2023 00:00:00 +0000

ランダムな配置に加えて、色、大きさなどにランダムを用います。

前回のコードを用いて、繰り返し数を100回にします。
.color( .random )を記述します。
上記に加え、.scale( square:(20...100).randomize )を記述します。大きさが20~100の間のランダムな整数が得られます。

func design( screen:PGScreen ) {
   for _ in 0 ..< 100 {
       PGCircle()
       .color( .random )
       .scale( square:(20...100).randomize )
       .position( screen.randomPoint )
   }
}

「コードを実行」を押します。

目標

画面上の不定な位置に色や大きさが様々な円が描かれれば成功です。
(+1) 「コードを実行」を何度か試してください。結果が変わります。

終わったら次のページへ進みます。

3-1. キラキラ輝く

Sat, 16 Dec 2023 00:00:00 +0000

前の章までで、エフェクトのアニメーションの基礎を学びました。

この章では、これまでの学習内容を活かして、豊かな視覚表現をいくつか作っていきましょう。

まずはキラキラ輝く演出を作ってみます。

func design( screen:PGScreen ) {
   screen.clearColor = .darkGrey
    
   for _ in 0 ..< 50 {
       PGAddMask( "mask-sparkle" )
       .color( .white )
       .position( screen.randomPoint )
       .scale( square: 15 )
       .deltaScale( dw:0.4, dh:0.4 )
       .angle( degrees: 0 )
       .deltaAngle( degrees: 0.5 )
       .alpha( 0 )
       .life( .random )
       .deltaLife( -0.01 )
       .iterate {
         if $0.life < 0.5 {
            $0.alpha( $0.life * 2.0 )
         }
         else {
            $0.alpha( (1.0 - $0.life) * 2.0 )
         }
       }     
       .completion {
           $0
           .position( screen.randomPoint )
           .scale( square:15 )
           .angle( degrees:0 )
           .alpha( 0 )
           .life( 1.0 )
       }
   }
}

screen.clearColor = .darkGrey で背景を暗灰色にします。

forで50個の加算合成マスク画像 PGAddMask() を書きます。画像ファイルはmask-sparkleを指定します。

初期設定のコードを書きます。
- .color( .white )
  - 色。白を設定します。
- .position( screen.randomPoint )
  - 位置。画面内のランダム座標を設定します。
- .scale( square:15 )
  - 大きさ。縦横15ポイントを設定します。
- .deltaScale( dw:0.4, dy:0.4 )
  - 毎フレーム、0.4ポイント拡大します。
- .angle( degrees:0 )
  - 角度。初期は0度を設定します。
- .deltaAngle( degrees: 0.5 )
  - 毎フレーム、0.5度回転します。
- .alpha( 0 )
  - アルファ。透明にします。
- .life( .random )
  - ライフ。0.0~1.0のランダムから開始
- .deltaLife( -0.01 )
  - 毎フレーム、lifeを0.01減少します。

.iterate{ } を用意して、毎フレームのalphaの処理を計算します。
- .life が0.5より小さいとき、 $0.life * 2.0 を設定します。
- .life が0.5以上のとき、 (1.0 - $0.life) * 2.0 を設定します。

上記の計算により、lifeが0.5の時、もっとも濃く描画します。lifeが0.5より少ない、あるいは多いときは薄くなります。

3-1. 画像を表示する

Sat, 16 Dec 2023 00:00:00 +0000

この章では画像を使ってみます。このブックには「lily」という画像があります。Lilyのアイコンです。PGPictureでこの画像を表示してみましょう。

図形と同様に、PGPicture( "lily" )と書きます。ファイル名は "(ダブルクォート) で包みます。これは 文字列 を表します。
大きさとして.scale( square:256 )を追加します。

func design( screen:PGScreen ) {
   PGPicture( "lily" )
   .scale( square:256 )
}

「コードを実行」を押します。

目標

Lilyのアイコンが表示されれば成功です。

終わったら次のページへ進みます。

実行例

3-10. フリーコード

Sat, 16 Dec 2023 00:00:00 +0000

このBookの最後のページです。ここまで学んできたものを自由に使って、自分の美しいと感じるエフェクトを自由に表現してみてください。このページではupdate関数も使えます。

目標

色々なエフェクトを作って楽しみましょう。

これでこのBookは終わりとなります。おつかれさまでした。

次のBookでは、タッチに反応したエフェクトの表現を試していきたいと思います。

それでは、また次のBookで！

3-2. マスクとして用いる

Sat, 16 Dec 2023 00:00:00 +0000

さて、画像をそのまま表示しましたが、Lily Playgroundでは、画像をマスクに使うことが増えてきます。ここではマスク画像を使う方法を試してみましょう。画像をマスクにするときはPGMaskをつかいます。また、もとの画像がどんなものであるかを見るためにPGPictureでも表示してみましょう。

PGPicture( "mask-star" )を書きます。.cx( -128 )で左に移動させます。
次にPGMask( "mask-star" )を書きます。.cx( 128 )で右に移動させます。
PGMask( "mask-star" )に.color( .blue )を追加します。

func design( screen:PGScreen ) {
   PGPicture( "mask-star" )
   .scale( square:128 )
   .cx( -128 )

   PGMask( "mask-star" )
   .scale( square:128 )
   .cx( 128 )
   .color( .blue )
}

「コードを実行」を押します。

目標

左に白黒の星マーク、右に星マークの白い部分に青になった透けた星が描けたら成功です。

終わったら次のページへ進みます。

3-2. 煙を焚く

Sat, 16 Dec 2023 00:00:00 +0000

煙を表現するコードをつくりましょう。

func design( screen:PGScreen ) {
    screen.clearColor = .darkGrey
    
    for _ in 0 ..< 60 {
        PGMask( "mask-smoke" )
        .color( .white )
        .position( 
            cx:(-150...150).randomize,
            cy:(-150...150).randomize
        )
        .scale( square:(80...160).randomize )
        .deltaScale( dw:1, dh:1 )
        .angle( .random )
        .life( .random )
        .deltaLife( -0.005 )
        .iterate {
           if $0.life < 0.5 {
              $0.alpha( $0.life )
           }
           else {
              $0.alpha( (1.0 - $0.life) )
           }
        }     
        .completion {
            $0
            .position( 
                cx:(-150...150).randomize,
                cy:(-150...150).randomize
            )
            .scale( square:80 )
            .angle( .random )
            .life( 1.0 )
        }
    }
}

screen.clearColor = .darkGrey で背景を暗灰色にします。

forで60個のマスク画像 PGMask() を書きます。画像ファイルはmask-smokeを指定します。

初期設定のコードを書きます。
- .color( .white )
  - 色。白を設定します。
- .position( cx:(-150...150).randomize, cy:(-150...150).randomize )
  - 位置。-150~150ポイントのランダム座標を設定します。
- .scale( square:(80...160).randomize )
  - 大きさ。80~160ポイントのランダムなサイズを設定します。
- .deltaScale( dw:1, dy:1 )
  - 毎フレーム、1ポイント拡大します。
- .angle( .random )
  - 角度。0.0~1.0のランダムから開始します。
- .life( .random )
  - ライフ。0.0~1.0のランダムから開始します。
- .deltaLife( -0.005 )
  - 毎フレーム、lifeを0.005減少します。

.iterate{ } を用意して、毎フレームのalphaの処理を計算します。
- .life が0.5より小さいとき、 $0.life * 2.0 を設定します。
- .life が0.5以上のとき、 (1.0 - $0.life) * 2.0 を設定します。

上記の計算により、lifeが0.5の時、もっとも濃く描画します。lifeが0.5より少ない、あるいは多いときは薄くなります。

3-3. マスク画像の紹介

Sat, 16 Dec 2023 00:00:00 +0000

前回マスク画像を試しました。このBooks内に用意している他のマスク画像を紹介します。これらの画像はBooks内で自由に使えます。以下のコードで練習してみましょう。

以下の例のようにPGMask()を複数作ります。読み込む画像名は"mask-star", “mask-snow”, “mask-sparkle”, “mask-smoke"です。色は.color( .white )を指定します。
背景色は screen.clearColor =.darkGrey にします。

func design( screen:PGScreen ) {
   screen.clearColor = .darkGrey

   PGMask( "mask-star" )
   .scale( square:128 )
   .position( cx:-128, cy:128 )
   .color( .white )

   PGMask( "mask-snow" )
   .scale( square:128 )
   .position( cx:128, cy:128 )
   .color( .white )

   PGMask( "mask-sparkle" )
   .scale( square:128 )
   .position( cx:-128, cy:-128 )
   .color( .white )

   PGMask( "mask-smoke" )
   .scale( square:128 )
   .position( cx:128, cy:-128 )
   .color( .white )
}

「コードを実行」を押します。

目標

4つのマスク画像が表示されたら成功です。

終わったら次のページへ進みます。

3-3. 炎をあげる

Sat, 16 Dec 2023 00:00:00 +0000

前のページの煙のコードを応用して、炎を表現してみましょう。

func design( screen:PGScreen ) {
    screen.clearColor = .darkGrey
    
    for _ in 0 ..< 160 {
        PGAddMask( "mask-smoke" )
        .color( LLColor( 0.9, 0.34, 0.22, 1.0 ) )
        .position(
            cx:(-50 ... 50).randomize,
            cy:(-120 ... -110).randomize
        )
        .deltaPosition( 
            dx:(-1.0...1.0).randomize,
            dy:(0.5...4.5).randomize 
        )
        .scale( square: 80.0 )
        .deltaScale( dw: 0.5, dh: 0.5 )
        .angle( .random )
        .deltaAngle( degrees:(-2.0...2.0).randomize )
        .life( .random )
        .deltaLife( -0.01 )
        .iterate {
            if $0.life < 0.5 {
               $0.alpha( $0.life )
            }
            else {
               $0.alpha( (1.0 - $0.life) )
            }
        }
        .completion {
            $0
            .position( 
                cx:(-50 ... 50).randomize,
                cy:(-120 ... -110).randomize 
            )
            .scale( square: 80.0 )
            .life( 1.0 )
        }
    }
}

screen.clearColor = .darkGrey で背景を暗灰色にします。

forで160個の加算合成マスク画像 PGAddMask() を書きます。画像ファイルはmask-smokeを指定します。

初期設定のコードを書きます。
- .color( LLColor( 0.9, 0.34, 0.22, 1.0 ) )
  - 色。少しオレンジがかった赤を設定します。
- .position( cx:(-50...50).randomize, cy:(-120... -110).randomize )
  - 位置。x方向は-50~~50のランダム座標, y方向は-120~~-110のランダム座標を設定します。 (xはある程度のブレがあり、yはほとんど違いのない位置になります)
- .deltaPosition( dx:(-1.0...1.0).randomize, dy:(0.5...4.5).randomize )
  - 毎フレーム、x方向に-1.0~~1.0のランダムな等速移動量、y方向に0.5~~4.5のランダムな等速移動量を設定します。 (yのプラスが大きいので、画面上方向へ大きく移動します)
- .scale( square:80.0 )
  - 大きさ。80.0ポイントを設定します。
- .deltaScale( dw:0.5, dy:0.5 )
  - 毎フレーム、0.5ポイント拡大します
- .angle( .random )
  - 角度。0.0~1.0のランダムから開始します。
- .deltaAngle( degrees:(-2.0...2.0).randomize )
  - 毎フレーム、-2.0~2.0度のランダム値で等速に回転します。
- .life( .random )
  - ライフ。0.0~1.0のランダムから開始します。
- .deltaLife( -0.01 )
  - 毎フレーム、lifeを0.01減少します。

.iterate{ } を用意して、毎フレームのalphaの処理を計算します。
- .life が0.5より小さいとき、 $0.life * 2.0 を設定します。
- .life が0.5以上のとき、 (1.0 - $0.life) * 2.0 を設定します。

上記の計算により、lifeが0.5の時、もっとも濃く描画します。lifeが0.5より少ない、あるいは多いときは薄くなります。

3-4. うねる発光体

Sat, 16 Dec 2023 00:00:00 +0000

ここでは、ぼやけた円と加算合成をつかって、発光体を表現してみます。

func design( screen:PGScreen ) {
    screen.clearColor = .darkGrey
    
    for _ in 0 ..< 80 {
        PGAddBlurryCircle()
        .color( .random )
        .position( screen.randomPoint )
        .scale( square: 100.0 )
        .deltaScale( dw: 0.5, dh: 0.5 )
        .alpha( 0 )
        .life( .random )
        .deltaLife( -0.003 )
        .iterate {
            $0.alpha( sin( $0.life * Float.pi ) )
        }
        .completion {
            $0
            .color( .random )
            .position( screen.randomPoint )
            .scale( square: 100.0 )
            .life( 1.0 )
            .alpha( 0 )
        }
    }
}

screen.clearColor = .darkGrey で背景を暗灰色にします。

forで80個の加算合成のぼやけた縁 PGAddBlurryCircle() を書きます。

初期設定のコードを書きます。
- .color( .random )
  - 色。ランダムを設定します。
- .position( screen.randomPoint )
  - 位置。画面内のランダム座標を設定します。
- .scale( square:100.0 )
  - 大きさ。100.0ポイントを設定します。
- .deltaScale( dw:0.5, dy:0.5 )
  - 毎フレーム、0.5ポイント拡大します。
- .alpha( 0 )
  - アルファ。透明から開始します。
- .life( .random )
  - ライフ。0.0~1.0のランダムから開始します。
- .deltaLife( -0.003 )
  - 毎フレーム、lifeを0.003減少します。

.iterate{ } を用意して、毎フレームのalphaの処理を計算します。
- .alpha( sin( $0.life * Float.pi ) )
  - lifeに合わせたサイン値です。

上記の計算で、.life=1.0で透明、0.5のときにもっとも濃くなり、0.0で透明に戻ります。

3-4. マスクを重ねる表現

Sat, 16 Dec 2023 00:00:00 +0000

マスク用画像の紹介を試しました。マスクを使った図形を重ねるていくと豊かで複雑な表現が可能になります。

ここではスモーク画像を重ねて絵を作ってみます。

背景色はscreen.clearColor = .darkGreyを指定します。
PGMask( "mask-smoke" ) をforループで50個重ねてみましょう。
.position、.scale、.alpha、.angle をつかって以下のようにランダムな値を指定します。

func design( screen:PGScreen ) {
   screen.clearColor = .darkGrey

   for _ in 0 ..< 50 {
       PGMask( "mask-smoke" )
       .scale( square:(16...192).randomize )
       .position( cx:(-128...128).randomize,
                  cy:(-128...128).randomize )
       .alpha( .random )
       .angle( .random )
       .color( .white )
   }
}

「コードを実行」を押します。

目標

煙が重なっているような表現ができたら成功です。
(+1) 何回かコード実行をしてみてください。色々な形の煙ができます。

3-5. 噴水

Sat, 16 Dec 2023 00:00:00 +0000

前のページと同様、ぼやけた円と加算合成を用いて、噴水のような表現を考えてみます。

func design( screen:PGScreen ) {
    screen.clearColor = .darkGrey
    
    for _ in 0 ..< 1000 {
        PGAddBlurryCircle()
        .color( LLColor( 0.16, 0.3, 0.5, 0.8 ) )
        .position( 
            cx:(-10...10).randomize,
            cy:screen.minY - (0.0...48.0).randomize
        ) 
        .deltaPosition( 
            dx:(-2.0...2.0).randomize,
            dy:(19.0...20.0).randomize
        )
        .scale( square: 48.0 )
        .life( .random )
        .deltaLife( -0.008 )
        .iterate {
            $0.deltaPosition( 
                dx:$0.deltaPosition.x,
                dy:$0.deltaPosition.y - 0.35
            )
        }
        .completion {
            $0
            .position(
                cx:(-10...10).randomize,
                cy:screen.minY - (0.0...48.0).randomize
            ) 
            .deltaPosition(
                dx:(-2.0...2.0).randomize,
                dy:(19.0...20.0).randomize 
            )
            .life( 1.0 )
        }
    }
}

screen.clearColor = .darkGrey で背景を暗灰色にします。

forで1000個の加算合成のぼやけた円 PGAddBlurryCircle() を書きます。

初期設定のコードを書きます。
- .color( LLColor( 0.16, 0.3, 0.5, 0.8 ) )
  - 色。水色を設定します。
- .position( cx:(-10...10).randomize, cy:screen.minY - (0.0...48.0).randomize )
  - 位置。x方向は中央付近, y方向は画面下へ配置します。
- .deltaPosition( dx:(-2.0...2.0).randomize, dy:(19.0...20.0).randomize )
  - 毎フレーム、x方向に-2.0~2.0ポイントのランダムに移動, y方向に約20ポイント移動します。（少し左右に振れつつ、上方向へ飛び上がります）
- .scale( square:48.0 )
  - 大きさ。48.0ポイントを設定します。
- .alpha( 0 )
  - アルファ。透明を設定します。
- .life( .random )
  - ライフ。0.0~1.0のランダムを設定します。
- .deltaLife( -0.008 )
  - 毎フレーム、lifeを0.008減少します。

.iterate{ } を用意して、毎フレームのdeltaPositionを変化します。
- .deltaPosition( dx:$0.deltaPosition.x, dy:$0.deltaPosition.y - 0.35 )
  - x方向の移動量は変化なし, y方向の移動量を-0.35していきます。

上記の計算により、だんだんと上方向への移動量が減り、下に落ちるようになります。

3-6. ぼたん雪の降る夜

Sat, 16 Dec 2023 00:00:00 +0000

ぼやけた円を雪にみたてて、これを降らせてみましょう。

func design( screen:PGScreen ) {
    screen.clearColor = LLColor( 0.0, 0.05, 0.2, 1.0 )
    
    for _ in 0 ..< 80 {
        let size = (10.0 ... 50.0).randomize
        let speed = size / 50.0
        let c = LLColor( 0.9, 0.95, 1.0, Float( speed ) )
        
        PGBlurryCircle()
        .color( c )
        .position( 
            cx:(screen.minX...screen.maxX).randomize,
            cy:(screen.minY-200...screen.maxY+200).randomize
        )
        .deltaPosition( 
            dx:(-0.5 ... 0.5).randomize * speed,
            dy:(-8.0 ... -6.5).randomize * speed
        )
        .scale( square:size )
        .iterate {
            if $0.position.y < Float( screen.minY - 200.0 ) {
                $0
                .position( 
                    cx:(screen.minX...screen.maxX).randomize,
                    cy:screen.maxY + 200
                )
            }
        }    
    }
}

screen.clearColor = LLColor( 0.0, 0.05, 0.2, 1.0 ) で背景を群青色にします。

forで、80回繰り返します。

forの中に、初期設定に必要な変数をつくります。
- let size = (10.0 ... 50.0).randomize
  - 大きさ用の変数。10.0~50.0のランダム値をつくり、代入します。
- let speed = size / 50.0
  - 速度用の変数。sizeに合わせて0.2~1.0の値をつくり、代入します。
- let c = LLColor( 0.9, 0.95, 1.0, Float( speed ) )
  - 色用の変数。少し青みがかった白をつくり、代入します。またアルファにspeedの値を設定します。

forの中で、ぼやけた円 PGBlurryCircle() をつくります。

初期設定のコードを書きます。
- .color( c )
  - 色。変数cを指定します。
- .position( cx:(screen.minX...screen.maxX).randomize, cy:(screen.minY-200...screen.maxY+200).randomize )
  - 位置。x方向は左端~~右端のランダム、 y方向は上端-200~~下端+200ポイントのランダム座標に設定します。（画面全体から縦にはみ出した範囲にランダムに配置されます）。
- .deltaPosition( dx:(-0.5 ... 0.5).randomize * speed, dy:(-8.0 ... -6.5).randomize * speed )
  - 毎フレームの移動量。x方向は左右-0.5~~0.5ポイントのランダム、 y方向は-8.0~~-6.5のランダムに変数speedを掛け算した値を設定します。
- .scale( square:size )
  - 大きさ。変数sizeを設定します。

.iterate{ } を用意して、図形の再利用のタイミングをうかがいます。
- if $0.position.y < Float( screen.minY - 200.0 ) { ... }
  - 図形が画面の下端から200ポイントはみ出したとき、{ }の中の処理を行います。
- .position( cx:(screen.minX...screen.maxX).randomize, cy:screen.maxY+200.randomize )
  - x方向は左端~右端のランダム、 y方向は上端+200ポイントの位置に再配置します。

「コードを実行」を押します。

目標

雪が降るエフェクトが表示されたら成功です。

3-7. トゥインクルスター

Sat, 16 Dec 2023 00:00:00 +0000

前のページの雪を降らせるコードを参考に、流れ星の表現をつくってみましょう。

func design( screen:PGScreen ) {
    screen.clearColor = LLColor( 0.0, 0.05, 0.2, 1.0 )
    
    for _ in 0 ..< 10 {
        let size = (40.0 ... 80.0).randomize
        let speed = size / 80.0
        let c = LLColor( 1.0, 0.8, 0.25, Float( speed ) )
        
        PGAddMask( "mask-star" )
        .color( c )
        .position( 
            cx:(screen.minX-200...screen.maxX+200).randomize,
            cy:(screen.minY...screen.maxY).randomize
        )
        .deltaPosition( 
            dx:(10.0 ... 12.0).randomize * speed,
            dy:(-1.5 ... 3.5).randomize * speed
        )
        .scale( square:size )
        .angle( .random )
        .deltaAngle( degrees:-4.0 * speed )
        .iterate {
            $0.deltaPosition.y -= 0.05
                        
            if Float( screen.maxX + 200.0 ) <= $0.position.x {
                $0
                .position( 
                    cx:screen.minX-200,
                    cy:(screen.minY...screen.maxY).randomize
                )
                .deltaPosition( 
                    dx:(10.0 ... 12.0).randomize * speed,
                    dy:(-1.5 ... 3.5).randomize * speed
                )
            }
        }    
        .interval( sec:0.05 ) {
            PGAddCircle()
            .color( c )
            .position( $0.position )
            .scale( square:0 )
            .deltaScale( dw:0.5 * speed, dh:0.5 * speed )
            .alpha( 0 )
            .deltaLife( -0.02 )
            .iterate {
                $0.alpha( sin( $0.life * Float.pi ) * 0.5 )
            }
        }
    }
}

screen.clearColor = LLColor( 0.0, 0.05, 0.2, 1.0 ) で背景を群青色にします。

forで、10回繰り返します。

forの中に、初期設定に必要な変数をつくります。
- let size = (40.0 ... 80.0).randomize
  - 大きさ用の変数。40.0~80.0のランダム値をつくり、代入します。
- let speed = size / 80.0
  - 速度用の変数。sizeに合わせて0.5~1.0の値をつくり、代入します。
- let c = LLColor( 1.0, 0.8, 0.25, Float( speed ) )
  - 色用の変数。少し赤めの黄色を作成し代入します。またアルファにspeedの値を設定します。

forの中で、加算合成マスク画像 PGAddMask( "mask-star" ) をつくります。星の画像を指定します。

初期設定のコードを書きます。
- .color( c )
  - 色。変数cを指定します。
- .position( cx:(screen.minX-200...screen.maxX+200).randomize, cy:(screen.minY...screen.maxY).randomize )
  - 位置。x方向は左端-200~~右端+200のランダム、 y方向は上端~~下端ポイントのランダム座標に設定します。（画面全体から横にはみ出した範囲にランダムに配置されます。前回は縦でした。今回は横です）
- .deltaPosition( dx:(10.0 ... 12.0).randomize * speed, dy:(-1.5 ... 3.5).randomize * speed )
  - 毎フレームの移動量。x方向は10.0~~12.0ポイントのランダム、 y方向は-1.5~~3.5のランダムに、変数speedを掛け算した値を設定します。（星が右方向へ移動します）
- .scale( square:size )
  - 大きさ。変数sizeを設定します。
- .angle( .random )
  - 角度。ランダムを設定します。
- .deltaAngle( degrees:-4.0 * speed )
  - 毎フレームの回転量。-4.0に変数speedを掛け算した値を設定します。（星が時計回りに回転します）

.iterate{ } を用意します。y方向の移動量を調整します。また図形の再利用のタイミングをうかがいます。
- $0.deltaPosition.y -= 0.05
  - 毎フレーム、y方向の移動量を0.05減らします。（下方向へ速くなります）
- if Float( screen.maxX + 200.0 ) <= $0.position.x
  - 図形が画面の右端から200ポイントはみ出したとき、{ }の中の処理を行います。
- .position( cx:screen.minX-200, cy:(screen.minY...screen.maxY).randomize )
  - x方向は左端-200ポイント、y方向は下端~上端のランダムの位置に再配置します。
- .deltaPosition( dx:(10.0 ... 12.0).randomize * speed, dy:(-1.5 ... 3.5).randomize * speed )
  - 毎フレームの移動量を初期化します。

3-8. 跳ね返る円

Sat, 16 Dec 2023 00:00:00 +0000

壁に跳ね返るボールを表現してみましょう。

func design( screen:PGScreen ) {
    screen.clearColor = .black
    
    for _ in 0 ..< 20 {
        let speed = (4.0...8.0).randomize
        let radians = (0.0...2.0).randomize * Double.pi
        let dx = speed * cos( radians )
        let dy = speed * sin( radians )
        
        PGAddCircle()
        .color( .random )
        .position( 
            cx: (screen.minX + 30 ... screen.maxX - 30).randomize,
            cy: (screen.minY + 30 ... screen.maxY - 30).randomize
        )
        .deltaPosition( 
            dx:dx,
            dy:dy
        )
        .scale( square:60 )
        .iterate {
            if $0.position.x - 30 <= Float( screen.minX ) {
                $0.deltaPosition.x *= -1
            }
            
            if Float( screen.maxX ) <= $0.position.x + 30 {
                $0.deltaPosition.x *= -1
            }
            
            if $0.position.y - 30 <= Float( screen.minY ) {
                $0.deltaPosition.y *= -1
            }
            
            if Float( screen.maxY ) <= $0.position.y + 30 {
                $0.deltaPosition.y *= -1
            }
        }    
    }
}

screen.clearColor = .black で背景を黒にします。

forで、20回繰り返します。

forの中に、初期設定に必要な変数をつくります。
- let speed = (4.0...8.0).randomize
  - 速度用の変数。4.0~8.0のランダム値をつくり、代入します。
- let radians = (0.0...2.0).randomize * Double.pi
  - 進行方向の角度の変数。0~2πのランダムの値をつくり、代入します。
- let dx = speed * cos( radians )
  - x方向の移動量の変数。変数radiansのコサイン値とspeedを掛け算した値を代入します。
- let dy = speed * sin( radians )
  - y方向の移動量の変数。変数radiansのサイン値とspeedを掛け算した値を代入します。

forの中で、加算合成の円 PGAddCircle() をつくります。

PGAddCircleの初期設定のコードを書きます。円の大きさは60ポイント、半径が30ポイントになります。
- .color( .random )
  - 色。ランダムな色を設定します。
- .position( cx: (screen.minX + 30 ... screen.maxX - 30).randomize, cy: (screen.minY + 30 ... screen.maxY - 30).randomize )
  - 位置。x方向は左端+30~~右端-30のランダム、 y方向は上端-30~~下端+30ポイントのランダム座標に設定します。
- .deltaPosition( dx:dx, dy:dy )
  - 毎フレームの移動量。x方向は変数dx、 y方向は変数dyの値を設定します。
- .scale( square:60 )
  - 大きさ。60ポイントを設定します。

.iterate{ } を用意します。位置によって図形の移動方向を変えます。
- if $0.position.x - 30 <= Float( screen.minX ) { ... }
  - 図形の中央x座標 - 30ポイント(円の半径)が、画面の左端に到達したとき、{ }の中の処理を行います。
- Float( screen.maxX ) <= $0.position.x + 30 { ... }
  - 図形の中央x座標 + 30ポイント(円の半径)が、画面の右端に到達したとき、{ }の中の処理を行います。
- $0.deltaPosition.x *= -1
  - x方向の移動量の正負を逆にします。
- if $0.position.y - 30 <= Float( screen.minX ) { ... }
  - 図形の中央y座標 - 30ポイント(円の半径)が、画面の下端に到達したとき、{ }の中の処理を行います。
- Float( screen.maxX ) <= $0.position.y + 30 { ... }
  - 図形の中央y座標 + 30ポイント(円の半径)が、画面の上端に到達したとき、{ }の中の処理を行います。
- $0.deltaPosition.y *= -1
  - y方向の移動量の正負を逆にします。

3-9. 花火

Sat, 16 Dec 2023 00:00:00 +0000

このページでは、次のBooksで紹介する新しい仕組みを先取りし、花火を表現します。

func design( screen:PGScreen ) {
    screen.clearColor = LLColor( 0.0, 0.05, 0.2, 1.0 )
}

func update( screen:PGScreen ) {
    if (0.0...1.0).randomize < 0.97 { return }
    
    let size = (10.0...20.0).randomize
    let speed = size / 4.0
    let pos = screen.randomPoint
    let c = LLColor.random
   
    for _ in 0 ..< 150 {
        let radians = (0.0...2.0).randomize * Double.pi
        let speed2 = speed * (0.65...1.0).randomize
        let dx = speed2 * cos( radians )
        let dy = speed2 * sin( radians )
        
        PGAddBlurryCircle()
        .color( c )
        .position( pos )
        .deltaPosition( 
            dx:dx,
            dy:dy
        )
        .deltaLife( -0.005 )
        .scale( square:size )
        .iterate {
            $0
            .deltaPosition( 
                dx:$0.deltaPosition.x * 0.985,
                dy:$0.deltaPosition.y * 0.985
            )
            .cy( $0.cy - 1.5 )
            .alpha( $0.life )
        }        
    }
}

func design( screen:PGScreen ) { } に加えて、func update( screen:PGScreen ) { } 関数を追加します。このupdateが新しい仕組みです。毎フレーム繰り返し処理される関数です。

design( screen:PGScreen ) 内に screen.clearColor = LLColor( 0.0, 0.05, 0.2, 1.0 ) を書き、背景を群青色にします。design( screen:PGScreen )のコードはこれで完了です。

update( screen:PGScreen )内に処理を書いていきます。まず図形をつくる確率を調整します。
- if (0.0...1.0).randomize < 0.97 { return }
  - 97%の確率で何もせず、update関数を終了(return)します。

update( screen:PGScreen )は毎秒最大60回実行されます。上記の処理により、updateが呼ばれたら3%の確率で処理を継続します。

4-1. 重ねて模様をつくる

Sat, 16 Dec 2023 00:00:00 +0000

前章まで、Lily Playgroundでの図形や画像の描き方を紹介しました。この章は、ここまで学んだ図形を並べて、模様を作っていきたいと思います。きれいな模様を描いていきましょう。

x,yの2重のfor文をつくり、その中で円が規則的に並ぶようにコードを書きます。
円の色を交互に変えるように、条件分岐で色を変化させましょう。変数var cをつくります。cには色(LLColor.clear)を入れます。
チェッカーの条件にならって、cの値を変えてみましょう。条件ごとにオレンジ色( 1.0, 0.5, 0.0, 1.0 )と、明るい緑色( 0.2, 0.8, 0.2, 1.0 ) をcに入れます。
c を円の .color に使います。すると「c の色が変わる = 円の色が変わる」ことになります。手順3の条件で cの色は互い違いになったので、円の色も互い違いにできます。

func design( screen:PGScreen ) {
   for y in 0 ..< 9 {
       for x in 0 ..< 9 {
           var c = LLColor.clear

           if (x + y) % 2 == 0 {
               c = LLColor( 1.0, 0.5, 0.0, 1.0 )
           }
           else {
               c = LLColor( 0.2, 0.8, 0.2, 1.0 )
           } 

           PGCircle()
           .scale( square:100 )
           .position( cx: -200 + x * 50,
                      cy: -200 + y * 50 ) 
           .color( c )
           .alpha( 0.33 )
       }
   }
}

「コードを実行」を押します。

目標

重ねた円による模様が表現できたら成功です。

終わったら次のページへ進みます。

4-2. 加算合成

Sat, 16 Dec 2023 00:00:00 +0000

前回まで学んできた図形に「重ねたときの効果」を加えて、さらに表現の幅を広げます。効果はわかりやすくシンプルです。メジャーなものが「加算合成」です。加算合成は重なった色が明るくなっていきます。

まずは上の図と同じ結果を得られるようコードを書いてみましょう。

通常の円を2つ描きます。
次に加算合成の円を2つ描きます。加算合成円は PGAddCircle() を使います。
赤のPGCircle()に.zIndex( 1 ), 青のPGCircle()に.zIndex( 2 )を追加します。zIndexは重なり順をコントロールできます。数字が大きい方が上になります。

func design( screen:PGScreen ) {
   screen.clearColor = .darkGrey

   PGCircle()
   .scale( square:200 )
   .position( cx: -50, cy: 150 ) 
   .color( .red )
   .zIndex( 1 )

   PGCircle()
   .scale( square:200 )
   .position( cx: 50, cy: 150 ) 
   .color( .blue )
   .zIndex( 2 )

   PGAddCircle()
   .scale( square:200 )
   .position( cx: -50, cy: -150 ) 
   .color( .red )

   PGAddCircle()
   .scale( square:200 )
   .position( cx: 50, cy: -150 ) 
   .color( .blue )
}

「コードを実行」を押します。

目標

通常の重なる円と、加算合成で重なった円が表示されれば成功です。加算合成の色を観察してください。背景の色も含めて、重なると明るい色に向かっていくことがわかります。

終わったら次のページへ進みます。

4-3. 合成で模様を描く

Sat, 16 Dec 2023 00:00:00 +0000

加算合成をつかって、模様を描いてみましょう。

背景色を screen.clearColor = .darkGrey にします。
4-1の模様のコードを参考に、PGCircle()の部分を、加算合成の円 PGAddCircle() に変えてみます。

func design( screen:PGScreen ) {
   // 背景の色
   screen.clearColor = .darkGrey

   for y in 0 ..< 9 {
       for x in 0 ..< 9 {
           var c = LLColor.clear

           if (x + y) % 2 == 0 {
               c = LLColor( 1.0, 0.5, 0.0, 1.0 )
           }
           else {
               c = LLColor( 0.2, 0.8, 0.2, 1.0 )
           } 

           PGAddCircle()
           .scale( square:100 )
           .position( cx: -200 + x * 50,
                      cy: -200 + y * 50 ) 
           .color( c )
           .alpha( 0.33 )
       }
   }
}

「コードを実行」を押します。

目標

重なった部分が明るくなっている円の模様が表示されたら成功です。
(+1) .color や .scale、.position の値を変更し、模様の雰囲気を変えてみましょう。

4-4. ランダムで模様

Sat, 16 Dec 2023 00:00:00 +0000

加算合成は他の図形でも使えます。三角(PGAddTriangle)、四角(PGAddRectangle) などがあります。ランダムを使いこなすを参考に加算合成でランダムな模様を表現してみましょう。

背景色を screen.clearColor = .darkGrey にします。
2-11 を参考に、加算合成の図形でランダム模様を描きましょう。

func design( screen:PGScreen ) {
   // 背景の色
   screen.clearColor = .darkGrey

   for _ in 0 ..< 100 {
       let a = (0.0...3.0).randomize
       
       if a < 1.0 {
           PGAddCircle()
           .color( .random )
           .scale( square:(20...100).randomize )
           .position( screen.randomPoint )
           .angle( .random )
           .alpha( .random )
       }
       else if a < 2.0 {
           PGAddTriangle()
           .color( .random )
           .scale( square:(20...100).randomize )
           .position( screen.randomPoint )
           .angle( .random )
           .alpha( .random )
       }
       else {
           PGAddRectangle()
           .color( .random )
           .scale( square:(20...100).randomize )
           .position( screen.randomPoint )   
           .angle( .random )
           .alpha( .random )
       }
   }
}

「コードを実行」を押します。

目標

重なった部分が明るくなる複数の図形が表現できたら成功です。

終わったら次のページへ進みます。

4-5. ぼかし円と合成

Sat, 16 Dec 2023 00:00:00 +0000

加算合成のぼかし円( PGAddBlurryCircle() ) を使うことで面白い絵が描けます。試してみましょう。

背景色を screen.clearColor = .darkGrey にします。
大きめのPGAddBlurryCircle()をランダムに描いてみます。

func design( screen:PGScreen ) {
   // 背景の色
   screen.clearColor = .darkGrey

   for _ in 0 ..< 200 {
       PGAddBlurryCircle()
       .color( .random )
       .scale( square:(80...200).randomize )
       .position( screen.randomPoint )
       .alpha( .random )
   }
}

「コードを実行」を押します。

目標

ぼやけた円が重なり、淡い光のような表現ができたら成功です。

終わったら次のページへ進みます。

4-6. マスク画像できらめき

Sat, 16 Dec 2023 00:00:00 +0000

加算合成はマスク画像 ( PGAddMask( "画像名" ) ) でも使えます。マスク画像を合成で重ね合わせると綺麗な模様が描けます。ここではmask-sparkleを使ってきらめきのある模様を描いてみましょう。

背景色を screen.clearColor = .darkGrey にします。
PGAddMask( "mask-sparkle" )をランダムに描画します。
.color と .alphaは値の範囲を0.5~1.0のランダムになるようにします。

func design( screen:PGScreen ) {
   // 背景の色
   screen.clearColor = .darkGrey

   for _ in 0 ..< 100 {
       PGAddMask( "mask-sparkle" )
       .color( red:(0.5...1.0).randomize,
             green:(0.5...1.0).randomize,
              blue:(0.5...1.0).randomize
       )
       .scale( square:(40...160).randomize )
       .position( screen.randomPoint )
       .alpha( (0.5...1.0).randomize )
   }
}

「コードを実行」を押します。

目標

きらめきの模様が描ければ成功です。

終わったら次のページへ進みます。

4-7. 光る熱源表現

Sat, 16 Dec 2023 00:00:00 +0000

さあこのBookの仕上げです。前回できらめき表現をしました。マスク画像を変えたり、値を変えることで色々な表現ができます。mask-smoke画像を使って、光る熱源を表現してみましょう。

背景色を screen.clearColor = .darkGrey にします。
PGAddMask( "mask-smoke" )をランダムに200個描画します。
発生位置を円形の中に収める、x, yを計算します。計算は下記のサンプルのlet dist、 let vector、 let x、 let y の内容を真似てください。

func design( screen:PGScreen ) {
   // 背景の色
   screen.clearColor = .darkGrey

   for _ in 0 ..< 200 {
       let dist = (0.0...200.0).randomize
       let vector = (-2.0...2.0).randomize * 3.14
       let x = dist * cos( vector )
       let y = dist * sin( vector )

       PGAddMask( "mask-smoke" )
       .color( red:0.15, green: 0.2, blue:0.5 )
       .scale( square:(100...200).randomize )
       .position( cx:x, cy:y )
       .angle( .random )
       .alpha( .random )
   }
}

「コードを実行」を押します。

目標

青く光る熱源のようなモヤが表現できたら成功です。
(+1) .colorの値をredが強いもの、greenが強いものなどに変えてみましょう。

4-8. フリーコード

Sat, 16 Dec 2023 00:00:00 +0000

これがこのBookの最後のページです。ここまで学んできたものを自由に使って、自分の美しいと感じる模様を自由に描いてみてください。

四角の加算合成:
PGAddRectangle()
三角の加算合成:
PGAddTriangle()
円の加算合成:
PGAddCircle()
ぼかし円の加算合成:
PGAddBlurryCircle()
マスク画像の加算合成:
PGAddBlurryCircle()

目標

色々な模様を作って楽しみましょう。

これでこのBookは終わりとなります。おつかれさまでした。

次のBookでは、このBookで学んだ図形や模様の描きかたを活用し、アニメーションに取り組んでいきたいと思います。

それでは、また次のBookで！

Lily Playground Books テキスト一覧

Sat, 08 Oct 2022 00:00:00 +0000

Lily Playground Booksのテキストを紹介しています。

Swift Playgrounds App以外で内容をご覧になりたいとき、ご参考ください。

Lily Playground Limited Editor on Web

Windowsでもお試しいただけるリミテッドエディタです. ブラウザ上でLily Playground Booksのコードが動作します。ぜひご活用ください。

Swift Playgrounds on WD Terminus

iPadでBooksをはじめる

iPadでのLily Playground Booksの導入手順

MacでBooksをはじめる

macOSでのLily Playground Booksの導入手順

1-1. タッチ位置に円を描く

目標

1-1. 位置のアニメート

目標

1-1. 四角を描く

目標

実行例

1-10. 図形の再利用

目標

1-11. 毎フレームの処理

目標

1-12. フリーコード

目標

1-2. サイズのアニメート

目標

1-2. タッチの軌跡を描く

目標

1-2. 色を変える

目標

実行例

1-3. タッチと図形のアニメーション1 - 回転とズーム

目標

1-3. 色のアニメート

目標

1-3. 大きさを変える

目標

実行例

1-4. タッチと図形のアニメーション2 - 移動と複数描画

目標

1-4. 位置を変える

目標

実行例

1-4. 角度のアニメート

目標

1-5. アルファのアニメート

目標

1-5. マルチタッチ

目標

1-5. 回転させる

目標

実行例

1-6. 指が離れたときを捉える

目標

1-6. 組み合わせる

目標

1-6. 透かす

目標

1-7. フリーコード

目標

1-7. フリーコード

目標

1-7. 一定間隔で実行する

目標

1-8. 図形のライフ

目標

1-9. 終了処理とライフの復活

目標

2-1. 拡散光エフェクト

2-1. 三角・丸・四角

目標

2-1. 視覚表現の導入コード

目標

2-10. 図形をランダムに

目標

2-11. ランダムをつかいこなす

目標

2-12. フリーコード

目標

2-2. シャワー

2-2. 横に並べる

目標

2-3. キラキラ輝く軌跡

2-3. さらに縦に並べる

目標

2-3. 移動表現の追加

1-3. タッチと図形のアニメーション1　- 回転とズーム