Particle Canvas

let paused = false;

let instruction = true;

let colorB; //color of background

let colorSet = [ '#001121', '#f7f8ff', '#8c44eb'];

let diffusion = [];

let field; //stores vector field

let particles; //particle system object

let poolSize = 3000; //howmany particles are in canvas

let qt; //quadtree object for particle

​

var GUIToggle = {

  ShowControllUI : false

};

​

var drawControl = { //control variable for all

  clearCanvas : false,

  backGroundCol : ["Dark", "Light"],

  particleColMode : ["Velocity", "Position", "Black", "White"], //change how color is mapped

  drawingMethod : ["Lines", "Rectangle", "Circle", "Point"], //diffent method to draw the particle

  lineCap : 2, //how many lines can be drawn per particle

  lineCapMin : 1,

  lineCapMax : 3,

  particleCount : 800,

  particleCountMax : 5000,

  particleDecay : false,

  particleDecayRate : 250,

  particleDecayRateMin : 30,

  particleDecayRateMax : 800,

  particleSpawn : ["Side", "Center", "Cross", "Random"], //set spawn location of new particles

  particleSize : 15,

  particleSizeMin : 1,

  alphaSliderParticle : 200,

  alphaSliderParticleMin : 0,

  alphaSliderParticleMax : 255,

  alphaSliderBackground : 20,

  alphaSliderBackgroundMin : 0,

  alphaSliderBackgroundMax : 255,

  frameRateToggle : false,

  showQuadTree : false

}

var forceControl = {

  pullToggle : false, //pulls everything to center

  pushToggle : false, //push everything from center

  turbulanceToggle : true, //add some random force

  fieldToggle : true, //defult field is perlin

  fieldType : ['PerlinNoise', 'Swirl', 'Wave1', 'Wave2', 'Wave3', 'Wave4'], //set different type of fields

  fieldDynamics : 2,

  fieldDynamicsMin : 0,

  fieldDynamicsMax : 3,

  fieldDynamicsStep : 0.01,

  fieldUpdate : 0.01, //how often field change

  fieldUpdateMin : 0,

  fieldUpdateMax : 0.1,

  fieldUpdateStep : 0.0001,

  fieldStrengh : 0.02,

  fieldStrenghMin : 0,

  fieldStrenghMax : 0.1,

  fieldStrenghStep : 0.001,

  quadTreeCapacity : 10, //capacity of each boundary before splitting

  quadTreeCapacityMin : 1,

  quadTreeCapacityMax : 50

}

​

function createMetaTag() {

  let meta = createElement('meta');

  meta.attribute('name', 'viewport');

  meta.attribute('content', 'user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width,height=device-height');

​

  let head = select('head');

  meta.parent(head);

}

​

function setup() {

  createMetaTag();

  createCanvas(window.innerWidth, window.innerHeight);

  //createCanvas(800, 800);

  colorB = color(colorSet[0]);

  background(colorB);

  ellipseMode(CENTER);

  rectMode(CENTER);

​

  //quadtree

  let boundary = new Rectangle(width / 2, height / 2, width, height);

  qt = new QuadTree(boundary, forceControl.quadTreeCapacity);

​

  //parameter: resolution of field

  field = new FlowField(20);

​

  //parameters: number of parciels, size of particle, placeholder, field, color, health of particles

  particles = new ParticleSystem(poolSize, drawControl.particleSize, 0, field, color(colorSet[0]), 100);

​

  //gui

  gui1 = createGui('Drawing Control'); //Creat UI

  gui1.addObject(drawControl);

  gui1.setPosition(205, 100); //position for UI

  gui2 = createGui('Force Control'); //Creat UI

  gui2.addObject(forceControl);

  gui2.setPosition(205*2, 100);

  guiToggle = createGui('Toggle UI');

  guiToggle.addObject(GUIToggle);

  guiToggle.setPosition(0, 300);

}

​

function draw() {

  if (!GUIToggle.ShowControllUI) {

    gui1.hide();

    gui2.hide();

  } 

  else {

    gui1.show();

    gui2.show();

  }

  //draw a background with alpha value

  if (drawControl.backGroundCol == "Dark") {

    colorB = color(colorSet[0]);

  } else if (drawControl.backGroundCol == "Light") {

    colorB = color(colorSet[1]);

  }

  colorB.setAlpha(drawControl.alphaSliderBackground);

  background(colorB);

​

  //quadtree setup

  qt.capacity = forceControl.quadTreeCapacity; //set how many particles a boundary box can contain before dividing

  qt.clear();

  particles.quadTreeInsert(qt);

  if (drawControl.showQuadTree) qt.show();

​

  //particle update here

  particles.update(diffusion, drawControl);

  particles.poolSizeControl(); //methode balances particle count

  particles.setPoolSize(drawControl.particleCount); //set particle numbers

  particles.setHealth(drawControl.particleDecayRate);

​

  //field controls

  if (forceControl.fieldToggle) { //field control here

    field.update(forceControl.fieldUpdate); //rate of change for field

    field.setDyn(forceControl.fieldDynamics); //dynamics of field

    field.setMags(forceControl.fieldStrengh); //controls strengh of field

  }

​

  //clear canvas if toggled

  if (drawControl.clearCanvas == true) {

    colorB.setAlpha(255);

    background(colorB);

  }

  if (drawControl.frameRateToggle) showFrameRate();

​

  //introcution

  if (instruction) introduction();

}

​

function introduction() {

  let cx = width / 2 - 300;

  let cy = height / 2 - 20;

  let gap = 25;

​

  let title = "Particle Canvas"

  let instructions = "Press P to pause, S to save, R to switch color, ArrowKey for wind"

  let haveFun = "Combine different settings to create your own painting!!"

  let pressToContinue = "Press anywhere to continue"

​

  background(0, 150);

  fill(255);

  stroke(0);

  textSize(40);

  text(title, cx, cy);

  textSize(20);

  text(instructions, cx, cy + gap);

  text(haveFun, cx, cy + gap*2);

  text(pressToContinue, cx, cy + gap*3);

}

​

function keyPressed() {

  if (key === 'p') {

    paused = !paused;

    if (paused == true) noLoop();

    else loop();

  }

  if (key === 's') save();

  if (key === 'r') particles.randomizeCol(); //randomize color gradient

}

​

function mousePressed() {

  instruction = false;

}

​

function showFrameRate() { //shows current frameRate

  let fps = frameRate();

  fill(255);

  stroke(0);

  textSize(12);

  text("FPS: " + fps.toFixed(0), 10, height - 10);

}