p5.js – ネオン管

ネオン管のようなものが描けないかと思い、作ってみました。

マウスの上下で線の太さ、左右で鮮やかさ、クリックで色相が変わります。

それっぽくするには、もう少し工夫が必要ですかね。

ソースです。

'use strict';

let hue = 0;

function setup() {
  createCanvas(300, 300);
  noFill();
  background(0);
  colorMode(HSB);
}

function draw() {
  background(0);

  const maxWeight = Math.abs(height / 2 - mouseY) * 2;
  for( let i = maxWeight; i >= 1; i-- ) {
    let brightness = map(i, 1, maxWeight, 100, 50);
    let saturation = map(mouseX, 0, width, 0, 100);
    let alpha = map(i, 1, maxWeight, 1.0, 0.5);
    let weight = map(i, 1, maxWeight, 1, maxWeight);
    stroke(hue, saturation, brightness, alpha);
    strokeWeight(weight);
    line(0, height/2, width, height/2);
  }

}

function mouseClicked() {
  hue = random(0, 360);
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です