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

前提・実現したいこと

一つの画像を左右に分割して右側の画像だけをマウスを使用して動かしたいです。
動きの内容として、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();
}

行動規範の内容に同意します

回答1件

ベストアンサー

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

Processing
1PImage img;
2
3void setup() {
4  size(1920, 1080, P3D);
5  img = loadImage("earth.jpg");
6  textureMode(IMAGE);
7}
8
9void draw() {
10  background(0);
11
12  beginShape();
13  texture(img);
14  vertex(0, 0, 3, 0, 0);
15  vertex(width / 2, 0, 3, img.width / 2, 0);
16  vertex(width / 2, height, 3, img.width / 2, img.height);
17  vertex(0, height, 3, 0, img.height);
18  endShape();
19
20  //pushMatrix();
21  // 0,0の位置をwidth/2,mouseY（X:画面中央 Y:mouseYの高さ）にずらす
22  translate(width / 2, mouseY); 
23
24  // mouseXを1から0の間の値に変換する
25  // float sはmouseXがwidth（右端）の時に0で、mouseXが0（左端）の時に1になるように計算される
26  float s = norm(mouseX, width, 0);
27  // 消えないほうがいい場合はmap（0.1は1/10サイズ 0.01だと1/100サイズ）
28  //float s = map(mouseX, 0, width, 1, 0.1);
29
30  // スケールを変える（1が等倍 2だと2倍 0.5で半分）
31  scale(s);
32
33  beginShape();
34  texture(img);
35
36  // すでにtranslateしているので0,0として考える
37  vertex(0, 0, 0, img.width / 2, 0);
38  vertex(width / 2, 0, 0, img.width, 0);
39  vertex(width / 2, height, 0, img.width, img.height);
40  vertex(0, height, 0, img.width / 2, img.height);
41  endShape();
42  //popMatrix();
43  
44  // この後も描画があるならpushMatrix popMatrixをコメント解除
45}

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

投稿2020/05/28 21:35

編集2020/05/28 21:41

TN8001

総合スコア9862

chanceman

2020/05/29 00:55

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