p5.js test

by Yukino Song

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/addons/p5.sound.min.js"></script>
Scroll mouse wheel to adjust size
<br>
Click and hold to adjust opacity

CSS

* {
  user-select: none;
}

JavaScript

let size = 60
let opacity = 50
const osc1 = new p5.Oscillator()
const osc2 = new p5.Oscillator()
const reverb = new p5.Reverb()

osc1.setType('square')
osc2.setType('sine')
osc1.amp(0)
osc2.amp(0)
osc1.connect(reverb)
osc2.connect(reverb)
osc1.start()
osc2.start()

const circles = []

const remove = (item) => {
  item.opacity = 0
	const index = circles.indexOf(item)
  if (index > -1) {
		circles.splice(index, 1)
		return item
	}
}

const circle = class {
	constructor(x, y, size, opacity) {
  	this.x = x
    this.y = y
    this.size = size
    this.opacity = opacity
  }
}

const expand = (item) => {
  item.size += 3
  item.opacity -= 1
  if (item.opacity < 0) remove(item)
}

const setup = () => {
	createCanvas(640, 480)
  background(0, 255, 250)
  stroke(255)
  fill(255, 0)
}

const draw = () => {
	const mix = size / 150
  osc1.amp((1 - mix) * (opacity - 50) / 255)
  osc2.amp(mix * (opacity - 50) / 255)

	stroke(255)
	if (opacity > 250) opacity = 250
  if (opacity < 55) opacity = 55
	background(0, 180, 150)
	if (mouseIsPressed) {
  	let pan = mouseX / (width / 2) - 1
    if (pan < -1) pan = -1
    if (pan > 1) pan = 1

		const freq = 260 + mouseY
    osc1.pan(pan)
    osc1.freq(freq)
    osc2.pan(pan)
    osc2.freq(freq)

  	stroke(255, opacity += 5)
    circles.push(new circle(mouseX, mouseY, size, opacity))
  }
  else stroke(255, opacity -= 5)
  
	ellipse(mouseX, mouseY, size)
  
  for (let i of circles) {
  	expand(i)
    stroke(255, i.opacity)
    ellipse(i.x, i.y , i.size)
  }
}

const mouseWheel = (e) => {
	size += e.delta / 10
  if (size < 5) size = 5
  if (size > 150) size = 150
}

const methods = {
	setup,
  draw,
  mouseWheel
}

Object.assign(window, methods)