ugrás a tartalomhoz

Szerintetek ez mi

domel · 2015. Feb. 15. (V), 01.28
Szerintetek ez miből van? javascript demo
Három napja próbálok rájönni, de csak annyit tudok hogy négy egymás mellé rakott téglalap forog, még ha ez sok-száznak tűnik is. Még abban sem vagyok biztos, hogy a drawImage-be betölt-e kívülről képet, de az biztos, hogy a tartalmát a Timer ciklusban nem változtatja. Ami viszont érdekes, hogy a telefonjaim is vígan megbírkóznak vele, vagyis egyáltalán nem számítás-igényes a megjelenés, mégha elsőre annak is tűnik
‹ JS setTimeout() object-en belül jQuery datatable ›
 ■
1

Canvas

T.G · 2015. Feb. 15. (V), 08.41
Itt csak egy darab canvas-t látunk, rajta valóban ezernyi kis téglalappal. A forrás aránylag olvasható is, a canvas-t 10 ezredmásodpercenként átrajzoljuk: új téglalapok is belekerülnek, önmagára átmásolja az egészet, plusz még egy kis forgatás is van benne.

Szerintem a JS1K forráskódja zavart meg és amiatt nem volt egyértelmű, hogy pontosan hogyan is működik maga a versenyző kódja. Itt van ugyanaz a kód önmagában működő verziója:
  1. <canvas id="myCanvas"></canvas>  
  2.   
  3. <script>  
  4. var c=document.getElementById("myCanvas");  
  5. var ctx=c.getContext("2d");  
  6. c.width=800;  
  7. c.height=600;  
  8. v=450;  
  9. t=0;o=255;m=Math;  
  10. function i(){  
  11.     t+=0.01;  
  12.     w=600+m.sin(t)*100;  
  13.     r=m.floor(m.sin(t*3)*o);  
  14.     g=m.floor(m.sin(t*5)*o);  
  15.     n=m.floor(m.sin(t*7)*o);  
  16.     ctx.fillStyle="rgba(0,0,0,0.005)";  
  17.     ctx.fillRect(0, 0, w, w);  
  18.     ctx.fillRect(w, w, w, w);  
  19.     ctx.fillStyle="rgba("+r+","+g+","+n+",0.1)";  
  20.     ctx.fillRect(w, 0, w, w);  
  21.     ctx.fillRect(0, w, w, w);  
  22.     ctx.drawImage(c,0,w,w,w);  
  23.     ctx.drawImage(c,w,w,w,w);  
  24.     ctx.drawImage(c,w,0,w,w);  
  25.     ctx.drawImage(c,0,0,w,w);  
  26.     ctx.translate(v,v);  
  27.     ctx.rotate(0.01*m.abs(m.sin(t)));  
  28.     ctx.translate(-v,-v);  
  29.     setTimeout('i()',10);  
  30. }  
  31. i();  
  32. </script>  
2

még mindig nem

domel · 2015. Feb. 15. (V), 11.15
De mi van a "c"-ben????
ctx.drawImage(c <---?
először fillRect( aztán ugyanoda drawImage(
3

Mi a kérdés?

T.G · 2015. Feb. 15. (V), 11.30
De mi van a "c"-ben????

Az általam írt kód 4. sora: var c=document.getElementById("myCanvas");

először fillRect( aztán ugyanoda drawImage(


Az alábbi oldalon megtalálod ezeket a canvas függvényeket: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

Ne az eredeti oldalt nézd, hanem azt a rövid HTML részletet, amit az első hozzászólásban írtam, az egy az egyben működik, és minden változó megtalálható ott.
4

most látom

domel · 2015. Feb. 15. (V), 12.34
Most látom, hogy te összeraktál nekem egy működő kódot a linkelt demóból :)
Ez így fanta!
Most fogom fel, hogy ez valami olyasmi mint mikor online videózom a TV-t, és a valamennyi fáziskésés miatt mozgatáskor különféle alakzatok rajzolódnak ki.

Köcce a segítséget, a linked is nagyon érdekes, egy darabig el leszek vele.
5

Tetszik

zzrek · 2015. Feb. 16. (H), 00.22
Tetszik, kiraktam a jsfiddle-re lehet variálgatni.
Itt van
Kicsit variáltam a paramétereken:
Ez is jól néz ki