Autor Zpráva
Tomáš Hubík
Profil
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
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
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.
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>
Uprava: to var ss, tam nemelo, co delat, to byl takovy pokus...
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
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.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: