JSFiddle - React, Tailwind, and code Playground

by mikapon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js"></script>

JavaScript

var imgd;
function setup() {
	createCanvas(640, 480);
	background('#000')
	var c = color(255, 255, 255)
  imageMode(CENTER);
  // 加算合成
  imgd = createLight(random(0.5, 0.8), random(0.5, 0.8), random(0.5, 0.8))
}
var xx = 0;
var yy = 100

function draw() {
  blendMode(BLEND);
	background('#000')
  blendMode(ADD);
  xx+=2;
  image(imgd, xx, yy);	
}

function createLight(rPower, gPower, bPower) {
  var side = 500; // 1辺の大きさ
  var center = side / 2.0; // 中心座標
  var size = random(1, 50);
  
  var img = createImage(side, side);
  
  img.loadPixels()

  // 画像の一つ一つのピクセルの色を設定する
  for (var y = 0; y < side; y++) {
    for (var x = 0; x < side; x++) {
      // var distance = sqrt(sq(center - x) + sq(center - y));
      var distance = (sq(center - x) + sq(center - y)) / (side/size);
      var r = parseInt( (255 * rPower) / distance );
      var g = parseInt( (255 * gPower) / distance );
      var b = parseInt( (255 * bPower) / distance );
      img.set(x, y, [r, g, b, 255])
    }
  }
  img.updatePixels()

  return img;
}