https://editor.p5js.org/illus0r/sketches/bgAwlQ1oE
let particles = []
function setup() {
createCanvas(400, 400)
noStroke()
colorMode(HSL, 100)
for (let i = 0; i < 99; i++) {
let particle = {
x: random() * width,
y: random() * height,
color: [random() * 100, 50 + random() * 50, 50],
}
if (random() < .1) {
particle.color = [0, 0, floor(random() * 2) * 100]
}
particles.push(particle)
}
background(220)
}
function draw() {
for (let particle of particles) {
fill(particle.color[0],
particle.color[1],
particle.color[2])
circle(particle.x, particle.y, 20)
}
noLoop()
}
let particles = []
let center = {}
function setup() {
createCanvas(400, 400)
center = {
x: width / 2,
y: height / 2
}
noStroke()
colorMode(HSL, 100)
for (let i = 0; i < 99; i++) {
let particle = {
x: random() * width,
y: random() * height,
color: [random() * 100, 50 + random() * 50, 50],
}
if (random() < .1) {
particle.color = [0, 0, floor(random() * 2) * 100]
}
particles.push(particle)
}
background(220)
}
function draw() {
// translate(width/2, height/2)
for (let particle of particles) {
fill(particle.color[0],
particle.color[1],
particle.color[2])
circle(particle.x, particle.y, 20)
let vecToCenter = new p5.Vector(particle.x - center.x, particle.y - center.y)
let vecTangent = vecToCenter.copy().rotate(PI / 2).normalize()
particle.x += vecTangent.x
particle.y += vecTangent.y
}
}
let particles = []
let center = {}
function setup() {
createCanvas(400, 400)
center = {
x: width / 2,
y: height / 2
}
noStroke()
colorMode(HSL, 100)
for (let i = 0; i < 99; i++) {
let particle = {
x: random() * width,
y: random() * height,
color: [random() * 100, 50 + random() * 50, 50],
r: random()*40,
}
if (random() < .1) {
particle.color = [0, 0, floor(random() * 2) * 100]
}
particles.push(particle)
}
background(220)
}
function draw() {
// translate(width/2, height/2)
for (let particle of particles) {
// if (particle.r < 0) continue
particle.r = 5*(noise(particle.x/100, particle.y/100,frameCount/100)-.2)
fill(particle.color[0],
particle.color[1],
particle.color[2])
circle(particle.x, particle.y, particle.r)
let vecToCenter = new p5.Vector(particle.x - center.x, particle.y - center.y)
let vecTangent = vecToCenter.copy().rotate(PI / 2).normalize()
particle.x += vecTangent.x
particle.y += vecTangent.y
}
}
https://github.com/processing/p5.js/wiki/Global-and-instance-mode
let particles = []
let center = {}
function setup() {
createCanvas(400, 400)
center = {
x: width / 2,
y: height / 2
}
noStroke()
colorMode(HSL, 100)
for (let i = 0; i < 256; i++) {
let particle = {
y: (i % 16) * width / 16,
x: floor(i / 16) * height / 16,
color: [random() * 100, 50 + random() * 50, 50],
r: random()*40+100,
rk: .89+.1*random(),
}
if (random() < .1) {
particle.color = [0, 0, floor(random() * 2) * 100]
}
particles.push(particle)
}
background(220)
}
function draw() {
// translate(width/2, height/2)
for (let particle of particles) {
if (particle.r < 0.1) continue
// particle.r -= .1*(noise(particle.x/100, particle.y/100,frameCount/100)-.2)
particle.r *= particle.rk
fill(particle.color[0],
particle.color[1],
particle.color[2])
circle(particle.x, particle.y, particle.r)
let vecToCenter = new p5.Vector(particle.x - center.x, particle.y - center.y)
let vecTangent = vecToCenter.copy().rotate(PI / 2).normalize()
let speedTangent = vecTangent.copy().mult(.4)
let speedNoise = new p5.Vector(
noise(particle.x/100, particle.y/100,frameCount/10) - .5,
noise(particle.x/100, particle.y/100,frameCount/10+999.) - .5
).mult(3)
particle.x += speedTangent.x + speedNoise.x
particle.y += speedTangent.y + speedNoise.y
}
}