[0115资资]扩展P5.js中的rect接口

1 波浪正方形

1.1 效果展示

1.1.1 单个波浪正方形

1.1.2 两个波浪正方形

1.1.3 三个波浪正方形

1.2 波浪圆函数调用方法

1.2.1 函数参数解释

/**************************************
波浪正方形
1.(x,y)代表圆心所在的位置
2.omega代表开始的角度
**************************************/

function WaveRect(x,y,omega)

1.2.2 调用方法案例(demo)

var rot = 0, rotSpeed = .04;


function setup() {
  createCanvas(500,500);
  noFill();
  stroke(0);
  strokeWeight(2);
}

function draw() {
  background(255);
  translate(width/2, height/2);

  rot += rotSpeed;
  rot %= TWO_PI;

  WaveRect(20,20,frameCount/20.0);
  WaveRect(20,20,frameCount/20.0+PI/2);
  WaveRect(20,20,frameCount/20.0+3*PI/2);
}

2 宇宙长方形

2.1 效果展示

2.2 波浪圆函数调用方法

2.2.1 函数参数解释

/**************************************
宇宙正方形
1.Star是组成方形的粒子
**************************************/
class Star {
  constructor() { }
  }

2.2.2 调用方法案例(demo)

let stars = [];

function setup() 
{
  createCanvas(windowWidth, windowHeight);
  background(0); 
  
  for(let i = 0; i < 2000; i++) 
  {
     stars.push(new Star()); 
  }
  mouseX = 0.7 * width;
}

function draw() { 
	 background(0); 
  
   translate(width/2, height/2); 
   for(let i = 0; i < stars.length; i++) {
     stars[i].update(); 
     stars[i].show(); 
  }
}

3 弹跳正方形

3.1 效果展示

3.1.1 弹跳正方形大小不变

3.1.2 弹跳正方形大小改变

3.2 弹跳正方形调用方法

3.2.1 函数参数解释

3.2.1.1 弹跳正方形大小不变

/***************************
弹跳正方形（大小不改变）
1. (x,y)是起始坐标
2. d是正方形的边长
3. vx和vy是正方形路径的改变
***************************/
class MovingBounceRect
{
  constructor(_x,_y,_d,_vx,_vy) 
  {}
}

3.2.1.2 弹跳正方形大小改变

/***************************
弹跳正方形（大小改变）
1. (x,y)是起始坐标
2. d是正方形的边长
3. vx和vy是正方形路径的改变
4. s是缩放比例
***************************/
class MovingBounceRectChangeSize
{
  constructor(_x,_y,_d,_vx,_vy,_s) 
  {}
}

3.2.2 调用方法案例(demo)

//大小改变的例子
var n = 1;
p = [];

function setup() {
  createCanvas(500, 500);
  noFill();
  rectMode(CENTER);
  n = 1;
  for (var i = 0; i < n; i++) {
    var d = random(10.0, 100.0);
    p.push(new MovingBounceRectChangeSize(
      random(d / 2, width - d / 2), 
      random(d / 2, width - d / 2), 
      d, 
      random(1.0, 5.0), 
      random(1.0, 5.0), 
      1));
  }
}

function draw() {
  background(255);
  stroke(0);
  for (var i = 0; i < n; i++) 
  {
    p[i].update();
    p[i].display();
  }
}

3.3 弹跳正方形作图

var n = 50;
p = [];

function setup() {
  createCanvas(500, 500);
  noFill();
  rectMode(CENTER);
  for (var i = 0; i < n; i++) {
    var d = random(10.0, 100.0);
    p.push(new MovingBounceRectChangeSize(
      random(d / 2, width - d / 2), 
      random(d / 2, width - d / 2), 
      d, 
      random(1.0, 5.0), 
      random(1.0, 5.0), 
      1));
  }
}

function draw() {
  background(255);
  stroke(0);
  for (var i = 0; i < n; i++) 
  {
    p[i].update();
    p[i].display();
  }
}