Reputation: 7
I have a function, that draws a koch snowflake, but i have to change it to draw a randomized koch snowflake, that means: To obtain it, it is sufficient to rotate the new vertex inward or outward at each step of the iterative process of the constructed triangle. here is an example how it should look like randomized koch snowflake.
Here is my function that draws a koch snowflake, please, tell me what i should change in my axiom and product
function drawRdFractal() {
const iterationsInput = document.getElementById("iterationsInput").value;
const color = document.getElementById("colorPicker").value;
const scaleInput = document.getElementById("scaleInput").value;
const iterations = parseInt(iterationsInput);
const scale = parseFloat(scaleInput);
var canvas = document.querySelector('.myCanvas')
var ctx = canvas.getContext("2d")
ctx.strokeStyle = color;
ctx.lineWidth = 2;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
ctx.clearRect(0, 0, width, height);
ctx.translate(startGeneration.x, startGeneration.y);
ctx.scale(scale, scale);
console.log(scale + "- scale");
/* initialize a koch curve L-System that uses final functions to draw the fractal onto a Canvas element.
F: draw a line with length relative to the current iteration (half the previous length for each step) and translates the current position to the end of the line
+: rotates the canvas 60 degree
-: rotates the canvas -60 degree
*/
var koch = new LSystem({
axiom: 'F++F++F',
productions: {'F': 'F-F++F-F'},
finals: {
'+': () => { ctx.rotate((Math.PI/180) * 60) },
'-': () => { ctx.rotate((Math.PI/180) * -60) },
'F': () => {
ctx.beginPath()
ctx.moveTo(0,0)
ctx.lineTo(0, 28)
ctx.stroke()
ctx.translate(0, 28)
}
}
})
koch.iterate(iterations);
koch.final();
}
Upvotes: 0
Views: 98