Ngẫu nhiên một góc?

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>

Tôi có một chức năng vẽ hình một cây fractal trong một canvas:

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); 
    } 
}

Tôi đang cố gắng để ngẫu nhiên hoá fractal một chút để làm cho nó trông hữu cơ hơn . Tôi cố gắng này:

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); 
    } 
}

Đối với một số lý do này dường như được thiên vị torwards giá trị 0. Cây nghiêng torwards bên phải. Tôi không hiểu tại sao.

Nguồn

2015-07-31 Himmators

bạn có thể cung cấp fiddle/codepen không? – Pixelomo

Ở đây bạn đi !!!!! – Himmators

Sự khác biệt quá lớn: p như khoai tây và chip –

Bạn cần phải thêm khoản chênh lệch ngẫu nhiên (trong phạm vi ± 0,5 hoặc ít hơn) vào góc của bạn, không nhân với yếu tố đó.

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>

Bạn cũng có thể thử nghiệm với việc thay đổi góc truyền cho các cuộc gọi đệ quy (ví dụ sử dụng góc điều chỉnh thay vì bản gốc một).

Nguồn

2015-07-31 09:13:49 Alnitak

Ngẫu nhiên một góc?

Trả lời

Các vấn đề liên quan