{"blocks":[{"type":"paragraph","data":{"text":"Это руководство научит вас рисовать объекты из функции шума на языке Processing. Вы изучите простой способ создания зацикленных GIF-анимаций на основе функции шума."}},{"type":"header2","data":{"level":2,"text":"Функция шума"}},{"type":"paragraph","data":{"text":"В языке Processing есть функция noise(), которая при некоторых входных данных выдаёт значения от 0 до 1 (с центром в точке 0,5). Эти значения являются случайными, но они всегда повторяются при повторении входных данных и соли."}},{"type":"paragraph","data":{"text":"Другое свойство этой функции заключается в том, что шум непрерывен: для близких входных данных вы получаете почти одинаковые значения. Вычисление значений шума выполняется быстро, не нужно вычислять предыдущие значения. Эта функция в Processing иногда называется шумом Перлина."}},{"type":"paragraph","data":{"text":"С помощью небольшого фрагмента кода:"}},{"type":"code","data":{"code":"void setup(){\r\n size(500,500);\r\n background(0);\r\n stroke(255);\r\n noFill();\r\n}\r\n \r\nvoid draw(){\r\n float scale = 0.03;\r\n \r\n beginShape();\r\n for(int x = 0; xnoise(x) = noise(-x)."}},{"type":"paragraph","data":{"text":"При каждом запуске эскиза кривая выглядит по-разному. Но можно всегда получать один и тот же результат, используя функцию noiseSeed(). Ещё обратите внимание на функцию noiseDetail(), которая изменяет параметры шума (например, его плавность)."}},{"type":"paragraph","data":{"text":"Есть одна хитрость: чтобы нарисовать ещё одну независимую кривую, можно просто взять значения шума, далёкие от предыдущих. Например, сначала используете noise(scale*x), а затем noise(scale*x + 1000)."}},{"type":"paragraph","data":{"text":"Эскиз выше демонстрирует пример одномерного шума, двумерный принимает 2 значения с плавающей запятой и возвращает значения от 0 до 1. Это можно представить как уровень яркости на 2D-изображении."}},{"type":"code","data":{"code":"void setup(){\r\n size(500,500);\r\n background(0);\r\n stroke(255);\r\n noFill();\r\n}\r\n \r\nvoid draw(){\r\n float scale = 0.01;\r\n \r\n for(int x = 0; xэтот код в подобную вкладку вашего Processing-эскиза."}},{"type":"code","data":{"code":"OpenSimplexNoise noise;\r\n \r\nvoid setup(){\r\n size(500,500);\r\n background(0);\r\n stroke(255);\r\n noFill();\r\n \r\n noise = new OpenSimplexNoise();\r\n}\r\n \r\nvoid draw(){\r\n float scale = 0.03;\r\n \r\n beginShape();\r\n for(int x = 0; x 0;\r\n float col = b?255:0;\r\n pixels[x + width*y] = color(col);\r\n }\r\n }\r\n updatePixels();\r\n \r\n saveFrame(\"tuto3.jpg\");\r\n}","language":"java lazy-code"}},{"type":"paragraph","data":{"text":"Результат:"}},{"type":"image","data":{"file":{"id":108047,"url":"https://media.tproger.ru/uploads/2019/03/tuto3.jpg"},"alt":"","title":"","caption":"","stretched":false,"withBackground":false,"withBorder":false,"width":500,"height":500,"optimizedFile":{"original":"https://media.tproger.ru/uploads/2019/03/tuto3.jpg","alt":"Создание GIF-анимаций из шума на языке Processing 5","dimensions":{"width":500,"height":500},"additionalSizes":{"srcSet":[{"url":"https://tproger.ru/signed_image/g-0XY8X8Vv9zC9ax5eDAQFtt4DUzQLGN8ZCQFcfsuPI/rs:fill:500:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxOS8wMy90dXRvMy5qcGc","dpr":1,"width":500},{"url":"https://tproger.ru/signed_image/lIP-4YlJIaMvm_hp1yEjCtosKviJ72TY38sVrWys7OM/rs:fill:1000:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxOS8wMy90dXRvMy5qcGc","dpr":1,"width":1000},{"url":"https://tproger.ru/signed_image/g-0XY8X8Vv9zC9ax5eDAQFtt4DUzQLGN8ZCQFcfsuPI/rs:fill:500:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxOS8wMy90dXRvMy5qcGc","dpr":1,"width":500},{"url":"https://tproger.ru/signed_image/lIP-4YlJIaMvm_hp1yEjCtosKviJ72TY38sVrWys7OM/rs:fill:1000:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxOS8wMy90dXRvMy5qcGc","dpr":1,"width":1000},{"url":"https://tproger.ru/signed_image/g-0XY8X8Vv9zC9ax5eDAQFtt4DUzQLGN8ZCQFcfsuPI/rs:fill:500:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxOS8wMy90dXRvMy5qcGc","dpr":1,"width":500},{"url":"https://tproger.ru/signed_image/lIP-4YlJIaMvm_hp1yEjCtosKviJ72TY38sVrWys7OM/rs:fill:1000:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxOS8wMy90dXRvMy5qcGc","dpr":1,"width":1000},{"url":"https://tproger.ru/signed_image/1F_KbYSNECkK13zeXR5Z8tZmaPAIVzSpQe8Laa9jd6Y/rs:fill:466:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxOS8wMy90dXRvMy5qcGc","dpr":1,"width":466},{"url":"https://tproger.ru/signed_image/KsHfRLRMYd1rV8PXWkTXp2IryYkTT-fkSUH55TIGqu4/rs:fill:932:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxOS8wMy90dXRvMy5qcGc","dpr":1,"width":932}],"sizes":[{"media":"(min-width: 1441px)","size":"500px"},{"media":"(min-width: 1281px)","size":"500px"},{"media":"(min-width: 1281px)","size":"500px"},{"media":"(min-width: 961px)","size":"500px"},{"media":"(min-width: 671px)","size":"500px"},{"media":"(min-width: 500px)","size":"466px"}]}}}},{"type":"header2","data":{"level":2,"text":"Оживление шума"}},{"type":"paragraph","data":{"text":"Это хороший способ сделать идеальное зацикливание. Он будет работать везде, где используется 1D или 2D шум. Замените noise.eval(scale*x,scale*y) на noise.eval(scale*x,scale*y,radius*cos(TWO_PI*t),radius*sin(TWO_PI*t))."}},{"type":"paragraph","data":{"text":"Чтобы зацикливание анимации было идеальным, сделаем круг в двух новых измерениях шумового пространства. Немного проблематично реализовать графическую интерпретацию шума в 2D, но с 1D шумом это означало бы, что нужно брать значения на линии для каждого кадра и перемещать эту линию вдоль цилиндра с увеличением времени."}},{"type":"paragraph","data":{"text":"Давайте применим это к рисунку с пороговым значением:"}},{"type":"code","data":{"code":"OpenSimplexNoise noise;\r\n \r\nvoid setup(){\r\n size(500,500);\r\n background(0);\r\n stroke(255);\r\n noFill();\r\n \r\n noise = new OpenSimplexNoise();\r\n}\r\n \r\nint numFrames = 75;\r\n \r\nfloat radius = 1.0;\r\n \r\nvoid draw(){\r\n float t = 1.0*frameCount/numFrames;\r\n \r\n background(0);\r\n float scale = 0.02;\r\n \r\n loadPixels();\r\n for(int x = 0; x 0;\r\n float col = b?255:0;\r\n pixels[x + width*y] = color(col);\r\n }\r\n }\r\n updatePixels();\r\n \r\n println(t);\r\n \r\n if(frameCount<=numFrames){\r\n saveFrame(\"tuto2###.gif\");\r\n }\r\n if(frameCount == numFrames){\r\n println(\"finished\");\r\n stop();\r\n }\r\n}","language":"java lazy-code"}},{"type":"paragraph","data":{"text":"Результат:"}},{"type":"image","data":{"file":{"id":108049,"url":"https://media.tproger.ru/uploads/2019/03/tuto2.gif"},"alt":"","title":"","caption":"","stretched":false,"withBackground":false,"withBorder":false,"width":500,"height":500}},{"type":"paragraph","data":{"text":"radius — это параметр, который будет контролировать, насколько сильно изменится анимация."}},{"type":"paragraph","data":{"text":"Можно анимировать пример кривой с помощью той же техники:"}},{"type":"code","data":{"code":"OpenSimplexNoise noise;\r\n \r\nvoid setup(){\r\n size(500,500);\r\n background(0);\r\n stroke(255);\r\n noFill();\r\n \r\n noise = new OpenSimplexNoise();\r\n}\r\n \r\nint numFrames = 150;\r\n \r\nfloat radius = 1.5;\r\n \r\nvoid draw(){\r\n float t = 1.0*frameCount/numFrames;\r\n \r\n background(0);\r\n float scale = 0.02;\r\n \r\n beginShape();\r\n for(int x = 0; xnoisetraj.pde"}},{"type":"paragraph","data":{"text":"Обратите внимание, что метод drawCurve() просто рисует круг, но его можно легко изменить."}},{"type":"paragraph","data":{"text":"Пример:"}},{"type":"image","data":{"file":{"id":108053,"url":"https://media.tproger.ru/uploads/2019/03/agif2.gif"},"alt":"","title":"","caption":"","stretched":false,"withBackground":false,"withBorder":false,"width":500,"height":500}},{"type":"paragraph","data":{"text":"Здесь некоторые точки начинаются с решётки и рисуют свою траекторию вслед за шумовым полем. Это поле изменяется с использованием техники 4D-шума (код)."}},{"type":"image","data":{"file":{"id":108054,"url":"https://media.tproger.ru/uploads/2019/03/agif.gif"},"alt":"","title":"","caption":"","stretched":false,"withBackground":false,"withBorder":false,"width":500,"height":500}},{"type":"paragraph","data":{"text":"Пороговое значение для 2D шума определяет, что будет отображаться: «/» или «\\». Снова анимирование с 4D шумом (код)."}},{"type":"image","data":{"file":{"id":108055,"url":"https://media.tproger.ru/uploads/2019/03/tumblr_oxqbzm52qk1w3y4ilo1_500.gif"},"alt":"","title":"","caption":"","stretched":false,"withBackground":false,"withBorder":false,"width":500,"height":500}},{"type":"paragraph","data":{"text":"Линии представляют 2D поле на основе 2D шума. Всё то же анимирование с 4D шумом (код)."}},{"type":"image","data":{"file":{"id":108056,"url":"https://media.tproger.ru/uploads/2019/03/agif41.gif"},"alt":"","title":"","caption":"","stretched":false,"withBackground":false,"withBorder":false,"width":600,"height":600}},{"type":"paragraph","data":{"text":"Вот кое-что посложнее. В основном здесь используются пороговые кривые 1D шума, чтобы определить, каким цветом будут отрисовываться элементы: чёрным или белым. Параметры для анимации каждого столбца различны. Большой диск рисуется в центре в режиме исключения (код для чего-то похожего)."}},{"type":"image","data":{"file":{"id":108057,"url":"https://media.tproger.ru/uploads/2019/03/tumblr_oyjk1cpdef1w3y4ilo1_500.gif"},"alt":"","title":"","caption":"","stretched":false,"withBackground":false,"withBorder":false,"width":500,"height":500}},{"type":"paragraph","data":{"text":"В каждой строке используются независимые значения из 1D шума, анимация с трёхмерным шумом (код)."}},{"type":"header2","data":{"level":2,"text":"Заключение"}},{"type":"paragraph","data":{"text":"Теперь вы знаете, как использовать функцию шума и различные её вариации для рисования собственных анимаций."}},{"type":"paragraph","data":{"text":"P.S.: openSimplex noise не симметрична, поэтому не возникает никаких проблем при использовании radius*cos(TWO_PI*t) или radius*sin(TWO_PI*t) в качестве входных данных. Поскольку при создании гиф-анимации используются положительные и отрицательные значения, возникнет нежелательный эффект, если шум будет симметричен. Но этого можно избежать, если применить сдвиг круга."}},{"type":"embed","data":{"link":"https://tproger.ru/articles/animated-gif-java"}}]}

Ошибка в настройках сайта