Canvas 树叶分枝

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

// click to create branch

let x = [];
let y = [];
let size = [];
let angle = [];
let randDir = [];
let itsClosestIndex = [];

let movement = [];
let moveSpeed = [];

let currentCount = 1;
let maxCount = 200;

function setup() {
  createCanvas(windowWidth, windowHeight);
  
  x[0] = width / 2;
  y[0] = height / 2;
  size[0] = 10;
  angle[0] = 0;
  randDir[0] = 0;
  itsClosestIndex[0] = 0;

//setFrameRate(10);

for(let i = 0; i < maxCount; i++) {
    movement[i] = random(0.1);
    moveSpeed[i] = random(0.001, 0.003);
  }

}

function draw() {
  background(50);

if(currentCount < maxCount) {

let newSize = random(10, 50);
    let newX = random(width);
    let newY = random(height);

closestIndex = 0;
    closestDist = width;

for(let i = 0; i < currentCount; i++) {
      let newDist = dist(newX, newY, x[i], y[i]);

if(newDist < closestDist) {
        closestDist = newDist;
        //print(closestDist);
        closestIndex = i;
      }
    }

//temp line to view where shape comes from
    //line(newX, newY, x[closestIndex], y[closestIndex]);

let newAngle = atan2(newY - y[closestIndex], newX - x[closestIndex]);
    //print(newAngle);

let newrandDir = int(random(2));
    //print(newrandDir);

x[currentCount] = x[closestIndex] + cos(newAngle) * (size[closestIndex]/4 + newSize/4);
    y[currentCount] = y[closestIndex] + sin(newAngle) * (size[closestIndex]/4 + newSize/4);

size[currentCount] = newSize;
    angle[currentCount] = newAngle;
    randDir[currentCount] = newrandDir;
    itsClosestIndex[currentCount] = closestIndex;

currentCount++;
  }

// draw the things
  for(let i = 0; i < currentCount; i++) {

movement[i]+=moveSpeed[i];
    if(movement[i] > .1 || movement[i] < 0) {
      moveSpeed[i]*=-1;
    }
    //print(movement[i]);

strokeWeight(2);
    stroke(240, 100);
    line(x[i],y[i], x[itsClosestIndex[i]], y[itsClosestIndex[i]]);
    strokeWeight(1);
    fill(i*2, i*6, i, 100);
  
    drawLeafthing(x[i], y[i], size[i]/2, size[i], angle[i]+(PI*randDir[i]), movement[i]);

}

function reset() {
  currentCount = 1;

x[0] = mouseX;
  y[0] = mouseY;

}

function mousePressed() {
  reset();

}

function drawLeafthing(x, y, width, height, direction, movement) {
  push();
  translate(x, y);
  rotate(direction+movement);
  beginShape();
  curveVertex(0, 0); //starting point
  curveVertex(0, 0);
  curveVertex(width/2, height/2);
  curveVertex(0, height);
  curveVertex(-width/2, height/2);
  endShape(CLOSE);
  pop();
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg