この記事はProcessing Advent Calendar 2015の15日目の記事です。 前置き 昔,幾つかお絵かきソフトを作った. turanegaku.hateblo.jp turanegaku.hateblo.jp せっかくだから通信したいと考えたのだが, processing.netのServerとClientを使うとなるとちょっと面倒くさい. どうせならsocket.ioを使って楽々やりたいと考えた. ということでp5.js, node.js, socket.ioを使って,お絵かきチャットソフトを作った. p5pchat p5pchat 下記の説明通りに作業を行うと簡単に通信を行うことができる. github.com つくりかた 当初の予定以上にただ持ってくるだけだったので,どうやってつくったのかを書くぞ!!! 目標 herokuにupしてlocalじゃなく,socket.
p5.js プログラミングガイド サンプルプログラム 松田晃一、由谷哲夫、椎野綾菜 著 このページでは初版(2015年発行)のサンプルプログラムを紹介しています。改訂版(2021年発行)のサンプルプログラムについては当該書籍に記載のURLを参照してください。 サンプルプログラムは章ごとに構成されています。詳しくは、第1章のサンプルプログラムの動かし方を参照してください。ネットで公開されているサンプルプログラムは、ここをクリックしてください。本書で参照しているリンク一覧ここをクリックしてください。 [2015-12-1追加]p5jsSamples.zip(約112MB):本ページおよび本ページ以下の階層のリンク先を含むZIPファイルです。サンプルファイルを一括してダウンロードしたい場合にご利用ください。 第2章 p5.jsとJavaScript入門 DrawFunction: 「こんにちは」
GSwCCのトップページで動くフルスクリーンのp5.jsを最初に作ったときのこと。 function setup(){ createCanvas(windowWidth, windowHeight); } として、画面いっぱいちょうどのサイズを指定しているはずなのに、縦横ともにスクロールバーが出てしまっていました。このスクロールバーをなんとか消したくて色々調べて調整してたのですが上手く行かず、最終兵器としてTwitterで呟いたところ見事フォロワーさんに助けていただいたので、その会話を載せておきます。 @P5Aholic canvasにdisplay:block;をいれたら綺麗に出たので、canvasが縦方向に数ピクセル拡張されて、はみ出て、スクロールバーが出ているのかな、と思いました。細かい仕組みは分からずですが。。これって自動生成でしょうか。手動ならCSSいじれば直るかと!— はぅ君
押しかけ厨とは? † 相手の都合を無視し、他人の自宅や仕事場などに押しかけ「家に入れてくれ」「泊めてくれ」等の要求を押し付けたりする人々のことです。 「迷惑」「帰って」という言葉を曲解し、「恥ずかしがらないで」等と要求を続行することも多く説得は困難です。 窃盗・傷害事件も増えており、注意が必要です。 押しかけかな?と思ったら絶対に鍵やドアを開けてはいけません。 ↑ 「宿目的」の押しかけ † 押しかけ厨の目的の一つに「宿目的」というものがあります。 これは特に東京都心や近郊に住んでいる方がよく被害に遭っているもので、主に年2回夏と冬に開催される「コミックマーケット(通称コミケ)」に参加するために、被害者の家を宿代わりにしようと押しかけてくるものです。 通常参加者は近隣のホテルに宿を求めますが、厨は宿代を払わなくていいから、ついでに車やお金も出してもらおう(財布目的)、などと身勝手な理由で被害
クラウド上のアプリ開発環境である Monacaクラウド を利用して、p5.js をスマホアプリとして動かしてみました。 Processing本家のAndroidモードは最近では今ひとつな状態ですが、 p5.js + Monaca を利用すれば簡単にスケッチをスマホ上で動かせるので便利です。 AndroidだけでなくiOS等でも動かせますし、 何よりブラウザ上で開発できるので特別な環境構築を必要としないのも良いですね。 開発方法 Monacaのサイトへ行き、サインアップ、ログインを行います。 Monaca - HTML5ハイブリッドアプリ開発プラットフォーム その後、ダッシュボードから「新規プロジェクトの作成」を選択し、 「最小限のテンプレート」を選択します。 上部ツールバーから 設定 > JS/CSS コンポーネントの追加と削除 を選択します。 検索ボックスに「p5」と入力して検索します。
Processing / p5.js には beginContour() という関数が用意されています。 beginContour() \ Language (API) \ Processing 2+ beginContour() - p5.js | reference これは自由な形の「穴あき図形」を描くためのものです。 前々から「こんな関数あればいいのにな」と思っていたらすでに実装されていたなんて… 使用例 beginContour() のわかりやすい例として、以下のようなスケッチを作ってみました。 Coloring star - jsdo.it 塗り絵のような感じで、マウスで赤い円を動かして色を塗ることができます。 灰色の線で囲まれた白い領域は塗りつぶすことができませんが、 その領域の中央にある星の中は塗りつぶすことができます。 これは白い四角の中に星の形の穴をあけたためです。 もう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く