[JavaScript] 3次ベジェ曲線をCanvasに引いてみたい | CreateJS, EaselJS « きんくまデザイン
こんにちは。きんくまです。 今回は3次ベジェ曲線をCanvasに引いてみたいです。 ベジェ曲線っていうのは、そうですIllustratorなんかでパスを操作するときのやつですね。 こんな感じの 実は以前ActionScript3でも書いたことがあるんですが、今回はJavaScriptで書いてみたかったので。 >> [AS3] Illustratorのような3次ベジェ曲線を書く（5年も前の記事ですよ！びっくり） 実際にできたもの イメージはこんな感じ（下の画像は動きません） 動かせるやつは、これです 赤丸が始点と終点。緑がコントロール（アンカー）ポイントです。 どうやってやるのかというと公式があります。 >> Cubic Bézier curves これだとよくわかんない！ってことで、もっとわかりやすく解説されているサイトがありました。どうもです。 Hakuhin先生ですね！AS1か2で書か
![[JavaScript] 3次ベジェ曲線をCanvasに引いてみたい | CreateJS, EaselJS « きんくまデザイン](https://cdn-ak-scissors.b.st-hatena.com/image/square/dfa3048d2db6ab8c57c861c83ab8437e1f560831/height=288;version=1;width=512/http%3A%2F%2Fwww.kuma-de.com%2Fwp%2Fwp-content%2Fuploads%2F2015%2F12%2Fbezier_snapshot.png)
フロントエンドで知っておきたい要素指定の考え方 - pixiv inside [archive]
みなさんはじめまして、ピクシブのフロントエンドエンジニア id:koharusugiura です。 JavaScript を用いた開発を行う際に jQuery や React、vue.js といったライブラリーを使う方は多いでしょう。これらのライブラリーは共通して DOM を扱うライブラリーとなります。 DOM についての説明は長くなるのでここでは省きますが、簡単に説明すると HTML や XML の構造を表現するための仕様です。DOM は JavaScript のためだけにある仕様ではなく、 Java や Python など、多くの言語に対応する仕様です。 前述した各ライブラリーは多くのウェブブラウザー間の差異を吸収してくれるため、非常に便利なものです。しかし、その機能の豊富さからライブラリー自体のサイズは大きく、ウェブブラウザーで読み込むファイルの数や合計の容量が増えてしまいます。状況
![フロントエンドで知っておきたい要素指定の考え方 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/bceb415754fbfec32bccfd56b9894baea82cf05b/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F398ac51379393380250fefeb8ea8711487a7c935%2Fbackend%3Dimagemagick%3Bheight%3D1300%3Bversion%3D1%3Bwidth%3D1300%2Fhttp%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fk%252Fkoharusugiura%252F20151222%252F20151222103513.png)
フロントエンドで知っておきたい要素指定の考え方 - アニメイトラボ開発者ブログ
はじめまして、アニメイトラボのフロントエンドエンジニア id:koharusugiura です。 今回は XPathについて書きたいと思います。 HTML 文書から任意の要素を取得する際、多くの場合 jQuery や Selectors API などでセレクターを使いますよね? セレクターは細かい条件の指定はできませんが、簡単に要素が取得でます。しかし細かい条件によって要素の取得を行うことができません。 細かい条件で要素の取得を行う場合は、XPath を使うことで開発が捗ります。 XPathはセレクターよりも少々複雑な仕様となっていますので、まずは比較をしながらご説明したいと思います。 この記事は animateLAB Advent Calendar 2015 23 日目の記事です。 qiita.com ※ この記事でサンプルとして記載しているコードは特筆のない限り ECMAScript
Safari 9.0 の JS で「同じ関数を繰り返し実行しただけで返り値が変わる」という強烈なバグが発見されてる - Qiita
Webkit の Bugzilla で強烈なバグが報告されていると、同僚に教えて頂いた。 あまり話題になっていないものの、単純ゆえに強烈なバグだと思ったので Qiita にも公開しておく。 https://bugs.webkit.org/show_bug.cgi?id=151354 にそのバグ報告が上がっている。 最初に Google+ でやりとり があった模様。 URL のクエリ文字列から値を取り出す関数が正常に動作していないことから発覚したようだ。 その後は、簡単なテストケースに落とし込まれ jsfiddle というサイトにテストケースが公開されている。 Safari でこのページを開くと、実際に JavaScript を実行して確認できるようになっている。 続報 (2015.12.14) この記事を上げてすぐに Bugzilla の方で進展があった。 Yusuke SUZUKI さん
JavaScript で実装してみる Deep Learning
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに はじめまして、安藤義裕と申します。ヤフー株式会社データ＆サイエンスソリューション統括本部ソリューション本部でプログラマーをしております。趣味はカミさんの手料理です。 機械学習で用いられるアルゴリズムの一つにニューラルネットワークがあります。ニューラルネットワークは脳細胞の働きにヒントを得て考えられたものです。今回扱う多層ニューラルネットワークはニューラルネットワークの中間層と呼ばれる部分を多層化したものです。近年話題に上ることの多い Deep Learning ではこの多層ニューラルネットワークが利用されています。 多層ニューラルネットワークは用途に応じて異なるネットワークが利用されます。画像処理では畳込みニューラルネッ
ogv.jsがすごい
[ダウンロード] ogv.js, ビルド済みデータ [デモ] ogv.js demo JavaScriptでOgg VorbisとかWebMとかをデコードするライブラリ Emscriptenを使って、Cのライブラリ(liboggzとかlibtheoraとか)をJavaScriptのコードにコンパイルしてる videoタグとか使わずにcanvasで再生する Web Audio APIを使用。IEは対応していないのでdynamicaudio.swfを使うらしい コントローラは今のところ付いてない(自前で実装可能、デモでは実装済み) 最適化とか目下対応中で、2015-09-04にinitial stable release Long-form goal is to create a drop-in replacement for the HTML5 video and audio tags wh
Web開発の未来 – React、FalcorおよびES6 | POSTD
この記事でWeb開発の未来を垣間見ることができるでしょう。UIの構築やサーバ、データ・エンドポイントの新しい見解を得ることができると思います。ここで、ブラウザとサーバコードの両側を含めたフルスタックな話をしていきます。これを読めば、 完全に機能するGitHubリポジトリ で紹介されたすべてのコードの検証や実行ができるようになります。皆さまが開発者として次の資質を持っていることを前提に話を進めていきます。 JavaScript中級者 HTML中級者 クライアント/サーバ間通信の基礎知識 JSONの基礎知識 Node.jsの基礎知識 上の知識がなくても、 おそらく この記事の進行についていけるでしょう。しかし、知識がないと私の紹介するコードを現実的なシナリオあるいは重要なシナリオに応用するのは難しいでしょう。インターネットは情報の宝庫なので、理解に必要な概念などをたくさん提供してくれます。必要
今一番JSで熱いゲームエンジン、RPGツクールMVのランタイムコードを読んでみた - Qiita
一昔前にCanvasが実用段階になった頃、JSのゲームエンジンが大量に出てきたことがありました。それらは大抵DOM/CanvasのFallbackを持っていたのですが、今現在の状況は、実際には非効率なメモリ消費やモバイルのブラウザのフラグメント化で実用に足るものがなかった、という辛い現状があります。 そんな中pixi.jsという描画ライブラリが台頭してきました。このエンジンは webglとcanvasの fallbackを持ち、(いくらかのバグはありつつも)DOMを切ったことで現実的なパフォーマンスの課題をクリアできるのでは？という期待感が高まっています。 Pixi.js - 2D webGL renderer with canvas fallback http://www.pixijs.com/ そして 2015年、RPGツクールMVが発表され、ブラウザ吐き出し対応がアナウンスされました
Googleも推奨！アニメーションライブラリTweenMaxの使い方 入門編 — un-Tech
ごきげんよう。フーミンです。 「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強（僕の中で）JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。 同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer
ECMAScript 2015はなぜ策定まで時間がかかったか？ 仕様策定のリーダー、アレン・ワーフスブラック氏に聞く
Mozilla主催のフロントエンド開発者のためのカンファレンス「ViewSource Conference」が、北米・オレゴン州ポートランドにて11月2～4日に開催された。ここで、ECMAScriptの仕様策定のリーダーを務めたアレン・ワーフスブラック氏は「ECMAScript 2015：なぜそんなに時間がかかったのか」というタイトルでセッションを行った。氏によると、2015年6月にリリースされたECMAScript 2015は、1999年のECMAScript 3リリース以来、初めての包括的な再定義となるという。なぜ時間がかかったのか、その思うところについてインタビューを行った。 聞き手：近藤佑子（編集部）、矢倉眞隆氏 協力：清水智公氏（Mozilla Japan）、浅井智也氏（同） アレン・ワーフスブラック（Allen Wirfs-Brock）氏 アレン・ワーフスブラック氏の行ったセッ
速報：仮想 DOM は殺された。誰に？ magnum.js に - Qiita
mag.module('lister', { controller: function(props) { this.item = [1, 2, 3] this.title = 'Lister' }, view: function(state, props, element) { state.h2 = { _text: state.title, _onclick: function() { state.show = state.show ? !state.show : true state.item.reverse() state.title = 'Gister' + state.show } } } }) mag.module の第一引数、lister は <div id="lister"> と対応しており、ここで両者が結ばれます。controller 関数は一度だけ呼ばれて、view 関
Electronでアプリケーションを作ってみよう - Qiita
はじめに Electronをご存知でしょうか. Electron(旧称: Atom-Shell)は, Atomエディタを開発するために生まれたクロスプラットフォームデスクトップアプリケーションエンジンです. Node.js + Chromiumをランタイムとしており, Atomだけでなく, Slackや先日のBuildで発表されて話題となったVisualStudio CodeもElectronで実装されています. いわゆるWeb系の技術, Node.js + HTML + CSSでアプリケーションを作成できるのが特徴です. 類似した思想のフレームワークとして, node-webkit(NW.js)もありますが, アプリケーションのエントリポイントの考え方等が異なります. このエントリでは, Electronの使い方をサンプルアプリを実装しながら説明していきます. お題 このエントリのお題と
JavaScriptは如何にしてAsync/Awaitを獲得したのか: がおさんち 技術部屋
JavaScriptを記述する上で、避けて通れないのが非同期処理。 人類は、長い年月、この非同期的な処理を「如何にして書きやすく、読みやすく記述するか」について探求してきました。 要するに†闇†の塊なのですね。（闇に飲まれよ！！！！） この物語は、そんな†闇†の存在だった非同期処理を、人類がどのように苦しみ、そしてどのように解決していったかを書いていくポエムである。 補足：厳密には、JSはシングルスレッドで動くため、非同期処理は存在しない！と言ってしまえばそこまでなのですが、今回はsetTimeoutやajax通信、onloadイベント登録など、見かけ上、非同期的な挙動を示すものすべてを対象に話していきます。 第一章 ～人類はsetTimeoutを採用しました～ 古代のJavaScriptで、以下のような処理をしたい場合、どうしていただろうか。 「ブラウザ更新直後に『a』を表示し、その2秒
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site Title
Vue.js 大規模アプリケーションの構築
> mattatz
JavaScript製FlashPlayer「swf2js」swfをそのままHTML5に変換。 - Qiita
Loading...
フロントエンドに秩序を取り戻す方法 〜はてなブログ編集画面をリニューアルするためにやったこと〜 // Speaker Deck
ゲームウォッチからのゲーム世代を生きて – ゲームウォッチからプレステまで味わった世代ですｗ