Предыдущая статья:Заполни дыру! Конец развлечений звездыПосле релиза ямки, оставшиеся в прошлом во впечатлении Гулиу, похоже, остались единственными.Поиск изображений (1): судьба и перспективыКод последующей практики (ссылка на исходный код указан в исходном тексте) и пробный эффект на постере фильма Douban Top250.
Когда я думаю, что все ямы заполнены (если я чего-то не помню, пожалуйста, не напоминайте мне), я чувствую, что это совесть индустрии, и я чувствую облегчение.
Итак, Гу Лю однажды открылПоиск изображений (1): судьба и перспективыВ этой статье, помимо обзора «отличных работ», я также нашел преподавателя Сян Фань из Академии изящных искусств Цинхуа.Сайт-портфолио zeelab Projects.
PS: Если вы не видели это выступление, я рекомендую его Гу Лю незабываем до сих пор:[Одно место] Сян Фан: Если бы ежегодный гала-концерт Весеннего фестиваля был свернут, как спирали от комаров, это выглядело бы так
Среди этих работ Гу Лю предпочитает и также хочет добиться аналогичного эффекта отображения веб-страницы:AwardPuzzel - zeelab. Цитируется следующее «официальное» введение, и рекомендуется посетить веб-сайт, чтобы ознакомиться с ним:
AwardPuzzel - это работа по визуализации данных отмеченных наградами картин в категории «Живопись маслом» Национальной художественной выставки.Он включает в себя 2276 отмеченных наградами работ с шестой по двенадцатую сессию художественной выставки.Он представляет художественную историю, форму и цвет китайской масляной живописи за последние 30 лет благодаря динамическому взаимодействию, изменениям и отношениям между размерами и регионами, а также художественным идеям китайских мастеров масляной живописи.
Эту работу можно использовать в качестве исследовательского инструмента для исследователей и критиков, а также ею можно наслаждаться как произведением искусства.
Мы надеемся поделиться своей точкой зрения через эту платформу и надеемся, что пользователи смогут прийти к своим собственным выводам, просматривая и наблюдая.
Национальная художественная выставка является самым важным событием в мире искусства Китая. Она проводится раз в пять лет: шестая состоялась в 1984 году, двенадцатая — в 2014 году.
Хотя Гулиу не очень хорош во внешнем интерфейсе, поскольку он вступил в контакт со сканером, у него все еще есть привычка щелкать правой кнопкой мыши «Проверить элемент» и просматривать исходный код веб-страницы.
Так что я не знаю, не читал ли я это, но с первого взгляда это приводит ко многим последующим историям, заимствуя предложение из книги: «Этот день тоже вопрос времени», и медленно слушайте Гу Лю. ...
Нажав на исходный код веб-страницы, нетрудно найти код, соответствующий области отображения данных и взаимодействия. Для удобства отображения она специально перекинута сюдаCarbonВот, сосредоточьтесь на этом коде.
можно увидетьHTMLв основном используетсяcanvasЯрлыки, это ничего, Гу Лю все равно не понимаетcanvas, Просто открой глаза и будь слеп, и ты ничего не увидишь. Но нашел этикеткуdata-processing-soucresатрибут, соответствующий.pdeДокументы очень разные, «невиданные, невиданные», и я вспомнил, что вначале собирал всевозможные вещи, надеясь воспроизвести гала-концерт весеннего фестиваля г-на Сян Фаня или художественную выставку масляной живописи.processingВпечатлен этим языком программирования, который может реализовать различные художественные идеи.
Итак, Google“HTML+Canvas+Processing”и другие ключевые слова, неожиданно обнаруженные: на основеJavaизProcessingВ генеалогическом древе языков также есть соответствующиеJavaScriptа такжеPythonверсия, первая:P5.js, и это не может не вызывать у Гу Лю надежды на то, что описанный выше эффект можно будет воспроизвести на веб-странице.
Говоря об этом, Гу Лю никогда не слышал об этом раньше.P5.js, я искал соответствующие китайские материалы, а китайских материалов не так много.Я предпочитаю смотреть видео, чтобы учиться.Я видел, что кто-то на всемогущей станции Б нес нефтепровод.Daniel Shiffmanобучающее видео (разделы 1-12), так что я сразу его почистил,p5.js Базовый учебник 1-7, и все следовали коду.Хотя субтитров нет, но разжевать довольно легко.Есть много пояснений к знаниям для начинающих программистов. (Оригинальная ссылка:Code! Programming with p5.js - YouTube)
Получив новые навыки, я сразу же использовал картинки звездной карты отношений, чтобы просто и грубо собрать фотостену.Хотя эффект от картины маслом на художественной выставке был за 108 000 миль, это был первый шаг в продаже.
На самом деле, я еще не собирал фотостену раньше, думаю, все видели статьи про обход WeChat друзей и потом собирание пазлов, но Гу Лю все же написал эту старую статью, ну что там... ну и пусть) :Совместное использование результатов фотостены, реализованное библиотекой Python PIL.
Несколько дней назад см.@爱可可-爱生活Вейбо учителя:Генеративный арт, созданный Processing через:おかず, не говоря уже о красивых картинках, смысл в том, чтобы донестиProcessingКлючевые слова, поэтому я похоронил их и хотел использоватьP5.jsРеализовать волну идей.
К счастью, я нашел источник работы:Генеративный арт #146 через:おかず, с радостью обнаружив, чтоProcessingКод реализации, а хороших работ в этой серии больше, так что хочу использовать все его наработкиP5.jsРеализуйте волну идей с открытым исходным кодом.
Конечно, потому что в настоящее времяP5.jsнедостаточно опытен,JavaScript / ES6Это всего лишь введение, и неизбежно, что будут заботы и опасения. Но при воспроизведении этой работы я обнаружил, чтоProcessingа такжеP5.jsЭто действительно похоже, многие интерфейсы функций официально предназначены для унификации, что значительно снижает порог.
Изображение выше для древней ивыP5.jsЭффект воспроизведения, хотя есть еще небольшие проблемы, код может быть не самым стандартизированным, но сначала поделитесь им, а потом уже оптимизируйте! Вы можете испытать создание работ по этому URL-адресу:редактор. Боюсь, 5 - это .org/deserts X/class...
Добро пожаловать, чтобы обратить внимание, "Одежда Быка Древняя Ива" Ха!
let particles;
const n = 120;
function setup() {
createCanvas(900, 900);
// pixelDensity(2);
colorMode(HSB, 360, 100, 100, 100);
rectMode(CENTER);
newParticles();
}
function draw() {
for (let i in particles) {
let p = particles[i];
p.run();
if (p.isDead()) {
particles.splice(i, 1);
}
}
}
function forms() {
for (let j = 0; j < n; j++) {
let x = random(width), y = random(height);
let s = random(20, 100);
let hs = s / 2;
let c = getCol();
noStroke();
fill(c);
if (random(1) > 0.5) {
for (let i = -s / 2; i < s / 2; i++) {
particles.push(new Particle(x + i, y - hs, c));
particles.push(new Particle(x + i, y + hs, c));
particles.push(new Particle(x - hs, y + i, c));
particles.push(new Particle(x + hs, y + i, c));
}
square(x, y, s);
} else {
for (let a = 0; a < TAU; a += TAU / 360) {
particles.push(new Particle(x + hs * cos(a), y + hs * sin(a), c));
}
circle(x, y, s);
}
}
}
function newParticles() {
// particles = new ArrayList<Particle>();
particles = new Array();
background("#FCFCF0");
forms();
noiseSeed(parseInt(random(100000)));
}
// function mousePressed() {
// newParticles();
// }
function keyPressed() {
// 还没生效
if (keyCode === 's') {
saveFrame("123.png");
}
}
function getCol() {
let colors = ["#e4572e", "#29335c", "#f3a712", "#a8c686", "#669bbc", "#efc2f0"];
//let colors = ["#880D1E", "#DD2D4A", "#F26A8D", "#F49CBB", "#CBEEF3"];
let idx = parseInt(random(colors.length));
// console.log(idx + colors[idx]);
return colors[idx];
}
class Particle {
constructor(x, y, col) {
this.pos = createVector(x, y);
this.step = 1;
this.angle = random(10);
this.lifeSpan = 100;
this.noiseScale = 800;
this.noiseStrength = 90;
this.col = col;
}
show() {
noStroke();
// fill(this.col, this.lifeSpan);
fill(this.col);
circle(this.pos.x, this.pos.y, 0.5);
}
move() {
this.angle = noise(this.pos.x / this.noiseScale, this.pos.y / this.noiseScale) * this.noiseStrength;
this.pos.x += cos(this.angle) * this.step;
this.pos.y += sin(this.angle) * this.step;
this.lifeSpan -= 0.1;
}
isDead() {
return (this.lifeSpan < 0.0)
}
run() {
this.show();
this.move();
}
}