Mimishka & RoguePixel
Mimishka Mimishka
ΠŸΡ€ΠΈΠ²Π΅Ρ‚, Π ΠΎΡƒΠ³ΠŸΠΈΠΊΡΠ΅Π»ΡŒ! Π― Ρ‚ΡƒΡ‚ ΠΌΠ΅Ρ‡Ρ‚Π°ΡŽ ΠΎ Ρ‚ΠΎΡ€Ρ‚Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ выглядит ΠΊΠ°ΠΊ Π³Π»ΠΈΡ‚Ρ‡ Π² пиксСльной Π³Ρ€Π°Ρ„ΠΈΠΊΠ΅ – ΠΊΡ€Π΅ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ мСняСт Ρ†Π²Π΅Ρ‚ ΠΊΠ°ΠΊ Π½Π° сломанном экранС, ΠΊΠΎΠ³Π΄Π° врСмя Π²Ρ‹ΠΉΠ΄Π΅Ρ‚. ПомоТСшь ΠΌΠ½Π΅ с ΠΊΠΎΠ΄ΠΎΠΌ для ΡƒΠ·ΠΎΡ€Π° ΠΊΡ€Π΅ΠΌΠ°?
RoguePixel RoguePixel
Π—Π²ΡƒΡ‡ΠΈΡ‚ ΠΊΠ°ΠΊ интСрСсная ошибка, Π² прямом смыслС слова. Π’ΠΎΠ·ΡŒΠΌΠΈ холст, установи Ρ€Π°Π·ΠΌΠ΅Ρ€, Ρ€Π°Π²Π½Ρ‹ΠΉ Π΄ΠΈΠ°ΠΌΠ΅Ρ‚Ρ€Ρƒ Ρ‚Π²ΠΎΠ΅Π³ΠΎ Ρ‚ΠΎΡ€Ρ‚Π° Π² пиксСлях, ΠΈ нарисуй сСтку случайных Ρ†Π²Π΅Ρ‚ΠΎΠ² с малСньким ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ΠΈΠΊΠΎΠΌ Π½Π° ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ пиксСль. ΠŸΠΎΡ‚ΠΎΠΌ ΠΎΠ±Π΅Ρ€Π½ΠΈ это Π² `setInterval`, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ мСняСт Π΄Π²Π° случайных ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π° ΠΊΠ°ΠΆΠ΄Ρ‹Π΅ полсСкунды, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ эффСкт сломанного дисплСя. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉ быстрый сдвиг ΠΎΡ‚Ρ‚Π΅Π½ΠΊΠ° HSL для ΠΊΡ€Π΅ΠΌΠ°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ постоянно двигался. ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π²Ρ€ΠΎΠ΄Π΅ этого: ```js const ctx = canvas.getContext('2d') const size = 200 // пиксСлСй const step = 10 // Ρ€Π°Π·ΠΌΠ΅Ρ€ Π±Π»ΠΎΠΊΠ° пиксСлСй for(let y=0;y<size;y+=step){ for(let x=0;x<size;x+=step){ ctx.fillStyle = `hsl(${Math.random()*360},80%,50%)` ctx.fillRect(x,y,step,step) } } setInterval(()=>{ // мСняСм Π΄Π²Π° Π±Π»ΠΎΠΊΠ° const a = [Math.floor(Math.random()*size/step), Math.floor(Math.random()*size/step)] const b = [Math.floor(Math.random()*size/step), Math.floor(Math.random()*size/step)] const tmp = ctx.getImageData(a[0]*step,a[1]*step,step,step) ctx.putImageData(ctx.getImageData(b[0]*step,b[1]*step,step,step),a[0]*step,a[1]*step) ctx.putImageData(tmp,b[0]*step,b[1]*step,step,step) },500) ``` Π”ΠΎΠ±Π°Π²ΡŒ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ CSS `transform: scale(1.02)` Ρ‚Π°ΠΉΠΌΠ΅Ρ€Ρƒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎ ΠΎΠΊΠ½Π°, ΠΈ Ρƒ тСбя получится ΠΊΡ€Π΅ΠΌΠΎΠ²Ρ‹ΠΉ эффСкт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΏΡ€Π΅ΠΊΡ€Π°Ρ‰Π°Π΅Ρ‚ Ρ‚Π°Π½Ρ†Π΅Π²Π°Ρ‚ΡŒ. Π”Π°ΠΉ Π·Π½Π°Ρ‚ΡŒ, Ссли Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ Ρ€Π΅Π·ΠΊΠΈΠΉ сбой.