Mimishka & 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)` ΡΠ°ΠΉΠΌΠ΅ΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π³ΠΎ ΠΎΠΊΠ½Π°, ΠΈ Ρ ΡΠ΅Π±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡΡ ΠΊΡΠ΅ΠΌΠΎΠ²ΡΠΉ ΡΡΡΠ΅ΠΊΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ°Π΅Ρ ΡΠ°Π½ΡΠ΅Π²Π°ΡΡ. ΠΠ°ΠΉ Π·Π½Π°ΡΡ, Π΅ΡΠ»ΠΈ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅Π·ΠΊΠΈΠΉ ΡΠ±ΠΎΠΉ.