座標と色
シェーダーが位置を色に変える仕組み。
4 ステップ
Graphica Playground
言葉で描いて、学んで、使う。
作りたい絵を一文で書くと、触ると反応する動く絵ができあがります。色や速さは指で調整。Learn タブでは、その絵がどう描かれているかを少しずつ学べて、気に入った絵は SwiftUI のコードとして自分のアプリに入れられます。
作りたい絵を言葉で書く…
subtle glowing mesh gradient for a music playersoft liquid glass background with slow iridescent movementcalm interfering water waves in deep blue
サインイン不要オンデバイス AIiPhone · iPad
学ぶ
生成されたコードを、自分で読めるようになる。
式を 1 か所書き換えて、お手本と同じ絵にするだけ。プログラミングに慣れていなくても、形・光・模様がどうやって描かれているのかが分かってきます。あなたの絵とお手本は一致度で採点されます。
円と輪
距離から形を描いて、繰り返して動かす。
6 ステップ
やわらかい光
PROsmoothstep で縁をぼかし、pow で光の落ち方を整えて、色を付ける。
4 ステップ
ノイズと模様
PROアプリに用意されたノイズとセルのヘルパーの使い方。生成されるシェーダーと同じもの。
4 ステップ
- ヒントは 1 段ずつ。全部開いてから答えを見られる
- よくある間違いには、その絵に合わせた一言
- 「違いを表示」で、お手本とずれている場所を白く表示できる
- 式を書く・数を合わせる・選ぶ・部品を並べる、の 4 つの形式
- 終わったら、最後のお手本をそのままエディタで開ける
レッスンは 2 週間ごとに増えていきます。
円と輪 · ステップ 2 / 6
半径で切る
スライダーを動かして、お手本と同じ大きさの円にしてください。
0%
float4 gpShade(float2 uv, GPParams P) {
float d = length(uv);
float c = step(d, 0.20);
return float4(float3(c), 1.0);
}調整する
動かすたびに、その場で変わる。
速さ・強さ・大きさ・色をスライダーで動かすと、絵がすぐに変わります。待ち時間はなく、何度動かしても回数には数えません。決めた値は、書き出すコードにそのまま入ります。
かける先
パレット
PRO 3 色すべてを自由に選べるのは Pro
0
動かした回数
0 秒
待ち時間
なし
調整の回数制限
書き出されるコード(抜粋) · MeshGradient.swift
import SwiftUIstruct MeshGradient: View {var speed: Double = 0.60var intensity: Double = 0.90var scale: Double = 1.00var colorA: Color = Color(red: 0.05, green: 0.03, blue: 0.12)var colorB: Color = Color(red: 0.36, green: 0.20, blue: 0.66)var colorC: Color = Color(red: 0.94, green: 0.68, blue: 0.98)var body: some View {TimelineView(.animation) { timeline inRectangle().colorEffect(ShaderLibrary.meshGradient(.float(timeline.date.timeIntervalSince(Self.startDate)),.float(speed), .float(intensity), .float(scale),.color(colorA), .color(colorB), .color(colorC)))}}private static let startDate = Date()}
.colorEffect なので、背景だけでなくどの View にもかけられます。
書き出す
プレビューで見た絵が、そのままあなたのアプリに。
Pro では、SwiftUI に貼るだけで動くコードを書き出せます。プレビューで見ていた絵が、そのままあなたのアプリの画面で動きます。
SwiftUI
- { }MeshGradient.metal
- { }MeshGradient.swift
.colorEffect 用の [[stitchable]] 関数と、それを呼ぶ SwiftUI View。いちばんのおすすめ。
Metal only
- { }MeshGradient.metal
ShaderLibrary から呼ぶ stitchable 関数だけ。既存の View に組み込むときに。
MTKView
- { }MeshGradientShader.metal
- { }MeshGradientRenderer.swift
ランタイムコンパイル用のフルソースと MTKView レンダラー。UIKit でも。
ショートカットからも取り出せます“Get shader code from Graphica Playground”
プライバシー
登録なしで、すぐ始められる。
端末の中で生成
Apple Intelligence 対応端末なら、Apple の基盤モデルが端末の中だけでシェーダーを書きます。
AI が無くても 1 枚
オフラインのテンプレートが、通信なしでも動く絵を返します。
保存は端末の中
作った絵はこの端末に保存されます。アカウント登録は要りません。
自分のモデルも
Pro では OpenAI 互換のエンドポイントと自分の API キーで生成できます。
プラン
まずは無料で、最後まで。
生成 → プレビュー → 調整と、2 本のレッスンは Free で完走できます。起動直後に課金画面は出ません。
| Free | Pro PRO | |
|---|---|---|
| レッスン | 2 本 | すべて + これから増える分 |
| 生成 | 1 日 10 回 | 無制限 |
| パラメータ | 速度・強さ・スケール + パレット | + 3 色を自由に / タッチ反応の調整 |
| 保存 | 3 個 | 無制限 |
| プリセット | 4 種 | 8 種 |
| 生成履歴 | — | いつでも前の結果に戻れる |
| コード書き出し | — | SwiftUI / Metal / MTKView |