220708a - OpenProcessing

mySketch
xxxxxxxxxx
 
let movers = [];
let moverNum = 1000;
let palette = [];
function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 100);
  angleMode(DEGREES);
  palette = shuffle(random(colorScheme).colors.concat());
  for (let i = 0; i < palette.length; i++) {
    palette[i] = color(palette[i]);
    // palette[i].setAlpha(5);
  }
  let offset = -width / 10;
  for (let i = 0; i < moverNum; i++) {
    let x = random(offset, width - offset);
    let y = random(offset, height - offset);
    movers.push(new Mover(createVector(x, y), shuffle(palette.concat())));
  }
  background(0, 0, 20);
  // blendMode(BURN);
}
​
function draw() {
  for (let mover of movers) {
    mover.update();
    mover.display();
  }
  for (let i = movers.length - 1; i > 0; i--) {
    let mover = movers[i];
    if (mover.life == 0) {
      movers.splice(i, 1);
    }
  }
}
​
class Mover {
  constructor(pos, colors) {
    this.pos = pos.copy();
    this.ns = 400;
    this.life = 200;
    this.lifeMax = this.life;
    this.size = random(100);
    this.colors = colors;
    this.colorsLength = int(random(2,this.colors.length));
    this.angle;
    this.freq = random(3)*(random() > 0.5?-1:1);
    this.gradient = drawingContext.createConicGradient(0, 0, 0);
    for(let i = 0; i < this.colorsLength;i++){
      this.gradient.addColorStop(i/this.colorsLength,this.colors[i]);
    }
    this.gradient.addColorStop(1, this.colors[0]);
  }
  update() {
    this.angle = noise(this.pos.x / this.ns, this.pos.y / this.ns) * 360 - 180;
    this.pos.add(p5.Vector.fromAngle(this.angle));
    this.life -= 1 / 5;
    this.life = constrain(this.life, 0, this.lifeMax);
  }
  display() {
    push();
    translate(this.pos.x, this.pos.y);
    rotate(this.angle + frameCount * this.freq);
    noStroke();
    drawingContext.fillStyle = this.gradient;
    let size = (this.size * this.life) / this.lifeMax;
    // arc(0,0,size,size,0,90);
    circle(0, 0, size);
    pop();
  }
}
​
let colorScheme = [
  {
    name: "Benedictus",
    colors: ["#F27EA9", "#366CD9", "#5EADF2", "#636E73", "#F2E6D8"],
  },
  {
    name: "Cross",
    colors: ["#D962AF", "#58A6A6", "#8AA66F", "#F29F05", "#F26D6D"],
  },
  {
    name: "Demuth",
    colors: ["#222940", "#D98E04", "#F2A950", "#BF3E21", "#F2F2F2"],
  },
  {
    name: "Hiroshige",
    colors: ["#1B618C", "#55CCD9", "#F2BC57", "#F2DAAC", "#F24949"],
  },
  {
    name: "Hokusai",
    colors: ["#074A59", "#F2C166", "#F28241", "#F26B5E", "#F2F2F2"],
  },
  {
    name: "Hokusai Blue",
    colors: ["#023059", "#459DBF", "#87BF60", "#D9D16A", "#F2F2F2"],
  },
  {
    name: "Java",
    colors: ["#632973", "#02734A", "#F25C05", "#F29188", "#F2E0DF"],
  },
  {
    name: "Kandinsky",
    colors: ["#8D95A6", "#0A7360", "#F28705", "#D98825", "#F2F2F2"],
  },
  {
    name: "Monet",
    colors: ["#4146A6", "#063573", "#5EC8F2", "#8C4E03", "#D98A29"],
  },
  {
    name: "Nizami",
    colors: ["#034AA6", "#72B6F2", "#73BFB1", "#F2A30F", "#F26F63"],
  },
  {
    name: "Renoir",
    colors: ["#303E8C", "#F2AE2E", "#F28705", "#D91414", "#F2F2F2"],
  },
  {
    name: "VanGogh",
    colors: ["#424D8C", "#84A9BF", "#C1D9CE", "#F2B705", "#F25C05"],
  },
  {
    name: "Mono",
    colors: ["#D9D7D8", "#3B5159", "#5D848C", "#7CA2A6", "#262321"],
  },
  {
    name: "RiverSide",
    colors: ["#906FA6", "#025951", "#252625", "#D99191", "#F2F2F2"],
  },
];
​