p5-sandbox - microorganism

p5-sandbox - microorganism.markdown

p5-sandbox - microorganism

A Pen by P-Chan on CodePen.

License.

script.js

// Num
const pointNum = 300;

// Size
const pointSizeMax = 10;
const pointSizeMin = 5;

// Store
let pointStore = [];

var x = 0;
var y = 0;

function setup() {
  // canvas
  createCanvas(windowWidth, windowHeight);

  // init point
  for (var i = 0; i < pointNum; i++) {
    const point = {
      x: random(0, windowWidth),
      y: random(0, windowHeight),
      size: random(pointSizeMin, pointSizeMax)
    }
    pointStore.push(point);
  }
}

function draw() {
  // re-rendering
  background('#27ae60');

  // start
  for (var i = 0; i < pointNum; i++) {
    const p = pointStore[i];
    ellipse(p.x, p.y, p.size, p.size);
  }

  // move
  for (var i = 0; i < pointNum; i++) {
    const moveX = random(-1, 1);
    const moveY = random(-1, 1);

    pointStore[i].x += moveX;
    pointStore[i].y += moveY;
  }
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>

style.css

html {
  height: 100%;
  width: 100%;
}

body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #000;
}