P 5による創造的符号化入門js

5754 ワード

computerscience codepen webdev javascript テキストリンク

プロセスを作成するプロセスを作成する
クリエイティブコーディングは、あなたが本当にそれに調整する場合中毒性です!それは非常に可能性があります、そして、私はこの記事を書くことに決めました.そして、P 5と呼ばれているJavaScriptライブラリで、この素晴らしいジャンルにあなたのすべてを紹介しました.あなたは、これまで以上に芸術的にあなたの聴衆に通信することができます!

何がクリエイティブコーディング？

私の言葉では、クリエイティブコーディングは、コードの助けを借りて、いくつかのアート、パターン、背景、モデル、スケッチ、データの可視化、アニメーションなどを作成しています.それはコードで機能的ではなく表現的なものを作ることについてです.クリエイティブコーディングは、技術、アート、デザインの交差点です.
それを得なかったか.例を示しましょう.

あなたはたった今考えなければなりません:「whattt?これらの芸術形はコードから作られます?私はそれを信じられません!」それは私が最初に考えていたが、一度この美しい練習に入ると、どのように自然そのものが最終的には、最終的には、我々はコーディングで何をすべきであるこの世界を作る反復的なプロセスの束です理解するために開始されます右?我々は、我々の問題を解決するためのアルゴリズムを作成します.クリエイティブコーディングの変更は、アートの形で何かを表現するアルゴリズムを作成することです.

p 5。js

あなたはC++でクリエイティブコーディングを行うことができます!しかし、それはそのために意味されません、したがって、我々は特に創造的なコーディングのためにフレームワークを持っています.Processing これは最も有名なプラットフォームであり、Javaを使用していますが、他の言語でも他のバリアントもありますp5.js Web上でのクリエイティブコーディングに使用するプラットフォームです.それは明らかに、JavaScriptを使用するので、これはWeb開発者は非常に簡単に開始され、これは主な理由はLauren McCarthy . それで、始めましょう.
クイックスタートのためにp5.js web editor . P 5エディタがあるので、いくつかのコードに入りましょう.したがって、p 5で最も重要な2つの関数があります.

setup ()

draw ()

setup ()はプログラムの開始時に一度だけ実行される作り付けの関数です.また、draw ()はループで実行される作り付けの関数でもあります.個別に理解しましょう.
関数setup ()
これは私たちが最初にやりたいことを一度だけ入れた機能です.これは基本的には、画面サイズ、背景色のような環境や物事を設定します.js非常に一般的な設定関数は次のようになります.

function setup(){
 createCanvas(500,500);
 background(120);
}

ご覧の通り、我々には機能がありますcreateCanvas() , これは500 x 500単位のキャンバスを作成し、background() 関数は、キャンバスの色を設定します.単一の引数を指定すると、0から255までの値、0が黒、255が白になります.つの引数を提供するならば、それはRGBカラー表記法を使います.
2 .関数draw ()
これはほとんどのアクションが起こるところです.ここでは、我々は最終的なアートワークを作るために様々な機能、ループ、および自己作成アルゴリズムを使用します.あなたは音、データ、ウェブカメラ、センサー、および他のものと対話することができますあなたのスケッチでそれをインタラクティブにするために補間するが、それはこの記事の範囲外です.したがって、行、円、四角形、または任意の図形を描画したい場合は、以下の関数を持ちます.

function draw(){
  fill(233,11,44); // color to fill the shapes
  stroke(1); // stroke color
  strokeWeight(2);
  line(20,20,160,60); // line from (20,20) to (160,60)
  fill(23,44,223); 
  rect(170,170,120,70); // rectangle on (170,170) with 120x70 size
  fill(223,212,44);
  ellipse(120,130,100,100); // ellipse on (120,130) with height 100 and width 100, which makes it a circle
  noLoop();
}

したがって、上記のコードは次のようになります.

機能は自己説明であり、コメントによってあなたは何が起こっているか理解しているかもしれません.noloop ()と呼ばれる関数の末尾に一つの関数がありました.これは実際にDraw ()関数が無限に動くのを止めます.これは実行したいシナリオで有用ですdraw() 特定の回数の間.
P 5にも作り付けの変数があります.これは我々のスケッチに複雑さを加えることができます.それらのいくつかはMousexとMouseyです.これらはマウスカーソルのX座標とY座標を格納するための変数です.
このスケッチを見てください.

function setup() {
  createCanvas(400, 400);
  background(200);
}
function draw(){
  fill(233,11,44);
  stroke(1); 
  strokeWeight(2);
  makeShapes();
}
function makeShapes(){
  fill(random(200),random(200),random(200));
  ellipse(mouseX,mouseY,50,50);
  rect(mouseX,mouseY,120,70);
}

結果: