⚪互动媒体技术●运动主题作品

互动媒体技术——“运动”主题作品分析

一、成果

二、运动库

1. 绘制气泡框

（1）加载移动笑脸

以类和对象的知识，创建Blob类的对象。

		function loadCircle(x0,y0,size,num,faceMin,faceMax)
		{
		参数：x0:小人移动范围左上角x值，y0:小人移动范围左上角y值，
		size:方框长度， num:小人的数量，faceMin和faceMax:小人的大小范围。		  
		  var top=y0;var bottom=y0+size;
		  var left=x0;var right=x0+size;
		  for (var i = 0; i < num; i++) {
		      blobs[i] = new Blob(x0+size/2, y0+size/2, random(faceMin, faceMax)
		            					,top+70,bottom-70,left+70,right-70);
		  }
		  return blobs;	
		}

移动笑脸类。

function Blob(_x, _y, _sz,top,bottom,left,right) {
_x:初始位置x值 ，_y:初始位置y值，
	_sz:笑脸大小，top/bottom/left/right：上下左右移动的范围
    
    this.x = _x;
    this.y = _y;
    this.sz = _sz;
    this.vx = random(-1.5, 1.5);
    this.vy = random(-1.5, 1.5);
    this.top=top;
    this.bottom=bottom;
    this.left=left;
    this.right=right;
    
	//显示笑脸
    this.display = function() {
        noStroke();
        fill(0);
        var line=3;
        line=round(map(this._sz,20,50,75,1,10));
        //ellipse(this.x, this.y, this.sz, this.sz);
        SurroundingSmileTwo(this.x,this.y,this.sz,5,5,line);
    };
	//显示透明边框
    this.displayOutline = function() {
        noStroke();
        fill(255,150);
        ellipse(this.x, this.y, this.sz + 10, this.sz + 10);

    };
	//更新移动位置，当前位置加上速度。
	同时检测边缘限制移动
    this.update = function() {
        this.x = this.x + this.vx;
        this.y = this.y + this.vy;

        // constrain
        if (this.x > this.right - this.sz / 2) {
            this.x = this.right - this.sz / 2;
            this.vx *= -1.0;
        }

        if (this.x < this.left + this.sz / 2) {
            this.x = this.left + this.sz / 2;
            this.vx *= -1.0;
        }
        if (this.y > this.bottom - this.sz / 2) {
            this.y = this.bottom - this.sz / 2;
            this.vy *= -1.0;
        }
        if (this.y < this.top + this.sz / 2) {
            this.y = this.top + this.sz / 2;
            this.vy *= -1.0;
        }
    };
} // Blob

使用时，在start()初始化中，调用loadCircle()函数生成笑脸。

blocks=loadCircle(100,100,400,10,20,50);

（2）绘制

function drawBlock(x0,y0,size,blocks)
{
  fill(0);
  stroke(2);
  strokeWeight(3);
  //绘制背景
  imageMode(CENTER);
  tint(255,80);
  image(img_block,x0+size/2,y0+size/2,size,size);
  tint(255,100);
  image(img_block,x0+size/2,y0+size/2,size-140,size-140);
  //绘制移动笑脸
  for (var i = 0; i < blocks.length; i++) {
      blocks[i].displayOutline();
  }
  for (var i = 0; i < blocks.length; i++) {
      blocks[i].display();
      blocks[i].update();//更新位置
  }
}

在update()中，调用drawBlock()函数绘制，需要传入笑脸数组。

drawBlock(100,100,400,blocks);

2.绘制悬挂笑脸

使用smileSpring函数进行单个笑脸的绘制。

function SmileSpring(x0,y0,maxUp,maxDown,aVelocity,angle)
{
x0：悬挂点x值，y0:悬挂点y值，maxUp/maxDown:弹跳的最高与最低，
aVelocity:弹跳的速度，angle:开始的振幅
  x=x0;
  y=y0+map(sin(angle),-1,1,maxUp,maxDown);
  stroke(0);
  fill(175);
  line(x,y0,x,y);
  SurroundingSmileColor(x,y,20,0,0,color(200,200,200));
}

使用smileSpringLine函数绘制笑脸波浪。

function SmileSprintLine(x0,y0,maxUp,maxDown,aVelocity,angle,length,N)
{
  //length：线条长度，N:个数
  var gap=round(length/N);
  for(i=0;i<N;i++)
  {
    x=x0+i*gap;
    //需要每次增加i*5,来使震动有波浪效果。
    y=y0+map(sin(angle+i*5),-1,1,maxUp,maxDown);
    stroke(220);
    fill(175);
    line(x,y0,x,y);
    SurroundingSmileColor(x,y,30,0,0,color(200,200,200));
  }
}

三、绘制图案

使用以上库绘制图案。
初步设想为画框效果。
需要绘制两种外框，所以修改了绘制气泡框的函数，绘制两次大小不同的外框，并对其中一个进行颜色处理。

  imageMode(CENTER);
  tint(255,80);
  image(img_block,x0+size/2,y0+size/2,size,size);
  tint(255,100);
  image(img_block,x0+size/2,y0+size/2,size-140,size-140);

绘制的详细代码

var angle;//绘制悬挂笑脸，需要记录角度
var aVelocity;//记录
var blocks=[];
var H=0;
function setup()
{
  angle=0;
  aVelocity=0.05;
  createCanvas(640,640);
  //初始化笑脸
  blocks=loadCircle(100,100,400,10,20,50);
}
function draw()
{
  strokeWeight(2);
  background(255);
  angle+=aVelocity;
  //绘制悬挂笑脸
  SmileSprintLine(120,500,20,110,aVelocity,angle,400,10);
//绘制气泡框
  drawBlock(100,100,400,blocks);

}