Создание эффекта дождя из частиц
Если вы новичок в сериале, начните здесь: Часть 1, Часть 2 и Часть 3.
Весь код и библиотеки можно найти здесь: https://github.com/GeorgeGally/creative_coding
Итак, теперь, когда у нас есть частицы… давайте повеселимся и создадим несколько эффектов частиц. Это также, надеюсь, даст вам представление о том, как один и тот же фрагмент кода может создавать совершенно разные эффекты, и заставит вас больше экспериментировать, и именно здесь происходит волшебство и веселье.
Итак, давайте создадим простой, но визуально приятный эффект дождя из частиц, как на картинке выше…
У нас уже есть весь код, который нам нужен… нам просто нужно сделать так, чтобы следы частиц падали сверху, а не отскакивали, а затем просто снова появлялись наверху, когда они добирались до дна…
Итак, во-первых, давайте добавим немного частиц... мы установим speed_x нашего мяча на 0, так как частицы просто падают вниз. И мы задаем ему случайную начальную позицию от 0 до ширины экрана, т.е. random(w); то же самое, что сказать random(0, w); И мы даем нашим шарам вертикальную начальную точку где-то над экраном, чтобы они не начинались с одного и того же места. И случайный серый цвет с помощью rgb(random(255));
Таким образом, наш код установки будет выглядеть так:
var ctx = createCanvas("canvas1");
var max_balls = 2000;
var balls = [];
for (var i = 0; i < max_balls; i++) {
addBall();
}
// push a ball and it's values into the array
function addBall(){
var ball = {
x: random(w),
y: random(-200,0),
speed_x: 0,
speed_y: random(0.5, 3),
size: 8,
colour: rgb(random(255))
}
balls.push(ball);
if (balls.length > max_balls) balls.splice(0,1);
}
Для нашей функции moveBall() она выглядит почти так же, как и раньше, за исключением того, что нам нужно сбросить частицу наверх, как только она перейдет границу:
function moveBall(){
for (var i = 0; i < balls.length; i++) {
var b = balls[i];
b.x = b.x + b.speed_x;
b.y = b.y + b.speed_y;
// if ball goes over bottom reset it
if (b.y > h) {
b.y = random(-100,0);
b.colour = rgb(randomInt(255));
}
}
}
Для аккуратности поместим все остальное в функцию resetBall(). Нам нужно будет передать ссылку на наш мяч в функцию, иначе функция не будет знать, о каком мяче мы говорим. Мы делаем это, просто передавая объект/переменную функции в квадратных скобках, например:
// syntax: functionName(variable) resetBall(b)
И получая переменную в функции так:
function resetBall(_b) {
// do some stuff with _b
}
В программировании мы часто используем символ подчеркивания (например, _b в данном случае), потому что он просто позволяет легко увидеть, что мы имеем в виду ссылку на локальную переменную (любая переменная, объявленная внутри функции, не может быть видна за ее пределами — что хорошая вещь Вы всегда должны стараться держаться подальше от глобальных переменных).
Итак, теперь наш завершенный код должен выглядеть так:
var ctx = createCanvas("canvas1");
var max_balls = 2000;
var balls = [];
for (var i = 0; i < max_balls; i++) {
addBall();
}
function addBall(){
var ball = {
x: random(w),
y: random(-200,0),
speed_x: 0,
speed_y: random(0.5, 3),
size: 8,
colour: rgb(random(255))
}
balls.push(ball);
if (balls.length > max_balls) balls.splice(0,1);
}
function draw(){
ctx.background(0, 0.06);
moveBall();
drawBall();
}
function moveBall(){
for (var i = 0; i < balls.length; i++) {
var b = balls[i];
b.x = b.x + b.speed_x;
b.y = b.y + b.speed_y;
if (b.y > h) {
resetBall(b);
}
}
}
function resetBall(_b){
_b.y = random(-100,0);
_b.colour = rgb(randomInt(255));
}
function drawBall(){
for (var i = 0; i < balls.length; i++) {
var b = balls[i];
ctx.fillStyle = b.colour;
ctx.fillEllipse(b.x, b.y, b.size, b.size);
}
}
Вот и все... Частичный дождь. Большая часть кода, который вы будете использовать, на самом деле является просто вариацией этого. Так что поиграйтесь и посмотрите, какие еще эффекты вы можете придумать… Увидимся в следующий раз.
Подпишитесь на меня в Instagram: https://www.instagram.com/radarboy3000/
Подпишитесь на меня в Твиттере здесь: https://twitter.com/radarboy_japan
И лайкните мою страницу в Facebook здесь: https://www.facebook.com/radarboy3000
Введение в творческое кодирование, часть 1: https://medium.com/@radarboy3000/creative-coding-basics-4d623af1c647#.hn9zzliob
Введение в творческое кодирование, часть 2: https://medium.com/@radarboy3000/introduction-to-creative-coding-part-2-d869832d9ffb#.fzxcom541
Введение в творческое кодирование, часть 3: https://medium.com/@radarboy3000/how-to-make-particles-1cbeee937593#.wwjhkv7u2
Github-репозиторий всего кода: https://github.com/GeorgeGally/creative_coding
Hacker Noon — это то, как хакеры начинают свой день. Мы являемся частью семьи @AMI. Сейчас мы принимаем заявки и рады обсудить возможности рекламы и спонсорства.
Если вам понравилась эта история, мы рекомендуем прочитать наши последние технические истории и актуальные технические истории. До следующего раза, не принимайте реалии мира как должное!
