基于JavaScript绘制动态花束的示例代码

 更新时间:2022年06月24日 08:47:58   作者:肥学  
p5.js 是一个JavaScript的函数库,它在制作之初就和Processing有同样的目标。本文将利用p5.js 制作出一束动态花束,感兴趣的可以尝试一下

演示

技术栈

这次用到了一个名叫p5.js的框架:

p5.js 是一个JavaScript的函数库,它在制作之初就和Processing有同样的目标。就是让艺术家,设计师,教育工作者和编程初学者能够很容易,很轻松地学习和使用程序设计。并且它也能给现在的网页带来一些新的东西

它的结构:

 //初始化,只运行一次
 function setup () {}

 //绘制图形,每一帧都读取
 function draw() {}

一个小案例

function setup() {
  createCanvas(400, 400);
}
function draw() {
  if(mouseIsPressed){
    stroke(220);
  }else{
    stroke(0);
  }
  line(300,300,mouseX,mouseY);
}

效果是这样的

源码

css

* { margin:0; padding:0; } 
html, body { width:100%; height:100%; overflow: hidden; background:black;} 
canvas { display:block; }
#controls {
  z-index: 2;
  margin: 20px;
  position: absolute;
  top: 0; left: 0;
  color: white;
}

js

let size = 150;

class Flower{
  constructor(s, a1, a2){
    let l = pow(random(), 2)*size;
    let l2 = random();
    this.l2 = l2;
    this.x = cos(a1)*(l + l2*size/2);
    this.y = sin(a1)*(l + l2*size/2);
    
    this.hue = random();
    
    this.goalX = this.x;
    this.goalY = this.y;
    
    this.dx = 10;
    this.dy = 10;
    
    this.s = s*(l2*.5 + .5);
    this.a = a1;
    this.squash = 1 - (l/size)*.8;
    this.weights = [];
    for (let i = 0; i < 5; i++){
      this.weights[i] = random()*.5 + .5;
    }
  }
  update(){
    this.x += this.dx;
    this.y += this.dy;
    
    this.dx *= .95;
    this.dy *= .95;
    
    let mx = (width/2 + this.x) - mouseX;
    let my = (height/2 + this.y) - mouseY;
   
    let d = dist(width/2 + this.x, height/2 + this.y, mouseX, mouseY);
    let a = atan2(my, mx);
    
    if (d > 1){
      this.dx += cos(a)*size/d;
      this.dy += sin(a)*size/d;
    }
    
    this.x = (this.goalX + this.x)/2;
    this.y = (this.goalY + this.y)/2;
  }
  renderStem(){
    pushPop(() => {
      noFill();
      strokeWeight(this.l2*2 + 1);
      stroke(.35, 1, this.l2*.5 + .5);
      translate(this.x, size);
      let a = PI;
      if (this.x <= 0) a += PI/2;
      arc(0, 0, this.x*2, (this.y)*2 - size*2, a, a+PI/2);
    })
  }
  render(){
    pushPop(() => {
      noStroke();
      fill(this.l2*.2 + .8);
      translate(this.x, this.y);
      rotate(this.a);
      scale(this.s*this.squash, this.s);
      
      for (let j = 0; j < 2; j++)
      for (let i = 0; i < 5; i++){
        let a = i*TAU/5;
        let s = this.weights[i];
        let b = (this.l2*.2 + .8)*(s*.1 + .9)
        fill(this.hue, .1*this.l2, b);
        if (j == 0){
          s += .05;
          fill(0);
        }
        ellipse(cos(a)*.7*s, sin(a)*.7*s, 1);
      }
      fill(0);
      ellipse(0, 0, .7*(this.weights[0] + .05));
      fill(.15, 1, 1*(this.l2*.2 + .8));
      ellipse(0, 0, .7*this.weights[0]);
    })
  }
}

function setup (){
  pixelDensity(1);
  createCanvas();
  colorMode(HSB, 1, 1, 1);
  windowResized();
}

function init(){
  flowers = [];
  for (let i = 0; i < 50; i++){
    flowers.push(
      new Flower(random(20) + 20, random(PI*.8) + PI + PI*.1)
    );
  }
  flowers = flowers.sort((a, b) => a.s - b.s);
}

function draw(){
  background(0);
  translate(width/2, height/2);
  flowers.map(f => f.update());
  flowers.map(f => f.renderStem());
  flowers.map(f => f.render());
}

function windowResized(){
  resizeCanvas(windowWidth, windowHeight); 
  init();
}

let pushPop = f => {push();f();pop();}

以上就是基于JavaScript绘制动态花束的示例代码的详细内容,更多关于JavaScript绘制花束的资料请关注脚本之家其它相关文章!

相关文章

  • js修改原型的属性使用介绍

    js修改原型的属性使用介绍

    原型(prototype)定义了特定类型的所有实例都可以访问的属性和方法,很多些情况下需要重新对原型中的属性赋值,下面为大家介绍下如何修改原型
    2014-01-01
  • Bootstrap图片轮播组件使用实例解析

    Bootstrap图片轮播组件使用实例解析

    图片轮播组件是一个在网页中很常见的技术,这篇文章主要为大家详细介绍了Bootstrap图片轮播组件使用实例,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • 利用js+css+html实现固定table的列头不动

    利用js+css+html实现固定table的列头不动

    本文分享了利用js+css+html实现固定table的列头不动的实例代码。小编认为具有很好的参考价值,感兴趣的朋友可以看下
    2016-12-12
  • 原生js实现秒表计时器功能

    原生js实现秒表计时器功能

    这篇文章主要为大家详细介绍了原生js实现秒表计时器功能,可以开始、暂停、清除,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • js如何清空input file的值

    js如何清空input file的值

    这篇文章主要介绍了js如何清空input file的值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • js日期时间格式化的方法实例

    js日期时间格式化的方法实例

    这篇文章主要给大家介绍了关于js日期时间格式化的相关资料,文中分别介绍了利用原生js以及Moment.js库处理日期时间格式化的方法,需要的朋友可以参考下
    2021-07-07
  • 学习JavaScript设计模式之迭代器模式

    学习JavaScript设计模式之迭代器模式

    这篇文章主要为大家介绍了JavaScript设计模式中的迭代器模式,对JavaScript设计模式感兴趣的小伙伴们可以参考一下
    2016-01-01
  • JS实现移动端按首字母检索城市列表附源码下载

    JS实现移动端按首字母检索城市列表附源码下载

    我们常见的手机通讯录或微信通讯录,联系人信息是按字母顺序排列的列表,通过点击右侧的字母,会迅速定位检索到首字母对应的联系人。下面通过本文给大家分享JS实现移动端按首字母检索城市列表功能,需要的的朋友参考下吧
    2017-07-07
  • 表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题

    表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题

    这篇文章主要介绍了表单input项使用label,同时引用Bootstrap库,导致input点击效果区增大问题的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-10-10
  • BootStrap中Datepicker控件带中文的js文件

    BootStrap中Datepicker控件带中文的js文件

    bootstrap-datepicker 是一个非常优秀的时间选择插件。这篇文章主要介绍了bootstrap-datepicker带中文的js文件的相关资料,需要的朋友可以参考下
    2016-08-08

最新评论