SwiftUI

■ メディア諸論 2025 1Q A01: メディア学とCreative Application (PDF) A02: メディア史1 はじめに思考ありき (PDF) A03: メディア史2 思考とメディア あるいは主客と世界 (PDF) A04: メディア史3 メディアサイクル - 場, 表現, 創発そして場 (PDF) A05: メディア史4 表現の蓄積・創発の継続 (PDF) A06: 美術思想史1 観察の変遷 – 表現者の思考 (PDF) A07: 美術思想史2 美の諸説 - 表現者の追うもの (PDF) 2Q A08: 思想と哲学1 ゼロという概念 (PDF) A09: 思想と哲学2 存在・実在・リアリティ (PDF) A10: 東洋思想史1 自己内の探究・我と私と存在 (PDF) A11: 東洋思想史2 東西思想の考察と日本 (PDF) A12: 美のメディア論1 メディアモデル – 存在と美 (PDF) A13: 美のメディア論2 メディアと社会 (PDF) A14: 中間総論 (PDF) 3Q A15: Creative Applicationとメディア実装 (PDF) A16: メディア実装の基礎1 自分の思考を形にする「ノート」 (PDF) A17: メディア実装の基礎2 主客の交差と相互作用「メッセージング」 (PDF) A18: メディア実装の基礎3 交流で加速する表現「コミュニティ」 (PDF) A19: メディア実装の基礎4 記録して継ぐ「アーカイブ」 (PDF) A20: メディア実装の勘所1 知覚の連携「マルチモーダル・メディウム」 (PDF) A21: メディア実装の勘所2 存在と現象「ヴァーチャル・リアリティ」 (PDF) ...

■ メディア諸論 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) A09: 思想と哲学2 存在・実在・リアリティ (PDF) A10: 東洋思想史1 自己内の探究・我と私と存在 (PDF) A11: 東洋思想史2 東西思想の考察と日本 (PDF) A12: 美のメディア論1 メディアモデル – 存在と美 (PDF) A13: 美のメディア論2 メディアと社会 (PDF) A14: 中間総論 (PDF) 3Q 後期1 A15: Creative Applicationとは* (PDF) A16: メディア実装の基礎1 自分の思考を形にする「ノート」 (PDF) A17: メディア実装の基礎2 主客の交差と相互作用「メッセージング」 (PDF) A18: メディア実装の基礎3 交流で加速する表現「コミュニティ」 (PDF) A19: メディア実装の基礎4 記録して継ぐ「アーカイブ」 (PDF) A20: メディア実装の勘所1 知覚の連携「マルチモーダル・メディウム」 (PDF) A21: メディア実装の勘所2 存在と現象「ヴァーチャル・リアリティ」 (PDF) ...

2023 メディア諸論 前期 A01: Creative Applicationとは (PDF) A02: メディア史1 はじめに思考ありき (PDF) A03: メディア史2 思考とメディア あるいは主客と世界 (PDF) A04: メディア史3 メディアサイクル - 場, 表現, 創発そして場 (PDF) A05: Wikiの導入・メディア史ふりかえり (PDF) A06: 美術思想史1 観察の変遷 – 表現者の思考 (PDF) A07: 美術思想史2 美の諸説 -表現者の追うもの (PDF) A08: 思想と哲学1 ゼロという概念 (PDF) A09: 思想と哲学2 存在・実在・リアリティ (PDF) A10: 東洋思想史1 自己内の探究・我と私と存在 (PDF) A11: 東洋思想史2 東西思想の考察と日本 (PDF) A12: 美のメディア論1 メディアモデル – 存在と美 (PDF) A13: 美のメディア論2 メディアと社会 (PDF) A14: ここまでの総論 (PDF) 後期 A15: Creative Applicationとは* (PDF) A16: メディア実装1「ノート」自分の思考を形にする (PDF) A17: メディア実装2「メッセージング」主客を交差させる (PDF) A18: メディア実装3「コミュニティ」伝達と交流を促進させる (PDF) A19: メディア実装4「アーカイブ」記録を残す (PDF) A20: 知覚とメディア実装1「アクセシビリティ」多様な感覚へのアクセス (PDF) A21: 知覚とメディア実装2「マルチモーダル」複数知覚の融合 (PDF) A22: 存在とメディア実装1「ホワイトスペース」無いは在る (PDF) A23: 存在とメディア実装2「リアリティ」存在感を醸す (PDF) A24: 文化とメディア実装1「マルチメジャー」折衷と合一 (PDF) A25: 文化とメディア実装2「ローカライズ」地域性と精神 (PDF) A26: 美とメディア実装1「ビューティフルデザイン」情動に訴える (PDF) A27: 美とメディア実装2「インフラストラクチャ」長く在るには (PDF) A28: Creative Application 総論 (PDF)

PGScreenViewは, 決まった数のパーティクル(図形)を1度に表示できます. 初期の値は2,000個です. 実行環境 Xcode 15.2 LilySwift 5.1.23 サンプルコード pg2d_particle_capacity.swiftpm.zip サンプルのContentView.swiftをご覧ください. 初期のコードでは火を立てるエフェクトが動いています. PlaneStorageでパーティクル数を設定します. capacity:2000 と書くと1度に2000個まで図形が描かれます. コード1 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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 import SwiftUI import LilySwiftForPlayground import LilySwiftAlias class Playground { // Metalを使う準備 lazy var device = MTLCreateSystemDefaultDevice()! // Playground2Dのデータを用意する lazy var planeStorage:PlaneStorage = .playgroundDefault( device:device, capacity:2000 ) // Lily Playgroundのデザイン関数 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 ) } } } // Lily Playgroundのアップデート関数 func update( update:PGScreen ) { } } struct ContentView: View { let playground:Playground // Lily Playgroundのデータ @State var scene:PGScene // Lily Playgroundのシーン init() { // Lily Playgroundのデータとシーンをつくる playground = Playground() // シーンにdesign関数とupdate関数を渡す scene = .init( planeStorage:playground.planeStorage, design:playground.design, update:playground.update ) } var body: some View { VStack { // Lily Playgroundを表示するビュー.シーンを渡す PGScreenView( device:playground.device, scene:$scene ) } } } 結果1 一度に描画するパーティクルの数が2000を超えないため, 十分に炎が表現されます. ...

Playgroundのパーティクルの色を変更できるプログラムを紹介します. 実行環境 Xcode 15.2 LilySwift 5.1.23 サンプルコード pg2d_particle_change.swiftpm.zip Playgroundクラスに color変数 を追加します. ※SwiftUIではないので@Stateがなくても変更できます. パーティクルの色に上で作ったcolorを設定します. completionの再利用時にもcolorを設定します. Viewの中にButtonを作成します. Buttonを押したとき, playground.colorをランダムに変更します. コード1 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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 import SwiftUI import LilySwiftForPlayground import LilySwiftAlias class Playground { lazy var device = MTLCreateSystemDefaultDevice()! // Playground2Dのデータセット lazy var planeStorage:PlaneStorage = .playgroundDefault( device:device ) // パーティクルの色情報 var color = LLColor( 0.9, 0.34, 0.22, 0.0 ) // デザイン関数 func design( screen:PGScreen ) { screen.clearColor = .darkGrey for _ in 0 ..< 160 { PGAddMask( "mask-smoke" ) .color( self.color ) // パーティクルの色をself.colorから得る .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 .color( self.color ) // パーティクルの色をself.colorから得る .position( cx:(-50 ... 50).randomize, cy:(-120 ... -110).randomize ) .scale( square: 80.0 ) .life( 1.0 ) } } } // アップデート関数 func update( screen:PGScreen ) { } } struct ContentView: View { let playground:Playground // Lily Playgroundのデータ @State var scene:PGScene // Lily Playgroundのシーン init() { // Lily Playgroundのデータとシーンをつくる playground = Playground() // シーンにdesign関数とupdate関数を渡す scene = .init( planeStorage:playground.planeStorage, design:playground.design, update:playground.update ) } var body: some View { VStack { Button { // プレイグラウンド用のcolorをランダムに変更する playground.color = LLColor( .random, .random, .random, 0.0 ) } label: { Text( "色をランダムに変える" ) } .padding( 8 ) // Lily Playgroundを表示するビュー. シーンを渡す PGScreenView( device:playground.device, scene:$scene ) } } } 結果 PGScreenViewの上部にボタンが表示されます. これを押すとランダムに色が変化し, 新しい炎のパーティクルから色が変わっていくようになります. ...

PGScreenViewは, 自分で用意した画像を自由に読み込んで利用することができます. 実行環境 Xcode 15.2 LilySwift 5.1.23 サンプルコードとデータ pg2d_add_texture.zip 上記のzipファイルにはswiftpmと一緒にdeformed-lily.pngという画像が含まれています. これをつかって画像の追加方法を説明します. サンプルのContentView.swiftをご覧ください. 今回のポイントは PlaneStorage になります. コード1 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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 import SwiftUI import LilySwiftForPlayground import LilySwiftAlias class Playground { // Metalを使う準備 lazy var device = MTLCreateSystemDefaultDevice()! // Playground2Dのデータを用意する lazy var planeStorage:PlaneStorage = .playgroundDefault( device:device ) // Lily Playgroundのデザイン関数 func design( screen:PGScreen ) { PGPicture( "lily" ) .scale( square:256 ) } // Lily Playgroundのアップデート関数 func update( update:PGScreen ) { } } struct ContentView: View { let playground:Playground // Lily Playgroundのデータ @State var scene:PGScene // Lily Playgroundのシーン init() { // Lily Playgroundのデータとシーンをつくる playground = Playground() // シーンにdesign関数とupdate関数を渡す scene = .init( planeStorage:playground.planeStorage, design:playground.design, update:playground.update ) } var body: some View { VStack { // Lily Playgroundを表示するビュー.シーンを渡す PGScreenView( device:playground.device, scene:$scene ) } } } Xcodeでアセットを追加する 画像名はAssets.xcassetsに含まれているアセット名と一致しています. ...

2023年12月現在, LilySwiftのパッケージは2つあります. 環境による違いについてご説明します. 環境 iPad iPadOS 17.1 Swift Playgrounds 4.4 Mac macOS Sonoma 14.2.1 Xcode 15.0 Swift Playgrounds 4.4 SwiftパッケージとPlaygrounds Swift Package Managerは, PlaygroundsとXcodeの双方で利用することができます. このパッケージはswiftファイル以外にもアセット画像やmetalファイル,ビルド済みのライブラリやフレームワークを組み込めるようになっています. しかし, PlaygroundsではSwift以外のファイルを解釈したり処理することができません. 例えばgithubでは定番のREADME.mdやLICENSEも場合によってエラーの原因になりえます. LilySwiftではMetalを使っていますが, .metalのファイルも使うことができません. Playgroundsで動作させることができるのはあくまでswiftファイルのみと考えたほうがよさそうです. LilySwiftForPlaygroundパッケージ そこでPlaygrounds向けにswiftファイルのみで構成しなおしたのがLilySwiftForPlaygroundです. LilySwiftForPlayground(github) 利用する時のimportは以下のようになります. 1 import LilySwiftForPlayground 純粋にSwiftファイルのみで作られているため, Playgroundsで利用できるようになりました. Metalはmetalファイルを用いず文字列データから作成するようにしています（Metalの実行時ビルド). 文字列からの実行は, metalファイルより性能が少し劣る, Appを起動した時にロスがあるなどのデメリットがありえますが, Playgroundsで動作させることができる点が何よりのメリットとなります. 余談ですが,あくまでSwiftだけで構成されているパッケージなのでXcodeでも使うことができます. LilySwiftパッケージ 以上の事情から, LilySwiftはXcode専用のパッケージになります. LilySwift(github) 利用する時のimportは以下のようになります. 1 import LilySwift Xcodeで使う前提となりますが, Swift以外のファイルを含めることができるためMetalの性能を引き出せる, その他のファイルを柔軟に扱えるなどの幅広いメリットがあります. 使い分け 2021年からPlaygroundsでもApp開発・公開ができるようになりました. 特にiPadのみでAppが提供できるようになったのは革命的です. よって以上で紹介した2つのパッケージは以下のように使い分けていただければと思います. とりあえず試したい → LilySwiftForPlayground iPadでApp開発・公開したい → LilySwiftForPlayground MacだがPlaygroundsで開発したい → LilySwiftForPlayground MacでXcodeで開発したい → LilySwift

macOSのXcodeを使ったApp開発にLilySwiftを導入します。 Xcodeでは色々な形式でAppを作成可能ですが, 今回はPlaygrounds Appでも使えるようにswiftpmを作成します. 環境 macOS Sonoma 14.2.1 Xcode 15.0 Appの作成 XcodeでAppを新規作成します. [Create New Project]を選択します. Appの種類の選択 プラットフォームで[iOS]を選択します. Appの種類で[App Playgrounds]を選びます. これを選択すると.swiftpmが作成できます. Appの名前を決める App名をつけます. 開発アカウントや組織が決まっていればここで設定してください(なければNoneでも作れます). [Next]を押します. 保存先を選択します. 作成後, 保存先にswiftpmが作られていることを確認してください. パッケージの追加 立ち上がったAppプロジェクトにパッケージを追加します. 左メニューのswiftpmを選びます.設定が表示されます. [Package Dependencies]を選びます. 左下の[+]ボタンを押します. LilySwiftForPlaygroundの追加 右上の検索フィールドにLilySwiftのURLを入力します. https://github.com/wdkk/LilySwiftForPlayground.git リストにlilyswiftforplaygroundが表示されるので,これを選びます. バージョンなどは利用したいものであることを確認してください. 確認したら[Add Package]を押します. 元の画面に戻るとリストにLilySwiftForPlaygroundが追加されています. LilySwiftの利用開始 ファイルリストにパッケージが追加されているかを確認します. リストが出ていない場合, 一度.swiftpmを立ち上げ直してください. Lilyを使いたいswiftファイルに以下のimportを記入します. import LilySwiftForPlayground Lilyの機能を使っていないため, 画面に変化はありませんが、これでLilyの機能を使う準備が整いました. Lilyの機能が使えるかを試すにはこちらを参考にしてください.

macOSのXcodeを使ったApp開発にLilySwiftを導入します。 ここでは従来の**Xcodeプロジェクト形式(xcodeproj)**でLilySwiftを使う手順をご紹介します. Playgroundsでは使えませんが,swiftpmでは制限されていることが幅広くできるようになります. 環境 macOS Sonoma 14.2.1 Xcode 15.0 Appの作成 XcodeでAppを新規作成します. [Create New Project]を選択します. Appの種類の選択 プラットフォームで[iOS]を選択します. macOSでも利用可能です. Appの種類で[App]を選びます. iOS App向けのxcodeprojが作成できます. [Next]を押します. Appの名前を決める 製品名をつけます. 開発アカウントや組織が決まっていればここで設定してください(なければNoneでも作れます). [Interface]はSwiftUIを選びます. [Language]はSwiftを選びます. [Storage]は任意です(案内ではNoneにしています). [Next]を押します. 保存先を選択します. 作成後, 保存先にフォルダが作られていることを確認してください. パッケージの追加 立ち上がったAppプロジェクトにパッケージを追加します. 左メニューのプロジェクトルート(プロジェクトの1番上の根本)を選びます. プロジェクト設定が表示されます. [Package Dependencies]を選びます. 左下の[+]ボタンを押します. LilySwiftの追加 右上の検索フィールドにLilySwiftのURLを入力します. https://github.com/wdkk/LilySwift.git リストにlilyswiftが表示されるので,これを選びます. バージョンなどは利用したいものであることを確認してください. 確認したら[Add Package]を押します. 元の画面に戻るとリストにLilySwiftが追加されています. ファイルリストにもLilySwiftが追加されていることを確認してください. LilySwiftの利用開始 Lilyを使いたいswiftファイルに以下のimportを記入します. import LilySwift Lilyの機能を使っていないため, 画面に変化はありませんが、これでLilyの機能を使う準備が整いました. Lilyの機能が使えるかを試すにはこちらを参考にしてください.

ここまでで準備したAppについて, インポートしたLilySwiftが動作することを確認します. 簡単な画像処理を行なってSwiftUIの画面に表示してみましょう. 環境 iPadOS 17.1 Swift Playgrounds 4.4 手順 作成したAppプロジェクトの ContentView.swift を開きます. LilySwiftForPlayground をインポートします. (.xcodeprojの場合, LilySwift) 以下のコードのように createImage関数を追加します. LLImageはLilyのもつ画像オブジェクトです. ここでピクセルを操作してグラデーション画像を作成します. SwiftUIのVStackの中にImageを作ります. Imageに読み込む画像に createImage().uiImage! を記述します. createImageが返してくれたLLImageをUIImageに変換するという意味です. 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 import SwiftUI import LilySwiftForPlayground // LilySwiftの場合書き換えてください. // Lily画像データを作成する関数 func createImage() -> LLImage { // 256x256ピクセルの画像を作成 let image = LLImage( wid:256, hgt:256 ) // RGBAのピクセルデータを取得 let matrix = image.rgbafMatrix! // 1ピクセルずつ色を塗っていく for y in 0 ..< image.height { for x in 0 ..< image.width { let red = Float( x ) / Float( image.width ) let green = Float( y ) / Float( image.height ) let blue = Float( x + y ) / Float( image.width + image.height ) matrix[y][x] = LLColor( red, green, blue ) } } return image } struct ContentView: View { var body: some View { VStack { // ImageオブジェクトにcreateImageで作った画像を使う Image( uiImage: createImage().uiImage! ) } } } 結果 SwiftUIのImageに作成したグラデーション画像が表示されます. LilySwiftが動作していることも確認できました. ...