JS动态生成三叶草 | 树叶

js for generating trillium

js, flower

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1794
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

function setup() {
    createCanvas(600, 600);
    angleMode(DEGREES);
    background(60, 60, 60);
}

function draw() {
    background(60, 60, 60, 0.5);
    strokeWeight(2)
    translate(width / 2, width / 2);
    trillium(1)
}

function trillium(m) {
    genLeaf(width / 9);
    push();
    rotate(120);
    genLeaf(width / 9);
    pop();
    push();
    rotate(-120);
    genLeaf(width / 9);
    pop();
    p = int(random(0, 2));
    if (p == 1 || m == 1) {
        flower();
    }

}

function mousePressed() {
    sc = random(0.1, 0.8); //randomscale
    tr = random(-width / 1.5, width / 1.5); //randomtranslate
    rr = random(0, 360); //randomrotate
    push()
    scale(sc, sc);;
    rotate(rr);
    translate(tr, tr);
    trillium()
    pop()
}

function flower() {
    noFill();
    strokeWeight(10);
    stroke(103, 158, 119)
    push()
    rotate(180)
    translate(-30, -60)
    arc(30, 30, 30, 60, 30, 90);
    pop()
    strokeWeight(2);
    stroke(47, 74, 55);
    rotate(110)
    translate(62, 7)
    fill(255);
    push()
    ellipse(20, 4, 80, 7)
    ellipse(20, -4, 80, 7)
    ellipse(20, 0, 70, 7)
    fill(103, 158, 119)
    beginShape()
    for (let i = 0; i < 360; i++) {
        x = 40 * cos(i);
        y = 10 * sin(i) * sin(0.5 * i)
        vertex(x, y);
    }
    endShape(CLOSE);
    pop()
}

编译

CSS

HTML

js for generating trillium

js, flower

编辑器支持Emmet

快捷键

js for generating trillium

js, flower

使用D3.js和SVG实现的随机树枝和树叶生长动画

P5.js 点点形状的三叶草动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：