一つの画像を左右に分割して右側の画像だけをマウスを使用して動かしたいです。

Question

前提・実現したいこと

一つの画像を左右に分割して右側の画像だけをマウスを使用して動かしたいです。
動きの内容として、X軸はマウスが一番左にあるとき画像は最大で、左側に動かせば小さくなる
Y軸は下に動かせば画像がそのまま下がる。平行移動のような感じです。

発生している問題・エラーメッセージ

scaleとmouseX,Yを使ってみたのですが何も起こりませんでした。

該当のソースコード

Processing3.5.3

PImage img;
PImage leftImg;
PImage rightImg;

void setup() {
size(1920, 1080, P3D);

img = loadImage("earth.jpg");

leftImg = img.get(0, 0, img.width, img.height);
rightImg = img.get(width/2, 0, img.width,height );
}

void draw() {
background(0);

image(leftImg, 0, 0);
image(rightImg, width/2, 0);

textureMode(IMAGE);
beginShape();
texture(img);
vertex(0, 0, 3, 0 ,0);
vertex(width/2, 0,3, img.width/2, 0);
vertex(width/2, height,3,img.width/2,img.height);
vertex(0, height,0, 3, img.height);
endShape();

scale(mouseX);
textureMode(IMAGE);
beginShape();
texture(img);
vertex(width/2,0,0, img.width/2, 0);
vertex(width, 0,0, img.width, 0);
vertex(width,height ,0,img.width ,img.height);
vertex(width/2,height ,0, img.width/2, img.height);
endShape();
}

Answer 1

前回の回答で分割法を2つ入れてしまったため、混じってしまってますね。
vertexでやりましょうか。

PImage img;

void setup() {
  size(1920, 1080, P3D);
  img = loadImage("earth.jpg");
  textureMode(IMAGE);
}

void draw() {
  background(0);

  beginShape();
  texture(img);
  vertex(0, 0, 3, 0, 0);
  vertex(width / 2, 0, 3, img.width / 2, 0);
  vertex(width / 2, height, 3, img.width / 2, img.height);
  vertex(0, height, 3, 0, img.height);
  endShape();

  //pushMatrix();
  // 0,0の位置をwidth/2,mouseY（X:画面中央 Y:mouseYの高さ）にずらす
  translate(width / 2, mouseY); 

  // mouseXを1から0の間の値に変換する
  // float sはmouseXがwidth（右端）の時に0で、mouseXが0（左端）の時に1になるように計算される
  float s = norm(mouseX, width, 0);
  // 消えないほうがいい場合はmap（0.1は1/10サイズ 0.01だと1/100サイズ）
  //float s = map(mouseX, 0, width, 1, 0.1);

  // スケールを変える（1が等倍 2だと2倍 0.5で半分）
  scale(s);

  beginShape();
  texture(img);

  // すでにtranslateしているので0,0として考える
  vertex(0, 0, 0, img.width / 2, 0);
  vertex(width / 2, 0, 0, img.width, 0);
  vertex(width / 2, height, 0, img.width, img.height);
  vertex(0, height, 0, img.width / 2, img.height);
  endShape();
  //popMatrix();
  
  // この後も描画があるならpushMatrix popMatrixをコメント解除
}

norm() \ Language (API) \ Processing 3+
map() \ Language (API) \ Processing 3+
scale() \ Language (API) \ Processing 3+

Comments

[chanceman]

前回に続いて回答ありがとうございます！
今回も丁寧な回答、解説に助かっています。
回答者様のおかげでvertexなど大まかに理解出来ました。
特にscaleの部分の解説は自分の中でモヤモヤしていた部分なのでスッキリしました。
また、頼ってしまうことがあるかもしれませんがその時はよろしくお願いします、、、、（笑）
あほみたいなこと言ってすいません。
本当にありがとうございます。

[TN8001]

面白いものができるといいですね
がんばってください^^