HN 日本語サマリー

← 一覧へ戻る
その他

ClawdMojis – あらゆる機会のためのClawd

ClawdMojis – A Clawd for Every Occasion (github.com)

12 pointsby afspies1 コメント

要約

このプロジェクトは、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