互动媒体技术A4作业报告

类

random_rect_0128

效果：多个随机色彩的长块不断生长，最终会一样长
扩展：对random函数扩展

class random_rect_0128
{
  constructor(num_)
  {
    this.rand=new Array(int(num_));
    for (let i=0; i<this.rand.length; i++)
    {
      this.rand[i]=0;
    }
    this.cols=new Array(int(num_));
    for(let i=0;i<int(num_);i++)
    {
      this.cols[i]=color(random(1, 255), random(1, 255), random(100, 255));
    }
  }
  update()
  {
    let index=int(random(this.rand.length));
    this.rand[index]++;
  }
  display()
  {
    this.update();
    noStroke();
    //fill(127);
    let w=width/this.rand.length;
    for (let i=0; i<this.rand.length; i++)
    {
      fill(this.cols[i]);
      rect(i*w, height-this.rand[i], w, this.rand[i]);
    }
  }
}

random_rainbow_0128

效果：在随机位置生成球，并且不断变换颜色（彩虹色或马卡龙色）
扩展：对noise函数，randomGaussian函数，random函数扩展

class random_rainbow_0128
{
  constructor(_x, _y)
  {
    this.red=255;
    this.g=0;
    this.b=0;
    this.able=false;
    this.a1=0;
    this.a2=0;
    this.x=_x;
    this.y=_y;
  }
  rainbow()
  {
    if (this.red<255&&this.g==0&&this.b==0)
    {
      this.red++;
    }
    if (this.red==255&&this.g<255&&this.b==0) {
      this.g++;
    }
    if (this.g==255&&this.red>=0&&this.b==0) {
      this.red--;
    }
    if (this.red==0&&this.g>=0&&this.b<255) {
      this.g--;
      this.b++;
    }
    if (this.g==0&&this.red<139&&this.b==255) {
      this.red++;
    }
    if (this.red==139&&this.g==0&&this.b==255)
    {
      this.able=true;
    }
    if (this.able)
    {
      if (this.red<255) {  
        this.red++;
      }
      if (this.b>=0) { 
        this.b--;
      }
      if (this.red==255&&this.b==0)
      {
        this.able=false;
      }
    }
  }
  display_rainbow()
  {
    noStroke();
    this.rainbow();
    fill(this.red, this.g, this.b, 175);
    let x1=noise(millis()/1000)*randomGaussian(0, 10);
    let y1=noise(millis()/1000)*randomGaussian(0, 10);   


    ellipse(x1+this.x, y1+this.y, 20, 20);
  }
  display_Macaroon()
  {
    noStroke();
    fill(random(1, 255), random(1, 255), random(100, 255));
    let x1=noise(millis()/1000)*randomGaussian(0, 10);
    let y1=noise(millis()/1000)*randomGaussian(0, 10);   


    ellipse(x1+this.x, y1+this.y, 20, 20);
  }
}

random_wakes_0128

效果：指定渐变色（从hex color生成）生成尾迹效果，并且随机变换半径大小
扩展：对random函数扩展

class random_wakes_0128
{
  constructor(co1, co2, _nums,_r1,_r2)
  {
    this.coarray=gradientColor(co1, co2, _nums);
    this.i=0;
    this._r=10;
    this.r1=_r1;
    this.r2=_r2;
    this.nums=_nums;
  }
  randcolor()
  {
    this.i++;
    if (this.i==this.nums-1)
    {
      this.i=0;
    }
  }
  display()
  {
    //push();

    stroke(this.coarray[this.i]);

    this.randcolor();

    let r=int(random(this.r1, this.r2));
    if (r>this._r)
    { 
      while (this._r<=r)
      {
        circle(mouseX, mouseY, this._r++);
      }
    } else
    {
      while (this._r>=r)
      {
        circle(mouseX, mouseY, this._r--);
      }
    }
   // pop();
  }
}

random_ball_0128

效果：随机位置生成指定球，并进行柏林噪声抖动，随即变换颜色
扩展：对noise函数扩展

random_shadows_0128

效果：随鼠标移动而渐进跟随并且进行柏林噪声抖动的小飞机，并且跟随一个指定渐变色的流星，有尾迹效果，且鼠标停止变化则不进行柏林噪声抖动
扩展：对noise函数扩展

random_stars_0128

效果：用柏林噪声随机生成的星空图，并且用向量进行流星效果的模拟，有大小两种流星，大的流星速度慢，可以指定渐变颜色。星空可以闪烁。
扩展：对noise函数扩展。

技巧分享

尾迹效果

fill全部画布时，把透明度降低，就可以了
例如：fill(0, 52);
多次重绘才能完全覆盖。

马卡龙色

fill(random(1, 255), random(1, 255), random(100, 255));

彩虹渐变色

省略了青色，不方便变化。

rainbow()
  {
    if (this.red<255&&this.g==0&&this.b==0)
    {
      this.red++;
    }
    if (this.red==255&&this.g<255&&this.b==0) {
      this.g++;
    }
    if (this.g==255&&this.red>=0&&this.b==0) {
      this.red--;
    }
    if (this.red==0&&this.g>=0&&this.b<255) {
      this.g--;
      this.b++;
    }
    if (this.g==0&&this.red<139&&this.b==255) {
      this.red++;
    }
    if (this.red==139&&this.g==0&&this.b==255)
    {
      this.able=true;
    }
    if (this.able)
    {
      if (this.red<255) {  
        this.red++;
      }
      if (this.b>=0) { 
        this.b--;
      }
      if (this.red==255&&this.b==0)
      {
        this.able=false;
      }
    }
  }