A custom Mockup Tool, built with Processing (updated)

For my students at Elisava, I have created a new version of my mockup-tool. You need two different files for a mockup: Your animation in the .gif-format and a scene, which should be a .jpg file. Both files have to be stored in the data folder of your sketch and added to the settings section in the code, quite at the top. Make sure you install the GifAnimation library before.

Please note: Unfortunately I can’t give any support for this application, but I am very thankful for feedback. If you need help, please post your question on the Discord server.

import gifAnimation.*;

// #####################################
// The trcc mockup generator - 2024 edition
// Controls: 
// 1-4    - edit points
// r      - record video
// g      - show/hide grid
// p      - change position
// o      - skew

// #####################################
// Settings for the project

int WIDTH = 1920;
int HEIGHT = 1080;
String SCENE_IMAGE_FILENAME = "scene.jpg";
String INPUT = "input.gif";
float SCALE_FROM = 1; // Ken Burns Zoom
float SCALE_TO = 1.2;

// #####################################
// Application State

PImage sceneImage;
PGraphics pg;
PGraphics grid;
boolean record = false;
boolean showGrid = true;
boolean showUi = true;
boolean VectorSelectionMode = false;

// Positions of the 4 Vectors
float initialMagX = 300;
float initialMagY = 200;
float v1x = -initialMagX;
float v1y = -initialMagY;
float v2x = initialMagX;
float v2y = -initialMagY;
float v3x = initialMagX;
float v3y = initialMagY;
float v4x = -initialMagX;
float v4y = initialMagY;

int DESIGN = 0;
int SELECTIMAGE = 1;

int view = DESIGN;

PImage[] animation;

void setup() {
  sceneImage = loadImage(SCENE_IMAGE_FILENAME);
  sceneImage.filter(GRAY);
  pg = createGraphics(WIDTH, HEIGHT, P3D);
  frameRate(30);
  
  animation = Gif.getPImages(this, INPUT);
}

void settings() {
  size(WIDTH / 2, HEIGHT / 2, P3D);
  pixelDensity(2);
}

float offsetX = 0;
float offsetY = 0;
float W = 1;
float H = 1;
float scalarValue = 1;

void draw() {
  background(0);

  if (record) {
    playSequence();
  }

  pg.beginDraw();
  pg.clear();
  pg.imageMode(CENTER);

  pg.push();
  pg.translate(width/2, height/2);

  // Ken Burns Zoom
  if (record) {
    float kenBurnsScalar = map(recordFrame, 1, animation.length, SCALE_FROM, SCALE_TO);
    pg.scale(kenBurnsScalar);
  }
  // /END Ken Burns Zoom

  pg.push();

  pg.translate(offsetX, offsetY);
  //pg.scale(scalarValue);
  pg.scale(W, H);

  if (record) {
    pg.noTint();
  } else {
    pg.tint(255, 170);
  }
  pg.image(sceneImage, 0, 0);
  pg.pop();

  if (vectorSelector == 1) {
    v1x = -width/2+mouseX;
    v1y = -height/2+mouseY;
  }

  if (vectorSelector == 2) {
    v2x = -width/2+mouseX;
    v2y = -height/2+mouseY;
  }

  if (vectorSelector == 3) {
    v3x = -width/2+mouseX;
    v3y = -height/2+mouseY;
  }

  if (vectorSelector == 4) {
    v4x = -width/2+mouseX;
    v4y = -height/2+mouseY;
  }

  pg.imageMode(CENTER);
  pg.push();
  pg.translate(0, 0);
  pg.textureMode(NORMAL);
  pg.textureWrap(CLAMP);
  pg.noFill();

  if (!record) {
    pg.strokeWeight(3);
    pg.stroke(#00ff00);
  } else {
    pg.noStroke();
  }
  //pg.stroke(#00FF00);

  if (record) {
    
    PImage textureImage = animation[recordFrame];
    
    float tilesX = 8;
    float tilesY = 8;

    PVector d1 = new PVector(v1x, v1y);
    PVector d2 = new PVector(v2x, v2y);
    PVector d3 = new PVector(v3x, v3y);
    PVector d4 = new PVector(v4x, v4y);

    int res = 10;
    float yres = 1.0/(res-1);
    float xres = 1.0/(res-1);

    // Precalc grid positions
    PVector[][] grid = new PVector[res][res];
    for (int y=0; y<res; y++) {
      for (int x=0; x<res; x++) {
        grid[x][y] = new PVector(
          lerp(
          lerp(d1.x, d2.x, x*xres),
          lerp(d4.x, d3.x, x*xres),
          y*yres),
          lerp(
          lerp(d1.y, d4.y, y*yres),
          lerp(d2.y, d3.y, y*yres),
          x*xres)
          );
      }
    }

    for (int y=0; y<res-1; y++) {
      for (int x=0; x<res-1; x++) {
        pg.beginShape();
        pg.texture(textureImage);
        pg.vertex(grid[x][y].x, grid[x][y].y, x*xres, y*yres);
        pg.vertex(grid[x+1][y].x, grid[x+1][y].y, (x+1)*xres, y*yres);
        pg.vertex(grid[x+1][y+1].x, grid[x+1][y+1].y, (x+1)*xres, (y+1)*yres);
        pg.vertex(grid[x][y+1].x, grid[x][y+1].y, x*xres, (y+1)*yres);
        pg.endShape();
      }
    }

    pg.endDraw();
  } else {
    pg.beginShape();
    pg.vertex(v1x, v1y, 0, 0);
    pg.vertex(v2x, v2y, 1, 0);
    pg.vertex(v3x, v3y, 1, 1);
    pg.vertex(v4x, v4y, 0, 1);
    pg.endShape(CLOSE);
  }


  pg.pop();
  pg.pop();
  pg.endDraw();

  image(pg, 0, 0);

  if (!record) {
    image(displayGrid(), 0, 0);
    // Show UI only when vectorSelection is Off!
    if (!VectorSelectionMode) {
      //cp5.draw();
    }
  }
  recordVideo();
  editMockup();

}

// #####################################
// Edit Modes

int EDIT_POSITION = 1;
int EDIT_SKEW = 2;

void editMockup() {
  if (editMode == EDIT_POSITION) {
    offsetX = map(mouseX, 0, width, -1000, 1000);
    offsetY = map(mouseY, 0, height, -1000, 1000);
  } else if (editMode == EDIT_SKEW) {
    W = map(mouseX, 0, width, 0.2, 2);
    
    H = map(mouseY, 0, height, 0.2, 2);
    
    scalarValue = 1;
  }
}

PGraphics displayGrid(){
  PGraphics pg = createGraphics(WIDTH,HEIGHT);
  pg.beginDraw();
  pg.clear();
  pg.rectMode(CENTER);
  pg.fill(#ff00ff);
  pg.noStroke();
  float gridThickness = 1;
  pg.rect(width/2,height/2,gridThickness,height);
  pg.rect(width/4,height/2,gridThickness,height);
  pg.rect(width/4*3,height/2,gridThickness,height);
  pg.rect(width/2,height/2,width,gridThickness);
  pg.endDraw();
  return pg;
}


// #####################################
// Video Recording

final String sketchname = getClass().getName();

int recordFrame = 1;
int recordFrameRate = 5;
float sceneScalar = 0;

void launchRecordVideo() {
  record = !record;
  recordFrame = 1;
}

void playSequence() {
  if (recordFrame < animation.length-1) {
    recordFrame++;
  } else {
    recordFrame = 0;
    sceneScalar += 0.01;
    exit();
    println("finished recording");
  }
}

void recordVideo() {
   saveFrame("out/" + INPUT + nf(recordFrame, 4) + ".jpg");
}

int vectorSelector = 0;
int editMode = 0;

void keyReleased() {
  if (key == '1') {
    vectorSelector = 1;
    VectorSelectionMode = true;
    editMode = 0;
  } else if (key == '2') {
    vectorSelector = 2;
    VectorSelectionMode = true;
    editMode = 0;
  } else if (key == '3') {
    vectorSelector = 3;
    VectorSelectionMode = true;
    editMode = 0;
  } else if (key == '4') {
    vectorSelector = 4;
    VectorSelectionMode = true;
    editMode = 0;
  } else {
    vectorSelector = 0;
    VectorSelectionMode = false;
    editMode = 0;
  }

  if (key == 'r') {
    editMode = 0;
    launchRecordVideo();
  }
  if (key == 'g') {
    editMode = 0;
    showGrid = !showGrid;
  }
  if (key == 'p') {
    editMode = EDIT_POSITION;
  }
   if (key == 'o') {
    editMode = EDIT_SKEW;
  }
}

void mouseReleased() {
  vectorSelector = 0;
  VectorSelectionMode = false;
}

Related

• https://timrodenbroeker.de/mockup-design-tool/