How to Split the Screen in two (one typography other images)

ginadal

Hi, I just start with Processing. I want to split the screen in two. On the left side, I want to see what i'm typing, the other one I want to create a Keypressed (when I type a letter, an image comes).

What i've done since now is two different codes. One code is very basic with Keypressed. Here is the link of my coding (to see what i'm looking for and the code that I used) http://wovenmemories.co.uk/BARCELONA_aubergine/

and the second one, it's one that I divide the screen; and on the left side, the typing part, is working (not as I want), but when I'm trying to add the image part, on the right (with my first code), it seems that doesn't work.

`PImage imENTER, imDELETE,imBACKSPACE, ima, imb, imc, imd, ime, imf, img, imh, imi, imj, imk, iml, imm, imn, imo, imp, imq, imr, ims, imt, imu, imv, imw, imx, imy, imz, imA, imB, imC, imD, imE, imF, imG, imH, imI, imJ, imK, imL, imM, imN, imO, imP, imQ, imR, imS, imT, imU, imV, imW, imX, imY, imZ, im0, im1, im2, im3, im4, im5, im6, im7, im8, im9;
int y = 0;
int x = 384;

float viewportTwoX;
float viewportTwoY;

float viewportWidth;
float viewportHeight;

String letters = "";
void setup() {
  size(768, 768);
  viewportTwoX = width/2;
  viewportTwoY = 0;
  viewportWidth = width/2;
  viewportHeight = height;

  ima = loadImage ("a.png");
  imb = loadImage ("b.png");
  imc = loadImage ("c.png");
  imd = loadImage ("d.png");
  ime = loadImage ("e.png");
  imf = loadImage ("f.png");
  img = loadImage ("g.png");
  imh = loadImage ("h.png");
  imi = loadImage ("i.png");
  imj = loadImage ("j.png");
  imk = loadImage ("k.png");
  iml = loadImage ("l.png");
  imm = loadImage ("m.png");
  imn = loadImage ("n.png");
  imo = loadImage ("o.png");
  imp = loadImage ("p.png");
  imq = loadImage ("q.png");
  imr = loadImage ("r.png");
  ims = loadImage ("s.png");
  imt = loadImage ("t.png");
  imu = loadImage ("u.png");
  imv = loadImage ("v.png");
  imw = loadImage ("w.png");
  imx = loadImage ("x.png");
  imy = loadImage ("y.png");
  imz = loadImage ("z.png");
  imA = loadImage ("a1.png");
  imB = loadImage ("b1.png");
  imC = loadImage ("c1.png");
  imD = loadImage ("d1.png");
  imE = loadImage ("e1.png");
  imF = loadImage ("f1.png");
  imG = loadImage ("g1.png");
  imH = loadImage ("h1.png");
  imI = loadImage ("i1.png");
  imJ = loadImage ("j1.png");
  imK = loadImage ("k1.png");
  imL = loadImage ("l1.png");
  imM = loadImage ("m1.png");
  imN = loadImage ("n1.png");
  imO = loadImage ("o1.png");
  imP = loadImage ("p1.png");
  imQ = loadImage ("q1.png");
  imR = loadImage ("r1.png");
  imS = loadImage ("s1.png");
  imT = loadImage ("t1.png");
  imU = loadImage ("u1.png");
  imV = loadImage ("v1.png");
  imW = loadImage ("w1.png");
  imX = loadImage ("x1.png");
  imY = loadImage ("y1.png");
  imZ = loadImage ("z1.png");
  im0 = loadImage ("0.png");
  im1 = loadImage ("1.png");
  im2 = loadImage ("2.png");
  im3 = loadImage ("3.png");
  im4 = loadImage ("4.png");
  im5 = loadImage ("5.png");
  im6 = loadImage ("6.png");
  im7 = loadImage ("7.png");
  im8 = loadImage ("8.png");
  im9 = loadImage ("9.png");
  imENTER = loadImage ("delete.png");
  imDELETE = loadImage ("delete.png");
  imBACKSPACE = loadImage ("space.png");
}

void draw() {
  background(0);
  drawViewportOne();
  drawViewportTwo();
}

void drawViewportOne() {
  fill(0);
  noStroke();
  rect(0, 0, viewportWidth, viewportHeight);
  fill(255);
  float cursorPosition = textWidth(letters);
  line(cursorPosition, 0, cursorPosition, 100);
  text(letters, 0, 50);
}

void keyPressed() {
  if (key == BACKSPACE) {
    if (letters.length() > 368) {
      letters = letters.substring(0, letters.length()-1);
    }
  } else if (textWidth(letters+key) < width) {
    letters = letters + key;
  }
}


void drawViewportTwo() {
  translate(viewportTwoX, viewportTwoY); 

  fill(255);
  noStroke();
  rect(0, 0, viewportWidth, viewportHeight);
  fill(0);


 if (keyPressed && (key == 'a')) {
    image(ima, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'b')) {
    image(imb, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'c')) {
    image(imc, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'd')) {
    image(imd, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'e')) {
    image(ime, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'f')) {
    image(imf, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'g')) {
    image(img, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'h')) {
    image(imh, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'i')) {
    image(imi, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'j')) {
    image(imj, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'k')) {
    image(imk, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'l')) {
    image(iml, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'm')) {
    image(imm, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'n')) {
    image(imn, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'o')) {
    image(imo, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'p')) {
    image(imp, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'q')) {
    image(imq, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'r')) {
    image(imr, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 's')) {
    image(ims, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 't')) {
    image(imt, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'u')) {
    image(imu, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'v')) {
    image(imv, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'w')) {
    image(imw, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'x')) {
    image(imx, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'y')) {
    image(imy, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'z')) {
    image(imz, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'A')) {
    image(imA, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'B')) {
    image(imB, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'C')) {
    image(imC, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'D')) {
    image(imD, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'E')) {
    image(imE, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'F')) {
    image(imF, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'G')) {
    image(imG, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'H')) {
    image(imH, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'I')) {
    image(imI, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'J')) {
    image(imJ, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'K')) {
    image(imK, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'L')) {
    image(imL, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'M')) {
    image(imM, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'N')) {
    image(imN, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'O')) {
    image(imO, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'P')) {
    image(imP, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'Q')) {
    image(imQ, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'R')) {
    image(imR, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'S')) {
    image(imS, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'T')) {
    image(imT, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'U')) {
    image(imU, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'V')) {
    image(imV, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'W')) {
    image(imW, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'X')) {
    image(imX, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'Y')) {
    image(imY, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == 'Z')) {
    image(imZ, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == '0')) {
    image(im0, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == '1')) {
    image(im1, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == '2')) {
    image(im2, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == '3')) {
    image(im3, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == '4')) {
    image(im4, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == '5')) {
    image(im5, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == '6')) {
    image(im6, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == '7')) {
    image(im7, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == '8')) {
    image(im8, x, y, 40, 10);
upxandy();
  }
  if (keyPressed && (key == '9')) {
    image(im9, x, y, 40, 10);
upxandy();
  }

}

void upxandy() {
    x = x + 40;
    if (x == 768) {
      x = 0;
      y = y +10;
  }
}`

does anyone can help me?

koogs

edit post, highlight code, press ctrl-o

if you find yourself cutting and pasting a lot of code or you have a lot of code that looks the same then you are generally doing something wrong. that code looks like you are doing something very wrong.

ginadal

@koogs, thanks for your comment. I know that I've done something wrong, this is why I'm asking for help. Do you know how I can improve my coding? As the part of the code that looks the same, when it's by itself works well, here is the link: http://wovenmemories.co.uk/BARCELONA_aubergine/

GoToLoop

http://forum.Processing.org/two/discussion/8082/from-several-variables-to-arrays

http://forum.Processing.org/two/discussion/8081/from-several-arrays-to-classes

jeremydouglass

Start with a small sketch -- try one that includes only 'a.png' and 'b.png'.

You have several logical errors.

1. Images off the screen -- In drawViewportTwo you translate(viewportTwoX, viewportTwoY); -- but then you draw your image(ima, x, y, 40, 10);. That means that every image will be drawn at viewportTwoX+x, viewportTwoY+y, which is off the edge of the screen. Either initialize x/y at 0 (make them relative to the viewport) or pushMatrix / popMatrix your translate after drawing the port background itself.

2. No line return -- if (x == 768) -- you are iterating x by 40. It will never be equal to 768 -- it will be 760, 800, and just keep going. Try if (x > 768)

3. Image flies around on keyPressed, disappears -- now that you can see your images and they wrap, you will notice that they fly around whenever you hold the key down, and disappear when you don't. What you want to be doing is copying them -- once -- on keyReleased -- into a PImage (or PGraphics). Then, every draw loop, you want to show that same PImage and whatever happens to be in it.

jeremydouglass

P.S. as @GoToLoop implied above, a major change to make your sketch easier to work with will be to load an array of images (or a hashmap) in a few lines, then trigger those images with a short general purpose keyPressed code (rather than dozens of per file per-key special cases).

Think of it like this: "Load all the images" ... "If the key that was just pressed is found in this list of image names, show the image."

ginadal

@jeremydouglass and @GoToLoop thanks for your help! I'll try :)

ginadal

@jeremydouglass can you explain me better the KeyReleased better, please? I'm not quite sure, if I understood how to do it. Thanks

jeremydouglass

@ginadal -- this code fragment hasn't been tested and isn't complete -- it is meant to illustrate the idea. Your draw loop renders the canvas2 image constantly -- however each full keypress-and-release adds a single image to that canvas using copy(), like a typewriter.

PImage canvas2;
void draw(){
  image( canvas2, 0, 0);
}
void keyReleased(){
  // copy img to a place on the canvas
  if(key == 'a'){ copy(imga, ax, ay, ah, aw, canvas2, cx, cy, cw, ch); }
  if(key == 'b'){ copy(imgb, ax, ay, ah, aw, canvas2, cx, cy, cw, ch); }
}

Of course, after you get this test working with 1-2 letters, you don't want to cut and past that if code dozens and dozens of times. Instead, follow that reading from GoToLoop and my later advice about loading images to an array and copying the array member base on key.

koogs

Be wary of using an array of images when the images, all 62 of them, are 2400x300 when they could be 8x1

The images are binary representations of the key being pressed, you don't need to precalculate them at all

ginadal

@jeremydouglass, my lack of knowledge, doesn't help me to understand your suggestion. I tried it, and I read copy() information, but I couldn't understand as my code keeps saying error or not responding how I would like. if(key == 'a'){ copy(imga, ax, ay, ah, aw, canvas2, cx, cy, cw, ch); }where do you get: imga, ax, ay,ah,aw, [...] cx,cw,ch.? I looked at the website, and it says "sx""sy"... (source) and "dx", "dy" (destination) not "ax" and "cx". And when I copy your code, it says that these variables don't exist. Also, on the copy()'s website, it says that I have to give the right destination. However, I want that each image follows the previous one; meaning that they have different positions.

here is my modification code, which is not working. What do I need to do? sorry for constantly asking.

PImage  ima, imb;

float viewportTwoX;
float viewportTwoY;

float viewportWidth;
float viewportHeight;

String letters = "";

void setup() {
  size(768, 768);
  viewportTwoX = width/2;
  viewportTwoY = 0;
  viewportWidth = width/2;
  viewportHeight = height;

  ima = loadImage ("a.png");
  imb = loadImage ("b.png");
 }

void draw() {
  background(0);
  drawViewportOne();
  drawViewportTwo();
}

void drawViewportOne() {
  fill(100);
  noStroke();
  rect(0, 0, viewportWidth, viewportHeight);
  fill(255);
  float cursorPosition = textWidth(letters);
  line(cursorPosition, 0, cursorPosition, 100);
  text(letters, 0, 50);
}

void keyPressed() {
  if (key == BACKSPACE) {
    if(letters.length() > 0){
      letters = letters.substring(0, letters.length()-1);
    }
  } else {
    letters = letters + key;
  }

   if(textWidth(letters) > width/2){
         letters = letters.substring(0,letters.length()-2);
         letters = letters + '\r' + '\n' + key;
      }
}


void drawViewportTwo() {
  translate(viewportTwoX, viewportTwoY); 

  fill(255);
  noStroke();
  rect(0, 0, viewportWidth, viewportHeight);
  fill(0);

 image (ima, 0, 0);
 image (imb,0,0);

} 

void keyReleased() {
// copy img to a place on the canvas
  if(key == 'a'){ copy(imga, ax, ay, ah, aw, ima, cx, cy, cw, ch); }
  if(key == 'b'){ copy(imgb, ax, ay, ah, aw, imb, cx, cy, cw, ch); }
}