🍜 👆🏾 🤚🏽 ندرك التأثير المرئي من فيلم "المصفوفة" 🍳 🤟🏽 🤦🏽

يوم جيد يا اصدقاء!

المنقحة مؤخرا "مصفوفة". الاستماع إلى ما هو فيلم رائع (وهذا ينطبق فقط على الجزء الأول). مرة أخرى ، لفتت الانتباه إلى الخطوط "المتساقطة" مع الهيروغليفية على شاشاتها (لقد استخدمت عمداً كلمة "ملكهم" للمتعة). فكرت في كيفية تنفيذ ذلك ... بأقصى قدر ممكن (بسبب الكسل). هذا ما حصلت عليه.

مرحبا بكم في المصفوفة

الترميز يشبه هذا:

<body style="margin: 0; background: #000; overflow: hidden;"> <canvas></canvas> </body>

تهيئة قماش ، والسياق ، وعرض وارتفاع القماش. نجعل هذا الأخير يساوي عرض وارتفاع نافذة المتصفح:

 const C = document.querySelector("canvas"), $ = C.getContext("2d"), W = C.width = innerWidth, H = C.height = innerHeight

نقوم بإنشاء سطر مع الأحرف التي سيتم استخدامها في التصور (لا أريد الهيروغليفية ، أريد الأبجدية السيريلية!). تحويل هذه السلسلة إلى صفيف. تمنح الفراغات فراغات في الأعمدة ، ويكون التأثير فيها أكثر إثارة للاهتمام:

 const str = "+0-1=2 3 4 5 6 7 8 9 ! ? ., :;", matrix = str.split('')

نحدد حجم الخط ، وعدد الأعمدة وإنشاء مجموعة فارغة. سنستخدم هذه المجموعة لتحديد إحداثي y:

 let font = 11, //   =   /   col = W / font, arr = []

املأ صفيف فارغ بالوحدات بعدد الأعمدة:

 for(let i = 0; i < col; i++) arr[i] = 1

كل شيء جاهز للرسم. البدء:

 function draw() { //    //         $.fillStyle = "rgba(0, 0, 0, .05)" //     $.fillRect(0, 0, W, H) //     $.fillStyle = "#0f0" //    $.font = font + "px system-ui" //   for (let i = 0; i < arr.length; i++) { //     let txt = matrix[Math.floor(Math.random() * matrix.length)] //   //     // fillText( ,  x =  i,    ,  y =  arr,    ) $.fillText(txt, i * font, arr[i] * font) //  "y"     Math.random()   0.975 (   ,      ),    ( "y") //        if (arr[i] * font > H && Math.random() > 0.975) arr[i] = 0 //   y arr[i]++ } }

نبدأ وظيفة الرسم كل 123 مللي ثانية (رقم عشوائي):

 setInterval(draw, 123)

أخيرًا ، عند تغيير حجم النافذة ، نقوم بإعادة تحميل الصفحة (من أجل الكسل):

 window.addEventListener('resize', () => location.reload())

يمكن رؤية النتيجة هنا .

هناك مشكلة صغيرة: من وقت لآخر تلتصق الأعمدة معًا ، يتم رسمها تقريبًا بشكل أفقي. هذا يؤثر على الإدراك: تتشبث العين بالترتيب. هناك نقص في الفوضى ، أو شيء من هذا. لم يتم العثور على حل يستحق.

شكرا لاهتمامكم كل التوفيق.

ندرك التأثير المرئي من فيلم "المصفوفة"

مرحبا بكم في المصفوفة

More articles: