{"id":97571,"date":"2025-02-15T09:36:41","date_gmt":"2025-02-15T06:06:41","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d8%b1%db%8c%d8%aa%d9%85\/"},"modified":"2025-02-15T09:36:41","modified_gmt":"2025-02-15T06:06:41","slug":"%d8%a7%d9%84%da%af%d9%88%d8%b1%db%8c%d8%aa%d9%85","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d8%b1%db%8c%d8%aa%d9%85\/","title":{"rendered":"\u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d8%b1%db%8c%d8%aa%d9%85\/#%DA%A9%D8%A7%D9%88%D8%B4_P5JS_%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C_%D8%A7%D9%84%DA%AF%D9%88%D8%B1%DB%8C%D8%AA%D9%85_Velet_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%A2%D8%B2%D9%85%D8%A7%DB%8C%D8%B4_%D9%87%D8%A7%DB%8C_%D8%AA%D8%B5%D9%88%DB%8C%D8%B1\" >\u06a9\u0627\u0648\u0634 P5.JS: \u0627\u062c\u0631\u0627\u06cc \u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645 Velet \u0628\u0631\u0627\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634 \u0647\u0627\u06cc \u062a\u0635\u0648\u06cc\u0631<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d8%b1%db%8c%d8%aa%d9%85\/#p5js_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\" >p5.js \u0686\u06cc\u0633\u062a\u061f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d8%b1%db%8c%d8%aa%d9%85\/#%D9%85%D8%B9%D8%B1%D9%81%DB%8C_%D8%A7%D9%84%DA%AF%D9%88%D8%B1%DB%8C%D8%AA%D9%85_Velet\" >\u0645\u0639\u0631\u0641\u06cc \u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645 Velet<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d8%b1%db%8c%d8%aa%d9%85\/#%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C\" >\u0627\u062c\u0631\u0627\u06cc<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d8%b1%db%8c%d8%aa%d9%85\/#%D8%AA%D9%88%D8%B6%DB%8C%D8%AD_%DA%A9%D8%AF\" >\u062a\u0648\u0636\u06cc\u062d \u06a9\u062f<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d8%b1%db%8c%d8%aa%d9%85\/#%D8%A2%D8%B2%D9%85%D8%A7%DB%8C%D8%B4%D8%A7%D8%AA_%D8%AA%D8%B5%D9%88%DB%8C%D8%B1%DB%8C\" >\u0622\u0632\u0645\u0627\u06cc\u0634\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\u06cc<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h1><span class=\"ez-toc-section\" id=\"%DA%A9%D8%A7%D9%88%D8%B4_P5JS_%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C_%D8%A7%D9%84%DA%AF%D9%88%D8%B1%DB%8C%D8%AA%D9%85_Velet_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%A2%D8%B2%D9%85%D8%A7%DB%8C%D8%B4_%D9%87%D8%A7%DB%8C_%D8%AA%D8%B5%D9%88%DB%8C%D8%B1\"><\/span>\n<p>  \u06a9\u0627\u0648\u0634 P5.JS: \u0627\u062c\u0631\u0627\u06cc \u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645 Velet \u0628\u0631\u0627\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634 \u0647\u0627\u06cc \u062a\u0635\u0648\u06cc\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p>\u062e\u0644\u0627\u0642\u06cc\u062a \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0646\u0648\u0639\u06cc \u0628\u06cc\u0627\u0646 \u0628\u062f\u0648\u0646 \u0645\u062d\u062f\u0648\u062f\u06cc\u062a \u067e\u06cc\u062f\u0627 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u0645\u0631\u0648\u0632 \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0647 \u062f\u0627\u062e\u0644 \u0634\u06cc\u0631\u062c\u0647 \u0628\u0631\u0648\u06cc\u0645 <strong>P5. \u0628\u0631\u0627\u06cc<\/strong>\u060c \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 JavaScript \u0628\u0627 \u062a\u0645\u0631\u06a9\u0632 \u0628\u0631 \u0622\u0632\u0645\u0627\u06cc\u0634 \u0647\u0646\u0631 \u0648 \u0628\u0635\u0631\u06cc \u060c \u0648 \u0627\u062c\u0631\u0627\u06cc <em>\u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645 \u0641\u0648\u0631\u06cc<\/em>\u0628\u0634\u0631 \u0627\u06cc\u0646 \u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645 \u060c \u06a9\u0647 \u0645\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0631\u0648\u0634\u06cc \u0628\u0631\u0627\u06cc \u0628\u0631\u0631\u0633\u06cc \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0648 \u062a\u062d\u0648\u0644\u0627\u062a \u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u060c \u0627\u0632 \u062a\u0648\u0627\u0628\u0639 \u0631\u06cc\u0627\u0636\u06cc (\u0645\u0627\u0646\u0646\u062f \u0633\u06cc\u0646\u0648\u0633\u06cc) \u0648 \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u067e\u06cc\u06a9\u0633\u0644 \u0645\u0633\u062a\u0642\u06cc\u0645 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u062c\u0644\u0648\u0647 \u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0648 \u063a\u0627\u0641\u0644\u06af\u06cc\u0631\u06a9\u0646\u0646\u062f\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"p5js_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\"><\/span>\n<p>  p5.js \u0686\u06cc\u0633\u062a\u061f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>P5.JS \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0627\u06cc\u062c\u0627\u062f \u0637\u0631\u062d \u0647\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc \u0648 \u0647\u0646\u0631\u06cc \u0631\u0627 \u062a\u0633\u0647\u06cc\u0644 \u0645\u06cc \u06a9\u0646\u062f. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0634\u06cc \u0633\u0627\u062f\u0647 \u0648 \u0628\u0635\u0631\u06cc \u062a\u0631\u0633\u06cc\u0645 \u060c \u062a\u0634\u0648\u06cc\u0642 \u0648 \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u06a9\u0646\u06cc\u0645 &#8211; \u0645\u0646\u0627\u0633\u0628 \u0628\u0631\u0627\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634 \u0647\u0627\u06cc \u062a\u0635\u0648\u06cc\u0631\u06cc!<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B9%D8%B1%D9%81%DB%8C_%D8%A7%D9%84%DA%AF%D9%88%D8%B1%DB%8C%D8%AA%D9%85_Velet\"><\/span>\n<p>  \u0645\u0639\u0631\u0641\u06cc \u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645 Velet<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06af\u0631\u0686\u0647 <em>\u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645 \u0641\u0648\u0631\u06cc<\/em> \u0646\u0647 \u06cc\u06a9 \u0627\u0644\u06af\u0648\u06cc \u0633\u0646\u062a\u06cc \u060c \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0627 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0631\u0648\u0634\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0641\u0627\u0635\u0644\u0647 \u0627\u0632 \u0647\u0631 \u067e\u06cc\u06a9\u0633\u0644 \u0631\u0627 \u062f\u0631 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0628\u0627 \u06cc\u06a9 \u0646\u0642\u0637\u0647 \u0645\u0631\u06a9\u0632\u06cc \u062a\u0631\u0633\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u06cc\u06a9 \u0639\u0645\u0644\u06a9\u0631\u062f \u0645\u062b\u0644\u062b\u0627\u062a\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0631\u0646\u06af \u0627\u0639\u0645\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f. \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u060c \u0645\u0627 \u062a\u0623\u062b\u06cc\u0631\u0627\u062a\u06cc \u062f\u0627\u0631\u06cc\u0645 \u06a9\u0647 \u0628\u0627 \u06af\u0630\u0634\u062a \u0632\u0645\u0627\u0646 \u0645\u062a\u0641\u0627\u0648\u062a \u0627\u0633\u062a \u0648 \u06cc\u06a9 \u062a\u062c\u0631\u0628\u0647 \u0628\u0635\u0631\u06cc \u067e\u0648\u06cc\u0627 \u0648 \u0627\u0631\u06af\u0627\u0646\u06cc\u06a9 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C\"><\/span>\n<p>  \u0627\u062c\u0631\u0627\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u06a9\u062f \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0627\u06cc\u0646 \u0627\u06cc\u062f\u0647 \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u062f. \u062f\u0631 \u0637\u0631\u062d \u060c \u0631\u0646\u06af \u0647\u0631 \u067e\u06cc\u06a9\u0633\u0644 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0641\u0627\u0635\u0644\u0647 \u0622\u0646 \u0628\u0627 \u0645\u0631\u06a9\u0632 \u0628\u0648\u0645 \u0648 \u062a\u063a\u06cc\u06cc\u0631 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0627\u0632 \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0627\u0635\u0644\u0627\u062d \u0645\u06cc \u0634\u0648\u062f <code>sin()<\/code>\u0628\u0634\u0631\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">function<\/span> <span class=\"nf\">setup<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">createCanvas<\/span><span class=\"p\">(<\/span><span class=\"mi\">800<\/span><span class=\"p\">,<\/span> <span class=\"mi\">600<\/span><span class=\"p\">);<\/span>\n  <span class=\"nf\">pixelDensity<\/span><span class=\"p\">(<\/span><span class=\"mi\">1<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ Para trabalhar diretamente com os pixels<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">draw<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">background<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">);<\/span>\n  <span class=\"nf\">loadPixels<\/span><span class=\"p\">();<\/span>\n\n  <span class=\"c1\">\/\/ Itera sobre todos os pixels do canvas<\/span>\n  <span class=\"k\">for <\/span><span class=\"p\">(<\/span><span class=\"kd\">let<\/span> <span class=\"nx\">x<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span> <span class=\"nx\">x<\/span> <span class=\"o\">&lt;<\/span> <span class=\"nx\">width<\/span><span class=\"p\">;<\/span> <span class=\"nx\">x<\/span><span class=\"o\">++<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">for <\/span><span class=\"p\">(<\/span><span class=\"kd\">let<\/span> <span class=\"nx\">y<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span> <span class=\"nx\">y<\/span> <span class=\"o\">&lt;<\/span> <span class=\"nx\">height<\/span><span class=\"p\">;<\/span> <span class=\"nx\">y<\/span><span class=\"o\">++<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">let<\/span> <span class=\"nx\">index<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">x<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">y<\/span> <span class=\"o\">*<\/span> <span class=\"nx\">width<\/span><span class=\"p\">)<\/span> <span class=\"o\">*<\/span> <span class=\"mi\">4<\/span><span class=\"p\">;<\/span>\n\n      <span class=\"c1\">\/\/ Calcula a dist\u00e2ncia do pixel at\u00e9 o centro do canvas<\/span>\n      <span class=\"kd\">let<\/span> <span class=\"nx\">d<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">dist<\/span><span class=\"p\">(<\/span><span class=\"nx\">x<\/span><span class=\"p\">,<\/span> <span class=\"nx\">y<\/span><span class=\"p\">,<\/span> <span class=\"nx\">width<\/span> <span class=\"o\">\/<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"nx\">height<\/span> <span class=\"o\">\/<\/span> <span class=\"mi\">2<\/span><span class=\"p\">);<\/span>\n\n      <span class=\"c1\">\/\/ Aplica uma varia\u00e7\u00e3o temporal para criar anima\u00e7\u00e3o<\/span>\n      <span class=\"c1\">\/\/ O valor 'factor' varia entre 0 e 255 de forma senoidal<\/span>\n      <span class=\"kd\">let<\/span> <span class=\"nx\">factor<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">sin<\/span><span class=\"p\">(<\/span><span class=\"nx\">d<\/span> <span class=\"o\">\/<\/span> <span class=\"mi\">20<\/span> <span class=\"o\">+<\/span> <span class=\"nf\">millis<\/span><span class=\"p\">()<\/span> <span class=\"o\">\/<\/span> <span class=\"mi\">1000<\/span><span class=\"p\">)<\/span> <span class=\"o\">*<\/span> <span class=\"mi\">127<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">128<\/span><span class=\"p\">;<\/span>\n\n      <span class=\"c1\">\/\/ Modifica as cores do pixel com base no fator calculado<\/span>\n      <span class=\"nx\">pixels<\/span><span class=\"p\">[<\/span><span class=\"nx\">index<\/span><span class=\"p\">]<\/span>   <span class=\"o\">=<\/span> <span class=\"nx\">factor<\/span><span class=\"p\">;<\/span>       <span class=\"c1\">\/\/ Componente Red<\/span>\n      <span class=\"nx\">pixels<\/span><span class=\"p\">[<\/span><span class=\"nx\">index<\/span><span class=\"o\">+<\/span><span class=\"mi\">1<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">factor<\/span> <span class=\"o\">*<\/span> <span class=\"mf\">0.7<\/span><span class=\"p\">;<\/span>   <span class=\"c1\">\/\/ Componente Green (ajustado para um tom diferente)<\/span>\n      <span class=\"nx\">pixels<\/span><span class=\"p\">[<\/span><span class=\"nx\">index<\/span><span class=\"o\">+<\/span><span class=\"mi\">2<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">factor<\/span> <span class=\"o\">*<\/span> <span class=\"mf\">0.5<\/span><span class=\"p\">;<\/span>   <span class=\"c1\">\/\/ Componente Blue (para varia\u00e7\u00e3o)<\/span>\n      <span class=\"nx\">pixels<\/span><span class=\"p\">[<\/span><span class=\"nx\">index<\/span><span class=\"o\">+<\/span><span class=\"mi\">3<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">255<\/span><span class=\"p\">;<\/span>            <span class=\"c1\">\/\/ Componente Alpha (opacidade)<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">updatePixels<\/span><span class=\"p\">();<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AA%D9%88%D8%B6%DB%8C%D8%AD_%DA%A9%D8%AF\"><\/span>\n<p>  \u062a\u0648\u0636\u06cc\u062d \u06a9\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\n<strong>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc ()<\/strong>: \u0645\u0627 \u0628\u0648\u0645 \u0631\u0627 \u0628\u0648\u062a \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>pixelDensity(1)<\/code> \u0628\u0631\u0627\u06cc \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u0645\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0645\u0633\u062a\u0642\u06cc\u0645 \u067e\u06cc\u06a9\u0633\u0644 \u0647\u0627 \u0631\u0627 \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u060c \u0628\u062f\u0648\u0646 \u062a\u062f\u0627\u062e\u0644 \u0686\u06af\u0627\u0644\u06cc \u067e\u06cc\u06a9\u0633\u0644 \u0628\u0627\u0644\u0627 (\u0645\u0627\u0646\u0646\u062f \u0635\u0641\u062d\u0647 \u0647\u0627\u06cc \u0634\u0628\u06a9\u06cc\u0647).<\/li>\n<li>\n<strong>\u0642\u0631\u0639\u0647 \u06a9\u0634\u06cc ()<\/strong>: \u062f\u0631 \u0647\u0631 \u0641\u0631\u06cc\u0645 \u060c \u0628\u0648\u0645 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u0634\u0648\u062f:<\/p>\n<ul>\n<li>\n<code>background(0)<\/code>  \u067e\u0627\u06cc\u06cc\u0646 \u0631\u0627 \u062a\u0645\u06cc\u0632 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\n<code>loadPixels()<\/code>  \u0627\u06cc\u0646 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u067e\u06cc\u06a9\u0633\u0644 \u0631\u0627 \u062d\u0645\u0644 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u0645 \u0622\u0646 \u0631\u0627 \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u06a9\u0646\u06cc\u0645.<\/li>\n<li>\u062f\u0648 \u062d\u0644\u0642\u0647 \u0647\u0631 \u0645\u0648\u0642\u0639\u06cc\u062a \u0631\u0627 \u0637\u06cc \u0645\u06cc \u06a9\u0646\u0646\u062f <code>(x, y)<\/code> \u0628\u0648\u0645 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f<\/li>\n<li>\u0645\u0627 \u0641\u0627\u0635\u0644\u0647 \u0631\u0627 \u0645\u062d\u0627\u0633\u0628\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>d<\/code> \u0627\u0632 \u067e\u06cc\u06a9\u0633\u0644 \u0628\u0647 \u0645\u0631\u06a9\u0632.<\/li>\n<li>\u0645\u0627 \u0627\u0632 \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>sin()<\/code> \u0647\u0645\u0631\u0627\u0647 \u0628\u0627 <code>millis()<\/code> \u0628\u0631\u0627\u06cc \u0645\u0639\u0631\u0641\u06cc \u06cc\u06a9 \u062a\u063a\u06cc\u06cc\u0631 \u0632\u0645\u0627\u0646\u06cc \u060c \u0648 \u062f\u0631 \u0646\u062a\u06cc\u062c\u0647 \u0645\u0642\u062f\u0627\u0631 <code>factor<\/code> \u06a9\u0647 \u0634\u062f\u062a \u0631\u0646\u06af \u0631\u0627 \u062a\u0639\u06cc\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\u0645\u0627 \u0627\u062c\u0632\u0627\u06cc \u0631\u0646\u06af (RGB) \u0647\u0631 \u067e\u06cc\u06a9\u0633\u0644 \u0631\u0627 \u0627\u0635\u0644\u0627\u062d \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u06a9\u062f\u0648\u0631\u062a \u06a9\u0644 \u0631\u0627 \u0628\u0627 \u0622\u0646 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>pixels[index+3] = 255<\/code>\u0628\u0634\u0631<\/li>\n<li>\u0628\u0627\u0644\u0627\u062e\u0631\u0647 \u060c <code>updatePixels()<\/code> \u0628\u0648\u0645 \u0631\u0627 \u0628\u0627 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A2%D8%B2%D9%85%D8%A7%DB%8C%D8%B4%D8%A7%D8%AA_%D8%AA%D8%B5%D9%88%DB%8C%D8%B1%DB%8C\"><\/span>\n<p>  \u0622\u0632\u0645\u0627\u06cc\u0634\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0641\u0642\u0637 \u06cc\u06a9 \u0646\u0642\u0637\u0647 \u0634\u0631\u0648\u0639 \u0628\u0631\u0627\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634 \u0647\u0627\u06cc \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a:<\/p>\n<ul>\n<li>\n<strong>\u0634\u0627\u0631\u0698 \u0648 \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631:<\/strong> \u0628\u0647 \u062c\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u0627\u0632 \u0627\u0628\u062a\u062f\u0627 \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>loadImage()<\/code> \u0628\u0631\u0627\u06cc \u062d\u0645\u0644 \u06cc\u06a9 \u0639\u06a9\u0633 \u0648 \u0627\u0639\u0645\u0627\u0644 \u062a\u062d\u0648\u0644\u0627\u062a \u0628\u0631 \u0627\u0633\u0627\u0633 \u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645 Velet.<\/li>\n<li>\n<strong>\u062a\u0639\u0627\u0645\u0644:<\/strong> \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627 (\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c \u0645\u0642\u06cc\u0627\u0633 \u0641\u0627\u0635\u0644\u0647 \u06cc\u0627 \u0633\u0631\u0639\u062a \u062a\u0646\u0648\u0639 \u0632\u0645\u0627\u0646\u06cc) \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u060c \u06a9\u0646\u062a\u0631\u0644 \u0647\u0627 (\u0645\u0627\u0646\u0646\u062f \u06a9\u0634\u0648\u06cc\u06cc \u06cc\u0627 \u062f\u06a9\u0645\u0647) \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\n<strong>\u062a\u0631\u06a9\u06cc\u0628\u06cc \u0627\u0632 \u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645 \u0647\u0627:<\/strong> \u0633\u0639\u06cc \u06a9\u0646\u06cc\u062f \u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645 Velet \u0631\u0627 \u0628\u0627 \u0633\u0627\u06cc\u0631 \u062a\u06a9\u0646\u06cc\u06a9 \u0647\u0627 \u060c \u0645\u0627\u0646\u0646\u062f \u0633\u0631 \u0648 \u0635\u062f\u0627\u06cc \u067e\u0631\u0644\u06cc\u0646 \u06cc\u0627 \u0641\u06cc\u0644\u062a\u0631\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u060c \u0627\u062f\u063a\u0627\u0645 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u062a\u0635\u0648\u06cc\u0631\u06cc \u062d\u062a\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062a\u0631 \u0648 \u062c\u0627\u0644\u0628 \u062a\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ul>\n<p>\u0627\u062c\u0631\u0627\u06cc <em>\u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645 \u0641\u0648\u0631\u06cc<\/em> \u062f\u0631 P5.JS \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0631\u06cc\u0627\u0636\u06cc\u0627\u062a \u0648 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u0647\u0646\u0631 \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644\u06cc \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u062c\u0645\u0639 \u0634\u0648\u0646\u062f. \u0645\u0627 \u0634\u0645\u0627 \u0631\u0627 \u062a\u0634\u0648\u06cc\u0642 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0628\u0627 \u062a\u0646\u0638\u06cc\u0645 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627 \u0648 \u062a\u0631\u06a9\u06cc\u0628 \u062a\u06a9\u0646\u06cc\u06a9 \u0647\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0634\u0641 \u062c\u0647\u0627\u0646 \u0647\u0627\u06cc \u0628\u0635\u0631\u06cc \u062c\u062f\u06cc\u062f \u060c \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0631\u0627 \u06a9\u0634\u0641 \u0648 \u062a\u0637\u0628\u06cc\u0642 \u062f\u0647\u06cc\u062f.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u06a9\u0627\u0648\u0634 P5.JS: \u0627\u062c\u0631\u0627\u06cc \u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645 Velet \u0628\u0631\u0627\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634 \u0647\u0627\u06cc \u062a\u0635\u0648\u06cc\u0631 \u062e\u0644\u0627\u0642\u06cc\u062a \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0646\u0648\u0639\u06cc \u0628\u06cc\u0627\u0646 \u0628\u062f\u0648\u0646 \u0645\u062d\u062f\u0648\u062f\u06cc\u062a \u067e\u06cc\u062f\u0627 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u0645\u0631\u0648\u0632 \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0647 \u062f\u0627\u062e\u0644 \u0634\u06cc\u0631\u062c\u0647 \u0628\u0631\u0648\u06cc\u0645 P5. \u0628\u0631\u0627\u06cc\u060c \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 JavaScript \u0628\u0627 \u062a\u0645\u0631\u06a9\u0632 \u0628\u0631 \u0622\u0632\u0645\u0627\u06cc\u0634 \u0647\u0646\u0631 \u0648 \u0628\u0635\u0631\u06cc \u060c \u0648 \u0627\u062c\u0631\u0627\u06cc \u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645 \u0641\u0648\u0631\u06cc\u0628\u0634\u0631 \u0627\u06cc\u0646 \u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645 \u060c \u06a9\u0647 \u0645\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0631\u0648\u0634\u06cc \u0628\u0631\u0627\u06cc \u0628\u0631\u0631\u0633\u06cc &hellip;<\/p>\n","protected":false},"author":2,"featured_media":97572,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/media2.dev.to\/dynamic\/image\/width=1000,height=500,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnltl87rfw0vtojx0l2q8.png","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-97571","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/97571","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=97571"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/97571\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/97572"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=97571"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=97571"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=97571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}