p5.js入門チュートリアルと基本的な形状描画-jsチュートリアル-php.cn

p5.js入門チュートリアルと基本的な形状描画

亚连

リリース： 2018-05-30 10:09:47

オリジナル

3025 人が閲覧しました

この記事では、p5.js 入門チュートリアルの概要と基本的な形状の描画を主に紹介します。

1. p5.js とは

最近、p5.js を教える Interactivity というデジタルメディアアートのコースに出会いました。

講師は開発者の一人です...とても興奮しています。

p5.js は、アーティストやデザイナー向けに開発された Javascript ライブラリであり、Processing の Web バージョンとみなすことができます。 Processing を学習した経験がある場合は、p5.js をすぐに使い始めることができます。

p5.jsの使い方に関しては、私も初心者なので答えるのが難しい質問です。

私は現在、p5.js は創造性を刺激する良いツールだと考えています。p5.js のコンテンツを Web ページに埋め込んで Web サイトをより魅力的にすることができます。

2. p5.jsを使用します

p5.jsにはオンラインコードエディターがあり、URLは次のとおりです:

http://alpha.editor.p5js.org/

左にある実行ボタンをクリックすると、コードの実行効果が右側に表示されます。

p5.js アカウントを登録すると、コードを毎回公式 Web サイトに保存できるので、修正、テスト、表示に非常に便利です。

下の図は、ellipse() 関数を使用して円を描画しています:

3. p5.js を始めましょう

新しい p5.js プロジェクトを作成すると、次のコードになります。生成:

function setup() { //setup函数，每次程序开始运行时执行一次，用于初始化。 
 createCanvas(400, 400);//生成一个400x400的画布 
}  
function draw() { //draw函数，每秒运行60次，不断地在画布上绘制图形 
 background(220);//绘制背景，颜色为RGB(220,220,220) 
}

ログイン後にコピー

p5.js プログラムは、常に setup() から実行を開始します。setup() を一度実行した後、draw() 関数の連続ループ呼び出しに入ります。

構文は JavaScript とそれほど変わっておらず、呼び出す特別な関数がより多くあるだけであることがわかります。

4. 基本的なグラフィックを描画します

p5.js では、グラフィックを描画するのは非常に簡単です:

function setup() {  
 createCanvas(400, 400); 
}  
 
function draw() {  
 background(220); 
  ellipse(100,100,100,100);//绘制椭圆(x,y,宽,高) 
  triangle(150,150,150,200,200,200);//绘制三角形(x1,y1,x2,y2,x3,y3) 
  quad(180,100,200,150,270,150,250,100);//绘制四边形(x1,y1,x2,y2,x3,y3,x4,y4) 
  rect(30, 20, 50, 50);//绘制矩形(x,y,宽,高) 
  line(0,0,100,100);//绘制线段(x1,y1,x2,y2)起点至终点 
  arc(200, 50, 50, 50, 0, HALF_PI);//绘制弧(x,y,宽,高,起始角度,终止角度) 
}

ログイン後にコピー

効果は以下のようになります:

もちろん、色と塗りつぶしの色を置き換えることができ、線の太さも変更できます:

function setup() {  
 createCanvas(400, 400); 
}  
 
function draw() {  
 background(220); 
   
  stroke(255,128,128); 
  strokeWeight(5); 
  fill(255,200,0); 
  ellipse(100,100,100,100); 
  triangle(150,150,150,200,200,200); 
   
  noStroke(); 
  fill(100,255,0); 
  quad(180,100,200,150,270,150,250,100); 
  rect(30, 20, 50, 50); 
   
  stroke(0); 
  line(0,0,100,100); 
  arc(200, 50, 50, 50, 0, HALF_PI); 
}

ログイン後にコピー

効果は以下のようになります: