⚪互动媒体日常‍●交互漫画之对话框交互

杳域 2020-11-30 04:06:40

144

分类专栏： p5.js 交互漫画

最后发布:2020-11-30 04:06:40首次发布:2020-11-30 04:06:40

本文链接：https://blog.csdn.net/weixin_44341018/article/details/110362141

版权

互动媒体日常——交互漫画之对话框交互

效果尝鲜

在这里插入图片描述
（图片素材均为博主原创）

核心代码

1. 参数设置与资源加载

var img_bg=[];//所有背景
var img_c1_people;/
var img_c1_door;
var img_c2_cat=[];
var comicIndex=0;//用于切换漫画
var comicMax=2;//记录有多少页漫画
var timeInterval=0;//控制漫画中动画播放的间隙
var curIndex=0;//控制漫画中动画播放到第几帧
var frms=360,//对话框转动控制
	theta=0;
//预加载图片
function preload()
{
  img_bg[0]=loadImage("1_background.png");
  img_bg[1]=loadImage("2_background.png");
  img_c1_people=loadImage("1_people.png");
  img_c1_door=loadImage("1_door.png");
  img_c2_cat[0]=loadImage("2_cat1.png");
  img_c2_cat[1]=loadImage("2_cat2.png");
  img_c2_cat[2]=loadImage("2_cat2.png");
  img_c2_cat[3]=loadImage("2_cat3.png");
  img_c2_cat[4]=loadImage("2_cat3.png");
  img_c2_cat[5]=loadImage("2_cat3.png");
  img_c2_cat[6]=loadImage("2_cat2.png");
  img_c2_cat[7]=loadImage("2_cat2.png");
  img_c2_cat[8]=loadImage("2_cat1.png");
  img_c2_cat[9]=loadImage("2_cat1.png");
  img_c2_cat[10]=loadImage("2_cat1.png");
}

2. 绘制与切换

//绘制
function draw()
{
   background(255);
   switch (comicIndex) {
     case 0:
       drawDoorComic();
       break;
     case 1:
       drawRelaxComic();
       break;
     default:
   }
}
//点击切换漫画
function mouseClicked(){
  if((comicIndex+1)<comicMax){
    comicIndex++;
  }
  else {
    comicIndex=0;
  }
}

一、恐惧

//恐惧漫画
function drawDoorComic()
{
  var leftMax=200;//门移动
  var rightMax=330;
  var centerDis=250;
  imageMode(CENTER);
  image(img_bg[0],450,300,900,600);
  var x=mouseX;
  if(mouseX>=rightMax){
    x=rightMax;
  }
  else if(mouseX<=leftMax){
    x=leftMax;
  }
  image(img_c1_door,x+centerDis,300,900,600);
  image(img_c1_people,450,300,900,600);
  //绘制对话框
  R=map(x,leftMax,rightMax,0,50);
  Nint=map(x,leftMax,rightMax,0,99);
  Namp=map(x,leftMax,rightMax,0.4,0.8);
  frms=map(x,leftMax,rightMax,320,360);
  theta+=TWO_PI/frms;
  RoundNoise(400,400,160-R,100-Nint,Namp,2,theta,3);
}

二、平静

//平静漫画
function drawRelaxComic()
{
  imageMode(CENTER);
  image(img_bg[1],450,300,900,600);
  //让猫猫动起来
  if(timeInterval==6)
  {
    if(curIndex==img_c2_cat.length-1){
        curIndex=0;
    }
    else{
      curIndex+=1;
    }
    timeInterval=0;//让猫猫呼吸慢下来
  }
  else{
    timeInterval+=1;
  }
  image(img_c2_cat[curIndex],450,300,900,600);//画猫猫
//判断范围控制对话框
  var x=mouseX;
  var y=mouseY;
  var catX=350;var catY=400;//猫猫的位置
  var dis=dist(catX,catY,x,y);
  var disMax=100;var disMin=30;
  if(dis>disMax){
    dis=disMax;
  }
  else if(dis<disMin){
  dis=disMin;
  }
  //对话框绘制
  R=map(dis,disMin,disMax,0,50);
  Nint=map(dis,disMin,disMax,0,9);
  Namp=map(dis,disMin,disMax,0.5,0.7);
  frms=map(dis,disMin,disMax,350,360);
  theta+=TWO_PI/frms;
  RoundNoise(580,230,200-R,10-Nint,Namp,2,theta,3);
  RoundNoise(475,385,25,5,Namp+0.1,2,theta,3);
}