HTML Canvas要素とJavaScriptを使うと、手軽にクリエイティブコーディングをはじめられます。 前回の記事「パーリンノイズを使いこなせ」に引き続き、先月7月25日に開催されたイベント「Frontend de KANPAI! #4」の登壇内容を記事として紹介します。 本記事ではHTML CanvasとJavaScriptの理解につながることを目標に、次のパーティクル表現の作成テクニックを解説します。サンプルのソースコードはすべてGitHubにて公開していますので、あわせて参照ください。 ▲ 完成版サンプル。実装する上で重要な表現のエッセンスだけを絞って解説します サンプルを別ウインドウで開く コードを確認する ステップ① パーティクル表現 サンプルを別ウインドウで開く コードを確認する シンプルなグラフィックから手順を理解していきましょう。パーティクルを定義するのに、座標と速度
燃え上がれ！ 時間内にマスコットをひたすら集める、シンプルなゲームです 今年もミニゲームを公開する季節がやってきました。 今回作ったのはモグラたたき風のゲーム。 モグラたたきと言えば、ゲーム作りの入門編とも言えるたいへんミニマムなゲームです。 それはもうミニマムに作って。サッとお出しするつもりでした。 ササッ（半月遅れ） 色々ありました。そんな諸々はnoteにまとめて。 こちらはいつものように知見あつめです。 技術概要 今年のテーマは原点回帰！ 回帰もなにも、まだ原点のうしろに2つしかないような気もしますが！ ともあれHTMLです。WebGLでなければCanvasですらない。 HTMLでマークアップ。CSSで装飾＆アニメーション。JavaScriptは添えるだけ。 実にピュアなWebページ。 なお。毎度のようにライブラリ利用はありません。 今回はランキングもないので本当に何もなし。 ビルド
【Unity.UdonGraph】VRChatのワールドギミック作例集 - It__was__rainy’s blog
世のUdon解説が軒並みU#でGraphの作例が少なすぎるので、私が自分のワールドで使っている(ものの改良・調整版)UdonGraphの作例をぶん投げる記事です。なお作者はプログラミング素人です。 1.はじめに 1.この記事を読むのに前提となる知識 2.この記事での凡例について 2.作例集と解説少々 1.オン/オフ切り替え系 1-1.AudioSource 1-2.Collider/MeshRenderer/UdonBehavior ect... 2.オブジェクト移動・回転系(Transformをいじる) 2-1.オブジェクトの移動・追従 2-2.オブジェクトの回転 2-3.プレイヤーをワープさせる 3.Animatorを操作する 3-1.Animationを再生する 3-2.変数を切り替える 3-3.speedをいじる(疑似的な一時停止) 4.Colliderの衝突を検知する 4-1.O
GIMP (GNU 画像編集プログラム)
利用条件または商標 Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the license is included in the section entitled GNU Free Documentation License. 目次 まえがき 1. GIMP User Man
フリート芸術を後世に残すべくWebアプリを作った【Fleets Forever!!】 - Qiita
今年もやって参りました クソアプリ Advent Calendar 2021！8日目を担当します @okumura_daiki です。今年で参加4年目になるクソアプリストです。よろしくお願いします。 ▼記事を読むのが面倒な人向け、今年のクソアプリはこちら！ フリート画像作成Webアプリ 「Fleets Forever!!」 ▼過去の作品も見てね。 はじめに Twitter のフリート機能をご存知でしょうか？ Instagram のストーリーズに似た機能で、24時間で消えるコンテンツ(動画やテキストなど)を投稿できる機能です。24時間で消えるため本当にどうでもいいことを気軽に投稿できて気に入っていました。しかし、そんなお気に入りの機能が2021年8月に終了してしまったのです。さよなら、フリート。 まぁ、なくなったらなくなったで、不便というわけでもないので別によかったのですが、ある日「もう一度
JavaScript のコーディングを始めるための 40 個のやさしい JS プロジェクト (初心者向け)
原文: 40 JavaScript Projects for Beginners – Easy Ideas to Get Started Coding JS プロジェクトの構築こそ新しいプログラミング言語を学ぶ最善の方法です。 そこで、純粋な JavaScript、React、TypeScript を使用する、初心者にやさしい 40 個のプロジェクトチュートリアルの一覧を作成しました。 チュートリアルについてのアドバイスなのですが、ビデオを見て、プロジェクトを構築し、それを分解してから独自の方法で再構築してみてください。新しい機能を追加したり、違う方法を試したりしてください。 そうすることで、プロジェクトの概念をつかめたかどうかテストできます。 なお、以下のリストの各プロジェクトの上でクリックすれば、対応する記事のセクションまでジャンプできます。 純粋な JavaScript のプロジェク
アニメーションの使い所 イケてるアプリケーションやウェブサービスはアニメーションをうまく使っています。 アニメーションを入れることでユーザの注目を集めたり、自然な体験をしてもらうことができます。 アニメーションは視覚効果が高いため、使い所を見極めないと逆にUXを下げてしまうことに注意が必要です。 アニメーションの主な使い所としては次の箇所でしょう 画面遷移のアニメーションはユーザを自然な感じで次の画面へ誘導する（導線の手がかりを与える） ピンポイントで目立たせたい所（押させたい所）に使う ローディング時のアニメーションはユーザの離脱を防ぐ 画面遷移やUIのアニメーション よく使われているマテリアルデザインベースのアニメーションに関しては次の法則があります。 主に画面遷移やUIに関するアニメーションです。 レスポンスがよい（そもそもアプリケーション全体がもっさりしてない） 要素同士が関連づけ
炭治郎かわいいよ炭治郎 完成品 Figmaでお絵かき 最近鬼滅の刃にハマってるので、何か出来ることないかな～と思った結果 Figmaの練習がてら炭治郎を描いてみることにしたのでした。 数日でこのような炭治郎が出来上がる。 かわいいぞ！ Piggとかマクパペットのアバター構造に触れた経験が生きた。 こうして構造考えながら描いてみるとピグってすげぇなとしみじみ思う。 Figmaはベクターがイラレ並に描きやすいという評判は確かにそうだと思いました。 イラレ経験者ならFigmaでも息をするようにお絵かき出来るはずです。 これは個人アカウントで作ったので無料プラン。 羽織の柄はpatternifyで作成。 FigmaのSVG出力 書き出したいパーツにExportをSVGで設定するだけである。 Figmaの場合は大枠のフレームにExport設定すれば、中のパーツはすべてSVG内のパスやグループになって
【 今回やること！ 】 DragonBonesを使ってアニメーションを作成します。 作成したアニメーションをCocos Creatorで使用します。 DragonBonesは、無料で使える2Dアニメーション作成ツールです。メッシュとボーンを使って、１枚の絵でアニメーションを作成することも出来ます。 今回作成するアニメーションです。＊画像をクリックすると再生します。 Cocos Creator自体にもアニメーション作成機能はありますが、DragonBonesの方が機能は豊富です。複数の画像からアニメーションを作る際の階層の管理もしやすいです。 Cocos Creatorには、DragonBones用のコンポーネントがあるので、作成したアニメーションを簡単に使用できます。 それでは作成を開始します！ 目次 目次 使用環境 DragonBonesをインストール アカウントの登録 サンプルプロジェ
See the Pen 9-2 PNGアニメーション（APNG） by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」内の表示を確かめてね！ 動きを実現する仕組み 仕組み ⇒ 1枚の動く画像 長所 ⇒ 透過が利用可能。GIFに比べて画質がきれい。オンラインジェネレーターなどの制作ツールで比較的簡単に制作できる。 短所 ⇒ IE,Edgeには非対応。※apng-canvas.jsで疑似的な対応は可能 オンラインサービス「Ezgif.com（https://ezgif.com）」を利用して制作。 パラパラ漫画のようにコマ送りで複数の画像を組み合わせてPNG形式のアニメーション画像をつくる。 作り方 ① 動かすコマを、画像制作ソフトを使ってコマ数分作る。 カンバスサイズは全てのコマで同じサイズにし、画像を少しずつ動かしてコマ数分を制作。 サンプル
定価 3,520円（本体価格 3,200円） 発売日 2021年9月20日 判型／ページ数 B5変形／464 ISBN 9784802613378 JavaScriptは、Twitterのようなソーシャルアプリケーションから、PhaserやBabylonのようなブラウザベースのゲームフレームワークまで、現代のほとんどのウェブアプリケーションの中核をなしています。JavaScriptは、初心者が手に取って遊ぶには簡単な言語ですが、本格的なアプリケーションを構築するためには柔軟で複雑な言語です。 『Eloquent JavaScript』の第3版は、JavaScriptを深く掘り下げ、美しく効果的なコードを書く方法を紹介しています。また、クラス表記、アロー関数、イテレータ、非同期関数、テンプレート文字列、ブロックスコープなどの新機能を追加しました。また、多くの新しい演習問題が追加されており、ス
１、概要 3Dグラフィック・エンジンの一つであるBabylon.jsを使用して、色々な3Dグラフィックを表示してみましたので以下に説明します。 なお、Windows10の環境において Microsoft Edge (Ver. 11.0.17763.379)、 Firefox (Ver. 65.0.2/64 bit) 及び Google Chrome (Ver. 73.0.3683.86/64 bit) で動作を確認しました。 また、Androidの一部及びiOSの一部での動作も確認しました。 ここで使用している3DグラフィックデータでGLTFフォーマットの一部は「Poly」から、OBJフォーマットおよびSTLフォーマットは「Free3D」から、また3Dキャラクター「 デフォルメ人物キャラクター(女の子)は PROJECT-6B」様からダウンロードさせて戴きました。 無料グラフィックを提供さ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptで取り組むクリエイティブコーディング – パーティクル表現入門 - ICS MEDIA
HTMLでモグラたたきゲームをつくりました - Qiita
イケてるアニメーションを研究してみる - Qiita
FigmaによるSVG生成とアニメーションSVG作成
メッシュとボーンで１枚絵からアニメーションを作る！：DragonBones - モーリーのメモ
PNGアニメーション（APNG） | 動くWebデザインアイディア帳
流麗なJavaScript（マリン・ハーバーベーク） | 書籍 | ソシム
Babylon.jsで3Dアニメーションを含むグラフィックを描画してみる - Qiita