p5.js でデジタルアート作品をつくろう！

担当：宮島衣瑛（みやじま きりえ）

はじめに

p5.js はWebブラウザ上で動作するアート作品を作ることができるプログラミングツールです。JavaScript（ジャバスクリプト）と呼ばれるプログラミング言語でプログラムを書いていきます。
はじめての方でもかんたんにおもしろい作品をつくることができるので、チャレンジしてみましょう！
p5.js 公式サイト https://p5js.jp/

1. はじめてのプログラミング

まずは https://editor.p5js.org/　にアクセスしましょう。

1-1. 図形を書いてみよう

エディターにアクセスすると、すでにプログラムが書かれています。まずは画面左上の▶ボタンを押して、プログラムを実行してみましょう。

プログラムを実行すると、灰色の四角が書かれました。この灰色のスペースが、このプログラムの背景です。ここにいくつかの図形を描いていきましょう。
下のプログラムのように、6行目と7行目の間に次のプログラムを追加します。

//設定をするところ
function setup() {
    createCanvas(400, 400);
}

//見た目を書くところ
function draw() {
    background(220);
    rect(200, 200, 100, 100);
}

1-2. 円を描く

円は ellipse という命令を使って書きます。

function setup() {
    createCanvas(400, 400);
}

function draw() {
    background(220);
    ellipse(50, 50, 80, 80);
}

2. くりかえし

function setup(){
  createCanvas(windowWidth, windowHeight);
  background(0);
}

function draw(){ 
  
  var circleX = 10;
  var circleY = 10;
  
  var opacity = 1;

  for(var i=0; i<30; i++){
    
    fill(255, 127, 255, 255);
    
    ellipse(circleX, circleY, 100,100);
    circleX += 20;
    circleY += 20;    
    
  } 
    
}

function setup(){
  createCanvas(windowWidth, windowHeight);
  background(0);
}

function draw(){ 
  
  var circleSize = 700;
  var opacity = 100;
  var colorB = 0;
  
  for(var i=0; i<10; i++){
    
    noStroke();
    
    fill(0, 0, colorB, 50);
    ellipse(windowWidth/2, windowHeight/2, circleSize, circleSize);
    
    circleSize -= 100;
    colorB += 50;
    
  }
  
}

3. 乱数

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

function draw(){ 
  
  noLoop();
  
  for(var i=0; i<100; i++){
    fill(random(255),random(255),random(255)); 
    rect(random(500), random(500), 50, 50)
  }
  
}

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

function draw() {
  noLoop();
  background(0);
  
  noStroke();
  
  for(var i=0; i<100; i++){
    fill(random(255),random(255),random(255));
    
    var size = random(10, 100);
    
    rect(random(500), random(500), size, size);
    
    triangle(random(500), random(500), random(500), random(500), random(500), random(500));
    
    ellipse(random(500), random(500), size);
    
  }
  
}

4. 図形を組み合わせる

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(#80BDQE);
  
  translate(200, 200);
  //rectMode(CENTER);
  
  let loopNum = 10;
  
  fill(255, 0, 255);
  
  for(var i=0; i<loopNum; i++){
    rect(0, 0, 100, 100);
    rotate(radians(360/loopNum));
  }

}

4-2. アニメーションをつける

var loopNum = 3;
let timestamp = 0;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  
  if(millis() - timestamp > 500){
    
    timestamp = millis();

    loopNum+=1;
      
    background(220);
    translate(200,200);
    
    fill(0,102,102);

    for(var i=0; i<loopNum; i++){
      rect(0, 0, 100, 100);
      
      rotate(radians(360/loopNum));
    } 
  }

}

5. インタラクティブな作品を作る

function setup() {
  createCanvas(400, 400);
}

function draw() {

  if(mouseIsPressed){
    noFill(255);
  }else{
    fill(random(0, 255), random(0,255), random(0,255));
  }
  
  ellipse(mouseX, mouseY, 40, 40);
}

画面を消すプログラムを追加する

function keyTyped(){
  if(key === "c"){
    background(255);
  }
}

参考：炭治郎模様

let num = 50;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(51, 51, 102);
  
  for(var j=0; j<num; j++){
    for(var i=0; i<num; i++){
      
      if(j%2 == 0){
        if(i%2==0){
          fill(0);
        }else{
          fill(51,153,0);
        }
      }else{
        if(i%2==0){
          fill(51,153,0);
        }else{
          fill(0);
        }
      }
      
      rect(i*num, j*num, num, num);
    }  
  }
  
}

もっと自分でやりたい人向け 💪

• https://dotinstall.com/lessons/basic_p5js
• https://www.i-ryo.com/entry/2019/06/06/205237

保管庫

アンパンマン

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

function draw() {
  background(50, 100, 255);
  
  //rect(X座標, Y座標, たて, よこ)
  
  //noStroke();
  
  fill(231, 159, 109);
  ellipse(width/2, height/2, 300, 300);
  
  fill(255, 0, 0);
  ellipse(width/4*1, height/2, 75, 75);
  ellipse(width/2, height/2, 100, 100);
  ellipse(width/4*3, height/2, 75, 75);
  
  fill(0);
  ellipse(width/5*2, height/3*1, 60, 60);
  ellipse(width/5*3, height/3*1, 60, 60);
  
  fill(137, 63, 72);
  ellipse(width/2, height/6*4,  100, 50);
  
  //strokeWeight(10);
  line(100, 100, 200, 100);
  

}

番外編：生成AIとコードを書こう

• ChatGPT にアクセスして、アカウント登録をしよう
• 「p5.js でランダムに星が光るプログラムをつくりたいです。コードを教えてください。」
  
  

let particles = [];

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(0);

  // パーティクルを更新して描画します
  for (let i = 0; i < particles.length; i++) {
    particles[i].update();
    particles[i].display();
  }

  // パーティクルの数を制限します
  while (particles.length > 100) {
    particles.shift();
  }
}

function mouseMoved() {
  // マウスの位置に新しいパーティクルを作成します
  let particle = new Particle(mouseX, mouseY);
  particles.push(particle);
}

// パーティクルクラス
class Particle {
  constructor(x, y) {
    this.position = createVector(x, y);
    this.velocity = createVector(random(-1, 1), random(-1, 1));
    this.acceleration = createVector(0, 0);
    this.color = color(random(255), random(255), random(255));
    this.size = random(5, 20);
  }

  update() {
    this.velocity.add(this.acceleration);
    this.position.add(this.velocity);
    this.acceleration.mult(0);
  }

  display() {
    fill(this.color);
    noStroke();
    ellipse(this.position.x, this.position.y, this.size);
  }
}