メニュー
Processing Fanはアーティスト・デザイナーのために作られたビジュアルコーディングツール Processingへの入門サイトです。 ProcessingのJavaScript版であるp5.jsを中心に解説しています。 Processingの1ファンである私が、Processingの魅力を伝えたくて個人的に立ち上げました。 「プログラミング言語を学んだけど、作りたいものも特にないし、だからと言って続けないと忘れてしまう。」 「仕事では毎日プログラミングしているけど、もっとクリエイティブで楽しいプログラミングがしたい」 そんなことを思ったことはありませんか? Processingなら、プログラミング言語を覚えたての方でも存分に楽しむことができ、 毎日をよりクリエイティブにしてくれます。 processingは今すぐ始められます! News 2018/10/06 リファレンスページ作成
With p5.jsのお供に「Visual Studio Code」をオススメする理由 はコメントを受け付けていません p5.jsでお絵描きを始めるにあたって、最初に考えたのが「コードエディタに何を使おうか」でした。 僕が買った「p5.jsプログラミングガイド」は、2015年に発売された書籍なのですが、その第1章では、公式の標準エディタとして「p5.jsエディタ」が紹介されています。ただ、どうやらその後、p5.js側で方針変更があったらしく、現在では公式サイトで「p5.jsエディタ」の配布は行われていません。 本家「Processing」がエディタを含む統合開発環境として提供されているのにならい、当初はp5.jsでも同じような使い勝手のエディタを作っていたようですね。ただ、フリーのコードエディタが数多くある現状で、あえて独自のエディタを使わせる意義は薄いと判断されたのかもしれません。 ちな
今日からp5.jsライブラリの使い方に関する記事を書いていこうと思います。 ・p5.js公式ページ <http://p5js.org/> 今日は初回ということで 「開発環境のセットアップ方法」 についてみていきます。 セットアップ方法といっても大したことはないです。 以下4つを用意するだけです。 ・自分のPC ・ブラウザ ・テキストエディタ ・p5.jsライブラリ ブラウザやテキストエディタはお好みのもので構いません。 何を選べばよいかよくわからないという方は、 以下をダウンロードしておけば問題ないと思います。 ・ブラウザ:Google Chrome <https://www.google.com/intl/ja/chrome/> ・テキストエディタ:Atom <https://atom.io/> p5.jsライブラリについてはいくつか種類がありますが 今回は「p5.min.js」を使うこ
With p5.jsのスケッチがはかどるVisual Studio Codeの拡張機能4選+α はコメントを受け付けていません p5.jsでスケッチを描くときは、コードエディタとして「Visual Studio Code」を愛用しています。以前、こんなエントリも書きました。 ・p5.jsのお供に「Visual Studio Code」をオススメする理由 その時はオススメの拡張機能として、 ・p5js Snippets…p5.jsの関数について、入力中に候補を表示したり、引数のテンプレートを挿入してくれたりする ・Debugger for Chrome…ChromeとVS Codeを連携して、JavaScriptのデバッグをサポートしてくれる の2つを紹介したのですが、あれから半年ほどの間に、お気に入りがさらに2つほど増えました。 ・Live Server…ローカルの環境に一時的にHTTPサ
Google Codeが1/25でサービス終了ということで、仕事でもいくつか対応があったのでやったことをメモしておきます。 今回はajaxzip3.js、html5shiv.js、css3-mediaqueries.jsの3つを対応しました。 ajaxzip3.js Githubに移行されているので、読み込み元を変更することで対応できます。 変更前 <script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js"></script> 変更後 <script src="https://ajaxzip3.github.io/ajaxzip3.js"></script> html5shiv.js 他のCDNサービスを使ってもよいのですが、今回はファイルをダウンロードしてサーバに設置する方法で対応しました。 ダウ
Free to Use and Reuse Sets This portal features content that is free to use and reuse. This page features items from the Library's digital collections that are free to use and reuse. The Library believes that this content is either in the public domain, has no known copyright, or has been cleared by the copyright owner for public use. Each set of content is based on a theme and is first featured o
いま世界中で、歴史的名作のデジタル・アーカイブ化の流れが進んでいます。 今回は、世界の名画を無料ダウンロードできる美術館サイトをまとめてご紹介します。 著作権の消滅したパブリックドメインの作品が中心で、クレジット表記なしで無料ダウンロード、二次創作での利用が可能です。 紹介するサイトをすべて合わせると、600万枚を超える貴重な資料や作品を網羅。 このリストは、随時アップデート中です。 世界の名画を無料ダウンロードできる美術館サイト一覧 NDLイメージバンク(国立国会図書館) | 1,900枚 ルーブル美術館 | 500,000枚 メトリポリタン美術館 | 490,000枚 ニューヨーク公共図書館 | 754,000枚 アムステルダム国立美術館 | 747,000枚 ナショナル・ギャラリー・オブ・アート | 130,000枚 ロサンゼルス・カウンティ美術館 | 68,000枚 J・ポール・ゲ
Overview of differences The p5.js language looks very similar to the Processing language with a few changes: Because you can think of your sketch as more than just the drawing canvas, size() has been replaced with createCanvas(), to suggest the possibility of creating other elements. frameRate(num) sets the frame rate, but the frameRate variable has been removed. To get the current frame rate, cal
html5shiv is an HTML5 JavaScript shim for IE to recognise and style the HTML5 elements
概要 ▶ IE8のHTML5対応としてhtml5shivのファイルをGoogle Codeからロードしている方はHTMLを今すぐ変更しましょう。他のCDNもあります。 画像出典:Google Code Google Codeがスパムや悪質なプロジェクトのために2016年1月25日に終了するというニュースが3月にありました。 米Googleは3月12日(現地時間)、開発者向けにAPIなどを提供したり、オープンソースプロジェクトをホスティングするサービス「Google Code」を来年1月に閉鎖すると発表した。同日、新たなプロジェクトの作成はできなくなった。 「Google Code」、2016年1月25日に閉鎖へ GitHubへの移行を奨励 - ITmedia エンタープライズ その時は「開発者向けのページが閉鎖か、別に開発者ではないし…(プロジェクトをアップしているわけでもないし)」という
これはなに Processingというものをご存知ですか。 Processingとは、グラフィックに特化したプログラミング言語(&統合開発環境)で、高度な技術を使わなくても簡単にビジュアルプログラミングができるものです。ゲームだって作ることができます。 D言語くんライフゲームやこのゲームもProcessing製です。 今回はProcessing.jsというJavaScriptライブラリを用いて、Processingで制作したものをブラウザ上で動かす方法からDOMをいじる方法まで紹介します。 今回のデモはこちらにあります。 Processing.jsの使い方 Processing.jsの使い方の例として次の方法があります。 Processingのコードを別ファイルで書き、それを読み込んで実行する方法 Processingのコードを予めJavaScriptに変換してから、それを読み込んで実行す
Processingを学んでいると、作成したプログラム(アートやデザイン)をまた別のどこかで利用していきたいと考えるものです。 OSで動くアプリケーションとして書き出したりするのですが、僕はwebエンジニアなのでどうしてもwebブラウザで表示させるなどして使いたいんですよね。 そこで便利なのがJavaScriptのライブラリ。 ここでは、JavaScriptのライブラリである「processing.js」を利用して、webブラウザでProcessingを実行する方法をご紹介します。 processing.jsについては、p5jsの開発やProcessingのAPIの進歩によって、2018年頃にプロジェクトは終了しており、アーカイブされています。 ただ、引き続き利用していくことは可能です。 p5.jsについては、以下の記事でご紹介しています。 p5.jsもWebブラウザ上で、JavaScri
p5.jsはProcessingをJavaScriptで書けるようにできるライブラリ。ProcessingをjavaScriptに移植したものなので、ビジュアルコーディングツールを使わなくてもwebブラウザ上でJavaScriptでクリエイティブコーディングができるようになります。 Processingを学んだあとにweb上でもクリエイティブコーディングでアニメーションやCG(コンピュータグラフィックス)などを表現したい時に使うと良いでしょう。 以前「Processing.jsでProcessingをwebブラウザ上で動かす」で紹介したprocessing.jsもありますが、processing.jsはJavaベースのProcessingのコードをそのまま動かすことができるように対して、p5.jsはJavasciriptに近づけた文法でコードを書くといった違いがあります。 それでは、今回ご
With Processingからp5.jsへの移植は(難しいことしなければワリと)簡単 はコメントを受け付けていません 今年の3月に買ったこの本。 ■ [普及版]ジェネラティブ・アート―Processingによる実践ガイド 当初、これに掲載されていた「Processing」用のサンプルプログラムを「p5.js」で動くように移植しつつ読み進めておりました。移植にあたって主に参考にしたのは、 ■ p5.jsプログラミングガイド こちらの本と、Githubのp5.js Wikiにあるこちらのエントリでした。 ●Processing translation ざっくりまとめてしまうと、Processingのコードをp5.js用にする場合、 ・キャンバスサイズを定義する「size」は「createCanvas」に書き直す ・「pushMatrix/popMatrix」から「push/pop」等、一部
p5.jsとは Web上でProcesssingが使えるjavascriptライブラリ(みたいなもの) とりあえずProcessingで作ったものを公開したいのに、公開できない人の救世主です。 PythonとFlask ではpythonのFlaskでサーバサイドは記述します。 Flaskはpython用に提供されているweb用のマイクロフレームワークです。とにかく導入コストが低いです。 dj〇ngoと比べて本当に導入が楽です。本当に楽です。 (資料が古かったりでめんどくさい部分もありますが) サンプルコード 早速どこかからパクってきた参考にしたコードをもとに作ります。 入門なので難しいことはまったくふれません(私自身が初心者なので) 動いている様子は前の記事と同じ感じです。 Pythonのコード from flask import Flask, render_template, reque
Processingで適当な作品を細々と公開している私ですが、やっとp5.jsを小一時間ほど触ってみましたのでノートしておきたいと思います。 私の視点からp5.jsを見た特徴としては、 Processingの文法(図形の書き方とか、setup/drawによるフレームワークとか)の知識が使える Processing.jsよりも、JavaScriptとしてかけるので書きやすい SoundやCameraなどのライブラリが使える! といったところです。 Processing.jsで作品をWeb上に公開するときは、Processingとして作成したものを「移植する」感覚が強かったですが、p5.jsではその辺の敷居が下がっていると思います。 Processingだと、Javaとして取り込んでいたライブラリが使えないとか、そもそもブラウザ上だとキャンバスサイズの変更が起きうるのでその辺の配慮とか、そうい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く