Jsdoit Archives

$(window).load(function(){})_をいっぱい登録

2015-08-05 3rd

2015-08-19 5th

2015-08-19 6th

2015-09-28 3rd

2015-09-30 1st

2015-10-02 2nd

2015-10-13 2nd

2015-10-27 1st

2015-11-02 1st

2015-11-03 1st

2015-11-09 1st

2015-11-30 2nd

2015-11-30 3rd

2015-12-02 2nd

2015-12-19 1st

20150624:マンセルの色相環(simple js)

20150625:マンセルの色相環(canvas)

2016-01-19 4th

2016-02-13 3rd

2016-02-18 4th

2016-02-24 1st

2016-03-04 3rd

2016-04-14 2nd

2016-04-27 1st

2016-05-11 1st

2016-05-12 1st

2016-05-13 1st

2016-05-13 2nd

2016-05-16 2nd

2016-05-31 1st

2016-06-09 2nd

2016-06-09 3rd

2016-06-17 2nd

2016-07-12 1st

2016-07-16 1st

2016-08-25 1st

2016-09-29 1st

2016-10-06 1st

2017-03-28 1st

2017-04-24 2nd

2017-04-28 1st

2017-06-02 1st

2017-07-26 1st

2017-07-27 1st

2017-11-16 1st

2017-11-30 1st

2018-01-23 1st

2018-02-15 2nd

2018-03-30 1st

2018-06-25 1st

2018-08-27 1st

2018-11-30 1st

2019-03-26 1st

4桁のinputテスト

CSS泡

DOMをcanvasに描画

IE対応 Three.js + GLTFLoader v2 + 物理演算を試してみるテスト(改)

OrbitControl(マウスコントロール)を追加 - forked [2015.10.11] three.jsで雪を降らす

SEO対策用で文字を隠す

Symbol

THREE.Spriteのtextureにcanvasを指定

WebGL API で GLSL を描く雛型

Yokohama Codes Collection 2016  takumifukasawa ver.

[2015.1.25] test ES6クラスのnewとsuper

[2015.10.10] particleにテクスチャを貼ろうとしたが…

[2015.10.11] three.jsで雪を降らす

[2015.10.12] three.jsAxisHelperを表示

[2015.10.13] three.js  canvasRendererでパーティクル

[2015.10.14] Three.jsで散り続けるパーティクル

[2015.10.15] three.jsパーティクルの色をカラフルに

[2015.10.16] 渦巻きのsvgアニメーション

[2015.10.17] フラクタルっぽいsvgアニメーション

[2015.10.18] 自分でsvgを描いてみる

[2015.10.19] paper.jsを使ってみる

[2015.10.1] mousemoveで3Dオブジェクトを慣性回転

[2015.10.20] coffeescriptでcanvasに線を引く

[2015.10.21] svgにドロップシャドウをかけるテスト

[2015.10.22] svgをhoverでtransition

[2015.10.23] svgをclickで色を変える

[2015.10.24] three.jsでシェーダーを使ってみるが…

[2015.10.25] three.jsでshaderMaterial

[2015.10.26] 音声読み上げをやってみる

[2015.10.27] 音声読み上げその2

[2015.10.28] Geometryでシェーダー(うまくいかなかった)

[2015.10.29] threejsmousewheelで拡大縮小

[2015.10.2] clickで3Dオブジェクトを足す

[2015.10.30] 音声認識

[2015.10.31] 波打つsvg

[2015.10.3] 3D表現でズーム+視点をずらす

[2015.10.4] 星のベース

[2015.10.5] 星

[2015.10.6] EventDispatcherクラス

[2015.10.7] PIXI.jsを使ってみる

[2015.10.8] Three.jsで星

[2015.10.9] three.jsでパーティクルの色を変える

[2015.11.10] シェーダーの勉強始めるので準備

[2015.11.11] シェーダーで色を変化させる

[2015.11.12] シェーダーで光を当てたように見せる

[2015.11.13] 4桁の錠前

[2015.11.14] ES6事始め

[2015.11.15] ES6事始め2

[2015.11.16] 3Dでジグザグな線

[2015.11.17] 3Dでドレッドっぽいもの

[2015.11.18] 3Dランダムウォーク

[2015.11.19] Three.jsランダムウォーク

[2015.11.1] CSS流星群

[2015.11.20] オブジェクトの位置に応じてカメラを動かす

[2015.11.21] three.js 線でcubeを作る

[2015.11.22] test three.jsのsetDrawCount

[2015.11.23] three.js 線を前の線よりちょっとずらして描く

[2015.11.24] threejs 線の塊を拡大・縮小

[2015.11.25] Threejs ジェネレイティブアート

[2015.11.26] threejs ジェネレイティブアートその2

[2015.11.27] threejs LineにshaderMaterial

[2015.11.28] threejs LineにshaderMaterial - vertexShaderで位置移動

[2015.11.29] threejs. shaderで個々に変形

[2015.11.30] threejs shaderとLineで幾何学アートっぽいもの

[2015.12.10] three.js lightとマウス位置を連動

[2015.12.11] test audioのdurationを取得

[2015.12.12] paper.jsの画像表示がズレる

[2015.12.13] paper.js 写真のピクセルを取得して加工

[2015.12.14] paper.js 写真の色相を時間で変える

[2015.12.15] paper.js viewのサイズ指定

[2015.12.16] threejs textにshaderをあてる

[2015.12.17] threejs shaderな文字をランダムに配置

[2015.12.19] threejs shaderな文字をランダムに配置 - 文字サイズを大きくしてみる

[2015.12.1] test threejsでtextを表示してみようとしたが…

[2015.12.22] threejs shaderな文字をランダムに配置 - 線をプルプルさせてみたい

[2015.12.23] threejs shaderにopacityを渡す

[2015.12.24] テキストの線をブラす

[2015.12.2] threejsでtextを表示

[2015.12.3] three.js LambertMaterial

[2015.12.4] LambertMaterialとPhongMaterialの違い

[2015.12.5] three.js spotLight

[2015.12.6] check overflowscroll

[2015.12.7] three.js lightを回転

[2015.12.8] QUnitでテスト 4桁の錠前

[2015.12.9] QUnitでループを使ってテスト

[2015.6.26] 線の細胞分裂

[2015.6.27][check] animationの終わりを検知

[2015.6.29] ちょっと弧を描きながら移動するボール

[2015.6.30] ベジェ曲線を方程式でアニメーション

[2015.7.10] マテリアルデザインっぽさを試す

[2015.7.11] ローディングアニメーション

[2015.7.12] ローディングアニメーション(中心から

[2015.7.13] ぐるぐるローディング

[2015.7.14] 渦

[2015.7.15] 迫ってくる

[2015.7.16] エコー

[2015.7.17] ぼんやりうかぶ

[2015.7.18] 繰り返すマテリアル

[2015.7.19] 実はボタン

[2015.7.1] three.jsの基本

[2015.7.1] three.jsの基本animation

[2015.7.1] three.jsの基礎パーティクル

[2015.7.1] 画像をパーティクル化  three.js

[2015.7.20] 実はボタン part2

[2015.7.21] AdobeIconを関数化してお手軽につくる

[2015.7.22] cssで円運動

[2015.7.23] ビッグバン花火

[2015.7.24] ついてくるパーティクル

[2015.7.25] あちこち動き回る

[2015.7.26] ベジェ曲線上で動き回る

[2015.7.27] 行っては戻る

[2015.7.28] なめらかにぐるぐる動き回りたい

[2015.7.29] ATフィールド

[2015.7.2] 画像をパーティクル化 part2  three.js

[2015.7.30] 立体ATフィールド

[2015.7.31] 光線

[2015.7.3] canvasで画像をeasing回転

[2015.7.3] 波のように広がるdot

[2015.7.4] 白黒写真から色を覗く

[2015.7.5] 簡易cssスライド

[2015.7.6] どんっ

[2015.7.7] 混じり合うグラデーション

[2015.7.8] クソネミ

[2015.7.9] inline-blockしたliを横スクロールさせる

[2015.8.10] 面のバネ弾性

[2015.8.11] 面のバネ弾性(鼓動)

[2015.8.12] もぞもぞ動く円

[2015.8.13] 縁がもぞもぞ動いている円

[2015.8.14] もぞもぞ動く四角

[2015.8.15] canvasとスクロールを連動

[2015.8.16] canvasとスクロールを連動 part2

[2015.8.17] 万華鏡(静止)

[2015.8.18] 万華鏡(プリズム風)

[2015.8.19] canvasトリミング+パララックス風

[2015.8.1] 音のビジュアライズ

[2015.8.20] 青海波

[2015.8.21] プラグインを使わない3D表現

[2015.8.22] プラグインを使わず3Dパーティクル

[2015.8.23] 立体ノード

[2015.8.24] ノード3D

[2015.8.25] JSONPでJSONを取得するclass

[2015.8.26] ノード3D(相関を持たせる)

[2015.8.27] 七宝文様

[2015.8.28] 3Dのキューブに面をつける

[2015.8.29] 3Dのキューブを拡大アニメーション

[2015.8.2] 連続した曲線を動き回る(easel.js)

[2015.8.30] mousemoで3Dのキューブを回転

[2015.8.31] 点の色を合成するノード3D

[2015.8.3] スターウォーズ風ワープ

[2015.8.4] 虫っぽい動き(連続した曲線を動き回る(easel.js) part2)

[2015.8.5] 動き続ける点と点をむすぶ

[2015.8.6] 動きつづけ結びつづける

[2015.8.7] クリックでノードを足す

[2015.8.8] タイルを動かして背景をチラ見せ

[2015.8.9] 車が通り過ぎるときの光の感じ

[2015.9.10] ぶれぶれノイズ

[2015.9.11] ディスプレイのノイズ

[2015.9.12] ノイズのノイズ

[2015.9.13] 文様ノイズ

[2015.9.14] 動くノードに面を貼る

[2015.9.15] 範囲を指定したノード

[2015.9.16] 2つの円周上の点を結んで動かす

[2015.9.17] ぐるぐる幾何図形

[2015.9.18] forked ドロネー三角形分割を実装する - 点を動かしてみる

[2015.9.19] transformrotateだけでトリミング

[2015.9.1] スクロールに遅れてついてくるオブジェクト

[2015.9.20] rotateだけでトリミングしたものを並べる

[2015.9.21] forked 画像を平行四辺形トリミング(CSS)

[2015.9.22] 動き回る三角形

[2015.9.23] ctx.shadowBlurを試す

[2015.9.24] createjsのshapeテスト

[2015.9.25] 透明度の限界は0.01

[2015.9.26] ジグザグっぽいオブジェクト

[2015.9.27] createjsでオブジェクトの色を変える

[2015.9.28] ドロネー関数を使う

[2015.9.29] 動くドロネー図

[2015.9.2] スクロールバーのカスタマイズが利かない時 #タッチデバイス

[2015.9.30] スクロールで3Dオブジェクトを拡大

[2015.9.3] 残像で模様を作る

[2015.9.4] clipを使うとchromeでジャギる - source-in を使って解決

[2015.9.5] 3Dのノードを速く回転させる

[2015.9.6] animationendの検知

[2015.9.7] 朝の復習

[2015.9.8] ページ横幅いっぱいローディング

[2015.9.9] めっちゃ寄ってくるローディング

[2016.1.10] test 立方体の六面に違う画像を貼る

[2016.1.11] test planegeometryの裏面にもtexture貼る

[2016.1.12] planegeometryをはためかせる

[2016.1.13] test getImageDataから抽出した色でthreeのオブジェクト作る

[2016.1.14] test svgをjsで追加

[2016.1.15] test getImageDataから抽出した色でthreeのオブジェクト作る - 色判定でサイズ変えたりする

[2016.1.16] threejsでlineをランダムに動かす

[2016.1.17] threejsでメビウスの輪っぽいもの

[2016.1.18] threejs × audio analyser

[2016.1.19] xhrのresponceがundefined

[2016.1.20] mp3をxhrで取得 - audio analyser

[2016.1.21] audio anlyser - モザイクの粒度を変える

[2016.1.22] test svgをjsで追加 part2

[2016.1.23] 信号っぽいサウンドビジュアライザー

[2016.1.24] ポップなサウンドビジュアライゼーション

[2016.1.8] テキストの線をブラす es6

[2016.1.9] test 立体に画像貼る

[2016.2.17] Preloadjsクラス

[2016.2.18] jsdo.itではES6のGeneratorが使えない

[2016.2.1] #test speechRecognitionとOS X elcaptan

[2016.2.22] transitionendは親に伝搬する

[2016.2.28] polar clock(均一グラデ)

[2016.2.2] テキストのシェーダーとサウンドビジュアライゼーション

[2016.2.3] canvasと明朝体

[2016.2.4] サカナクションの「夜の踊り子」カバー風

[2016.2.6] シーケンサーの基礎

[2016.2.7] createjsのhitTest

[2016.2.8] svgのパスに沿ってdomを動かす

[2016.2.9] svgのパスに沿ってeasing風にdomを動かす

[2016.3.1] css-animationでふよふよ

[2016.3.2] pixi.jsで画像をたくさん扱う

[2016.3.4] polar clock

[check] clickとtransitionで要素を動かす

[check] martix3dのブラウザ対応

[glsl] RGB Ring

[glsl] dissolve shader

[glsl] dissolve shader で画像切り替え

[glsl] murble sphere

[glsl] perlin noise

[glsl] perlin noise ^ 2

[glsl] perlin noise ^ 3

[glsl] perlin noise ^ 3 + time

[glsl] plasma

[glsl] ring 角丸

[glsl] ring 角丸 パターン

[glsl] rings

[glsl] sin波

[glsl] sin波群

[glsl] test

[glsl] vertexShaderでrotateMatrix

[glsl] vertexShaderでscaleMatrix

[glsl] たま

[glsl] 伸びる円弧テスト

[glsl] 伸びる円弧テスト(alphamap的な)

[glsl] 円弧ぐるぐる

[glsl] 動くたま

[glsl] 動くたまたち

[glsl] 輪っか

[test] scssのfor文

a-frame test

android input text に入力しようとしたときの挙動

animationのバッティング

animationを複数設定

arc-time

background-positionでCSSスプライトアニメーション

backgroundにアニメーションgif指定

background版  cssだけで画像を青の2階調化(filterとmix-blend-mode)

canvas 2048 x 2048

canvasでの画像繰り返し描画をやってみる

canvasでパタパタ画像切り替え

canvasでパタパタ画像切り替え---ratina対応

canvasでパタパタ画像切り替え(0-1)

canvasの解像度を変える

canvas インクっぽいテクスチャ乗せる

canvas 厚紙っぽいテクスチャ乗せる

canvas 煙っぽいテクスチャ乗せる

check css-animation when toggled display none.

check css-animation when toggled visibility

check pixijsのfilters

check pixijsのfilters(autoDetectorRenderer)

clash royale japan fb page link.  url scheme

clearIntervalとtimerId

clickでaudio再生

cone

cookie確認

cookie確認 アプリ化 + window.openボタン

cookie確認 アプリ化 + リダイレクト(location.href)

cookie確認 アプリ化しない

createDocumentFragment

createjsでshapeにclickイベントを張る

cssだけで画像を青の2階調化(filterとmix-blend-mode)

element回文

embed google trends

empty疑似要素

fixed, fit window

for-in

forked 2015-08-12 1st

forked 2015-10-27 1st

forked 2016-04-27 1st

forked 2016-06-09 1st

forked 2016-12-20 1st

forked BTN

forked DOM要素をcanvasで描画

forked Googleマップテスト ~ 住所、最寄駅を取得

forked Three.jsでトゥーンシェーダの実装の実験

forked [2015.10.18] 自分でsvgを描いてみる

forked [2015.10.25] three.jsでshaderMaterial

forked [2015.10.8] Three.jsで星

forked [2015.7.2] 画像をパーティクル化 part2  three.js

forked [2015.8.1] 音のビジュアライズ

forked [2015.9.20] rotateだけでトリミングしたものを並べる

forked [2015.9.27] createjsでオブジェクトの色を変える

forked [WebGL] three.js + WebGLRenderTarget を試してみるテスト

forked [WebGL] three.js で glTF 2.0形式のデータを表示してみるテスト(その3)(調整中)

forked [WebGL] three.js で glTF 2.0形式のデータを表示してみるテスト(その8改)(調整中)

forked [WebGL] three.js を試してみるテスト(BufferGeometry編)(その4)

forked [canvas] 紙ふぶき

forked [glsl] dissolve shader

forked [glsl] perlin noise

forked [glsl] sin波群

forked check pixijsのfilters(autoDetectorRenderer)

forked d3.js で ボロノイ

forked fixed, fit window

forked glsl RGBsin波

forked glsl gray scale disolve

forked mousemove + canvas parallax

forked new BTN

forked p

forked pixi 赤い玉

forked pixijs canvas texture + custom filter

forked random walk  rx, rv use cos, sin

forked test create.js  パララックス

forked text-shadowだけでblur

forked threejs shaderでmask

forked threejs texture sprite animation

forked threejs x shader blur mesh - pixijsのblurを参考に

forked threejsのベース

forked threejs 10万個パーティクル

forked threejs canvas texture 1024 x 1024

forked threejs canvas texture 256角 x 10

forked threejs textureにcanvasを指定してsprite animation 負荷テスト

forked threejs textureにcanvasを指定してマスク

forked threejs シェーダーで平面をピクピクさせる

forked threejs シェーダーで影をつける

forked threejs バネ(texture + BufferGeometry)

forked threejs 帯(tubegeometry)

forked webgl threejsでglslを書く雛形

forked word-salad

forked 【three.jsのヘルパー解説集】 ④BoxHelperの使い方

forked いんらいんチェック

forked いんらいん動画再生らいぶらり

forked じゃいろ

forked カントナ #3-2

forked カントナ #4

forked 画像を平行四辺形トリミング(CSS)

forked 課題#2

forked 黄金螺旋:中心点からの距離によって要素拡大

glsl RGBsin波

glsl gray scale disolve

glsl ling

glsl ling - 時間によって色を変える

glsl orb

glsl sin波

glsl sin波の帯

glsl sin波の帯を縦横で

glsl sin波の帯を縦横で - マウスで位置をずらす

glsl some orb

glsl ぼやかし

glsl キラキラ

glsl グラフ

glsl デンマークの国旗

glsl 広がっていく輪っか

google map 経路検索 iframe埋め込み

google map  渋谷

hoverでちっちゃくなるボタン

hoverで背景が変わるボタン

input time だけ

input time の値を画像表示

inputで1~4桁の半角数字を受け取る

itunesの楽曲ダウンロードリンク

localstorage確認

memo化

mouse-position on document.

mousedown

mousemove + canvas parallax

pixi 赤い玉

pixijs canvas texture

pixijs canvas texture + blur filter

pixijs canvas texture(ratioも合わせる)

pixijs custom filter

pixijsでパターンの線を伸び縮み

pixijsのWebGLRendererでcanvasを使いまわす

pixijsは線が苦手

pixijs rendertexture

pixijs 画像をこすらせた感じに

pixijs 画像をどんどんにじませる

querySelectorAllが取得する順番

random walk  fx, fy

random walk  fx, fy use cos, sin

random walk  rx, rv use cos, sin

random walk  velocity

reflection shader

scss構文チェック

selectの値を画像表示(0000~2359)

shaderとcanvasTextureでマスク + 光沢

simple random walk

simple random walk (node)

simple random walk (node 正規分布)

simple random walk(正規分布)

test object destructuring

test  async

test  hoverで時計回りに一回転

test  transition(translate and scale)

test canvas-arc

test css-animation

test deligateでanimationendは発火するのか

test voiceっぽいアニメーション

test:WebGL _ Three.js の基本

text-shadowだけでblur

threejs alpha map

threejs alpha map 負荷テスト

threejs shaderでmask

threejs texture shadermaterial

threejs texture sprite animation

threejs texture sprite animation  alphaMapと併用

threejs x shader RGB shift

threejs x shader blur mesh

threejs x shader blur mesh - gaussianblurっぽい感じ

threejs x shader blur mesh - horizontal

threejs x shader blur mesh - pixijsのblurを参考に

threejs x shader blur mesh - 輪郭も

threejs x shader kaleidoscope

threejs x shader mirror

threejs x shader かすれ

threejs x shader ぼかし x 輪郭ぼかし

threejs x shader 輪郭をぼやかす

threejsでfragmentshaderを描く雛形

threejsでモデルを読み込む

threejsでモデルを読み込んでワイヤー表示

threejsで簡単な自作モデルを読み込む

threejsで簡単な自作モデルを読み込む[球体]

threejsのベース

threejs 10万個パーティクル

threejs 3D空間のベジェ曲線上を動き続ける箱

threejs canvas texture 1024 x 1024

threejs canvas texture 256角 x 10

threejs glsl grayscale

threejs glsl mix

threejs loop sprite animation

threejs shaderMaterial で texture 貼る

threejs sprite animation

threejs sprite animation フレーム指定で「6」を表示

threejs stepで色の出し分け

threejs test shadermaterial

threejs textureにcanvasを指定してsprite animation

threejs textureにcanvasを指定してsprite animation 負荷テスト

threejs textureにcanvasを指定してマスク

threejs wireframeの残像

threejs シェーダーで平面をピクピクさせる

threejs シェーダーで影をつける

threejs バネ(BufferGeometry)

threejs バネ(texture + BufferGeometry)

threejs パーティクルにuvを渡す

threejs ワイヤーフレーム状態でのパーティクル

threejs 四角の箱

threejs 左右反転しないようにテクスチャを貼る

threejs 帯(buffergeometry)

threejs 帯(tubegeometry)

threejs 枝垂れ(前の描画の状態を残す)

threejs 枝垂れ(残像)

threejs 桜吹雪

threejs 箱だけ出す

threejs 紙吹雪っぽいパーティクル

throttle.js

transformでCSSスプライトアニメーション

transformでCSSスプライトアニメーション:レスポンシブ対応

tweenjs complete

undefinedの螺旋

userAgent.es6

vertexShaderでy軸に回転(箱)

vertexShaderで平行移動(箱)

vertexShaderで拡大-回転-移動

vertexShaderで拡大縮小(箱)

webglのスペック確認

webgl glslを書く雛形

webgl threejsでglslを書く雛形

windowのproperty一覧

z-indexもcss animationが効く

いいねボタンを斜めに置く

いんらいんチェック

いんらいん動画再生らいぶらり

じゃいろ

すまほでてきすとこぴー

ただのいんらいん再生

ちょっとカラフルな星

なかぐろハッシュタグツイート

にじませるshader

カントナ #1

カントナ #2

カントナ #3-1 coffeescript

カントナ #3-2 coffeescript

カントナ #3-3 coffeescript

スマホでgooglemapの経路を開くリンク

ダブルタップ禁止

ツイート文言のハッシュタグに「.」

ツイート文言の中にハッシュタグ

ニクキュウフォントカワイイ

ニコちゃんパーティクル

フォント検証

ホバーしたら画像が白くなるCSS

始点と終点を決めて板ポリを作る(y座標のみ)

始点と終点を決めて板ポリを作る(y座標のみ)(shaderで透過)

尾を引く回転

文字の流星(マトリックス風)

時計回りの対数螺旋に文字を配置 - 色変える

板を曲げる

画像を平行四辺形トリミング(CSS)

画像アップロード用

画像直リンクテスト

禍々しい線

端末のフィジビリティ検証

線形補間(lerp)でマウスに追尾する円

縦書き

縦横比固定のcss

自作スクロールバー

追従する円

黄金螺旋

黄金螺旋:中心点からの距離によって要素拡大