Interactive Logos Fork - OpenProcessing

main.js
particle.js
utils.js
xxxxxxxxxx
 
/*
Interactive logos
​
jasonlabbe3d.com
twitter.com/russetPotato
*/
//changed visa.png to be an image of the Youtube logo
//changes to code start at line 84
​
const SPIN_MULTIPLIER = 45;
const MIN_PARTICLE_COUNT = 200;
const MAX_PARTICLE_COUNT = 700;
const MIN_PARTICLE_SIZE = 12;
const MAX_PARTICLE_SIZE = 50;
const MIN_FORCE = 0.4;
const MAX_FORCE = 0.6;
const REPULSION_RADIUS = 100;
const REPULSION_STRENGTH = 0.25;
const IMG_RESIZED_WIDTH = 300;
const IMG_SCAN_STEPS = 2;
​
const DrawTypes = {
  Rect: 0,
  Ellipse: 1,
  Triangle: 2
};
​
var imgNames = ["facebook.png", "amazon.png", "twitter.png", "visa.png", "mcdonalds.png", "mastercard.png"];
var particles = [];
var indices = [];
var imgIndex = 0;
var drawType = 0;
var particleCount = 550;
var maxSize = 0;
var img;
​
function setup() {
  let canvas = createCanvas(windowWidth, windowHeight);
  canvas.canvas.oncontextmenu = () => false;
  loadImg(imgNames[0]);
}
​
function draw() {
  background(0);
  
  fill(255);
  noStroke();
  text(
    `
    ** How to interact **
    Move mouse over to interact with it.
    
    ** Controls **
    Left-click : Switch image
    Right-click: Show source image
    + : Increase count
    - : Decrease count
    Space: Change particle type`, 
    50, 50);
  
  if (img == null) {
    return;
  }
  
  push();
  translate(width / 2 - img.width / 2, height / 2 - img.height / 2);
  
  fill(255);
  noStroke();
  
  rectMode(CENTER);
  
  particles.forEach(particle => {
    particle.move();
    
    push();
    translate(particle.pos.x, particle.pos.y);
    
    let spin = particle.vel.mag() * SPIN_MULTIPLIER;
    rotate(radians(particle.mapped_angle + spin));
    
    fill(particle.color);
    
    switch(drawType) {//changed all case drawings to make the plus signs, eyes, and arrows.
      case DrawTypes.Ellipse://Ellipse now makes eye-like shapes
        ellipse(0, 0, particle.size, particle.size);
        quad(-particle.size, 0, 0, particle.size,particle.size,0,0,particle.size*0.5);
        quad(-particle.size, 0, 0, -particle.size,particle.size,0,0,particle.size*-0.5);
        break;
      case DrawTypes.Rect://Rect will now make plus signs
        rect(0, 0, particle.size*0.25, particle.size);
        rect(0, 0, particle.size, particle.size*0.25);
        break;
      case DrawTypes.Triangle://Triangle will now make arrows.
        triangle(particle.size * -0.5, particle.size * -0.5, 0, particle.size, particle.size * 0.5, particle.size * -0.5);
        triangle(particle.size*0.5, particle.size*0.5, 0, particle.size, particle.size*-0.5,particle.size*0.5);
        
        /////////////////this next section is taken from https://openprocessing.org/sketch/1695925 and then modified to avoid freezing.
        let p = [];
  f = frameCount;
        for (y = 100; y < 200; y += 20) {//I lowered the number of loops to prevent extreme lag
    beginShape();
    for (x = 0; x < 36; x += 6) {//I lowered the number of loops here as well. the result of this is a cool particle field effect around the arrows
      dy = (80 / (1 + pow(x - 150, 4) / 8e6)) * noise(x / 30 + f / 50 + y);
      p.push({ x, y: y-dy });
      vertex(x, y-dy);
    }
    endShape();
  }/////////////////////////////////////////////////////////////////////////////////////////////////////////////
    }
    
    pop();
  });
  
  rectMode(CORNER);
  
  if (mouseIsPressed && mouseButton == RIGHT) {
    image(img, 0, 0);
  }
  
  pop();
}
​
function keyPressed() {
  if (key == '+') {
    particleCount = min(particleCount + 50, MAX_PARTICLE_COUNT);
    spawnParticles();
  }
  
  if (key == '-') {
    particleCount = max(particleCount - 50, MIN_PARTICLE_COUNT);
    spawnParticles();
  }
  
  if (key == ' ') {
    nextDrawType();
  }
}
​
function mousePressed() {
  if (mouseButton == LEFT) {
    loadNextImg();
  }
}