1k以下を使用した10の素晴らしいJavaScriptデモ

著者: John Stephens
作成日: 28 1月 2021
更新日: 19 5月 2024
Anonim
What the heck is the event loop anyway? | Philip Roberts | JSConf EU
ビデオ: What the heck is the event loop anyway? | Philip Roberts | JSConf EU

コンテンツ

毎年、JS1Kコンテストでは、Webデザイナーに1k以下のクールなJavaScriptアプリケーションを作成するよう求めています。コンテストは冗談として始まりましたが、長年にわたる高品質のエントリにより、ほんの一握りのコードで何ができるかを示す素晴らしいショーケースになりました。

今年のコンテストで私たちが気に入った10件の応募作品をご紹介しますが、さらにすばらしい作品がたくさんあります。JS1Kサイトでリスト全体をチェックしてください。 (そして、エントリーしたいのであれば、まだ時間があります。エントリーの最後の呼び出しは、今週の日曜日の深夜です)。

  • ここですべてのJavaScript記事を読んでください

01.マトリックスはシステムです

縮小されたJavaScriptを使用してTheMatrixの有名な「デジタルレイン」シーケンスを再現するこの素晴らしいデモから、誰がスリルを味わうことができませんか?これは、わずか956バイトのコードでPedroFranceschiによって作成されました。


02. 4月のシャワーは5月の花をもたらします

春のようなアニメーションに基づいたこのシンプルで楽しいタイピングゲームは、AbigailCabunocによって作成されました。コードはClosureCompilerで圧縮され、さらに手作業で縮小され、最後にJSCrushになりました。

03.3Dシティツアー

3Dシティツアーは、それが約束するもの、つまり春の島の都市の一人称視点を提供します。マウスを使って街を飛び越えたり、屋根から屋根へとジャンプしたり、路上で車を運転したりできます。オートパイロットに案内してもらうこともできます。建物、通り、交通標識、移動中の車、公園、海などを含め、JaniYlikangasがこれらすべてを1k未満で作成できたことに驚かれることでしょう。


04.奇妙な結晶

フィリップ・デシャソーによるこの驚くべき3Dアニメーションは、地下鉱山を通る奇妙な旅にあなたを連れて行きます。 「鉱山労働者は仕事をやめました」と説明を読みます。 「彼らは恐れています。それはすべて、一部の人が見た奇妙な結晶から来ているようです。辛抱強く、少し運が良ければ、それらを見ることができます。」

05.1K流星

私たちはCreativeBloqの昔ながらのゲームに夢中になっているので、オスカートレドGからのこの小惑星トリビュートが大好きです。ほとんどのマシンで毎秒30フレームで実行され、各ゲームはユニークであり、作成者が説明するように、「宇宙には音がないので、リアリズムがたくさんあります。」

06.心配しないで、幸せに!


この疑似3D自走アニメーションは、忙しい蜂が左右に飛んでいる、新鮮なアニメーションの揺れる草、深みのある手がかり、きれいな花、そしてエンターテインメントのためにすべての方向(左、右、上、下、前)に動くカメラを備えています。 ManuelRülkeによって作成されたコードは、Closure Compilerを使用して最小化され、さらに手作業で最適化されてから、JSCrushで粉砕されました。

07.モーフォス

このインタラクティブな3Dメッシュは、あなたが遊んでいなければならないものです。 Benjamin Bill Plancheによって作成されたデモでは、Painterのアルゴリズムを使用して3Dメッシュをレンダリングします。カメラで定義された座標系に各面を投影した後、深さを減らすことで面を並べ替えて、ペイントの順序を取得します。表示される形状は、事前に生成された2つのメッシュ、立方体と球の間の無秩序なトゥイーンの結果です。面のトゥイーンをスムーズにするために、球のジオメトリは、立方体の各頂点をマッピングすることによって作成されます(キューブマッピング方法)。

08.コマンチェ

ヘリコプターシミュレーションゲーム「コマンチ:マキシマムオーバーキル」へのこのトリビュートでは、矢印を使用してピッチとロールを制御できます(高度は自動操縦にあります)。空は昼から夜に切り替わり、ゲームはミディアムエンドコンピューターで25FPSで実行されます。 Siorkiによって設計されたPackerコードは、FirstCrushとJSCrushの両方から進化したものです。

09.花

これらの波打つ、回転する円が回転する花の形に自分自身を形成する方法は、単に美しく、信じられるために見られなければなりません。 Cheeseumによってわずか960バイトで作成されました。

10.ファービー

ここでRomanCortesは、2Dキャンバスとハイエンドハードウェアを使用して、1k未満で可能なことの限界を実際に押し上げています。このカラフルなアニメーションは、毛皮のレンダリング、芸術的なモーションブラーを備えた翼、3D雲景を特徴としています。十分に楽しむには、Chromeを搭載した非常に強力なコンピューターで視聴する必要があります。 (別のエントリ、Furbeeで、できるだけ早くそのトンネルから出てください!、CortesはDeschaseauxのエントリ(リストの2番目)でFurbeeをマッシュアップしました。これも非常に素晴らしいです。)

これが好きですか?これらを読んでください!

  • アプリの作り方
  • 2013年の最高の3D映画
  • 拡張現実の次のステップを発見する

1k以下で驚くべきJavaScriptの作成を見たことがありますか?コメントで教えてください!

私たちの勧告
面白い漫画はフリーランスの生活のジレンマを明らかにします
発見する

面白い漫画はフリーランスの生活のジレンマを明らかにします

この記事はもともと2017年に公開されました。フリーランスになりたくない人はいますか?あなたはあなた自身のスケジュールを設定し、あなたのパジャマの快適さで自宅で仕事を楽しむことができ、そしておそらくあなたが従来の雇用よりも多くのお金を稼ぐことができます。さらに、延期していた個人的なプロジェクトを完了することができますよね?ええ、それについて...フリーランスの生活は、あなたが思うかもしれない個人的...
8つの貴重なオンラインタイポグラフィツール
発見する

8つの貴重なオンラインタイポグラフィツール

タイポグラフィは、部外者には簡単に見えるかもしれないが、ひどく間違えやすい創造的な分野の1つです。いくつかの優れたタイポグラフィチュートリアルを摂取することで、タイプスキルの向上に大きく貢献できますが、経験豊富なタイポグラファーでさえ、時々少しの助けを借りることができます。幸いなことに、タイポグラフィでの作業を少し難しくすることができる素晴らしいサイトがいくつかあり、最高の8つを見つけました。フォ...
インタラクティブなフォトビューアのプロトタイプを作成する
発見する

インタラクティブなフォトビューアのプロトタイプを作成する

Quartz Compo erは、Appleの強力なモーショングラフィックツールであり、もともとは放送用グラフィックからスクリーンセーバーまであらゆるものに使用されていました。これは非線形の視覚的なツールです。コードを記述したり、固定キーフレームを定義したりするのではなく、ドットとアイデアを結び付けることで機能します。もともとはインタラクションデザイン作業用に作成されたものではありませんが、その柔...