【JavaScript】AtCoder に登録したら次にやること ～これだけ解けば十分闘える！過去問精選 10 問～を解いた感想 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
クリエイティブコーディングの教科書
ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。
Webページ高速化に必須の知識！ブラウザがWebページをどのようにレンダリングしているか、図を用いて解説
ブラウザがWebページをどのようにレンダリングしているか、図を用いてやさしく解説した記事を紹介します。 レンダリングの仕組みを理解することで、HTMLやCSSやJavaScriptなど実装時にも気をつける点があります。 How the browser renders a web page by James Starkie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. HTMLの解析（パース）を開始する 2. 外部リソースを取得する 3. CSSを解析し、CSSOMを構築する 4. JavaScriptを実行する 5. DOMとCSSOMをマージしてレンダリングツリーを構築する 6. レイアウトとペイントを計算する はじめに 私の考えとしては、高速で信頼性の高いWebサイトを構築するには、実装中に各ステップを最適
JavaScriptで始めるジェネラティブアート - 生物アルゴリズムの応用 - ICS MEDIA
ジェネラティブアートという言葉をご存知でしょうか？ アルゴリズムによって作られる芸術作品を指す名称です。Pinterestで「generative art」と検索すると静止画、動画ともにたくさんの作品を見ることができます。 無機質さを感じさせるものもあれば、まるで生きているように感じる作品もあります。創作者たちはどのようなところから着想を得ているのでしょうか？ 彼らの中には数学的な幾何学模様や物理現象、果ては生物が織りなす複雑なパターンをコンピューターで再現することにより作品を作る者もいます。 本記事では特に「生物」に焦点を当てます。生物の複雑な営みを紐解いた背景や、それをアルゴリズムに落とし込むことで可能になった表現を紹介します。 本記事を読むことで日常に潜むあらゆる現象が芸術の種に見える喜びを感じていただければ幸いです。 サンプルはHTML CanvasとJavaScriptで作成して
🚀⚙️ JavaScript Visualized: the JavaScript Engine
JavaScript is cool (don't @ me), but how can a machine actually understand the code you've written? As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳 | Note: This post is mainly based on the V8 eng
レコメンドシステム入門 Javascriptで実装する｜es
レコメンド（推薦システム）に関して素晴らしい記事があったので訳してみました。訳に難があるが、そこはご勘弁ください。 プログラム実行してみると理解できると思います。入門者に打って付けの記事です。 以下、本文。 インターネットの世界はレコメンドで溢れていますね。 Amazonのように商品を購入するeコマース・サイト、Facebookのようなソーシャルネットワーク、YoutubeやNetflixのようなビデオ/映画サイトなど。これらのサイトに共通するのは、あなたに新しいものを推薦するために、映画、商品と友人などの過去のデータを使うことです。 この記事では、レコメンド機能がJavaScriptで、どのように動くか簡単に紹介します。推薦システムを実現するための、異なるアプローチも見ていきます。最終的にはアルゴリズムを切り替えただけで、結果を出力できるようにします。映画評論家の小さいデータセットと、M
ブロックチェーンのデータ構造をJavascriptで作ろう｜es
今回はJavascriptで、ブロックチェーンのデータ構造を実装します。ブロックチェーンのデータ構造を実際に作ってみると、その堅牢性が理解できると思います。nonceを求めるマイニング・アルゴリズムも実装します。 なお、P2Pでノード間で同期を取ったり、コンセンサス・アルゴリズムで合意形成を取るところまでは、実装しませんので悪しからず。 ブロックチェーンは「万能薬」でありません。他のプログラムと一緒で、あくまで、アルゴリズムを効率的に実現するデータ構造です。 分散環境下で、セキュアにデータをもつためのデータ構造とも言えます。 つまり、手段です。導入したからといって、問題が自動的に解決したりしません。 それでは早速、作ってみましょう。実際に作業するファイルは２つです。 mkdir project cd project npm init touch blockchan.js touch tes
JavaScriptの等値比較を全部理解する - Qiita
皆さんこんにちは。今回の記事ではJavaScriptの等値比較について見ていこうと思います。 「どうせ==と===の違いとかだろ？ 今さらそんな記事書くなよバーカｗ」と思った人はぜひ期待せずに読み進めてみてください。 「じゃあObject.isでしょ？ 知ってる知ってる、使ったことないけど」と思った人はまあ読まなくても大丈夫です。 さて、等値比較というのは、2つの値が等しいかどうか判定することです。JavaScriptにおいて等値比較はどのように行うのか、そしてどのような場面で等値比較が発生するのかをこの記事では余すことなく紹介します。 以降、この記事で仕様書という場合はECMAScript® 2018 Language Specificationを指すものとします。 ==と=== とはいえ、まずは==と===の話をしないことには始まりません。==はJavaScript初心者がとりあえず習
JavaScriptで大量のオブジェクトの当たり判定を効率的にとる - Subterranean Flower Blog
ゲームなどのコンテンツにおいて、「当たり判定」から逃れることはできません。オブジェクトとオブジェクトが衝突したかどうかという判定は、インタラクティブコンテンツにおいて最も重要な部分になるからです。 当たり判定の実装自体は難しくありません。ですが、素朴な実装ですと、対象となるオブジェクトが大量である場合に、十分なパフォーマンスが出ません。これはオブジェクトの多い、現代的なゲームでしたり、弾幕シューティングなどを作るときに大きな障害となります。 この記事では、大量のオブジェクトの当たり判定を処理する、効率的な方法について紹介します。 まずは素朴に実装してみる 当たり判定の処理を語るには、ある程度ゲームの骨組みのようなものが必要になってきます。もちろんクラスなどを使わないベタ書きでもよいのですが、大変読みにくくなってしまいます。ですので、今回は、まず簡易的なゲームエンジンのようなものを作って、そ
JavaScript開発に役立つ重要なランダムの数式まとめ - ICS MEDIA
プログラムで使うことの多い「乱数」。ゲーム開発やビジュアルアート、ウェブサイトのアニメーションにおいて乱数は非常に重要で、さまざまな用途で利用されています。プログラムで一般に乱数と聞くと、すべての数値が同じ頻度（分布）で出現する「一様乱数」と呼ばれる乱数をイメージする方が多いと思います。 多くの場合はこの「一様乱数」で取得した乱数を用いれば十分でしょう。しかし、場合によっては「一様乱数」ではなく、偏りのある乱数を用いることでコンテンツの見た目や現象の「自然さ」を演出することが可能です。 実は「一様乱数」に一手間加えることで、乱数の分布の偏りを制御できます。今回は乱数を使用して好みの分布を得るためのパターンをいくつか紹介します。 乱数分布のシミュレーションデモ （HTML5製） 次のデモはリアルタイムで乱数の出現頻度を計算し、グラフに可視化するコンテンツです。画面下のプルダウンで乱数の種類を
Google Chromeが採用した、擬似乱数生成アルゴリズム「xorshift」の数理
2015年12月17日、Google Chrome の JavaScript エンジン（処理系）である V8 の公式ブログにて、 JavaScript の標準的な乱数生成APIである Math.random() の背後で使われているアルゴリズムの変更がアナウンスされました。 Math.random() 関数は JavaScript を利用する際には比較的よく使われる関数ですので、親しみのある方も多いのではないかと思います。 新たなバグの発見や、従来より優秀なアルゴリズムの発見によってアルゴリズムが変更されること自体はそれほど珍しくはないものの、 技術的には枯れていると思われる Math.random() のような基本的な処理の背後のアルゴリズムが変更されたことに驚きを感じる方も少なくないかと思いますが、 それ以上に注目すべきはその変更後のアルゴリズムです。 実際に採用されたアルゴリズムの原
Virtual DOMのアルゴリズムが知りたくてvirtual-domのコードを読んだ話 - saneyuki_s log
Reactの登場以来気になっていた、Virtual DOMアプローチの具体的な差分抽出手法について、virtual-domを読んで確認してみた。 Reactをいきなり読むのは面倒くさかった・ミニマムな実装から読みたかったというのが、こっちを選択した理由。Reactのアルゴリズムが参考にされているものの、Reactには存在する特定の最適化が入ってないかもしれないので、あくまでもReact系のVirtual DOMを実装するには最低限何が必要かを知る程度のものと判断してほしい。 virtual-domについて ReactのVirtual DOM部分だけを切り出して再利用可能な形で再実装したライブラリ。elm-htmlとかMercuryといった箇所でvDOMインフラとして既に使われているので、まったくの趣味プロダクトという訳でもなくなっている。 README.md中での触れられている通り、Vir
RakutenMAによる形態素解析入門 - あんちべ！
概要 本稿はRakutenMAというJavaScriptだけで動く学習器付きの形態素解析器を利用する入門記事です。本記事を読了すると、形態素解析の実行と形態素解析のモデルを作成・更新出来るようになります。 また、本稿ははてな×PC工房との連動企画の補足をするべく書きました。 「あんちべさんと一緒に Rakuten MA で形態素解析」はてなニュース連動企画 第二弾！ : パソコン工房 パソコン工房のPCで遊ぼう第2弾！ あんちべさんと一緒に Rakuten MA で形態素解析 - はてなニュース RakutenMAを利用したエディタ判定器デモ エディタ判定器 :パソコン工房 【やじうまWatch】Emacs派とVim派の対立を煽る「エディタ判定器」が面白いと評判 -INTERNET Watch はじめに 近年、twitterやFacebookなどのSNSやAmazonのレビューなどから得ら
アニメーションGIFをグリッチさせるGlitch Gifsを作った - razokulover publog
GIFMAGAZINEにアニメーションGIFをグリッチさせる機能を追加した。 Glitch Gifs | GIFMAGAZINE - GIFアニメ好きが集まるGIF画像の投稿・共有・検索サービス グリッチとは、wikipediaいわく Glitch art is the aestheticization of digital or analog errors, such as artifacts and other "bugs", by either corrupting digital code/data or by physically manipulating electronic devices ということなんだけど、説明するより実物をみたほうがはやいのでまずグリッチ画像の例をだす。 こういう画像の一部分をぶっこわして意図しない美しいエラーを引き起こすような画像がグリッチ画像。 こ
ダンジョン生成してみよう - 株式会社BEFOOL ブログ
こんにちは、あゆめぐです。 今回はダンジョン生成の基本部分。 アルゴリズムそのまま実装したものの状態まで書きました。 はい、相変わらずjavascriptです。 どこかのタイミングでいい加減にc#にしないとな〜と思うんですがjavascriptそのままいろいろ持ってけて便利すぎるんだ〜。 ほら私が好きなActionScript3.0もenchant.jsにしてもjavascript系だからね。 ##考え方 ダンジョンマップを生成するアルゴリズムの解説 こちらの二分割を繰り返す方法の方です。 しかしながらこの実装だとアルゴリズムばればれなのでここからいろいろカスタマイズしないと。 均等に分割する方法はまだ作成していないので気が向いたときにやってみようかと思います。 他にもダンジョン生成にはいろんなアルゴリズムがあって 迷路自動生成アルゴリズム 上記サイトのような本当にダンジョンというのもあり
Visualizing Algorithms
The power of the unaided mind is highly overrated… The real powers come from devising external aids that enhance cognitive abilities. —Donald Norman Algorithms are a fascinating use case for visualization. To visualize an algorithm, we don’t merely fit data to a chart; there is no primary dataset. Instead there are logical rules that describe behavior. This may be why algorithm visualizations are
ドロネー三角形分割 | 12px.com
ドロネー図 。2年前くらいに Strataの一連のシリーズ を見てからずっとアルゴリズムが気になってたので、ちょっと時間ができた隙に調べてjavascriptで動かしてみた。これであってるかどうかわからないし、Strataはさらにここから3Dになるので全然違うんだけど、なんとなくこういう仕組みだったのかなぁと思えるくらいにはなれたので非常に勉強になった。 非表示にしているけど後ろに敷いている画像はこんな感じです。 1 jsで画像から色を取得する方法とかも知らなかったけどやってみたら案外なんとかなったので良かった。 動かしてから、もしや・・・と思ってググったら、既にD3というライブラリで簡単に実現できる事を見つけてしまった。 Delaunay Triangulation これを使えばたったこれだけでできたみたい。
Game Mechanic Explorer
A collection of concrete examples for various game mechanics, algorithms, and effects. The examples are all implemented in JavaScript using the Phaser game framework, but the concepts and methods are general and can be adapted to any engine. Think of it as pseudocode. Each section contains several different examples that progress in sequence from a very basic implementation to a more advanced impl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSのProxyでアルゴリズムを可視化する - Qiita
うごイラ画像変換