(ProcessingJS) Пиксельный шум
Как говорится в заголовке, я хочу знать, как пикселизировать шум. Я использую приведенный ниже код для оптимизации производительности:
var totalXoff = 0.0;
var draw = function() {
background(0, 255, 255);
if (!this.loadPixels){ return; }
this.loadPixels();
var pixels=this.imageData.data;
var xoff = 0.0+totalXoff;
for (var x = 0; x < width; x++) {
var yoff = 0.0;
for (var y = 0; y < height/2; y++) {
var bright = map(noise(xoff, yoff), 0, 1, 0, 255);
var index = (y * width + x) * 4;
pixels[index] = bright*2-(y/2*2.55);
pixels[index + 1] = 255;
pixels[index + 2] = 255;
pixels[index + 3] = 255;
yoff += 0.01;
}
xoff += 0.01;
}
this.updatePixels();
totalXoff += 0.0025;
};
Как сделать его пиксельным? (Я собираюсь использовать стиль пиксельной графики в своей игре, поэтому я не хочу, чтобы облака выглядели слишком реалистично.)
@CanO'Spam Буквально все публикуют практические вопросы; когда я прокручиваю 30 вопросов, только 5 или 6 из них просят помочь с ошибками. Быть реалистом, спрашивая, как сделать что-то конкретное, — вот и весь смысл StackOverflow.
Как склонны привлекать отрицательные голоса и получать пометки, требующие подробностей или ясности, фокуса, деталей отладки и т. д. - мы здесь, чтобы помочь исправить проблемы, а не писать и предоставлять подробные ответы на часто задаваемые вопросы по темам, мы здесь, чтобы помочь исправить ошибки в вашем коде, но мы не можем (и, по крайней мере, не должны бесплатно) тратить драгоценное время, возможные часы, на написание этих часто задаваемых вопросов и документации.
Дважды проверьте, что я говорил, чтобы убедиться, что я не предоставляю неверную информацию; тур предположил бы, что вопрос, который вы задали, действительно не по теме для SO, поскольку вы показываете, что у вас есть, но спросите о дополнении к нему (How would I make it pixelated?) - это может быть по теме, если вы предоставите код, который вы сделали, чтобы попытаться это то, что не работает, но в нынешнем виде этого кода там нет и как такового Don't ask about... Questions you haven't tried to find an answer for (show your work!) боюсь сюда подходит
Пожалуйста, уточните вашу конкретную проблему или предоставьте дополнительную информацию, чтобы выделить именно то, что вам нужно. Как сейчас написано, трудно точно сказать, о чем вы спрашиваете.
Если мне не изменяет память, базовое размытие — это просто усреднение значений нескольких пикселей в непосредственной близости. Вы уже знаете, как использовать массив pixels. Вам нужно создать аналогичный массив и метод, который заполняет новый массив размытыми значениями, а затем загружать этот массив вместо первого (или какую-то вариацию этого метода). Имеет ли это смысл для вас? Кроме того, если вы размываете изображения во время их рисования, да, вы истощаете свой процессор, но если ваши изображения статичны (например, облачный рисунок), вы можете пикселизировать их один раз и повторно использовать пикселизированное изображение в каждом кадре, таким образом вычисляя это только один раз.
Обратите внимание, что, как указано в теге для Processing.js, этой библиотеки больше не существует: я заархивировал ее в декабре 2018 года. Не используйте ее для новых проектов, вместо этого используйте что-то вроде p5js.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я понял, как это сделать, я просто разнес их и использовал rect() вместо редактирования пикселей, чтобы создать этот «пиксельный» эффект.
Код:
var totalXoff = 0.0;
var draw = function() {
background(0, 255, 255);
var xoff = 0.0+totalXoff;
for (var x = 0; x < width; x+=10) {
var yoff = 0.0;
for (var y = 0; y < height/2; y+=10) {
var bright = map(noise(xoff, yoff), 0, 1, 0, 255);
fill(bright*2.5-(y/1.5*2.55), 255, 255);
rect(x, y, 10, 10);
yoff += 0.01;
}
xoff += 0.01;
}
totalXoff += 0.0025;
};
Мы не можем помочь с "как..." или "как мне...", мы можем помочь вам исправить ошибки, но мы не можем предоставить вам исследование - это ваша работа :)