[processing][代码分享]简单翻书效果

[cs7258]

简单翻书效果

程序代码

/********************************************************************
* this is an effect about page_flip/turn_page                                                                  *
* BY cs721   2011-11-4                                                                                                    *
* 501277025@qq.com                                                                                                     *
* 拖拽起始点坐标位于hotZone才可以翻页，hotZone位于左右下角的正方形区域.                 *
* 拖拽翻页鼠标释放时，如果超过另外半页的一半则成功翻页，否则返回                           *
*********************************************************************/


import processing.opengl.*;

/********计算翻书效果*******************************/
PVector p1, p2, p3, p4, mid, rd, rt, ld, lt;
float k;   
/***************************************/
PImage front,back,next; //定义当前状态下对应的上页，下页，当前页
PImage [] pp; //用于加载图片
int i;        //pp[]的索引index
int hotZone;  //左下，右下角 翻书触发区域
boolean turnLeft, turnRight; //定义翻书状态


/*********初始化******************************/
void setup() {
  size(1024, 600, OPENGL);
  smooth();
  rd=new PVector(width, height);
  rt=new PVector(width, 0);
  ld=new PVector(0, height);
  lt=new PVector(0, 0);
  p1=new PVector();
  p2=new PVector();
  p3=new PVector();
  p4=new PVector();
  mid=new PVector();
  //////////***************************************
  pp=new PImage[5];
  i=0;
  pp[0]=loadImage("1.jpg");
  pp[1]=loadImage("2.jpg");
  pp[2]=loadImage("3.jpg");
  pp[3]=loadImage("4.jpg");
  pp[4]=loadImage("5.jpg");
  front=pp[0];
  next=pp[1];
  back=pp[pp.length-1];
  
  hotZone=200;
  turnLeft=false;
  turnRight=false;
}
/////////////////////////////////////////////////////
void draw() {
  //println(mouseX);
  background(200, 200, 0);
  image(front, 0, 0);
  stroke(50, 50);
  //strokeWeight(100);
  line(width/2, 0, width/2, height);
  ///////////////////////////////////////
  if (turnLeft) turnToLeft();
  if (turnRight) turnToRight();
}
/***********定义触发翻书热区hotZone****************************/
void mousePressed() {
  if (mouseX>width-hotZone && mouseX<width && mouseY>height-hotZone && mouseY<height)
    turnLeft=true;
  if (mouseX>0 && mouseX<hotZone && mouseY>height-hotZone && mouseY<height)
    turnRight=true;
}

/***********释放鼠标时的状态判断及更新****************************/
void mouseReleased() {
  if (mouseX<width/4 && turnLeft==true ) {
      PImage temp;
      for(int j=0;j<pp.length-1;j++){
      temp=pp[j];
      pp[j]=pp[j+1];
      pp[j+1]=temp;
      }
      front=pp[0];
      next=pp[1];
      back=pp[pp.length-1];
  }
 if (mouseX>width*3/4 && turnRight==true ) {
      PImage temp;
      for(int j=pp.length-1;j>0;j--){
      temp=pp[j];
      pp[j]=pp[j-1];
      pp[j-1]=temp;
      }
      front=pp[0];
      next=pp[1];
      back=pp[pp.length-1];
  }
  turnLeft=false;
  turnRight=false;
}

/********已知两点直线，求另外一点关于该直线的对称点*******************************/
PVector getSymmetricPoint(PVector startPoint, PVector endPoint, PVector q) {  
  PVector p = startPoint;  
  PVector d = PVector.sub(endPoint, startPoint);  
  d.normalize();  
  float   t = PVector.dot(d, PVector.sub(q, p));  
  PVector _q = PVector.add(p, PVector.mult(d, t));  
  return PVector.sub(_q, PVector.sub(q, _q));
}  
/********翻书效果，向左翻书*******************************/
void turnToLeft() {
  p1=new PVector(mouseX, mouseY);
   noStroke();
  strokeWeight(0);
  mid=new PVector((p1.x+rd.x)/2, (p1.y+rd.y)/2);
  k=-(p1.x-rd.x)/(p1.y-rd.y);
  p2.y=height;
  p2.x=1/k*(p2.y-mid.y)+mid.x;
  if (p2.x<width/2) p2.x=width/2;
  p3.x=width;
  p3.y=k*(p3.x-mid.x)+mid.y;
  p4 = null;
  p1 = getSymmetricPoint(p2, p3, rd);
  if (p3.y<0 || p3.y>height) {
    p3.y=0;
    p3.x=1/k*(p3.y-mid.y)+mid.x;
    if (p3.x<width/2) p3.x=width/2;
    p1 = getSymmetricPoint(p2, p3, rd);
    p4 = getSymmetricPoint(p2, p3, rt);
  }
  //texture the BackPage
  noLights();
  beginShape();  
  noStroke();
  texture(next);  
  vertex(p1.x, p1.y, 0, height);  
  vertex(p2.x, p2.y, width-p2.x, p2.y);  
  if (p3.x==width) vertex(p3.x, p3.y, 0, p3.y); 
  else vertex(p3.x, p3.y, width-p3.x, p3.y);    
  if (p4 != null) vertex(p4.x, p4.y, 0, 0);  
  endShape(CLOSE);  

  //texture the NextPage    
  noLights();
  beginShape();  
  texture(next);  
  vertex(p2.x, p2.y, p2.x, p2.y);  
  vertex(rd.x, rd.y, rd.x, rd.y);  
  if (p4 != null) vertex(rt.x, rt.y, rt.x, rt.y);  
  vertex(p3.x, p3.y, p3.x, p3.y );          
  endShape(CLOSE);
}
/********翻书效果，向右翻书*******************************/
void turnToRight() {
  p1=new PVector(mouseX, mouseY);
  fill(255, 0, 200);
  noStroke();
  strokeWeight(0);
  mid=new PVector((p1.x+ld.x)/2, (p1.y+ld.y)/2);
  k=-(p1.x-ld.x)/(p1.y-ld.y);
  p2.y=height;
  p2.x=1/k*(p2.y-mid.y)+mid.x;
  if (p2.x>width/2) p2.x=width/2;
  p3.x=0;
  p3.y=k*(p3.x-mid.x)+mid.y;
  p4 = null;
  p1 = getSymmetricPoint(p2, p3, ld);
  if (p3.y<0 || p3.y>height) {
    p3.y=0;
    p3.x=1/k*(p3.y-mid.y)+mid.x;
    if (p3.x>width/2) p3.x=width/2;
    p1 = getSymmetricPoint(p2, p3, ld);
    p4 = getSymmetricPoint(p2, p3, lt);
  }
  //texture the BackPage
  lights();
  noFill();
  beginShape();  
  noStroke();
  texture(back);  
  vertex(p1.x, p1.y, width, height);  
  vertex(p2.x, p2.y, width-p2.x, p2.y);  
  if (p3.x==0) vertex(p3.x, p3.y, width, p3.y); 
 else vertex(p3.x, p3.y, width-p3.x, p3.y);    
  if (p4 != null) vertex(p4.x, p4.y, width, 0);  
  endShape(CLOSE);  

  //texture the NextPage    
  lights();
  beginShape();  
  texture(back);  
  vertex(p2.x, p2.y, p2.x, p2.y);  
  vertex(ld.x, ld.y, ld.x, ld.y);  
  if (p4 != null) vertex(lt.x, lt.y, lt.x, lt.y);  
  vertex(p3.x, p3.y, p3.x, p3.y );          
  endShape(CLOSE);
}

[scmm65]

居然没人回复，没人顶，那我来坐沙发

[vinjn]

做得相当棒，这帖子今天才看到，加精！

[cs7258]

被加精了呀，多谢鼓励

[king]

好东西

[scale1994]

感谢感谢  帮助很大啊 ~~