読者です 読者をやめる 読者になる 読者になる

not good but great

プログラミング、アート、映画・本の感想について書きます。

Javascript

AWS API GatewayとLambdaを使い、Facebook Messenger Botでおうむ返し

AWS API GatewayとAWS Lambdaを使い、Facebook Messenger Botでおうむ返しを実装します。 下記を参考にしました。 AWS API GatewayとAWS Lambdaで、Facebook Botを作成する - Qiita 受信用のpostリクエストを確認するためのcurlコマンドを入力しても自分はな…

threejsのbuffergeometry exampleをes6で書いてみた

poop particles buffergeometry example buffergeometryを使えば、よりWebGLネイティヴに近い書き方ができるらしい。Particle(頂点だけなので四角)を大量に描画することに向いている。 three.js / examples es6記法で書き直す exampleはシンプルに書かれてい…

Reactjsをまたやり始めた

Reactを再開した理由 大規模データビジュアライズがやりたく、WebGLを勉強したりしていた。Uberが作ったライブラリ、react-map-glが要件を満たしていた。それがreactを使っていたので、やり始めた。 Engineering Intelligence Through Data Visualization at…

TokyoJS 2.1 @ Abeja INCに参加した

こちらに参加した。 TokyoJS 2.1 @ Abeja INC - TokyoJS (東京) - Meetup メモ vuejs Vue.js in production // Speaker Deck Hello Vue.js - JSFiddle dashboardで使った abeja 開発者 evan youさん angularチーム desiger,corder scaffoliding webpackでvue…

Browserifyでplumberがあるのに落ちてしまうときの対処法

qiita.com 2014年とちょっと前の記事だけど、これで解決した。

Perlin Noise, Flow Fieldで線を引く

http://naoyashiga.github.io/p5.js-playground/sketches/generative/perlinFlow/ ・参考 Coding Challenge #24: Perlin Noise Flow Field - YouTube

p5jsとConvNetJSでClassification

ConvNetjsのdemoを参考に、自分でもデモを作ってみた。 ConvNetJS demo: Classify toy 2D data 描画にはp5jsを使った。ブラウザ実行なので学習に時間が掛かる。Canvasのサイズを大きくするととても遅くなるので、400pxの正方形くらいがちょうど良いサイズ。 …

d3.js,ES6のBoilerplateの紹介

これを使えばいいかも。 Packet-Clearing-House/d3-es6-boilerplate: Boilerplate for D3 projects with Javascript ES6 (Babel), ESLint, Gulp, Bower

recurrentJSのデモをReactで動かす環境

Interactive Abstract Pattern Generation Javascript Demo | 大トロ こちらの記事を読んだ。recurrentJSというRNNを実装したライブラリ。 RecurrentJS Sentence Memorization Demo 開くと重いので注意。こちらのデモをReactで書いたのが下のリポジトリ。 lu…

JSで形態素解析するならkuromoji

形態素解析 これからはchatbotが流行るらしい。nodeでchatbotを動かすこともあるだろう。MeCabで形態素解析は聞いたことあるけどjsではどうやるのか調べてみた。そしたらkuromojiというのが有名らしい。 $npm install --save kuromoji kuromoji 英語 英語な…

Reactjsをやってみた

Reactjsを始める Webサービス作ってみるかとふと思い、内容を考えた結果Reactjsで作ったら良いかもしれないと思った。だからReactjsを始めた。 環境構築 モダンなフロントエンド環境構築に疎かったので、Qiitaで最近の投稿を参考にした。 作って壊せるReact…

p5.jsを触ってみた

processingをjsで実行できるp5.jsを触ってみた。 とりあえずデモをいじってみる。 http://p5js.org/examples/examples/Math_Noise_Wave.php http://naoyashiga.github.io/p5.js-playground/sketches/noiseWave/ ドキュメントのtypoを直して徳を高めた。 Fix …

fladdictさんのFillを参考にして、Paper.jsで遊んでみた

codepen.io 久しぶりにPaper.js使ってみた。fladdictさんのFillをかなり参考にした。こういう気持ちいいアニメーションを作ることは楽しいw・参考 http://fladdict.net/sketches/fillfillfill/index.html

PhantomJSでclickができないときはsetTimeoutで待ち時間を設ける

ブラウザ上の操作を自動化したくて、どうやるか調べたらPhantomJSが出てきた。CasperJSなんかもあるらしい。・参考 こちらをかなり参考にした。 PhantomJS でログインが必要なページでも自由自在にスクレイピング - 凹みTips ボタンをクリックする var left,…

Qiitaのデザインが変更されて見づらいと思ったので、背景色を変更するChrome拡張「Qiita Color Change」を作ってみました

Qiita Color Change Qiita Color Change - Chrome ウェブストア Qiitaのデザインが変更された。なんじゃこりゃ!と思った。緑色背景に白色文字はチカチカして読みづらい。そこで緑色をうすくして、文字色をうすい黒にした。Adevent Calendarの赤色にも対応し…

スクロール値によって要素の幅を変える

パララックス?というか、スクロール値で変化を起こすページをライブラリを使わずに作れるかやろうと思った。 ライブラリもある もちろんSkrollrという使いやすいライブラリもある。簡単に書きたいなら、ライブラリを使ったほうが良いと思う笑。 Prinzhorn/sk…

Chrome拡張「No Xvideos」の多言語対応をやった

No Xvideos No Xvideos - Chrome ウェブストアChrome拡張の多言語対応をやった。1年前くらいに作った「No Xvideos」という拡張に対して行った。元々英語で紹介文を書いていたけど、日本語対応も使用と思ったのがきっかけ。

Likeボタンクリッカーつくった

カチカチカチカチという音が部屋に鳴り響いた。

Web Speech Synthesisを使ってブラウザで音声読み上げをしてみる

Web Speech Synthesisを使って音声読み上げをしてみました。音が出ます。PC版Chrome推奨です。 イチラブインターネットドットイットイズファン「I love Internet.It is fun.」を日本語音声で読ませたら「イチラブインターネットドットイットイズファン」にな…

Three.jsのPointCloudを使ってGL_POINTSを大量に描画する

See the Pen 450,000 GL_POINTS by naoyashiga (@naoyashiga) on CodePen. Three.jsのPointCloudを使って、四角をたくさん描画してみました。この四角はGL_POINTSと呼ばれるもので、WebGLにおいて頂点の役割を果たしています。PointCloudはこのGL_POINTSの集…

Three.jsを使ってモバイルでグリグリ動かすのは難しいと思った

See the Pen Sparkle Particles by naoyashiga (@naoyashiga) on CodePen.three.jsのexampleに載っている、このコードをかなりパクって参考にしました。 three.js - examples

道端カレン、道端ジェシカ、道端アンジェリカを見分けるクイズを作った

道端三姉妹を見分けるクイズです。問題は永遠に続きます。 http://naoyashiga.github.io/Michibata_Sisters_Quiz/app/ モバイルから見るとこんな感じ見えます。少し画像が大きいかもしれません。

Web Starter Kitでgulpして"Cannot find module"が出た時の対処法

gulp serveはできた 昨日の続きです。 ・昨日のエントリ Google製「Web Starter Kit」を使うための環境設定 - not good but great $gulp serve はうまくできて、サーバが立ち上がったところまでを書きました。てっきりgulpもできていると思ったら、エラーが…

Google製「Web Starter Kit」を使うための環境設定

https://developers.google.com/web/starter-kit/Google、I/Oカンファレンスを控えてマルチプラットフォーム・ウェブアプリのテンプレート、Web Starter Kitを発表 – TechcrunchGithubのtrendingで1位だったので使ってみることにしました。最近自分はgruntを…

javascriptでbuttonタグで作成されたボタンを無効にする

document.getElementsByClassName("testBtn")[0].disabled = true; buttonタグで作成されたボタンを無効にするには、上のように書きます。disabled属性をtrueにすると無効になります。

Gruntのタスク管理を使い始めて、改めて「サーバって何だっけ?」と思った

Gruntは便利 GruntでLiveReloadを導入したり、css、jsの圧縮化をするようになりました。 gruntjs/grunt-contrib-cssmin · GitHubGruntを試してみたメモ | un-T factory! Interactive blogJavaScript - JSHint入門 - JSHintを使ってJSコードの信頼性を高める -…

jQueryでスクロールをアニメーションさせる

sampleという文字をクリックすると、aaaaaまで下がります。ページ内アニメーションで使えるかもです。jQueryを扱うときは「$(function(){});」で囲むことを忘れないように・・・。・参考 ページ内を自在にスクロール | よく使うjQuery

display:flexがモバイルで効かないときはdisplay:boxで代用する

真木よう子Viewer ver1.01 先日のエントリに引き続き「真木よう子Viewer」を作っていました。AngularJSの恩恵を十分に受けていないようなペラ一枚のページになっています・・・。

AngularJSを使って「真木よう子Viewer」を作り始めた

「真木よう子Viewer」とは? demo Maki Yoko Viewer

汎用性の高いコードを学ぶためにAngularJSを始めました

AngularJSを始めた もっと汎用性の高いコードを書きたい Processing.jsとかPaper.jsとかjsにおける演出の部分ばかりを最近触れていました。また就職に伴い、jsをやってる人が周りに増えてきました。その印象ではbackboneやAngularJSなどのWebアプリケーショ…

海外のアーティストであるRafaël Rozendaalさんの作品がおもしろい

Rafaël Rozendaalさんの作品が面白い 海外のアーティストであるRafaël Rozendaalさんの作品がおもしろくて、最近見始めました。 http://www.newrafael.com/自分でも真似して作ってみようかと思いました。真似と言っても、ソースコードを見るわけではなく、動…

requestAnimationFrameを無名関数で実行する

function draw(){ requestAnimationFrame(draw); alert("hogege"); }; draw(); 関数宣言をしてから、「draw();」するやり方をいつもしていました。 (function draw(){ requestAnimationFrame(draw); alert("hogege"); })(); 無名関数を使って、後で「draw();…

Firefox NightlyでSIMD.JSを実行する

SIMD.JSで高速化 Exciting! RT @anssik: We're seeing ~4-10x JavaScript performance speedup with SIMD.JS: https://t.co/ZKoO0FdfNC— Jesse L Rosenberg (@nervous_jesse) 2014, 3月 29 SIMD.JSというものを使えば、JSのパフォーマンスが上がるというツイ…

媒介変数に三角関数を掛けて予想不能な動きを作る

媒介変数を使う 高校の数学で媒介変数(パラメータ)によって図形を表す問題をやったことがあります。それをプログラミングに適用したら、コードも簡単だし、おもしろいこともできるのではないかと思いました。 RETURN 円の媒介変数表示

Blende ModeのXORを使って模様を作る

demo

セグメントの位置を周期的に動かして、くねくねうごく円を作る

以前CSSでぐにょぐにょする円を作りました。 demo 今回はPaper.jsで作ってみました。 Paper.js Editor

getPointAt()を使ってパス上に点を描画する

demo A Pen by naoyashiga. 久しぶりにgistを使ってみました。

Web Audio APIを使ってゲームの効果音を作成する

今までに作ったブロック崩し 最近はブロック崩しを作っていました。 Javascriptでブロック崩しを作ったよ - not good but great玉の数を増やしたりしてました hitOptionsを使い当たり判定を厳密にし、弾丸同士を完全弾性衝突させる - not good but great 問題…

hitOptionsを使い当たり判定を厳密にし、弾丸同士を完全弾性衝突させる

demo Paper.js Editor 球を複数にしたブロック崩し - jsdo.it - Share JavaScript, HTML5 and CSS 当たり判定を厳密にする options.bounds: Boolean – hit test the corners and side-centers of the bounding rectangle of items (item.bounds). hitTestの…

Javascriptでブロック崩しを作ったよ

demo GitHubにも公開してあります。 naoyashiga/BreakBrick · GitHub

当たり判定をしてドラッグでアンカーポイントを動かす

demo セグメントをドラッグで曲げることができます。

方向ベクトルを使ってアニメーションさせながら動かす

方向ベクトルを使ってアイテムを動かす demo Paper.js Editor code var text = new PointText({ point:view.center, justification:"center", fontSize:30, fillColor:"black" }); var destination = Point.random() * view.size; function onFrame(event){ …

raster.getAverageColorでPathの平均色を取得する

demo 円が動きます。円の色は背景の画像の平均色です。円で囲まれた範囲内の平均色となります。

Paper.jsでCanvasに画像を表示させて、ピクセルデータを取得する

画像の読み込み方 Rasterを使う Paper.jsの特徴はベクトルデータを扱えることで描画が綺麗で高速であるということです。

Paper.jsでアイテムをたくさん複製したい時はSymbolを使おう

Symbolのメリット Symbolはアイテムをたくさん複製したいときに、メモリを節約することができます。

Paper.jsでレイヤーの細かい指定、グループ化をやってみる

最前面、最背面レイヤー demo Paper.js Editor code var path = new Path.Circle(new Point(80,50),35); var secondPath = new Path.Circle(new Point(120,50),35); project.activeLayer.firstChild.fillColor = "red"; project.activeLayer.lastChild.fillC…

Paper.jsのBlend Modeを試してみる

BlendModeを指定する CSSのblend modeと種類は同じ String('normal', 'multiply', 'screen', 'overlay', 'soft-light', 'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten', 'difference', 'exclusion', 'hue', 'saturation', 'luminosity', '…

Paper.jsでnormalizeして単位ベクトルを作成する

単位ベクトルの作成 単位ベクトルの作成はベクトルで何かやりたいときには役に立つと思います。特にベクトルの方法だけ知りたくて、長さは別に定義したいときなどに使われるのではないでしょうか。

Drawing zigzag lines and shapes by using vector on Paper.js.

Orbit of Mouse Drag function onMouseDrag(event){ path.add(event.middlePoint); } event.middlePoint describes the point in the middle between event.lastPoint and event.point.

Paper.jsのVectorの性質を使っていろいろな図形を描く

ドラッグの軌跡を追う function onMouseDrag(event){ path.add(event.middlePoint); } onMouseDragだけ抜粋しました。一つ前の点と現在の点との中点を描画します。 軌跡の両側に点を打つ Paper.js Editor