Randomizzare un angolo?

var elem = document.getElementById('canvas'); 
 
var context = elem.getContext('2d'); 
 

 
context.fillStyle = '#000'; 
 
context.lineWidth = 1; 
 

 
var depth = 9; 
 

 
function drawLine(x1, y1, x2, y2, brightness){ 
 
    context.moveTo(x1, y1); 
 
    context.lineTo(x2, y2); 
 
} 
 

 
function drawTree(x1, y1, angle, depth){ 
 
    if (depth !== 0){ 
 
    \t var thisAngle = angle*(Math.random()-0.5) 
 
    var x2 = x1 + (Math.cos(thisAngle) * depth * 10.0); 
 
    var y2 = y1 + (Math.sin(thisAngle) * depth * 10.0); 
 
    drawLine(x1, y1, x2, y2, depth); 
 
    drawTree(x2, y2, angle - 0.34906585, depth - 1); 
 
    drawTree(x2, y2, angle + 0.34906585, depth - 1); 
 
    } 
 
} 
 

 
context.beginPath(); 
 
drawTree(300, 500, -1.57, depth); 
 
context.closePath(); 
 
context.stroke();

<html> 
 
<body> 
 
<canvas id="canvas" width="1000" height="700"></canvas> 
 

 
</body> 
 
</html>

Ho una funzione che disegna un albero-frattale in tela:

function drawTree(x1, y1, angle, depth){ 
    if (depth !== 0){ 
    var x2 = x1 + (Math.cos(angle) * depth * 10.0); 
    var y2 = y1 + (Math.sin(angle) * depth * 10.0); 
    drawLine(x1, y1, x2, y2, depth); 
    drawTree(x2, y2, angle - 0.34906585, depth - 1); 
    drawTree(x2, y2, angle + 0.34906585, depth - 1); 
    } 
}

Sto cercando di casuale frattale un po 'per farlo sembrare più organico . Ho provato questo:

function drawTree(x1, y1, angle, depth){ 
    if (depth !== 0){ 
    var thisAngle = angle*(Math.random()-0.5) 
    var x2 = x1 + (Math.cos(thisAngle) * depth * 10.0); 
    var y2 = y1 + (Math.sin(thisAngle) * depth * 10.0); 
    drawLine(x1, y1, x2, y2, depth); 
    drawTree(x2, y2, angle - 0.34906585, depth - 1); 
    drawTree(x2, y2, angle + 0.34906585, depth - 1); 
    } 
}

Per qualche ragione questo sembra essere di parte torwards il valore 0. L'albero si appoggia torwards destra. Non capisco perché.

fonte

2015-07-31 Himmators

puoi fornire un violino/codepen? – Pixelomo

Qui vai !!!!! – Himmators

La differenza è così grande: p come patata e patatine –

È necessario aggiungere un offset casuale (nell'intervallo ± 0,5 o meno) all'angolo, non moltiplicare per quel fattore.

var elem = document.getElementById('canvas'); 
 
var context = elem.getContext('2d'); 
 

 
context.fillStyle = '#000'; 
 
context.lineWidth = 1; 
 

 
var depth = 9; 
 

 
function drawLine(x1, y1, x2, y2, brightness){ 
 
    context.moveTo(x1, y1); 
 
    context.lineTo(x2, y2); 
 
} 
 

 
function drawTree(x1, y1, angle, depth){ 
 
    if (depth !== 0) { 
 
    var delta = Math.random()-0.5; 
 
    var x2 = x1 + (Math.cos(angle + delta) * depth * 10.0); 
 
    var y2 = y1 + (Math.sin(angle + delta) * depth * 10.0); 
 
    drawLine(x1, y1, x2, y2, depth); 
 
    drawTree(x2, y2, angle - 0.34906585, depth - 1); 
 
    drawTree(x2, y2, angle + 0.34906585, depth - 1); 
 
    } 
 
} 
 

 
context.beginPath(); 
 
drawTree(300, 500, -1.57, depth); 
 
context.closePath(); 
 
context.stroke();

<html> 
 
<body> 
 
<canvas id="canvas" width="1000" height="700"></canvas> 
 

 
</body> 
 
</html>

si può anche voler sperimentare modificando l'angolo passato alle chiamate ricorsive (ad esempio utilizzare l'angolo modificato al posto di quella originale).

fonte

2015-07-31 09:13:49 Alnitak

Randomizzare un angolo?

risposta

Problemi correlati