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

Name: Gradient Spiral

Video Tutorial: https://youtu.be/88HToL9SwjI

​

Connect with Patt: @pattvira

https://www.pattvira.com/

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

*/

​

let cols, rows; let size = 10;

let threshold = 0.5; let t = 0;

​

function setup() {

  createCanvas(400, 400);

  cols = width/size;

  rows = height/size;

  textSize(size);

  textAlign(CENTER, CENTER);

}

​

function draw() {

  background(0);

  for (let i=0; i<cols; i++) {

    for (let j=0; j<rows; j++) {

      let x = size/2 + i*size;

      let y = size/2 + j*size;

      let d = dist(x, y, width/2, height/2);

      let k = 10;

      let dx = x - width/2;

      let dy = y - height/2;

      let angle = atan2(dy, dx);

      let spiralPath = sin(d / k + angle + t);

      let distanceFactor = 100;

      let angleFactor = 5;

      let condition = sin(d / distanceFactor + angleFactor*angle);

      let symbol;

      let c;

      if (spiralPath > condition) {

        symbol = "X";

        c = colorGradient(d);

      } else {

        symbol = ".";

        c = color(255, 100);

      }

      fill(c);

      text(symbol, x, y);

    }

  }

  t -= 0.01;

}

​

function colorGradient(d) {

  let colors = [color(252, 176, 69), color(131, 58, 180)];

  let colorRadius = 120; 

  let amt = d % colorRadius / colorRadius;

  return lerpColor(colors[0], colors[1], amt);

}

​

/*

// Uncomment for more colors 

function colorGradient(d) {

  let colors = [

    color(252, 176, 69), 

    color(253, 29, 29),

    color(131, 58, 180), 

    color(0, 255, 0)

  ];

​

  let colorRadius = 50; 

  let colorNum = colors.length;

  let amt = d % (colorNum * colorRadius) / (colorNum * colorRadius); 

​

  if (amt < 1 / colorNum) {

    return lerpColor(colors[0], colors[1], amt * colorNum); 

  } else if (amt < 2 / colorNum) {

    return lerpColor(colors[1], colors[2], (amt - 1 / colorNum) * colorNum); 

  } else if (amt < 3 / colorNum) {

    return lerpColor(colors[1], colors[3], (amt - 2 / colorNum) * colorNum); 

  } else {

    return lerpColor(colors[2], colors[0], (amt - 3 / colorNum) * colorNum); 

  }

}

*/

​

​

​

​