[textured]flag

/*

Please note that the rendering time for P5js may be quite lengthy, 

depending on your processor. If you require a quick rendering, 

P5js may not be the best option. However, to simplify the process, 

I have provided P5Capture code which can convert your animation 

into an MP4 video. 

Simply begin the sketch and the recording will start automatically. 

Keep an eye on the time and when you reach the desired duration, 

click the Stop button to save the animation onto your hard drive.

*/

​

let f = 0;

let c = 1;

let p = 0;

let bg = 0;

let W = 400;

let img;

​

preload = (_) => {

  /*

  To use your image, you'll need to have a 400x400px color PNG file 

  ready to upload here. Make sure to also read the OpenProcessing 

  instructions on how to upload your image. For optimal results, 

  try to avoid using white areas in your image and opt for light grey instead.

  */

  img = loadImage('KTlogo1.png');

}

​

setup = (_) => {

  createCanvas(W, W);

  noiseSeed(83474);  // Change the value for a different animation

}

​

draw = (_) => {

  background(bg)

  if (frameCount === 1) {

  const capture = P5Capture.getInstance();

  capture.start({

  format: "mp4",

  framerate: 60

  });

  }

  for (y = 0; y < W; y ++) {

    for (x = 0; x < 800; x ++) {

      n = noise((x + f * 1.5) / 666, (y + f) / W);

      if (x < 400) {

        shade = map(n, 0, 0.6, 30, 255);

        // hilite = map(n, 0.45, 0.7, 0, W)

        // hilite = abs(map(tan(n/PI), 0, 0.6, 0, 200))

        hilite = abs(atan(map(n, 0.0, 0.53, -1, 0))) * 2 + 1.5;

        r = (img.get(x, y)[0] - shade + hilite * 44) * hilite + 20 * hilite;

        g = (img.get(x, y)[1] - shade + hilite * 44) * hilite + 20 * hilite;

        b = (img.get(x, y)[2] - shade + hilite * 44) * hilite + 20 * hilite;

        y < 399 ? stroke(r, g, b): stroke(bg);

      }

      line(x, W, x, y + n * (sin(PI / 1000 * x) * W) - W / 6);

      p = n;

    }

    c = -c;

  }

  f -= 4

}