let particles = [] // const palettes = [['#0FDFF2', '#FF19B3'], ['#ED3C2F', '#5212FF']] // const palettes = [['#0FDFF2', '#C49BD2', '#FF19B3'], ['#ED3C2F','#C41897', '#5212FF']] const palettes = [['#32FFFD', '#00C8FF', '#F600FE'], ['#ED3C2F','#F10086', '#5212FF']] // const palettes = [['#32FFFD', '#00C8FF', '#F600FE'], ['#ED3C2F','#DE4CB9', '#1290FF']] let flowfield let centerPos function setup() { createCanvas(windowWidth, windowHeight); background(color(255)) colorMode(RGB, 255, 255, 255, 100) rectMode(CENTER) centerPos = createVector(width/2*0.6, height/2*1.2) flowfield = new FlowField() let samplings = [] for(let i = 0; i < 1; i++) { let diskSampling = new PoissonDiskSampling({ shape: [width*2, height*2], minDistance: 20, maxDistance: 20, tries: 20 }) samplings = samplings.concat(diskSampling.fill()) } // samplings = shuffle(samplings) for(sampling of samplings) { sampling.push(dist(sampling[0] - width/2, sampling[1] - height/2, centerPos.x, centerPos.y)) } samplings.sort(function(a,b){ if( a[2] < b[2] ) return -1; if( a[2] > b[2] ) return 1; return 0; }) for(pos of samplings) { particles.push(new Particle(pos[0] - width/2, pos[1] - height/2, flowfield)) } } function keyPressed() { saveCanvas('zyuzu', 'png') } function draw() { /* parallel version */ // for(let j = 0; j < particles.length; j++) { // particles[j].update(frameCount) // if(particles[j].isDead) { // particles.splice(j, 1) // j-- // } else { // particles[j].show() // } // } /* sequence version */ for(let j = 0; j < 10 && particles.length > 0; j++) { particles[0].showWhole() particles.shift() } } function shiftColor(col, range) { let shiftRange = range let shiftedRed = constrain(red(col) + shiftRange[0] + (shiftRange[1] - shiftRange[0]) * (random()), 0, 255) let shiftedGreen = constrain(green(col) + shiftRange[0] + (shiftRange[1] - shiftRange[0]) * (random()), 0, 255) let shiftedBlue = constrain(blue(col) + shiftRange[0] + (shiftRange[1] - shiftRange[0]) * (random()), 0, 255) return color(shiftedRed, shiftedGreen, shiftedBlue) } class Particle { constructor(_x, _y, flowfield) { this.pos = createVector(_x, _y) // this.size = 30 * (1 - sq(random())) this.size = 35 * (0.2 + 0.8*(1 - sq(random()))) this.rotAng = random(TAU) this.isDead = false this.lifeMax = ceil(random(120, 150)) this.life = this.lifeMax this.flowfield = flowfield let palette = random() < 0.5 ? palettes[1] : palettes[0] this.cols = [shiftColor(color(palette[0]), [-10, 20]), shiftColor(color(palette[1]), [-10, 20]), shiftColor(color(palette[2]), [-10, 20])] this.baseColFactor = map(this.pos.y / height + 0.2 * random(-1, 1), -0.2, 1.2, 0, 1) // this.baseColFactor = this.pos.y / height // this.baseColFactor = random() } update(tick) { let moveStep = 1 let moveAng = this.flowfield.getAng(this.pos.x, this.pos.y, tick/2) this.pos.add(createVector(moveStep * cos(moveAng), moveStep * sin(moveAng))) this.life-= 1 if(this.life < 0 || this.outOfArea()) { this.isDead = true } } show() { let curSize = this.size * tipping(this.life, this.lifeMax) let curColorFactor = this.baseColFactor + 0.15 * (this.life - this.lifeMax/2)/(this.lifeMax/2) push() noStroke() translate(this.pos.x, this.pos.y) rotate(this.rotAng) // for(let i = 0; i < 4; i++) { // let col = lerpColor(color(palettes[i % 2][0]), color(palettes[i % 2][1]), curColorFactor) // fill(col) // triangle(0, 0, curSize/2, -curSize/2, curSize/2, curSize/2) // rotate(PI/2) // } fill(lerpColor3(this.cols, sinEasing(curColorFactor))) rect(0, 0, curSize, curSize) pop() } /* sequenceversion */ showWhole() { let startPos = this.pos.copy() for(this.life = this.lifeMax/2; this.life < this.lifeMax; this.life++) { this.show() let moveStep = 1 let moveAng = this.flowfield.getAng(this.pos.x, this.pos.y, floor(this.life)) this.pos.add(createVector(moveStep * cos(moveAng), moveStep * sin(moveAng))) } this.pos = startPos.copy() for(this.life = this.lifeMax/2; this.life > 0; this.life--) { this.show() let moveStep = 1 let moveAng = this.flowfield.getAng(this.pos.x, this.pos.y, floor(this.life)) + PI this.pos.add(createVector(moveStep * cos(moveAng), moveStep * sin(moveAng))) } } outOfArea() { return this.pos.x < width * -0.5 || this.pos.x > width * 1.5 || this.pos.y < height * -0.5 || this.pos.y > height * 1.5 } } function decoCircle() { let circleSize = random(100, width * sqrt(2)) let circleWidth = random(20, 60) push() noFill() stroke(255) circle(centerPos.x, centerPos.y, circleSize - circleWidth / 2) circle(centerPos.x, centerPos.y, circleSize + circleWidth / 2) pop() } function lerpColor3(pal, amp) { let col if(amp < 0.5) { col = lerpColor(color(pal[0]), color(pal[1]), amp * 2) } else { col = lerpColor(color(pal[1]), color(pal[2]), (amp - 0.5) * 2) } col = shiftColor(col, [0, 50 + sq(abs(amp)) * 120]) return col } function sinEasing(amp) { if(amp < 0) { return 0 } else if(amp > 1) { return 1 } else { return sin(amp * PI/2) } } function tipping(amp, maxVal) { let distEnd = maxVal/2 - abs(amp - maxVal/2) return distEnd / maxVal*2 } class FlowField { constructor() { this.xChange = radians(36*2) this.yChange = radians(72*2) this.StartAngle = -this.xChange/2 - this.yChange/2 this.leftX = width * -0.5 this.rightX = width * 1.5 this.topY = height * -0.5 this.bottomY = height * 1.5 } getAng(_x, _y, _z) { let tideCenter = centerPos let vecAng = (noise(_x*0.001, _y*0.001, _z*0.002) *2-1) * PI/2 * min(1, sqrt(dist(_x, _y, tideCenter.x, tideCenter.y) / 150)) vecAng += atan2(_y - tideCenter.y, _x - tideCenter.x) + PI/2 return vecAng } }

Longing for Brilliance