CreApp

前章 まで、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の色は互い違いになったので、円の色も互い違いにできます。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 func design( screen:PGScreen ) { for y in 0 ..< 9 { for x in 0 ..< 9 { var c = LLColor....

前回 まで学んできた図形に「重ねたときの効果」を加えて、さらに表現の幅を広げます。効果はわかりやすくシンプルです。メジャーなものが「加算合成」です。加算合成は重なった色が明るくなっていきます。 まずは上の図と同じ結果を得られるようコードを書いてみましょう。 通常の円を2つ描きます。 次に加算合成の円を2つ描きます。加算合成円は PGAddCircle() を使います。 赤のPGCircle()に.zIndex( 1 ), 青のPGCircle()に.zIndex( 2 )を追加します。zIndexは重なり順をコントロールできます。数字が大きい方が上になります。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 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 ) ....

加算合成 をつかって、模様を描いてみましょう。 背景色を screen.clearColor = .darkGrey にします。 4-1の模様のコードを参考に、PGCircle()の部分を、加算合成の円 PGAddCircle() に変えてみます。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 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....

加算合成は他の図形でも使えます。三角(PGAddTriangle)、四角(PGAddRectangle) などがあります。ランダムを使いこなす を参考に加算合成でランダムな模様を表現してみましょう。 背景色を screen.clearColor = .darkGrey にします。 2-11 を参考に、加算合成の図形でランダム模様を描きましょう。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 func design( screen:PGScreen ) { // 背景の色 screen.clearColor = .darkGrey for _ in 0 ..< 100 { let a = (0.0...3.0).randomize if a < 1.0 { PGAddCircle() ....

加算合成のぼかし円( PGAddBlurryCircle() ) を使うことで面白い絵が描けます。試してみましょう。 背景色を screen.clearColor = .darkGrey にします。 大きめのPGAddBlurryCircle()をランダムに描いてみます。 1 2 3 4 5 6 7 8 9 10 11 12 func design( screen:PGScreen ) { // 背景の色 screen.clearColor = .darkGrey for _ in 0 ..< 200 { PGAddBlurryCircle() .color( .random ) .scale( square:(80...200).randomize ) .position( screen.randomPoint ) .alpha( .random ) } } 「コードを実行」を押します。 目標 ぼやけた円が重なり、淡い光のような表現ができたら成功です。 終わったら次のページへ進みます。 実行例

加算合成はマスク画像 ( PGAddMask( "画像名" ) ) でも使えます。マスク画像を合成で重ね合わせると綺麗な模様が描けます。ここではmask-sparkleを使ってきらめきのある模様を描いてみましょう。 背景色を screen.clearColor = .darkGrey にします。 PGAddMask( "mask-sparkle" )をランダムに描画します。 .color と .alphaは値の範囲を0.5~1.0のランダムになるようにします。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 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 ) } } 「コードを実行」を押します。 目標 きらめきの模様が描ければ成功です。 終わったら次のページへ進みます。...

さあこのBookの仕上げです。 前回 できらめき表現をしました。マスク画像を変えたり、値を変えることで色々な表現ができます。mask-smoke画像を使って、光る熱源を表現してみましょう。 背景色を screen.clearColor = .darkGrey にします。 PGAddMask( "mask-smoke" )をランダムに200個描画します。 発生位置を円形の中に収める、x, yを計算します。計算は下記のサンプルのlet dist、 let vector、 let x、 let y の内容を真似てください。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 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" ) ....

これがこのBookの最後のページです。ここまで学んできたものを自由に使って、自分の美しいと感じる模様を自由に描いてみてください。 四角の加算合成: PGAddRectangle() 三角の加算合成: PGAddTriangle() 円の加算合成: PGAddCircle() ぼかし円の加算合成: PGAddBlurryCircle() マスク画像の加算合成: PGAddBlurryCircle() 目標 色々な模様を作って楽しみましょう。 これでこのBookは終わりとなります。おつかれさまでした。 次のBookでは、このBookで学んだ図形や模様の描きかたを活用し、アニメーションに取り組んでいきたいと思います。 それでは、また次のBookで！

Lily Playground Booksのテキストを紹介しています。 Swift Playgrounds App以外で内容をご覧になりたいとき、ご参考ください。 Lily Playground Limited Editor on Web Windowsでもお試しいただけるリミテッドエディタです. ブラウザ上でLily Playground Booksのコードが動作します。ぜひご活用ください。 Lily Playground on Webエディタをつかう LilyPG-1: 図形を描く 1章. LilyPGをはじめよう 1-1. 四角を描く 1-2. 色を変える 1-3. 大きさを変える 1-4. 位置を変える 1-5. 回転させる 1-6. 透かす 1-7. フリーコード 2章. 色々な図形を描く 2-1. 三角・丸・四角 2-2. 横に並べる 2-3. さらに縦に並べる 2-4. 図形を交互に並べる 2-5. 図形のチェッカー 2-6. カウンタで彩りを 2-7. フリーコード 2-8. ランダムな配置 2-9. ランダムな色・大きさ 2-10. 図形をランダムに 2-11. ランダムをつかいこなす 2-12. フリーコード 3章. 画像で描く 3-1. 画像を表示する 3-2. マスクとして用いる 3-3....

■ 概要 Creative Application演習は、メディア論から社会実装へ連なる一連の議論と実践を行う演習です。 渡邉が設計し、東京工科大学メディア学部で実施しています。 ソフトウェア開発は、多岐にわたる専門分野のスキルを求められるようになりました。プログラミングなどの開発スキルを磨くことは想像しやすいですが、開発の外の 他の分野に興味をもち開発技術と結びつけられるか が重要な要素となっています。作りあげられるサービスが「利用者や社会にどのような影響を与えるのかというイメージ」を想像できるようになるからです。この想像力を持つことが良い設計を生みます。そして良い設計は良い成果を生み、ひいては有益なサービスの社会実装へとつながります。このように複数の分野を結びつけることの重要性が高まっていますが、この時避けて通れないのが分野をまたぐために発生する メディア です。 本演習は分野を結びつけるメディアの勘所を得ること、知識をストックするにとどめず社会実装にアプローチする姿勢を獲得することを目的としています。本演習ではその勘所を端的に「美と思考とメディア」と呼んでいます。美意識を通したメディアによる結びつけと社会実装を意識した試行錯誤に取り組みます。本演習はそのアプローチを取るごく初歩的なダイジェストですが、メディアと社会実装についての感性を得るきっかけになればと思います。 また何かお気づきの点などありましたら、お気軽にお声がけください。 お問い合わせ先: https://wdkk.co.jp/contact ■ 受講者向け情報・関連サービス案内 東京工科大学 学内情報 CreApp Google Classroom CreApp利用サービス Hyperion コミュニティ Hermitage BookStack ■ メディア諸論 2024 1Q 前期1 A01: メディア学とCreative Application (PDF) A02: メディア史1 はじめに思考ありき (PDF) A03: メディア史2 思考とメディア あるいは主客と世界 (PDF) A04: メディア史3 メディアサイクル - 場, 表現, 創発そして場 (PDF) A05: メディア史4 表現の蓄積・創発の継続 (PDF) A06: 美術思想史1 観察の変遷 – 表現者の思考 (PDF) A07: 美術思想史2 美の諸説 -表現者の追うもの (PDF) 2Q 前期2 A08: 思想と哲学1 ゼロという概念 (PDF)...