Blend - OpenProcessing

mySketch
xxxxxxxxxx
 
// BLEND(mode) - DIFFERENCE
// for @sableRaph's creative coding challenge (theme: BLEND)
// https://twitter.com/sableRaph/status/1399447845334355968?s=20
​
// ❗❗❗❗ BUILT-IN INTERACTION
// Press 1, 2, 3, 4 on the keyboard for different shapes
// Press <spacebar> to change the number of overlayed shappes (hidden or inverted patterns starting shapes)
 
let PERIOD = 200; // frames per loop
let sketchNum = 2; //default value (1,2,3)
let blendNum = 2; // 2 makes the shapes BLEND into the background, 1 makes them stand out (alternate stripes)
let exampleMode = true;
​
function setup() {
  let minHW = min([windowHeight, windowWidth]) //learned this trick from @sableraph, love it!
  createCanvas(1112, 834);
  colorMode(HSB) // HSB FTW!
}
​
function draw() {
  blendMode(DIFFERENCE) // 
  let t = ((frameCount - 1) / PERIOD) % 1; //normalized loop time
  clear(); //
  background(0) // black background
  translate(width / 2, height / 2) // move to the middle
​
  
  // DRAW BACKGROUND WHITE HORIZONTAL LINES 📏📏📏
  let lineNum = 10; //number of horizontal white lines
  for (let h = 0; h < height; h += height / lineNum) {
    stroke(255)
    strokeWeight(width / lineNum / 2)
    line(-width / 2, -height / 2 + h + width / lineNum / 4, width / 2, -height / 2 + h + width / lineNum / 4)
  }
  noStroke();
​
  
  switch (sketchNum) { // 3 different sketch options 1 - circles, 2 - squares, 3 - wedges
​
    //////////
    // CASE 1 - CIRCLES! 🔴🟢🔵
    /////////
    case 1: 
      rotate(TAU * t); // rotate the whole sketch - 1 revolution per loop
      for (let c = 0; c < 3; c++) { // for three colors - red,green,blue
        fill(c * 120, 100, 100) // HSB color
        for (let n = 0; n < 3 * blendNum; n++) { // n = number of circle shapes
          push()
          let tStart = .1 * (n % 3); // start/end time for circle motion
          let tEnd = tStart + .8;
          let d = 0.6 * width * ((n % 3) + 1) / 3; // circle diameter
          rotate((c + 3 * floor(n / 3)) / (3 * blendNum) * TAU)
          translate(d / 10 * sq(sin(map(t, tStart, tEnd, 0, PI, true))), 0)
          circle(0, 0, d)
          pop();
        }
      }
      break;
​
      
    //////////
    // CASE 2 - SQUARES! 🟥🟩🟦
    /////////
    case 2: 
      for (let c = 0; c < 3; c++) { // for three colors - red,green,blue
        fill(c * 120, 100, 100)
        for (let n = 0; n < (2 + blendNum); n++) { // number of rectangle shapes
          push();
          let tStart = 0.005 * c + .1 * n; // start/stop time for motion
          let tEnd = tStart + .5;
          rotate(PI * sq(sin(map(t, tStart, tEnd, 0, PI / 2, true))))
          rect(0, 0, .7 * width / 2)
          rotate(PI)
          rect(0, 0, .7 * width / 2)
          pop();
        }
      }
      noStroke();
      break;
​
      
    //////////
    // CASE 3 - WEDGES! 🥧
    /////////
    case 3:
      rotate(TAU * t);
      for (let c = 0; c < 3; c++) { // for three colors - red,green,blue
        fill(c * 120, 100, 100)
        for (let n = 0; n < (3 * blendNum); n++) { // number of wedge shapes
          push();
          rotate(TAU * n / 3)
          let tStart = 0.2 * c + .05 * floor(n / 3); // start/stop time for motion
          let tEnd = tStart + .4;
          rotate(TAU / 3 * sq(sin(map(t, tStart, tEnd, 0, PI / 2, true)))) // rotate wedge
          arc(0, 0, .8 * width, .8 * width, 1.5 * PI - PI / 6, 1.5 * PI + PI / 6) // draw wedge
          pop();
        }
      }
      noStroke();
      break;
      
      
    //////////
    // CASE 4 - BLENDMODE DIFFERENCE EXPLAINER (toggles bettween BLEND and DIFFERENCE)
    /////////
    case 4: 
      let txtMode = 'DIFFERENCE\nclick to change'
      if (exampleMode) {blendMode(BLEND); txtMode = 'Default (BLEND) \nclick to change';}
      for (let c = 0; c < 6; c++) { // for three colors - red,green,blue
        fill(c * 120, 100, 100) // HSB color      
          push()
          rotate(1.5*PI + TAU/3*c)
          translate(width/6,0)
          circle(0, 0, width/2)
          pop();
      }
      textAlign(CENTER,CENTER)
      textSize(width/25)
      fill(0)
      blendMode(BLEND)
      text(txtMode,0,-1.18*width/4)
      break;
      
​
  } //switch
} //draw
​
​
// INTERACTIONS
// press keys to change case (circles,squares,wedges) or spacebar (number of blend shapes)
function keyPressed() {
  if (keyCode === 49) { //1
    sketchNum = 1;
    frameCount = 0;
  } else if (keyCode === 50) { //2
    sketchNum = 2;
    frameCount = 0;
  } else if (keyCode === 51) { //3
    sketchNum = 3;
    frameCount = 0;
  } else if (keyCode === 52) { //4
    sketchNum = 4;
    frameCount = 0;
  } else if (keyCode === 32) { //spacebar
    blendNum = (blendNum == 1) ? 2 : 1;
  } else if (key === 's') { //s 
    save("img_" + month() + '-' + day() + '_' + hour() + '-' + minute() + '-' + second() + ".jpg");
  }
}
​
function mouseClicked() { // to switch between BLEND and DIFFERENCE in case 4
  exampleMode = (exampleMode == true) ? false : true;
}