// from Kazuki Umeda, https://www.youtube.com/watch?v=iIWH3IUYHzM

// assets from https://drive.google.com/drive/folders/1uYzW33HlC2QvQmm3SUZCKvM1io_K8Fig

​

// // drawingContext is the equivalent of calling canvas.getContext('2d'); or canvas.getContext('webgl')

// // Then you have exposed all the HTML canvas methods and properties, like shadowBlur and shadowColor

​

​

let myFont, coffee;

let offset = 0.0;

​

​

function preload() {

  myFont = loadFont('AlexBrush-Regular.ttf');

  coffee = loadImage('coffee.png');

  blockWall = loadImage('blockWall.png');

}

​

function setup() {

  createCanvas(600, 600);

  colorMode(HSB, 360, 100, 100, 100);

  rectMode(CENTER);

  textAlign(CENTER);

  noFill();

  // stroke(207, 7, 99);

  // strokeWeight(20);

  stroke('white');

  strokeWeight(3);  

  textFont(myFont);

  textSize(108);

  //fill(207, 7, 99);

  //noStroke();

  pixelDensity(2); // eliminate jaggies

  frameRate(24); // offet pixel density drag on processing

}

​

function draw() {

  // background(230, 50, 15);

  // background(207, 7, 99);

  image(blockWall, 0, 0);

  textNeon(color(332, 58, 91, 100));

  imageNeon(width/2 + 80, height/2 - 160, color(332, 58, 91, 100));

​

  // // FIXED SHADOW

  // drawingContext.shadowOffsetX = 10;

  // drawingContext.shadowOffsetY = 10;

  // // VERY COOL - SHADOW MOVES WITH POINTER - MOVING LIGHT SOURCE

  // let offsetX = map(mouseX, 0, width, -20, 20);

  // let offsetY = map(mouseY, 0, height, -20, 20);

  // drawingContext.shadowOffsetX = offsetX;

  // drawingContext.shadowOffsetY = offsetY;

  // drawingContext.shadowBlur = 12;

  // drawingContext.shadowColor = color(207, 7, 70); 

  // rect(width/2, height/2, 300, 300, 30)

​

​

}

​

function textNeon(glowColor) {

  glow(glowColor, 400);

  text('Coding party!', width/2, height/2);

  text('Coding party!', width/2, height/2);

  glow(glowColor, 80);

  text('Coding party!', width/2, height/2);

  text('Coding party!', width/2, height/2);

  glow(glowColor, 12);

  text('Coding party!', width/2, height/2);

  text('Coding party!', width/2, height/2);

}

​

function imageNeon(x, y, glowColor) {

   // // coffee image

  // tint(h, s, b, transparency) overlaid on image

  tint(0, 0, 40, 100);

  glow(glowColor, 0);

  image(coffee, x, y, 120, 100);

  tint(0, 0, 100, flickering());

  glow(glowColor, 160);

  image(coffee, x, y, 120, 100);

  image(coffee, x, y, 120, 100);

  glow(glowColor, 80);

  image(coffee, x, y, 120, 100);

  image(coffee, x, y, 120, 100);

  glow(glowColor, 12);

  image(coffee, x, y, 120, 100);

  image(coffee, x, y, 120, 100);

  tint(0, 0, 100, 100);

​

}

​

function glow(glowColor, blurriness) {

  drawingContext.shadowColor = glowColor;

  drawingContext.shadowBlur = blurriness;

}

​

function flickering() {

  offset += 0.08;

  let n = noise(offset);

  if (n < 0.30) return 0;

  else return 100;

}