Jeffrey Cross
Jeffrey Cross

アートとデザインにp5.js Javascriptライブラリーを活用する方法を学ぶ

もともとProcessingに惹かれたのは、それが単なるプラットフォームではなく、コミュニティであったということです。 Ben Fry、Casey Reas、Daniel Shiffmanが長年にわたってこのコミュニティをどのように創り上げ、育成してきたかを知り、私は感動しました。私は、このコミュニティとProcessingのコアバリューが実際にプラットフォームを橋渡しすることができるのではないかと思いました。これらのアイデアが、ネイティブのWebテクノロジ(JavaScript、HTML、およびCSS)と組み合わされた場合、どのように見えるでしょうか。これらの質問の私の探求は小さな実験として始まった。時間が経つにつれて、これらはより多くの人々を成長させ、関与させ、そしてついにはp5.jsに発展させました。

これまでこのようなプロジェクトに関わったことが一度もなかったので、最初はとても怖かったです。男性が優勢なシーンの女性として、私の一部は私が本当にフィットすることができるかどうか質問しました。私がそれに取り組むとき、私はこれらの事を感じるのが一人ではなかったことに気づきました。ほかの人のため。クリエイティブな人々が自分自身のツールを作ることにとてもエキサイティングなことがあります。興味のある人なら誰でもこのプロセスに参加できるはずです。これらすべてについて考えると、私はp5.jsプラットフォームを歓迎し、多様な視聴者が利用できるようにすることが、後付けではなく優先事項である必要があると強く感じました。包含性のコアバリューに基づいて構築されたプラットフォームがどのようなものになるのか知りたいと思いました。

私たちは、昨年の夏に開催された最初のp5.js貢献者会議でこの考えを熱心に追求しました。そこで、コミュニティの声明、貢献者の行動規範を作成し、さまざまな教育、学習、コミュニケーションの方法について話し合いました。

このエネルギーは、多くの人々がプロジェクトに大幅な追加を行った夏の間続きました。 Karen PengとKevin Siwoffは、3D機能を追加するためにWebGLレンダラを実装しました。

Sam Lavigne、Jason Sigal、Guy De Bree、そしてJerel Johnsonは、デスクトップ版と今後リリースされるWeb版のp5 Editorの両方で多くの進歩を遂げ、初心者がすぐに慣れるようにしました。

Jiashan Wuは例の「モバイルクックブック」を作成し、Sarah Groff-Palermoはp5.jsをArduinoにp5.botsライブラリで接続し、Zeno ZengはSVGとPDFのサポートを追加しました。 Seth Kranzlerは、p5.soundライブラリの改良によりWeb Audioとの統合をさらに進め、Marc Abi-Samraはp5.domライブラリに加えてp5.jsとHTMLの可能性を押し上げ、Maya Manはコミュニティの声明をクラウドソーシングにしました。ビデオ。

私たちがよく考えていることの1つは、通常はアクセスできない可能性があるp5.jsを、どのようにしてより多くのユーザーが利用できるようにするかということです。 UCLAのCasey Reas氏とChandler McWilliams氏とのコラボレーションにより、私達は最近p5.jsでKadenzeを通じたビジュアルアーツのためのプログラミング入門と呼ばれるオンラインコースを開始しました。

R. Luke DuBoisは、p5.jsスケッチで音声合成と音声認識を可能にするためにp5.speechライブラリを作成しました。私たちの願いは、これらの機能をp5エディターにも取り入れて、視覚障害者がそれを使えるようにすることです。 Maya Manは、国際化されたバージョンのp5js.orgサイトも作成しました。現在、Webサイトと参考資料の翻訳をさまざまな言語にクラウドソーシングしています。

人々が創造的に自分自身を表現できるようにすることがp5.jsの究極の目標です。そして、私たちはたくさんの新しいコラボレーションを模索しています。私たちは最近、Print All Over Me、アーティストSosolimited、LIAと共同で、アルゴリズムソフトウェアシステムによって動的に生成されるカスタマイズ可能な衣服のコレクションを作成しました。

それぞれの売り上げの一部は、オープンソースソフトウェアの開発をサポートするためにProcessing Foundationに行きます。あなたは自分でデザインしてここで注文することができます!

p5.j​​sを始めよう Web用に独自のインタラクティブグラフィックを作成する方法をあなたに教えます。この本は、プログラミングとユーザーとの対話の基本から始まります。以下は、マウス入力に基づいて円を描く方法を示す例2-2からの抜粋です。

関数setup(){createCanvas(620、155);関数draw(){if(mouseIsPressed){fill(0);} else {fill(255);}楕円(mouseX、mouseY、80、80)。 }

それから本は、アニメーションと対話性を扱うためのより洗練されたテクニックに移ります。これは例5-9を基にしたもので、「イージング」と呼ばれる技術を利用してより滑らかで流動性の高い動きを作り出します。

var x = 0; var y = 0。 var px = 0; var py = 0;変数= 0.05。関数setup(){createCanvas(620、155);背景(43、171、226)。ストローク(255、102)。関数draw(){var targetX = mouseX;} x + =(targetX - x)*イージング。 var targetY = mouseY; y + =(targetY - y)*イージング。 var weight = dist(x、y、px、py);ストローク重量(重量)。 line(x、y、px、py); py = y; px = x。 }

後の章では、データの読み込み、視覚化、保存について説明します。例12-7のこのスケッチは、ニューヨーク市の天気を動的に確認し、現在の風速と風向に従って円を移動します。

var weatherData; var position; var radius = 50; function preload(){var url = "http://api.openweathermap.org/data/2.5/weather?q=New%20York,NY&APPID=YOUR_APPID"; weatherData = loadJSON(url); function setup(){createCanvas(620、155);} position = createVector(幅/ 2、高さ/ 2); wind = createVector(0、0);背景(253、238、35)。 setWeather(weatherData); noStroke();関数draw(){background(253、238、35、20); position.add(風); fill(0);楕円(position.x、position.y、2 * radius、2 * radius)。 if(位置x>幅+半径)位置x = - 半径。 if(位置x高さ+半径)position.y = -radius; if(position.y <-radius)position.y = height + radius;関数setWeather(weather){var angle =ラジアン(weather.wind.deg); var windmag = weather.wind.speed; wind = p5.Vector.fromAngle(angle); }

p5.j​​sの魅力的な点の1つは、キャンバスにグラフィックを描くことに限定されていないことですが、Webブラウザの他の組み込み機能を組み込むことができます。例13-2を基にしたこのスケッチは、マイクからの音を分析して音量を視覚化したものです。

VARアンプ。 var scale = 1.0;関数setup(){createCanvas(620、155); //音声入力を作成して開始しますmic = new p5.AudioIn(); mic.start(); //新しい振幅アナライザを作成し、入力amp = newにパッチします。p5.Amplitude(); amp.setInput(mic); noStroke();関数draw(){background(237、34、93、10); // analyze()メソッドは0から1の間の値を返すので、// map()を使用して値をより大きな数値に変換します。 //ボリュームフィル(255)に基づいて円を描きます。楕円形(幅/ 2、高さ/ 2、スケール、スケール)。 }

この本は、Taeyoon Choiの素晴らしい絵によって完成されています。それぞれの章で、彼はその中に含まれているアイデアの解釈を描きました。そして、学ぶことと理解する多くの異なる方法があることを私達に思い出させます。

この本に加えて、Reas and Fryは最近、の最新版をリリースしました。 処理入門 そして彼らは、Processing.pyプロジェクトを通してこの本をPythonに移植しているAllison Parrishと協力しています。 Processing.pyを始めよう 数ヶ月以内に利用可能になります。

Processing、p5.js、およびProcessing.pyはすべてProcessing Foundationによってサポートされています。私たちは2012年に、ビジュアルアートにおけるソフトウェアリテラシーとテクノロジー関連分野におけるビジュアルリテラシーを促進するという2つの使命をもって財団を設立しました。私たちの主な目標は、非開発者向けのコーディングへの参入障壁を下げ、あらゆる分野の人々のための視覚芸術を促進することです。

私たちは共有することに興奮しています p5.j​​sを始めよう あなたと。 p5.j​​sコミュニティは成長し進化し続けています。皆さんがその一員になれば幸いです。

Taeyoon Choiによるp5.jsコミュニティ

シェア

コメントを残します