js实现canvas L-system植物生长绘制效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js实现canvas L-system植物生长绘制效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html  lang="en-us">
<head>
        <meta charset="utf-8">

</head>
<body>


<div class="center">
        <article>
                <div class="social">
    
</div>
                <h1 class="title">L-System</h1>
                

                <div class="content"><div>
  <p>Experimenting with Linden Meyer Systems.</p>
<style>
    .post {
        max-width: none;
        width: 800px;
        padding: 0;
    }
</style>
<p><canvas id="canvas"></canvas></p>
<script>
// canvas setup
var d=document,
    canvas = document.getElementById("canvas"),
    c=canvas,
    W=800,H=700;
    c.width = W,
    c.height = H,
    c = c.getContext("2d");

// Math function aliases
var cos  = Math.cos,
    sin  = Math.sin,
    abs  = Math.abs,
    sqrt = Math.sqrt,
    sgn  = function(val) { return val >= 0 ? 1 : -1 },
    atan2= Math.atan2,
    rand = Math.random,
    TAU = 2*Math.PI;

// logging
dolog = true;

function logCreate(mod){
    var i = 0;
    return function(){
        if( !dolog ) return;
        if( i % mod == 0 )
            console.log(arguments);
        i = (i + 1) % mod;
    }
}

log  = logCreate(1);
logS = logCreate(60);

// Mouse
$M = {
    loc  : V2(W/2, H/2),
    dloc : V2(0,0),
    uloc : V2(0,0),
    down : false,
    action : 0,
    pressed : false
};

function V2(x,y){
    return {x : x || 0.0, y:y || 0.0};
}

V2c = function( v ){
    return { x : v.x, y : v.y };
}

V2add = function( a, b, r ){
    r.x = a.x + b.x;
    r.y = a.y + b.y;
}

V2sub = function( a, b, r ){
    r.x = a.x - b.x;
    r.y = a.y - b.y;
}

V2scale = function( a, s, r ){
    c.x = a.x * s;
    c.y = a.y * s;
}

V2dot = function( a, b, r ){
    r.x = a.x * b.x;
    r.y = a.y * b.y;
}

V2rot = function( a, angle, r ){
    r.x = a.x * cos( angle ) - a.y * sin( angle );
    r.y = a.y * sin( angle ) + a.y * cos( angle );
}

RotM2 = function( angle ){
    return {
        x11 : cos( angle ), x12 : -sin( angle ),
        x21 : sin( angle ), x22 :  cos( angle ) 
    };
}

M2xV2 = function( m, v, r ){
    r.x = v.x * m.x11 + v.y * m.x12;
    r.y = v.x * m.x21 + v.y * m.x22;
}

MAX = 1000000;

leaf = {
    axiom : "X",
    rules : {
        "F" : "FF",
        "X" : "F-[[X]+X]+F[+FX]-X"
    }
}

raceme = {
    axiom : "X",
    rules : {
        "F" : "FF",
        "X" : "F-[[F]+F]+F-FX"
    },
    commands : {
        "F" : "~"
    },
    vars : {  //     val   min  max
        angle : [  TAU/9, -MAX, MAX],
        min   : [ TAU/10, -MAX, MAX],
        max   : [ TAU/10, -MAX, MAX],
        spread: [    0.0,  0.0, MAX],
        
        length: [    1.0, -MAX, MAX],
        width : [    2.0,  0.0, MAX],
        
        hue : [ 0.0, -MAX, MAX],
        saturation : [ 70.0, 0.0, 100],
        lightness  : [ 70.0, 0.0, 100],
        alpha : [ 1.0, 0.0, 1.0]
    }
}

tree_at_fall = {
    axiom : "SF" + 
            "[(#min=-75;#max=75;*)(#length=1.3;#size*0.35;X)]" +
            "[(#min=-75;#max=75;*)(#length=1.2;#size*0.35;X)]" +
            "[(#min=-45;#max=45;*)(#length=1.5;#size*0.35;X)]" +
            "[(#min=-85;#max=85;*)(#length=1.1;#size*0.35;X)]" +
            "[(#min=-65;#max=65;*)(#length=1.4;#size*0.35;X)]" +
            "[(#min=-35;#max=35;*)(#length=1.6;#size*0.35;X)]" +
            "[(#min=-45;#max=45;*)(#length=1.5;#size*0.35;X)]" +
            "[(#min=-85;#max=85;*)(#length=1.1;#size*0.35;X)]" +
            "[(#min=-75;#max=75;*)(#length=1.3;#size*0.35;X)]",
    rules : {
        "S" : "#size+1;#size*1.5;S",
        "F" : "DFDF",
        "X" : "VX" +
              "|0.1{[R(ZX)L]}{}" +
              "VX" +
              "[Y(ZX)L]" +
              "[Y(ZX)LN]" +
              "[Y(ZX)L]"
    },
    commands : {
        "D" : "(#min=-2;#max=2;*)",
        "F" : "#size*0.9926;(#length=1.5;#hue=0; #alpha=0.5; ~)",
        
        "R" : "(#min=20;#max=60;|0.5{*}{/})",
        "V" : "(#min=-5;#max=5;*)",
        "Y" : "(#min=-75;#max=75;*)",
        "Z" : "#size*0.5;",
        "X" : "(#hue=30;#alpha=0.5;~)",
        
        "L" : "|0.5{#hue-5;}{#hue-17;}(#size=1; #length=0.5; #alpha=0.05;  [  [@=45;%=1.4142;-~+@=18.435; %=3.1623;+~][@=-45;%=1.4142;-~+@=-18.435; %=3.1623;+~]   [@=36.8699;%=1.25;-~+@=14.0362; %=3.0923;+~][@=-36.8699;%=1.25;-~+@=-14.0362; %=3.0923;+~]    [@=26.5651;%=1.118;-~+@=9.4623; %=3.0414;+~][@=-26.5651;%=1.118;-~+@=-9.4623; %=3.0414;+~]    [@=14.0262;%=1.0308;-~+@=4.7636; %=3.0104;+~][@=-14.0262;%=1.0308;-~+@=-4.7636; %=3.0104;+~]  @=0;%=4;~ @=22.0;])",
        
        "P" : "[(#length=0;#size=10;#alpha=0.5;#red<1;#green<1;#blue<1;" +
              "|0.6{|0.6{#red=0.9;#green=0.1;}{#red=0.8;#green=0..........完整代码请登录后点击上方下载按钮下载查看