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:

<canvas id="myCanvas"></canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
c.width=800;
c.height=600;
v=450;
t=0;o=255;m=Math;
function i(){
	t+=0.01;
	w=600+m.sin(t)*100;
	r=m.floor(m.sin(t*3)*o);
	g=m.floor(m.sin(t*5)*o);
	n=m.floor(m.sin(t*7)*o);
	ctx.fillStyle="rgba(0,0,0,0.005)";
	ctx.fillRect(0, 0, w, w);
	ctx.fillRect(w, w, w, w);
	ctx.fillStyle="rgba("+r+","+g+","+n+",0.1)";
	ctx.fillRect(w, 0, w, w);
	ctx.fillRect(0, w, w, w);
	ctx.drawImage(c,0,w,w,w);
	ctx.drawImage(c,w,w,w,w);
	ctx.drawImage(c,w,0,w,w);
	ctx.drawImage(c,0,0,w,w);
	ctx.translate(v,v);
	ctx.rotate(0.01*m.abs(m.sin(t)));
	ctx.translate(-v,-v);
	setTimeout('i()',10);
}
i();
</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