p5实现天空中任意位置鼠标点击出现花朵绽放动画效果代码-html代码-BFW代码库

p5实现天空中任意位置鼠标点击出现花朵绽放动画效果代码

代码语言：html

所属分类：其他

代码描述：p5实现天空中任意位置鼠标点击出现花朵绽放动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
html, body {
  margin: 0;
  padding: 0;
}

canvas {
  width: 500px;
  height: 500px;
  max-width: 100vw;
	max-height: 100vh;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  border: 2px solid #8DA5B2;
}
</style>


  
</head>

<body>
  
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.6.0.js"></script>
      <script>
console.clear();

let sunflowers = [];
const c = {
  ground: 'green',
  sky1: "lightblue",
  sky2: 'dodgerblue',
  petal: 'yellow',
  seed1: "brown",
  seed2: 'black',
  stem1: '#6f1d1b',
  stem2: 'olive'
}
let groundSize = 100;
let skySize = window.innerHeight - groundSize;
let skyGradient;

class Sunflower {
  constructor(pos){
    this.initialSeedTime = 100;
    this.initialStemTime = 100;
    this.pos = pos;
    this.seedTime = this.initialSeedTime;
    this.stemTime = this.initialStemTime;
    this.t = 0;
    
    
    // seed settings
    const baseSize = max(width,height)*.125;
    this.seedSize = baseSize*.5 + (random() * baseSize*.75);
    this.dir = random() > .5? 1 : -1;
    
    // stem settings
    this.stem = {
      x: pos.x + ((random() - .5) * this.seedSize * 2),
      y: skySize + (random() * groundSize),
    }
    
    // petal settings
    this.petalHeight = baseSize * .3;
    this.petalWidth = this.petalHeight * .5;
  }
  draw() {
    this.update()
    this.drawStem()
    this.drawSeeds();
    this.drawPetals();
  }
  update() {
    this.t = 1 - max(0, this.seedTime/this.initialSeedTime);
    this.size = this.seedSize * this.t * this.t;
    if(this.seedTime >= 0) {
      this.seedTime--;
    }
  }
  drawStem() {
    push()
    noFill();
    stroke(c.stem1);
    strokeWeight(this.size*.1);
    
    beginShape();
    vertex(this.pos.x, this.pos.y);
    bezierVertex(
      this.pos.x + (this.dir * (this.pos.x - this.stem.x)) , this.pos.y,
      this.stem.x, this.stem.y,
      this.stem.x, this.stem.y,
    );
    endShape();
    pop()
  }
  drawPetals() {
    let .........完整代码请登录后点击上方下载按钮下载查看