p5.jsとは？

processingがブラウザでできるようになったよ、みたいなやつ。

準備

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>p5.js practice</title>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/addons/p5.dom.min.js"></script>
  <script src="try1.js"></script>
</body>
</html>

try1.js

function setup(){
  ////描画範囲指定
  createCanvas(windowWidth, windowHeight); 
  //背景色指定
  background('gray');
  //円描画（位置指定x軸,位置指定y軸,円の縦幅指定,円の横幅指定）
  ellipse(windowWidth/2, windowHeight/2, 72, 72); 
}

function draw(){
}

これだけで・・・はじめられる！
円の描き方などはrefferenceとか、processingを参考にしましょう。

コミュニティ　openprocessing

processingのいいところはコミュニティが発展しているところ。
誰かが作ったexampleを触ってみたい人はopenprocessingで探しましょう。
基本的にはprocessingで書かれているので、p5.jsで実行するには書き換えなければならないですが、
ちらほらp5.jsで書かれているものもあります。

検索して・・・

実行したいものを見つけて・・・

コードも公開されているのでコピペして

触ってみましょう

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>p5.js practice</title>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/addons/p5.dom.min.js"></script>
  <script src="try2.js"></script>
</body>
</html>

try2.js

//walker object
function Walker() {
  //temp nx, ny value holders
  var nxloc;
  var nyloc;

  //original values
  this.xloc = windowWidth / 2;
  this.yloc = windowHeight / 2;
  //generate walker direction
  this.move = function() {
    //choose integer 1-8 for direction: 1- 0 degrees, 2- 45 degrees, 3- 90 degrees etc.
    var dir = floor(random(1, 9));
    var t = random(0, 800);
    //generate temp nx, ny values based on dir
    switch (dir) {
      case 1:
        nxloc = this.xloc + t;
        break;
      case 2:
        nxloc = this.xloc + t;
        nyloc = this.yloc + t;
        break;
      case 3:
        nyloc = this.yloc + t;
        break;
      case 4:
        nyloc = this.yloc + t;
        nxloc = this.xloc - t;
        break;
      case 5:
        nxloc = this.xloc - t;
        break;
      case 6:
        nxloc = this.xloc - t;
        nyloc = this.yloc - t;
        break;
      case 7:
        nyloc = this.yloc - t;
        break;
      case 8:
        nxloc = this.xloc + t;
        nyloc = this.yloc - t;
    }
    //draw line
    line(this.locx, this.locy, nxloc, nyloc);
    //scaled 3x line
    line(this.locx * 3, this.locy * 3, nxloc * 3, nyloc * 3);
    //ensure walker does not go off of canvas
    if (this.xloc < 0 || this.nxloc < 0 || this.xloc > windowWidth || this.nxloc > windowWidth || this.yloc < 0 || this.nyloc < 0 || this.yloc > windowHeight || this.nyloc > windowHeight) {
      this.xloc = windowWidth / 2;
      this.yloc = windowHeight / 2;
      this.nxloc = windowWidth / 2;
      this.nyloc = windowHeight / 2;
    }
    //re-enter walker with new x,y values
    this.locx = nxloc;
    this.locy = nyloc;
  }

}

function setup() {
  createCanvas(windowWidth, windowHeight);
  //set density for pixels[] manip
  pixelDensity(1);
}

function draw() {

  background(-frameCount % 200, 24, 0, .5);
  fill(random(122, 255));
  //ground
  rect(-10, windowHeight / 1.4, windowWidth + 20, windowHeight / 1.4);
  //little explosions
  for (var g = 0; g < 2; g++) {
    ellipse(random(0, windowWidth), random(0, windowHeight), random(2, 50));
  }
  //text stuff, self explanitory
  textSize(windowWidth / 5);
  var word = "P5.js";
  word = word.toUpperCase();
  textFont("Helvetica");
  //draw rainbow layers of 3d text
  for (var c = 0; c < 8; c++) {
    fill(random(0, 255), 255, 255);
    text(word, windowWidth / 2, windowHeight / 1.4);
    translate(c * .5, c * .5);
  }
  //text-align
  textAlign(CENTER);
  //blacked out layer on top
  fill(0);
  text(word, windowWidth / 2, windowHeight / 1.4);
  //fill for big moon circle behind text
  fill(random(144, 255), random(128, 255), random(200, 255), .07);

  //big moon
  ellipse(random(-6, 6) + windowWidth / 3, random(-6, 6) + windowHeight / 5, random(150, 160));

  //shooting stars shapes
  beginShape();
  vertex(windowWidth / 2, windowHeight / 2);
  noFill();
  for (var b = 0; b < 4; b++) {
    curveVertex(random(0, windowWidth), random(0, windowHeight));
  }
  endShape();
// instantiate walker
  var walker = new Walker();
  var walker2 = new Walker();
  for (var i = 0; i < 4; i++) {

    colorMode(HSB);
    stroke(frameCount % 200, 255, 255);

    fill(frameCount % 200, 255, 255)
    walker.move();
    //translate(-windowWidth/6,-windowHeight/6);
    walker2.move();
    //scale(-cos(PI/.4)*PI^2)
    ellipse(walker.locx, walker2.locy, random(2, 20));

  }
//pixel manip
  loadPixels();
  for (var x = 0; x < width; x++) {
    for (var y = 0; y < height; y++) {
      var index = (x + y * width) * 4;
      if (pixels[index - 4] < pixels[index + 1]) {
        pixels[index - 2] = random(255);
        pixels[index + 4] = random(200, 255);
        pixels[index + 5] = random(255) * -y;
      }

      if (pixels[index] > 240) {
        pixels[index + 1] = random(0, 100);
        pixels[index - 1] = random(0, 100) * 2;

      }
    }

  }
  updatePixels();
  smooth();

}

実行！

誰かのコードをいじってみる

try2.jsのコードをいじってみましょう。

文字の部分を変えてみたり・・・

元コード.js

var word = "P5.js";

元コード.js

var word = "HELLO";

月の大きさを２倍に変えてみたり・・・

元コード.js

  //big moon
  ellipse(random(-6, 6) + windowWidth / 3, random(-6, 6) + windowHeight / 5, random(150, 160));

元コード.js

  //big moon
  ellipse(random(-6, 6) + windowWidth / 3, random(-6, 6) + windowHeight / 5, random(150*2, 160*2));

誰かのコードを参考に、
好きなものを作っていきましょう。
3D描画や、音、カメラなども使ってるexampleも多いので楽しみましょう

p5.jsとは？

準備

コミュニティ openprocessing

誰かのコードをいじってみる

文字の部分を変えてみたり・・・

月の大きさを２倍に変えてみたり・・・

コミュニティ　openprocessing