その他
ClawdMojis – あらゆる機会のためのClawd
ClawdMojis – A Clawd for Every Occasion (github.com)
要約
このプロジェクトは、Slack絵文字として使用できる「Clawd」マスコットのピクセルパーフェクトな再現を作成したものです。オリジナルのロゴからプログラム的に生成された、アニメーションするバリエーションを含む、多様なClawdのキャラクターが提供されています。画像エディタは一切使用されておらず、生成された絵文字はSlackカスタム絵文字に適した128x128ピクセル、透明背景、128KB未満のサイズになっています。
全文翻訳
ClawdMoji
Slack絵文字のための、あらゆる機会に合わせたClawd。
アニメーションするバリエーションを含む、成長し続けるキャスト。
すべてオリジナルのロゴからプログラム的に生成されています。
画像エディタは一切使用されていません。
オリジナルのClawdスター
これはClawdです 🔥
ロンドンClawd 🌧️
Clawd サーフィン 🏄
マリアッチClawd 🪇
バグクラフト 🦋
ロビンフッド 🏹
明らかにClawdではない 🥸
ライブギャラリーを閲覧する(GIFはアニメーションし、クリックでSlack名をコピーできます)、またはすぐにアップロードできる絵文字パックを入手してください。
すべての出力は128x128 PNG/GIFで、透明な背景を持ち、Slackカスタム絵文字(128KB未満)に適したサイズです。
ピクセルグリッド
出発点は、「Welcome, Clawd」のスプラッシュ画面のスクリーンショットでした(source/clawd_source.png)。
tools/analyze_grid.pyは、その下のピクセルアートグリッドを復元します。
色でオレンジ色の本体を分離し、すべてのシルエットエッジを見つけ、約1ピクセルのアンチエイリアシングジッターをクラスター化し、すべてのエッジ位置を最もよく分割するセルサイズを選択します。
結果 — ロゴは12x8のグリッド上に描画されており、セルは約18ピクセルです(335x597ソース)。(検出器は、すべての特徴が正確に2セル幅であるため、9ピクセル/24x16のハーモニックを報告します。ネイティブアートは12x8です)。
サンプリングされた色:本体 #DA7758、目 #000000。
..########..
..#O####O#..
O = 目
############
############
..########..
..########..
..#.#..#.#..
足
..#.#..#.#..
このグリッドはshared/clawd.pyにART文字列として存在します — すべてのレンダリングスクリプトがインポートする単一の真実の源であり、クリーチャーはすべてのバリエーションで同一です。
そのモジュールには、サンプリングされた色と、レンダラーが共有する白いアウトラインの拡張も含まれています。
絵文字
オリジナルのClawdスター — base/render.py
整数ピクセルセル(10ピクセル)でレンダリングされたグリッドなので、どんなズームでもシャープなままです。
padded square clawd_emoji.pngと、タイトで正確なアスペクト比のclawd_emoji_tight.pngを出力します。
これはClawdです 🔥 — fire/render.py
燃える部屋の前に落ち着いたClawd — 「これは大丈夫」ミーム — 2つのレイヤーから合成されています。
火(後):粗い32グリッド上の実際のDoomファイア・シミュレーション — 熱いソース行がランダムな減衰+ちらつきで上方に伝播し、クラシックなダーク→レッド→オレンジ→イエローパレットを通してマッピングされます。
列ごとのソースプロファイルが炎を三角形に先細りにします。
カラーキャップはベースを黄色(白ではない)に保ちます。
Clawd(前):細かい64グリッド上のスプライトなので、白い境界線は細い2ピクセルのアウトラインです。
Doomファイアは混沌としているため、シームレスなループは長いシミュレーションを実行し、フレーム0(非常に小さなシームは自然なちらつきで隠されています)と最も一致するフレームでカットすることによって見つけられます。
静的なフォールバックはclawd_fire_still.pngとして保存されます。
⚠️ clawd_fire.gifは約102KBです — Slackの128KBキャップのすぐ下です。
より小さくしたい場合は、MAXLを下げたりDURを上げたりしてください。
ロンドンClawd 🌧️ — rain/render.py
嵐の雲の下のClawd、4つの合成レイヤー(雲 → 後ろの雨 → Clawd → 前の雨):
雲:ギザギザの底を持つ、フル幅の渦巻く灰色の帯。
その内部テクスチャは水平にスクロールします。
雨:太い滴、ほとんどがClawdの後ろに、そしていくつか前にあり、わずかに傾斜して落下します(フィールドはせん断されています — 各滴の列は行とともにシフトします)。
前の雨はパララックス効果のために速く降ります。
水しぶき:床に沿って微妙な3フレームのポップ、少しずつフェーズされています。
ここではループは構造上完全にシームレスです。
雨は垂直タイルでラップされ(V·FはTILEの倍数)、雲は水平タイルでラップされ(S·F = P)、水しぶきはフレームmod Fの純粋な関数です。
Clawd サーフィン 🏄 — surf/render.py
壊れる波の面に赤いサーフボードに乗って降りてくるClawd、後ろから前に合成されています(海 → クレストの泡 → クレストの飛沫 → Clawd+ボード → 水際の水しぶき + 船首の飛沫)。
他の絵文字とは異なり、これはフル128グリッド(CELL=1)でレンダリングされるため、Clawdはより大きく、より中央に配置され、エッジ/回転はブロックサイズの半分になります — 目に見えてピクセル化が少ないです。
海:低く盛り上がったうねりが右にピークし、左に平らな海に傾斜しています(Clawdが乗る面)。
深みのある青色と、太陽の光るきらめきのスクロールする輝きで満たされています。
リップに沿って白い泡のキャップが割れています。
Clawd + ボード:Clawd(フル2ピクセルの白いアウトライン)は太いサーフボードの上に立っています。
2つは1つのアセンブリとして構築され、一緒に回転されるため、ボードの水の接触点を中心に回転して顔に沿って傾斜します。
傾斜は顔の傾斜に合わせられ、ボードは波の上を浮くのではなく、波の中を滑るように少し沈んでいます。
穏やかな揺れと垂直の上下動が、波の上で彼らを生き生きとさせます。
飛沫:波のリップから尾のような飛沫が上がります(Clawdの後ろに描画されているため、正しい深さに配置されます)。
ボードが波を切る水際沿いに細い明るい泡の帯が割れ、鼻先から少し船首の飛沫が上がります。
ループは構造上シームレスです。
上下動、揺れ、船首の飛沫のちらつきはすべてsin(2π·f/F)です。
うねりのリプルと輝きはループ全体で整数サイクル進みます(位相2π·(… − k·f/F))。
クレストの飛沫はフレームmod Fの純粋な関数です。
水際の泡は、静的なギザギザのパターンです。
マリアッチClawd 🪇 — mariachi/render.py
大きな麦わら帽子をかぶり、それぞれの手にマラカスを握り、踊りながら振るClawd。
サーフと同様に、フル128グリッド(CELL=1)でレンダリングされるため、帽子の曲線と丸い球体がシャープに保たれます。
本体 + 帽子:Clawd(フル2ピクセルの白いアウトライン)と広いソンブレロ(丸い麦わら帽子のクラウン、金色のスタッドが付いた赤いバンド、上向きのつば、ボリタトリム)は、左右にステップし、少し跳ねる1つの剛体です。
腕:それぞれが肩を中心に一緒に回転する2つのレイヤーです。
オレンジ色の腕がClawdの後ろにあり、マラカス(柄を握り、先端に球体がある)が前に合成されているため、柄が腕の上に伸びているように見えます。
それらを回転させるとマラカスが目に見えて振れ、2つの腕は鏡像で同じ角度で回転するため、交互に(片方が上がり、片方が下がる)チャチャの感じになります。
装飾:数個の金色の音符が頭上で上下します。
ループは構造上シームレスです。
横ステップはsin(2π·f/F)、バウンスは|sin(2π·f/F)|、マラカスシェイクはsin(2π·2f/F)(ループあたり2回シェイク)、ノートのバウンスはsin/cosの2π·f/Fです — すべてf=0とf=Fで等しくなります。
バグクラフト 🦋 — bugcatcher/render.py
サファリ帽とコレクターのサッチェルを身につけ、手に持った網を、届かないところに飛び回る蝶に振るClawd。
フル128グリッド(CELL=1)なので、ヘルメットのドーム、網の輪、蝶がシャープに保たれます。
スプライトオン・トランスペアレントの絵文字とは異なり、これは正方形全体を埋める完全な不透明なシーンで、後ろから前に合成されています(空+雲 → 草 → 花 → Clawd → 網 → 前景の草)。
フィールド:柔らかい雲がいくつか浮かぶ青い空と、揺れる草の葉と花々の緑の草原。
Clawd:フル2ピクセルの白いアウトライン、カーキ色のサファリ帽(丸いドーム、バンド、広く下向きのつば、トップノブ)にストラップをかけたサッチェル — 小さく上下する1つの剛体です。
網:オレンジ色の腕が長いポールを握り、その先端には編まれた網の輪があります。
腕+ポール+網全体が肩を中心に回転する1つのアセンブリなので、ループごとに一度、上と後ろに振れます。
蝶:羽を動かし、少しエイトの字を描いて飛び、すべてのスイングの頂点で輪の数ピクセル上に留まります — あと少し。
ループは構造上シームレスです。
網のスイングはsin(2π·f/F)、蝶の軌跡はsin/sin(2·)の2π·f/F、羽のフラップはcos(2π·3f/F)(ループあたり3回フラップ)、草の揺れはsin(2π·f/F)です — すべてf=0とf=Fで等しくなります。
フィールドが正方形全体を埋めるため、GIFは完全な不透明なフレーム(disposal=1、透明度なし)として書き込まれるため、何もちらつきません。
ロビンフッド 🏹 — robinhood/render.py
可愛い森の射手:尖った羽の帽子と緑のチュニック(ベルト+バックル、ジグザグの裾、小さなブーツ)、背中に矢筒をかけ、弓を引き、右に飛んでいく矢を放つClawd — それを何度も繰り返します。
フル128グリッド(CELL=1)なので、弓のカーブ、弦、矢がシャープに保たれ、大きく描画されているためClawdがフレームの大部分を占めます。
弓は右端に収まるため、放たれた矢は短い距離しか飛びません(「シューッ」という音がそれを物語っています)。
すべてのピクセル定数はSCALEの倍数です(sc(v) = round(v·SCALE/6))。
そのため、SCALEを上げると、wh