----- Coding Tutorial by Patt Vira ----- 

Name: Egg-phabet

Video Tutorial: https://youtu.be/TNsBuL9kDFQ

​

Connect with Patt: @pattvira

https://www.pattvira.com/

----------------------------------------

*/

​

// Message Variables

let font; let font2;

let points = [];

let msg, x = 200, y = 370, fontSize = 430;

let alphabets = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];

​

// Sliders variable

let radius, wave, size, num, speed;

let y0 = 60;

​

// Oscillation variable

let angle = 0; 

​

function preload() {

  font = loadFont("fonts/Roboto-Regular.ttf");

  font2 = loadFont("fonts/BebasNeue-Regular.ttf");

}

​

function setup() {

  createCanvas(600, 400);

  angleMode(DEGREES);

  gui();

}

​

function gui() {

  msg = createSelect();

  msg.position(10, y0 + 160);

  msg.size(100);

  for (let i=0; i<alphabets.length; i++) {

    msg.option(alphabets[i]);

  }

  radius = createSlider(5, 30, 10);

  radius.position(10, y0+10);

  radius.size(100);

  radius.addClass("sliders");

  wave = createSlider(10, 30, 25);

  wave.position(10, y0+30);

  wave.size(100);

  wave.addClass("sliders");

  size = createSlider(10, 30, 20);

  size.position(10, y0+50);

  size.size(100);

  size.addClass("sliders");

  num = createSlider(1, 10, 5);

  num.position(10, y0+70);

  num.size(100);

  num.addClass("sliders");

  speed = createSlider(1, 5, 2);

  speed.position(10, y0+90);

  speed.size(100);

  speed.addClass("sliders");

}

​

function draw() {

  background("#e5c089");

  fill(0);

  textFont(font2);

  // Sliders' labels

  textSize(20);

  text("RADIUS", 120, y0+25);

  text("WAVE", 120, y0+45);

  text("SIZE", 120, y0+65);

  text("NUM", 120, y0+85);

  text("SPEED", 120, y0+105);

  // Title & Line Break

  textSize(40);

  text("EGG-PHABET", 10, 40);

  strokeWeight(2);

  stroke(0);

  line(10, 45, width-10, 45);

  let r = radius.value();

  let w = wave.value();

  let s = size.value();

  let n = num.value() *0.01;

  let sp = speed.value();

  let m = msg.selected();

  points = font.textToPoints(m, x, y, fontSize, {

    sampleFactor: n

  });

  for (let i=0; i<points.length; i++) {

    let x = r*cos(angle + i*w);

    noStroke();

    fill("#e8e0d6");

    ellipse(points[i].x + x, points[i].y, s, s);

    fill("#e68407");

    ellipse(points[i].x + x, points[i].y, s/2, s/2);

  }

  angle += sp;

}