⚪互动媒体技术●A3与A4

A3线条库

1-放松笑脸效果

对之前的笑脸图形进行扩展，实现摇动效果，以及彩色阴影效果。
——参数：
x：x位置，y：y位置，
r：笑脸大小，w：摇动宽度，h：摇动高度

//绘制普通的摇动笑脸
function SurroundingSmile(x,y,r,w,h)
{
    noStroke();
    fill(32,178,170);
    t=millis()/1000;
    //A1中绘制笑脸的函数
    drawSmileFace(x+w*cos(2*t),y+h*sin(2*t),r,cos(2*t));
}

在普通的绘制函数后，加上一层透明的圆，构成基础的阴影。
其中c是传入的颜色值。

//绘制阴影
  fill(red(c),green(c),blue(c),100);
  noStroke();
  circle(x+w*cos(2*t),y+h*sin(2*t),r,cos(2*t));

绘制多层阴影，设置偏差值，注意摇动偏差值的需要错开，才能有很好的效果。

  SurroundingSmileColor(202,100,60,13,11,color(255,0,0));
  SurroundingSmileColor(201,100,60,11,13,color(0,255,0));
  SurroundingSmileColor(203,100,60,12,12,color(0,0,255));
  SurroundingSmile(200,100,60,10,10);

2-放松笑脸线条

对单个放松笑脸进行扩展，实现绘制线条的效果。
实现设置线条的起点与终点，笑脸的大小和个数，摇动的程度。
——参数：
x：起点x坐标 y：起点y坐标
endX：终点x坐标 endY：终点y坐标
r：笑脸大小 num：笑脸数量 w：摇动最大宽度 h：摇动最大高度

function SurroundSmileColorLine(x,y,endX,endY,r,num,w,h)
{
  interX=floor((endX-x)/num);//笑脸的x方向间隔
  interY=floor((endY-y)/num);//y方向间隔
  for(var i=0;i<num;i++)
  {
      SurroundingSmileColor(x+interX*i+2,y+interY*i+2,r,w+3,h+1,color(255,0,0));
      SurroundingSmileColor(x+interX*i+1,y+interY*i+3,r,w+1,h+3,color(0,255,0));
      SurroundingSmileColor(x+interX*i+3,y+interY*i+1,r,w+2,h+2,color(0,0,255));
      SurroundingSmile(x+interX*i,y+interY*i,r,w,h);
  }
}

3-快乐笑脸线条

强调图形在y轴上的移动。
——参数：
x：起点x坐标 y：起点y坐标
endX：终点x坐标 endY：终点y坐标
r：笑脸大小 num：笑脸数量 w：摇动最大宽度 h：跳动最大高度

function JumpSmileColorLine(x,y,endX,endY,r,num,w,h)
{
  interX=floor((endX-x)/num);
  interY=floor((endY-y)/num);
  for(var i=0;i<num;i++)
  {
      JumpSmileColor(x+interX*i,y+interY*i+2,r,w,h+1,color(255,0,0));
      JumpSmileColor(x+interX*i,y+interY*i+3,r,w,h+3,color(0,255,0));
      JumpSmileColor(x+interX*i,y+interY*i+1,r,w,h+2,color(0,0,255));
      JumpSmile(x+interX*i,y+interY*i,r,w,h);
  }
}

在绘制单个笑脸时，眨眼频率teye和跳动频率t分开，减慢眨眼频率。

function JumpSmileColor(x,y,r,w,h,c)
{
    noStroke();
    fill(32,178,170);
    t=millis()/200;
    teye=millis()/400;//单独控制眨眼频率
    //ellipse(x+w*cos(2*t),y+h*sin(2*t),20,20);
    drawSmileFace(x+w*cos(2*t),y+h*sin(2*t),r,cos(2*teye));
    fill(red(c),green(c),blue(c),100);
    noStroke();
    circle(x+w*cos(2*t),y+h*sin(2*t),r,cos(2*t));
}

4-生气线条

增加Ex参数，控制脸缩放。
——参数：
x：起点x坐标 y：起点y坐标
endX：终点x坐标 endY：终点y坐标
r：笑脸大小 num：笑脸数量 w：摇动最大宽度 h：摇动最大高度 Ex：放大参数

function AngrySmileColorLine(x,y,endX,endY,r,num,w,h,Ex)
{
  interX=floor((endX-x)/num);
  interY=floor((endY-y)/num);
  for(var i=0;i<num;i++)
  {
  //多层增加残影效果
      AngrySmileColor(x+interX*i+1,y+interY*i+3,r,w+1,h+3,Ex,color(0,255,0));
      AngrySmileColor(x+interX*i+3,y+interY*i+1,r,w+2,h+2,Ex,color(0,0,255));
      AngrySmileColor(x+interX*i+2,y+interY*i+2,r,w+3,h+1,Ex,color(255,0,0));
  }
}

单色绘制函数

function AngrySmileColor(x,y,r,w,h,Ex,c)
{
  noStroke();
  fill(32,178,170);
  t=millis()/150;
  teye=millis()/300;
  drawAngryFace(x+w*cos(2*t),y+h*sin(2*t),r,cos(2*teye));
  fill(red(c),green(c),blue(c),100);
  noStroke();
  //对染色圆改变大小，r+Ex*cos(2*t)
  circle(x+w*cos(2*t),y+h*sin(2*t),r+Ex*cos(2*t),cos(2*t));
}

A4随机效果

1-随机数码点

——参数：
x0：左上角x坐标 y：左上角y坐标
endX：右下角x坐标 endY：右下角y坐标
noteMin：数码点最大值 noteMax：数码点最小值

function NoteRandom(x0,y0,x1,y1,noteMin,noteMax)
{
  var locX=random(x0,x1);
  var locY=random(y0,y1);
  var s=random(noteMin,noteMax);
  //fill(random(0,255));
  square(locX,locY,s);
}

2-一些噪声运动

//跟随指针
function followNeedle(x,y,nowX,nowY,len,wide)
{
  let v=createVector(nowX-x,nowY-y);
  v.normalize();//归一化
  stroke(0);
  strokeWeight(wide);
  v.mult(len);
  line(x,y,x+v.x,y+v.y);
}

在基础的跟随指针上增加随机角度效果，实现右边两种随机圆周运动
——参数：
x：圆心x坐标 y：圆心y坐标
len：指针长度 wide：指针宽度

//指针
function guassNeedle(x,y,len,wide)
{
  t=millis()/1000;
  var nowX=noise(x+cos(t)*10)*cos(x+t);
  var nowY=noise(y+sin(t)*10)*sin(y+t);
  let v=createVector(nowX,nowY);
  v.normalize();
  stroke(0);
  strokeWeight(wide);
  v.mult(len);
  line(x,y,x+v.x,y+v.y);
  //noStroke();
  //fill(0);
  //ellipse(x+v.x,y+v.y,10);
}
//加载圆
function guassRound(x,y,len,wide)
{
  t=millis()/1000;
  var nowX=noise(x+cos(t)*10)*cos(x+t);
  var nowY=noise(y+sin(t)*10)*sin(y+t);
  let v=createVector(nowX,nowY);
  v.normalize();
  //stroke(0);
  strokeWeight(wide);
  v.mult(len);
  //line(x,y,x+v.x,y+v.y);
  noStroke();
  fill(0);
  ellipse(x+v.x,y+v.y,5);
}

3-噪声运动扩展面

通过设置不同的参数值可以实现不同效果。

——参数：
x：左上角x坐标 y：左上角y坐标
w：宽度 h：高度
inc：影响随机数选取 len：指针长度 wide：指针宽度

function guassNeedlePlane(x,y,w,h,inc,len,wide)
{
  t=millis()/1000;
  for(var yoff=y;(yoff-y)<h;yoff+=inc)
  {
    for(var xoff=x;(xoff-x)<w;xoff+=inc)
    {
      guassNeedle(xoff,yoff,len,wide);
    }
  }
}

function guassNeedleFlood(x,y,w,h,inc,len,wide)
{
  //t=millis()/1000;
  for(var yoff=y;(yoff-y)<h;yoff+=inc)
  {
    for(var xoff=x;(xoff-x)<w;xoff+=inc)
    {
      //var angle=randomGaussian(xoff,yoff)*TWO_PI;
      guassRound(xoff,yoff,len,wide);
    }
  }
}

4-流体效果

生成粒子

function setup()
{
	createCanvas(W,H);
	cols=floor(wf/scl);
	rows=floor(hf/scl);
	//创建粒子
	for(var i=0;i<500;i++){
	  particles[i]=new Particle(scl,inc,cols,rows,wf,hf);
	}

粒子控制函数

function Particle(scl,inc,cols,rows,w,h){
	this.pos=createVector(random(width),random(height));      //初始位置
	this.vel=createVector(0,0);       //初速度
	this.acc=createVector(0,0);       //初加速度
	this.maxspeed=2;
  this.scl=scl;
  this.inc=inc;
  this.cols=cols;this.rows=rows;
  this.width=w;this.height=h;
                    //速度上限
	this.update=function(){              //更新位置、速度、加速度归零
	   this.vel.add(this.acc);
	    this.vel.limit(this.maxspeed);
	     this.pos.add(this.vel);
	      this.acc.mult(0);
  }

	this.show=function(){               //画粒子
		stroke(0);
    t=millis()/1000;
		strokeWeight(4*cos(2*t));
		point(this.pos.x,this.pos.y);
	}

	this.follow=function(vectors){        //根据粒子随机生成的位置判断所在的格子，该格子的角度向量就是其加速度
		var x=floor(this.pos.x/this.scl);
		var y=floor(this.pos.y/this.scl);
		var index=x+y*this.cols;
		var force=vectors[index];
		this.applyForce(force);
	}

	this.applyForce=function(force){    //改变加速度
		this.acc.add(force);
	}

	this.edges=function(){              //使粒子在画布范围内
		if(this.pos.x<0)		{
			this.pos.x=this.width;
		}
		if(this.pos.x>this.width)	{
			this.pos.x=0;
		}
		if(this.pos.y<0)	{
			this.pos.y=this.height;
		}
		if(this.pos.y>this.height)	{
			this.pos.y=0;
		}
	}
}

生成流体，设置粒子在每个像素的方向和加速度。

function fluid(nowX,nowY,cols,rows,scl,inc,particles)
{
  flowfield=new Array(cols*rows);
  var yoff=nowY;
  for(var y=0;y<rows;y++){
   var xoff=nowX;
   for(var x=0;x<cols;x++){
     var index=x+y*cols;
     var angle=noise(xoff,yoff,zoff)*TWO_PI;  //柏林噪声生成随机角度
     var v=p5.Vector.fromAngle(angle);        //根据角度，生成向量
     v.setMag(0.5);                           //修改向量大小
     flowfield[index]=v;
     xoff+=inc;
     stroke(0,50);                  //画流场背景
     push();
       translate(x*scl,y*scl);
       rotate(v.heading());
       strokeWeight(1);
       //line(0,0,scl,0);
     pop();
   }
   yoff+=inc;
   zoff+=0.0005;
  }
  for(var i=0;i<particles.length;i++){
   particles[i].follow(flowfield);
   particles[i].update();
   particles[i].edges();
   particles[i].show();
  }
}