Presentation in processing? Is my idea doable?

Interesting

Maybe even MS PowerPoint can do this. Depends how you want to deploy the presentation (web or usb-stick or server or …)

When you try to do this in processing, a lot of ideas will come up (you haven’t thought of before) so you have to alter the framework and the data which would be VERY hard.

For example, have a Back button, additional movies and images on a page, start and stop button for the movie etc.

Also, 1st of April is very close…

Chrisir

First Sketch

Having said that, here is a first Sketch :

// Presentation in processing
// https://discourse.processing.org/t/presentation-in-processing-is-my-idea-doable/28489

// with help from micuat from the forum - https://discourse.processing.org/t/how-to-zoom-into-an-image-but-at-a-certain-point-with-scale/28510 

// constants
final color RED = color(255, 0, 0); 
final color GREEN = color(0, 255, 0); 
final color BLUE = color(0, 0, 255); 

final int timerMax = 4300; 

final int FAST_BACK_BUTTON = -10; 

// states 
final int stateNormal     = 0; // constants
final int stateAnimation1 = 1; 
final int stateAnimation2 = 2;
final int stateAnimation3 = 3; 
int state = stateNormal; // current 

//screens
ArrayList<Page> pages = new ArrayList(); 

// page number 
int currentPageNumber  = 0;
int previousPageNumber = 0; 

// for animation the page transition (for state == stateAnimation)
int currentPageNumberTarget = 0; // the new page after the animation is done 
float scaleForAnimation = 1; 
int timer=0; 
PVector animationPoint; // HotSpot the animation zooms to  

int alphaForFading=0; 

float hw; 

// -------------------------------------------------------

void setup() {
  size(800, 800);

  hw=width/2;

  // set basics 
  textAlign(CENTER, CENTER); 
  ellipseMode(CENTER);
  imageMode(CENTER); 

  // MAKE PAGES ***
  makePages();
} // func 

void draw() {
  background(0);

  switch(state) {

  case stateNormal:
    // normal page view 
    showPage(); 
    break;

  case stateAnimation1:
    // The Zoom in-animation 
    animation();    
    break;

  case stateAnimation2:
    // go to white  
    scaleForAnimation = 5;  // map(millis()-timer, 30, timerMax, 1, 5);

    pushMatrix(); 
    translate(hw, hw); 
    scale(scaleForAnimation, scaleForAnimation); 
    translate(-animationPoint.x, -animationPoint.y); 
    Page currentPage = pages.get(currentPageNumber);
    currentPage.displayForAnimation();
    popMatrix(); 

    fill(255, alphaForFading);
    noStroke();
    rect(0, 0, 
      width, height);
    alphaForFading+=5;
    if (alphaForFading>=256) {
      state=stateAnimation3;
      previousPageNumber=currentPageNumber; 
      currentPageNumber=currentPageNumberTarget;
    }
    break;

  case stateAnimation3:
    // go from white to next page 
    showPage(); 

    fill(255, alphaForFading);
    noStroke();
    rect(0, 0, 
      width, height);
    alphaForFading--;
    if (alphaForFading<=0) {
      state=stateNormal;
    }//if
    break;
    //
  }//switch
  //
}//func draw()

//--------------------------------------------------------------------------
// Tools

void makePages() {
  // called once from setup
  // Init all 
  Page newPage = new Page("page1.png");  // page 0 
  newPage.hotSpots.add(new HotSpot( new PVector(171, 327), 1, RED, "Roof: PAGE 1"  ));
  newPage.hotSpots.add(new HotSpot( new PVector(411, 330), 2, BLUE, "PAGE 2"   ));
  pages.add(newPage);
  //
  newPage = new Page("page2.jpg");    // page 1
  newPage.hotSpots.add(new HotSpot( new PVector(511, 230), FAST_BACK_BUTTON, RED, "Back"    ));
  newPage.hotSpots.add(new HotSpot( new PVector(111, 330), 2, RED, "Page 2"    ));
  pages.add(newPage);
  //
  newPage = new Page("page3.png");    // page 2
  newPage.hotSpots.add(new HotSpot( new PVector(81, 130), 0, RED, "Hall" ));
  newPage.hotSpots.add(new HotSpot( new PVector(411, 110), 3, RED, "Outside"  ));
  pages.add(newPage);
}//func 

void showPage() {
  // show page
  //
  // show page number 
  fill(GREEN); 
  text("PAGE " + currentPageNumber, 
    width/2, height-22);
  //
  // show page
  // if the index is too high?
  if (currentPageNumber>=pages.size()) {
    // error
    fill(255);
    text("Unknown page.\n\nHit BACKSPACE for page 1", 
      300, 300);
  } else {
    // valid index 
    Page currentPage = pages.get(currentPageNumber);
    currentPage.display();
  }//else
}//func 

void animation() {
  // run animation
  scaleForAnimation = map(millis()-timer, 30, timerMax, 1, 5);

  pushMatrix(); 
  translate(hw, hw); 
  scale(scaleForAnimation, scaleForAnimation); 
  translate(-animationPoint.x, -animationPoint.y); 
  Page currentPage = pages.get(currentPageNumber);
  currentPage.displayForAnimation();
  popMatrix(); 

  // timer over?
  if (millis()-timer > timerMax) {
    // END animation 1
    state=stateAnimation2;
  }//if
}//func 

//--------------------------------------------------------------------------
// Inputs 

void mousePressed() {
  //
  // if the index is too high 
  if (currentPageNumber>=pages.size()) {
    // error
    return;//leave
  }//if

  Page currentPage = pages.get(currentPageNumber);
  currentPage.mouse();
}//func

void keyPressed() {
  //
  switch(key) {
  case BACKSPACE: 
    currentPageNumber=previousPageNumber;
    break;

  case ESC:
    currentPageNumber=0; // go Home
    key=0; // kill ESC 
    break; 
    //
  }//switch
}//func 

// ========================================================================

class Page {

  // main image 
  PImage img;

  // hotspots, can be a few per page
  ArrayList<HotSpot> hotSpots = new ArrayList();

  //constr
  Page(String imgName_ ) {
    img = loadImage(imgName_);
    if (img==null) {
      println("Image not found: "+imgName_);
      exit();
      return;
    }
    img.resize(width-44, 0);   // preserve ratio
  }//constr

  void display() {
    image(img, width/2, height/2);

    for (HotSpot hs : hotSpots) {
      hs.display();
    }
  }//method

  void displayForAnimation() {
    //image(img, 0, 0);
    image(img, width/2, height/2);
  }//method

  void mouse() {
    // check my Hot Spots 
    for (HotSpot hs : hotSpots) {
      if (hs.mouse()) 
        return;
    }//for
  }//method
  //
} // class 

// ========================================================================

class HotSpot {

  PVector where;
  int target; 
  color colHotSpot; 
  String textHotSpot; 

  // constr 
  HotSpot(PVector pvW_, 
    int target_, 
    color col_, 
    String textHotSpot_) {
    //
    where  = pvW_.copy();
    target = target_;
    colHotSpot=col_;
    textHotSpot=textHotSpot_;
  }// constr 

  void display() {
    noFill();
    stroke(colHotSpot);
    for (int i=0; i<5; i++) {
      float rad=i*9+7; 
      ellipse(where.x, where.y, rad, rad);
    }

    fill(colHotSpot); 
    text(textHotSpot, 
      where.x, where.y+31);
  }//method

  boolean mouse() {
    // When THIS HotSpot has been clicked we act 
    if (dist(mouseX, mouseY, where.x, where.y) < 40) {
      // init animation
      scaleForAnimation = 1; 
      animationPoint=where.copy(); 
      currentPageNumberTarget=target;
      if (target==-10) {
        currentPageNumberTarget=previousPageNumber;
        currentPageNumber=previousPageNumber;
        return true; // Hit
      }

      state = stateAnimation1; 
      timer=millis(); 
      return true; // Hit
    }//if
    return false; // no match
  }//method
  //
}//class
//

4 Likes