Emojiparty

// Control flow type:

// - Press "1" for vertical flow

// - Press "2" for horizontal flow

// - Press "3" for radial flow

// - Press "4" for conical flow

// - Press "5" for swirl flow

// - Press "6" for noise flow

//

// Others:

// - Press "s" to toggle the shadow effect on/off

// - Press "d" to toggle lens distortion effect on/off

// - Press '↑' or '↓' to increase/decrease the weight of lens distortion

// - Press the space bar for toggling between loop and noLoop

​

const emojis = [

  '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇',

  '😍', '🥰', '😘', '😗', '😙', '😚', '☺️', '😌', '😋', '😛',

  '😜', '😝', '🤑', '🤗', '🤓', '😎', '🥳', '😏', '😒', '😞',

  '😔', '😟', '😕', '🙁', '☹️', '😢', '😭', '😤', '😠', '😡',

  '🤬', '🤯', '😳', '🥺', '😱', '😨', '😰', '😥', '😓', '🤗',

  '😆', '😔', '😖', '😩', '🥴', '🥵', '😵', '😒', '😣', '😢',

  '🤑', '🤢', '🤮', '🤡', '🤠', '🤫', '🤭', '🧐', '🤨', '😧',

  '😈', '👿', '👹', '👺', '💀', '👻', '👽', '🤖', '💩', '🙊',

];

​

console.log(emojis.join(', '));

​

// Grid. if the screen is not square will expand more cells

const cols = 32

const rows = 32

​

// Controls

let flowType = 6

let isShadow = true

let isDistortions = true

let wei = 0.38

let atlas = { atlas: null, cols: 0, rows: 0 }

let theShader

let textBlock;

let backgroundBlock;

let rotate = 20;

​

​

function preload() {

  theShader = new p5.Shader(this.renderer, vert, frag)

}

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL)

  background(200);

  // Initialize the custom cursor

  customCursor = select('.custom-cursor');

  noCursor(); // Hide the default cursor

    // TEXT

  textBlock = createP("• Press 1-6 for a change in frequency.<br>• Press s for a shader.<br>• Press d for enlargement.<br>• Press ↑ or ↓ to take a closer look.<br>• Press space to pause.");

  textBlock.position(60, 100);

  textBlock.style('font-size', '20pt');

  textBlock.style('color', 'rgb(0,0,0)');

  textBlock.style('line-height', '1.5');

  textBlock.style('z-index', '1');

​

    // Title

   let titleText = createP("Isn't it fun, emoji's");

  titleText.position(60, 20);

  titleText.style('font-family', 'Helvetica, sans-serif');

  titleText.style('font-weight', 'bold');

  titleText.style('font-size', '36pt');

  titleText.style('color', 'rgb(0,0,0)');

  titleText.style('z-index', '1');

    //BG text block

  backgroundBlock = createDiv('');

  backgroundBlock.position(40, 50);

  textBlock.style('font-family', 'Helvetica, sans-serif');

  backgroundBlock.size(650, 300); 

  backgroundBlock.style('background-color', '#ffdc00'); 

  backgroundBlock.style('border', '5px solid rgb(0,0,0)'); 

  backgroundBlock.style('border-radius', '20px');

  backgroundBlock.style('transition', 'transform 0.3s');

  //mouse

  backgroundBlock.style('cursor', 'none'); 

  backgroundBlock.style('transition', 'transform 0.7s'); // Add a transition for smooth animation

  backgroundBlock.style('cursor', 'pointer'); // Change the cursor to a pointer on hover

  backgroundBlock.mouseOver(() => {

  backgroundBlock.style('transform', 'skew(-5deg, 0deg)'); // Rotate 20 degrees on hover

  });

   backgroundBlock.mouseOut(() => {

  backgroundBlock.style('transform', 'skew(0deg, 0deg)'); // Reset the rotation on mouse out

  });

  // prepare atlas

  atlas = getAtlas({

    array: emojis,

    cols: 5,

    unitSize: 128,

  })

​

  controls()

}

​

function draw() {

  background(255,220,0)

  shader(theShader)

  theShader.setUniform("iResolution", [width, height])

  theShader.setUniform("iMouse", [mouseX, mouseY])

  theShader.setUniform("iGrid", [cols, rows])

  theShader.setUniform("iAtlas", atlas.atlas)

  theShader.setUniform("iAtlasGrid", [atlas.cols, atlas.rows])

  theShader.setUniform("iLength", emojis.length)

  theShader.setUniform("iTime", frameCount / 60)

  theShader.setUniform("iType", flowType)

  theShader.setUniform("iIsShadow", isShadow)

  theShader.setUniform("iIsDistortions", isDistortions)

  theShader.setUniform("iWei", wei) 

  rect(0, 0, width, height)

  customCursor.position(mouseX, mouseY);

}

​

function getAtlas({ array, cols, unitSize, unitScale = 0.8 }) {

  const rows = ceil(emojis.length / cols)

  const gfx = createGraphics(unitSize * cols, unitSize * rows)

  gfx.fill(255)

  gfx.stroke(255)

  gfx.textAlign(CENTER, CENTER)

  gfx.textSize(unitSize * unitScale)

  array.forEach((value, index) => {

    gfx.text(

      value,

      unitSize / 2 + unitSize * (index % cols),

      unitSize / 2 + unitSize * gfx.floor(index / cols)

    )

  })

  return { atlas: gfx, cols: cols, rows: rows }

}

​

function controls() {

  PressDo("1", () => (flowType = 1)) // vertical

  PressDo("2", () => (flowType = 2)) // horizontal

  PressDo("3", () => (flowType = 3)) // radial

  PressDo("4", () => (flowType = 4)) // conical

  PressDo("5", () => (flowType = 5)) // swirl

  PressDo("6", () => (flowType = 6)) // noise

  PressLoopToggle(" ")

  PressDo("s", () => (isShadow = !isShadow))

  PressDo("d", () => (isDistortions = !isDistortions))

  PressDo("ArrowUp", () => (wei = min(1, wei + 0.02)))

  PressDo("ArrowDown", () => (wei = max(0, wei - 0.02)))

}

​