| Autor | Zpráva | ||
|---|---|---|---|
| Tomáš Hubík Profil |
#1 · Zasláno: 10. 2. 2013, 17:04:42
Dobrý den,
když jsem se před časem učil pracovat s elemente <canvas>, udělal jsem si několik poznámek a ty jsem nedávno ve volné chvíli sepsal a vytvořil jakýsi návod. Napadlo mne, že by to někoho mohlo zajímat a vzhledem k tomu, že jsem návod psal v češtině, mohl by sloužit i úplným začátečníkům. Prozatím jsou hotovy dva ze tří článků: 1) Úvod + čára a její vlastnosti 2) Křivky + tvary a jejich vlastnosti 3) Obrázky, texty a ostatní - Tento mám rozpracovaný a dokončím jej, pokud bude nějaká zpětná reakce na první dva. Pokud se Vám návod líbí, nebo vám pomohl, dejte Like nebo zanechte komentář ať vím, zda li má cenu psát třetí. Hezký den. |
||
| habendorf Profil |
Fajn, jasně, piš dál :o)
Já jsem si nedávno jen tak zkusil nakreslit jeden fraktálek (konkrétně Kochovu křivku). Šel jsem na to klasicky přes vytváření spanů 1 x 1 px, absolutně pozicovaných. Potom mi Chamurappi poradil použít canvas. No přesněji řečeno mi to pro něj přepsal :o) Samozřejmě to s tím canvasem běhá značně svižněji. Pokud by to někoho zajímalo, hodil jsem to sem: http://pokusy.1-webdesign.cz/fractal-koch/ (běží tam 10 000 iterací, pokud má někdo nějaký hodně slabý stroj, mohlo by to způsobit problémy) Jo a na FB jsem ti to taky lajknul ;o) |
||
| Tomáš Hubík Profil |
#3 · Zasláno: 10. 2. 2013, 21:41:55
Ještě bych se rád zeptal, kde jinde bych mohl ty návody uveřejňovat? Nějaká fóra a podobně?
|
||
| 1Pupik1989 Profil |
#4 · Zasláno: 10. 2. 2013, 22:22:20
Chtělo by to potom i čtvrtou část, která se bude zaměřovat na rychlosti různých metod. Jak vykreslovat v cyklu čáry, jestli je rychlejší použít rotate, scale a translate nebo transform a settransform atd. Já se tím zaobíral bezmála dva týdny, než jsem to vychytal.
U těch čar bych ještě napsal, že existuje i metoda closePath, pokud chce někdo uzavřít první a poslední bod. |
||
|
Časová prodleva: 5 dní
|
|||
| peta Profil |
"kde jinde bych mohl ty návody uveřejňovat"
root.cz nebo interval.cz habendorf: Ja ti nechci kazit radost, ale, kdybys... 1. pouzil math. floor 2. definoval promenne 3. vypocty ulozil do promenne a pak pouzil dalsi cyklus 4. document body si ulozil do promenne tak bys zvysil vykon toho programu u mne z 290 na 210ms. Mozna by se dalo usetrit i vypocty nahore treti odmocninu, 1/3 a pod, nejaka ms. <html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
position: relative;
height: 100%;
}
span {
position: absolute;
width: 1px;
height: 1px;
font-size: 0;
line-height: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="sss"></div>
<!--canvas id="canvas" height="1000" width="1900"></canvas-->
<script type="text/javascript">
var start, stop;
start = new Date().getTime();
//var context = document.getElementById("canvas").getContext("2d");
var body = document.body;
//var body = document.getElementById('sss');
var a = [1/3, 1/3, 1/6, 1/6];
var b = [0, 0, Math.sqrt(3)/6, -Math.sqrt(3)/6];
var c = [0, 0, -Math.sqrt(3)/6, Math.sqrt(3)/6];
var d = [1/3, 1/3, 1/6, 1/6];
var xo = [0, 2/3, 1/2, 1/3];
var yo = [0, 0, Math.sqrt(3)/6, 0];
// var xk = [0, 1, 0.642857, 0.357143];
// var yk = [0, 0, 0.123718, 0.123718];
var colors = ['blue', 'green', 'red', 'black'];
var i = 0;
var pointX = 0;
var pointY = 0;
var n;
var point = [];
for (n = 1; n < 10000; n++) {
var p = Math.random();
if (p < 0.3) {i = 0}
else
if (p < 0.6) {i = 1}
else
if (p < 0.8) {i = 2}
else {i = 3}
pointX = a[i]*pointX + b[i]*pointY + xo[i];
pointY = c[i]*pointX + d[i]*pointY + yo[i];
//context.fillStyle = colors[i];
//context.fillRect(1900*pointX, 1000 - 5000*pointY, 1, 1);
point[n] = {left:Math.floor(1900*pointX)+'px',top:Math.floor(1000-5000*pointY)+'px',backgroundColor:colors[i]};
}
for (n = 1; n < 10000; n++) {
//body.innerHTML+='<span style="left:'+point[n].left+';top:'+point[n].top+';backgroundColor :'+point[n].backgroundColor+';"></span>';
a = document.createElement('span');
a.style.left = point[n].left;
a.style.top = point[n].top;
a.style.backgroundColor = point[n].backgroundColor;
body.appendChild(a);
}
stop = new Date().getTime();
document.write("Doba výpočtu: " +(stop-start)+ " ms");
</script>
</body>
</html>Jeste by to slo takto, proste, nejdriv spocitat a pak si hrat s html. point = [Math.floor(1900*pointX)+'px',Math.floor(1000-5000*pointY)+'px',colors[i]];
xx = document.createElement('span');
xx.style.left = point[0];
xx.style.top = point[1];
xx.style.backgroundColor = point[2];
body.appendChild(xx); |
||
| 1Pupik1989 Profil |
#6 · Zasláno: 15. 2. 2013, 19:53:23
Nebo
<script type="text/javascript">
var sqrt36 = Math.sqrt(3)/6,
a13 = 1/3,
a16 = 1/6,
a = [a13, a13, a16, a16],
b = [0, 0, sqrt36, -sqrt36],
c = [0, 0, -sqrt36, sqrt36],
d = [a13, a13, a16, a16],
xo = [0, 2/3, 0.5, a13],
yo = [0, 0, sqrt36, 0],
colors = ['blue', 'green', 'red', 'black'],
i = 0,
pointX = 0,
pointY = 0,
body = document.body,
cont;
var start=new Date().getTime();
for (var n = 1; n < 10000; n++) {
var p = Math.random();
if (p < 0.3) {i = 0}
else if (p < 0.6) {i = 1}
else if (p < 0.8) {i = 2}
else {i = 3}
pointX = a[i]*pointX + b[i]*pointY + xo[i];
pointY = c[i]*pointX + d[i]*pointY + yo[i];
cont = document.createElement('span');
cont.style.left = ((1900*pointX) << 0)+'px';
cont.style.top = ((1000-5000*pointY) << 0)+'px';
cont.style.backgroundColor = colors[i];
body.appendChild(cont);
}
var stop=new Date().getTime();
console.log("Doba výpočtu: " + (stop-start) + " ms");
</script>Funkci Math.floor bych v tomto případě nepoužil. Je totiž na toto pomalá. A to předpočítání by tam také nemuselo být.
|
||
|
Časová prodleva: 11 let
|
|||
0