Создание 2D-арта на Javascript!

С p5.js и Joy Division

На днях мне понадобилась простая библиотека javascript для программного создания линий и сеток, на полпути к этому проекту я понял, что, возможно, у меня достаточно знаний, как сделать проект цифрового искусства, о котором я думал некоторое время, который на 100% вдохновлен обложкой альбома Joy Divisions «Неизвестные удовольствия» (Этот 👇):

Моя неоригинальная идея заключалась в том, чтобы просто передать изображения алгоритма и каким-то образом преобразовать их в указанный выше стиль (с помощью магии?), и да, есть другие проекты, которые делают это, на самом деле стиль графики называется графики радости или графики Ridge Line, и вы можете найти примеры здесь, здесь и, точнее, здесь, проблема в том, что эти примеры в основном сделаны статистическими библиотеками и могут быть не очень хорошими. тематические исследования, если вы хотите создавать 2D-графику и иметь некоторый опыт работы с веб-сайтами / javascript, которые будут здесь в центре внимания, так что давайте начнем.

— — — — — — — — — — — ⭐️ SUBSCRIBE TO MEDIUM ! ⭐️ — — — — — — — — — — —

Вначале были линии

Сначала я начал экспериментировать с библиотекой под названием paper.js, но быстро столкнулся с API, так как он не очень хорошо работал с необходимыми растровыми изображениями, поэтому я переключился на p5.js, который решил мои проблемы и предназначен как для художников, так и для любителей, вот один пример того, как сделать несколько линий:

// main.js (see dev notes)

import p5 from 'p5';

let sketch = (p) => {
  const NUM_LINES = 40; // Number of lines to draw
  let LINE_HEIGHT = p.windowHeight / NUM_LINES; // Height of each line
  // const LINE_HEIGHT = 6; // Height of each line

  let canvas;

  p.setup = () => {
    canvas = p.createCanvas(p.windowWidth, p.windowHeight);
    canvas.parent('myCanvas'); 
// Set the parent element of the canvas to the div with ID 'myCanvas'
  };

  p.draw = () => {
    p.background(0);    
    for (let i = 0; i < NUM_LINES; i++) {
      const y = i * LINE_HEIGHT;
      p.stroke(255, 255, 255);
      p.line(0, y, p.width, y);
    }
  };
  
  p.windowResized = () => {
    p.resizeCanvas(p.windowWidth, p.windowHeight);
    LINE_HEIGHT = p.windowHeight / NUM_LINES;    

  }…