互動媒體日常——互動漫畫之對話方塊互動

效果嚐鮮

（圖片素材均為博主原創）

核心程式碼

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);
}