当前位置：网站首页>Thirty eight JS tried fractal graphics on canvas (II) tried mountain building, painted mountains and the basis of angular geometry

Thirty eight JS tried fractal graphics on canvas (II) tried mountain building, painted mountains and the basis of angular geometry

2022-06-09 10:37:00 【BerryBC】

1. Previous failures can make you continue to fail

I made a very ugly graphics , So I decided to follow that today The documentary Of , Try to make one Huashan Of ！
Pre link ：
thirty-seven - JS stay Canvas Try fractal graphics on （ One ） Draw a picture of an ordinary box

2. How to draw mountains

Find a description on the Internet ：
Fractal applications ： orogenic
But there is no detailed code , How can I do it ！？
So I began to try the journey of despair

According to popular science video, it is ：

Recursive segmentation 、 Midpoint displacement

good ！ Before I do this, I have to review Geometric angles The basis of .

3.JS Geometric angle basis

To put it bluntly , Actually, I really forgot PI How many degrees is it , You can only record it for yourself first ：

        let v1 = {
    
            x: 0,
            y: 0
        };
        //  stay  v1  On the basis of 1 Units are  1  The angle between  60 degree   The point of .
        //  among  Math.PI  by  180  degree .
        let v2 = {
    
            x: v1.x + Math.cos(Math.PI / 3),
            y: v1.y - Math.sin(Math.PI / 3)
        };
        //  Output  -60  degree .
        console.log(Math.atan((v2.y - v1.y) / (v2.x - v1.x)) / Math.PI * 180);

4. Start mountain building

Ideas Pseudo code as follows ：

let  The three points of the starting triangle 1;
let  The three points of the starting triangle 2;
let  The three points of the starting triangle 3;
function  Recursion to the next level ( Triangle point 1, Triangle point 2, Triangle point 3){
    
	if ( If it is the last round of recursion ){
    
		 Draw the triangle 
	};
	let  Midpoint 1= Upper point 1、2 The midpoint of （ And perform random angle offset ）;
	let  Midpoint 2= Upper point 2、3 The midpoint of （ And perform random angle offset ）;
	let  Midpoint 3= Upper point 3、1 The midpoint of （ And perform random angle offset ）;

	 Recursion to the next level ( Triangle point 1, Midpoint 1, Midpoint 3);
	 Recursion to the next level ( Triangle point 2, Midpoint 2, Midpoint 1);
	 Recursion to the next level ( Triangle point 3, Midpoint 3, Midpoint 2);
	 Recursion to the next level ( Midpoint 1, Midpoint 2, Midpoint 3);
};
 Recursion to the next level ( Start triangle point 1, Start triangle point 2, Start triangle point 3);

give the result as follows ：
At first

Why do you crack 了！？ Why are there so many black ones in the middle ！ What the hell are those ！？

5. Repair of mountain fracture

There is a sentence in the previous article ：

notes ： The midpoint of the common side of each triangle shall ensure that there is only one longitudinal shift , Avoid the formation of mountain fragmentation .

And then I was confused , ah ？
It's too much trouble , Because my different triangle is Separate recursion Calculate separately Of , How to choose the same Midpoint Well ！？
alas , But still have to do .

5. After repairing the mountain fracture

What I chose was to choose one Global array Variable to record the position of different points , And different spot Conduct code , The results are as follows ：
The mountains are all linked together ！

Finally, I added one shadows , If the more offset the dots are drawn The deeper the color .

6. The last version of the code

<!-- * @Descripttion:  Try painting mountains , Repair the broken mountain  * @Author: BerryBC * @Date: 2020-03-01 17:32:33 * @LastEditors: BerryBC * @LastEditTime: 2020-03-01 18:27:38 -->
<html>

<head>
    <meta charset="utf-8">
        <title> Test fractal </title>
        <style> body {
      text-align: center; background-color: black; } .canFractal {
      background-color: rgb(243, 236, 253); } </style>
</head>

<body>
    <canvas id="canFractal" width="1300" height="900"> despair </canvas>

    <script> let dblMX = 500; let dblMY = 400; let dblMLen = 600; let canF = document.getElementById("canFractal"); let ctxDraw = canF.getContext("2d"); //  The layer number  let intMaxDeep = 8; //  Brightness  0 - 1  Between , The closer we get 1 The more colorful  let intColorWgh = 0.1; let dblMaxOffsetAngle = Math.PI / 8; let intCountP = 2; let dictLSet = []; let arrPSet = []; function funGetColor(dblDeep) {
      let intR = Math.abs(255 - parseInt((Math.random() * (1 / intMaxDeep * (1 - intColorWgh) + intColorWgh)) * 255) - 100 * dblDeep); let intG = Math.abs(255 - parseInt((Math.random() * (1 / intMaxDeep * (1 - intColorWgh) + intColorWgh)) * 255) - 100 * dblDeep); let intB = Math.abs(255 - parseInt((Math.random() * (1 / intMaxDeep * (1 - intColorWgh) + intColorWgh)) * 255) - 100 * dblDeep); let strReturn = "rgb(" + intR.toString() + "," + intG.toString() + "," + intB.toString() + ")"; return strReturn; }; let pO0 = {
      x: dblMX - dblMLen / 2, y: dblMY + dblMLen / 2, d: 0 }; let dblOAng = Math.PI / 3; let pO1 = {
      x: pO0.x + dblMLen * Math.cos(dblOAng), y: pO0.y - dblMLen * Math.sin(dblOAng), d: 0 }; dblOAng = -Math.PI / 3; let pO2 = {
      x: pO1.x + dblMLen * Math.cos(dblOAng), y: pO1.y - dblMLen * Math.sin(dblOAng), d: 0 }; function funDrawTri(arrInP) {
      dblColorDeep = (arrInP[0].d + arrInP[1].d + arrInP[2].d) / 3; ctxDraw.fillStyle = funGetColor(dblColorDeep); ctxDraw.beginPath(); ctxDraw.moveTo(arrInP[0].x, arrInP[0].y); ctxDraw.lineTo(arrInP[1].x, arrInP[1].y); ctxDraw.lineTo(arrInP[2].x, arrInP[2].y); ctxDraw.closePath(); ctxDraw.fill(); }; function funIter(intIterN, arrIterInP, intIterLen, arrIterPNumSet) {
      let intIterNM = intIterN - 1; let intIterNLen = intIterLen / 2; if (intIterNM == 1) {
      funDrawTri(arrIterInP); } else {
      let arrMP = []; let intIterNPNumSet = []; for (let intI = 0; intI < 3; intI++) {
      let intJ = (intI + 1) % 3; let intForDS; let intForDB; if (arrIterPNumSet[intI] > arrIterPNumSet[intJ]) {
      intForDS = arrIterPNumSet[intJ]; intForDB = arrIterPNumSet[intI]; } else {
      intForDS = arrIterPNumSet[intI]; intForDB = arrIterPNumSet[intJ]; }; if (!dictLSet[intForDS + '-' + intForDB]) {
      let dblAng = -Math.atan((arrIterInP[intJ].y - arrIterInP[intI].y) / (arrIterInP[intJ].x - arrIterInP[intI].x)); if (arrIterInP[intJ].x < arrIterInP[intI].x) {
      dblAng += Math.PI; }; dblAng += (Math.random() - 0.5) * dblMaxOffsetAngle; intCountP++; intIterNLen = intIterNLen * (0.8 + 0.4 * Math.random()) let objNowP = {
      x: arrIterInP[intI].x + intIterNLen * Math.cos(dblAng), y: arrIterInP[intI].y - intIterNLen * Math.sin(dblAng), d: dblAng }; arrMP.push(objNowP); arrPSet.push(objNowP); dictLSet[intForDS + '-' + intForDB] = intCountP; intIterNPNumSet.push(intCountP); } else {
      arrMP.push(arrPSet[dictLSet[intForDS + '-' + intForDB]]); intIterNPNumSet.push(dictLSet[intForDS + '-' + intForDB]); }; }; for (let intI = 0; intI < 3; intI++) {
      let intJ = (intI + 2) % 3; let arrNewTri = [arrIterInP[intI], arrMP[intI], arrMP[intJ]]; let arrNewPNumSet = [arrIterPNumSet[intI], intIterNPNumSet[intI], intIterNPNumSet[intJ]] funIter(intIterNM, arrNewTri, intIterNLen, arrNewPNumSet); }; funIter(intIterNM, arrMP, intIterNLen, intIterNPNumSet); }; }; arrPSet = [pO0, pO1, pO2]; let arrPNumSet = [0, 1, 2]; let arrOP = [pO0, pO1, pO2]; funIter(intMaxDeep, arrOP, dblMLen, arrPNumSet); </script>


</body>

</html>

7. Try animating

Because the documentary also says Star Wars: Of Lava jets The effect is fractal Come to draw , I think I can try , But it seems to have failed .
alas , The general effect is as follows ：

The general effect is as follows
We'll talk about it later ~