Создание 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; }…