image(buffer, 0, 0, width, height);

Alright, this is a bit weird.

With the standard image resize:

Default renderer  = 20fps. 

P3D = 50fps. 

I did an image resize manually by copying the pixels to an array with a for loop, then using a simple nearest neighbor solution, then copying the array into a pimage, then displaying the pimage.

default renderer = 50fps

P3D = 50fps. 

Obviously, my image resize method which is nearest neighbor looks terrible compared to the default one, and it gets the same fps in P3D. The goal however is to export to android, and for some reason P3D is super slow... any advice? Is there any examples resizing a PGraphics canvas with a custom algorithm in a processing sketch?

This is my resize algorithm

  int[] resize(int[] original, int x1, int y1, int x2, int y2) {
    int[] resized = new int[x2*y2];
    double xr = x1/(double)x2;
    double yr = y1/(double)y2;
    double px;
    double py; 
    for (int x = 0; x < x2; x++) {
      px = x * xr;
      for (int y = 0; y < y2; y++) {
        py = y * yr;
        double index = Math.floor((y* x2) + x);
        double index2 = Math.floor((int)((py * x1) + px));
        resized[(int)(index)] = original[(int)index2];
      }
    }
    return resized;
  }

String canvasMsg = "CACTUS";
PFont font;
PImage bg;
int y;

void setup() {
  size(640, 360);
  bg = loadImage("cactus.JPG");

  fill(153, 0, 153);


  font = loadFont("ACaslonPro-Semibolditalic-48.vlw");
  textFont(font);
  textSize(100);

  textAlign(CENTER);
  text(canvasMsg, width / 2 - 10, height + 2);
}

void draw() {
  background(bg);
}

I know that this usage is due to my program constantly loading pictures:

Setup method:

      fade = loadImage("fade.jpg");
      red = loadImage("red.jpg");
      green = loadImage("green.jpg");
      blue = loadImage("blue.jpg");
      plus = loadImage("plus.jpg");
      minus = loadImage("minus.jpg");

Draw-Method:

      image(fade, 1, 241, boxsize-1, boxsize-1);
      image(red, 82, 241, boxsize-2, boxsize-1);
      image(green, 161, 241, boxsize-1, boxsize-1);
      image(blue, 241, 241, boxsize-1, boxsize-1);
      image(plus, 401, 241, boxsize-1, boxsize-1);
      image(minus, 481, 241, boxsize-1, boxsize-1);

Can someone help me to adapt it? How do I load the pictures without consantly having to draw them? It would be enough to draw them once when the program starts.

I have searched for a few topics on this but none of them had a simple and working solution or I couldn't manage. But it seems this has a simple solution yet I somehow couldn't do it. All I want is all these images in my array to be proportionally fit to a max width of 20 (which I believe that is resize(20,20) does) but I couldn't manage to call that function as the image is an array. I have tried all these three below the image() line but none of them worked cause it seems it locks them all to 20x20 pixel size. How can I manage this, thanks!

myImageArray[i].resize(20,0);
image(myImageArray[(int)random(5)].resize(20,0);
myImageArray.resize(20,0);

Here is my code;

PImage[] myImageArray = new PImage[20];
float px;
float py; 

void setup() {
  size(600, 600,P3D);
  frameRate(30);
  background(0);

  for (int i=0; i<myImageArray.length; i++) {
   myImageArray[i] = loadImage( "frag_" + i + ".jpg");
  }
}

void draw() {
  background(0); // For glitch effect
  pushMatrix();
  translate(px, py);
  py+=1; // Glitch skip
  for (int i=0; i<width; i+=25) {
    for (int j=-3000; j<3000; j+=23) {
    //for (int j=0; j<3000; j+=25) { // For glitch effect
     image(myImageArray[(int)random(5)], i, j, 20, 20);
    }
  } 
  popMatrix(); 
}

Which is taking down-sampled web-cam footage. Sending the large pixel-block-color-information (black and white) array data over UDP (over the network) and have Cinema-4d listen to the UDP data packets with a python effector.

My immediate issue is getting the array pixel data for the large pixels (not every single individual pixel, which I think I'm getting now). I'm not sure what is being output when I use this code in the console though. Is this code sending every pixels color data in the window to the console? How do I get just the big down sampled pixel blocks? Or is it already only sending the rows/columns that have been down-sampled? I'm a little confused. This stuff is kind of over my head, but I'm trying to figure it out. Any help would be appreciated.

Here's more info on what I'm trying to do and what my immediate issue is: I'm trying to print the large pixel values every frame (eventually I'd like to only have black and white values but I haven't gotten that far). I'm not too sure how exactly Processing 3.3.6 is interpreting this code. Or if this is the wrong way to go about getting the pixel array data clean enough to send to another program and interpret. I'm just hacking code together right now like a maniac. I finally got pixel output in the console (I think), though I don't know what the output actually means. It looks like Java (hex info?), but I don't really know exactly.

I'm getting print data like this: [I@8e9278b[I@8e9278b[I@8e9278b[I@8e9278b[I@8e9278b[I@8e9278...

import processing.video.*;

// Size of each cell in the grid, ratio of window size to video size
//Screen Pixels are 80 width and 60 height in the case of 640/480
int videoScale = 8;
// Number of columns and rows in the system
int cols, rows;
// Variable to hold onto Capture object
Capture video;

void setup() {  
  size(640, 480);  
  // Initialize columns and rows  
  cols = width/videoScale;  
  rows = height/videoScale;  
  background(0);
  video = new Capture(this, cols, rows);
  video.start();
}

// Read image from the camera
void captureEvent(Capture video) {  
  video.read();
}

void draw() {
  video.loadPixels();  
  // Begin loop for columns  
  for (int i = 0; i < cols; i++) {    
    // Begin loop for rows    
    for (int j = 0; j < rows; j++) {      
      // Where are you, pixel-wise?      
      int x = i*videoScale;      
      int y = j*videoScale;
      color c = video.pixels[i + j*video.width];
      fill(c);   
      stroke(0);      
      rect(x, y, videoScale, videoScale);

      //Experiment code for capturing video pixel color data so far:
      loadPixels();
      //I'm not sure I need this get() - taking it out still sends data to console.
      get();
      print(pixels);
    }  
  }
}

loadImage() from createImg()-p5.dom

or

loadImage() from a data URI, such as "data:image/jpg;base64,{base 64 encoded data block}"

The createImg() comes from an createFileInput(), and I want o be able to resize() that image.

Thanks for your help!

Code below:

function setup() {
    createFileInput (handleFile);
    createCanvas (800, 400);
    background (245);
}

function draw() {
    strokeWeight (10);
    stroke (0, 255,0);
    line (pmouseX, pmouseY, mouseX, mouseY);
}

function handleFile (file) {
  if (file.type === 'image') {
    var img = createImg (file.data).hide();
    print (img);

    //img.resize (width, 0);
    image (img, 0, 0);
  }
}

PImage[] runner = new PImage[6];
int frame;
int displaytimer;
void setup() {
  frameRate(80);
  size(500, 500);
  for (int i = 0; i < runner.length; i++) {
    runner[i] = loadImage("run"+(i+1)+".jpeg");
  }
}
void draw() {
  background(255);
  image(runner[frame], mouseX, mouseY, 100, 100);
  if (millis()>displaytimer+180) {
    displaytimer = millis();
    if (frame<5) {
      frame = frame+1;
    } else {
      frame = 0;
    }
  }
}

Note that the sequence is of 6 images named "run1" to "run6" in a consecutive order.

Any help would be greatly appreciated.

I am working on a project with multiple animated sprites, and throughout the course of the program some sprites have to get smaller and bigger multiple times. However, they lose quality if they get smaller, and then bigger. Do I have to use the image() function with size parameters and load the images' size each frame? Is there a way to resize them without having to move the .resize function out of void setup() for data efficiency? Would using scale() be a more data-efficient way?

Thank you all for the input!

I have an image that shoud adapt to the window size, scaling down when the window is smaller then the image. It should stop scaling up when the image is 100%. The problem is that the resize command discards the resolution of the image, so that when you scale down, then up again, the image is completely blurry. How to fix this?

function setup() {
  moon = loadImage("assets/moonwalk.jpg");
  createCanvas(windowWidth, windowHeight);
}

function draw() {
    background(255);
    image(moon,0,0);
    moon.resize(windowWidth,0)
}

function setup() {
  moon = loadImage("assets/moonwalk.jpg");
  createCanvas(windowWidth, windowHeight);
}

function draw() {
    background(255);
    image(moon,0,0);
    moon.resize(windowWidth,0)
}

http://alpha.editor.p5js.org/mxa/sketches/Hy9CEZj5-

I'm trying to make a generative logo on this website I'm currently developing (www.lapweb.it). Everything works nice, except for the image that appears to be "pixelated". I really can't wrap my head around it. Any advice? Thank you so much!

ps: this is the code

         /* @pjs preLoad="logoprocessing.png"; */

        PShape img;
        int cx, cy, d;
        void setup(){

          size(75,75);
          cx=width/2;
          cy=height/2;
          d=min(cx,cy);
          frameRate(2);
          img = loadImage("logoprocessing.png");
          smooth();

        }

        void draw() {
          background(256,256,256);

         drawShape(cx,cy,d,int(random(15,30)));

        imageMode(CENTER);
          image(img,width/2,height/2, width/2,height/4);


        }

        void drawShape(float px, float py, float md, int nbrVerts) {
        float[] v = new float [nbrVerts];
        for (int i=0; i< v.length; i++) {
        v[i] = random (0, TWO_PI);
        }
        v = sort (v);
        beginShape();
         color X = color (#0C090A);
        noStroke();
        fill(X);
        for (int i= 0; i<v.length;i++){
        float len = random (20,md);
        vertex(px+len*cos(v[i]), py + len*sin(v[i]));
        }
        endShape();
         rectMode(CENTER);
          fill(X);
          noStroke();
          rect(width/2,height/2,width/2,height/4);
        }


        </script>

This is the code:

http://www.generative-gestaltung.de/P_4_3_2_01

So, instead of having text, I would like to have my own shapes (a character set) applied to the input image.

So for example with this it appears to be using the letters A-Z, I would like to use things like triangles, squares or parts of other images..anything.

The only example I know right now is this:

http://vectorpoem.com/playscii/howto_art.html#imageconversion

Which takes a bmp, slices it up and applies the shapes to the image.

The great thing about this processing code is that even though its grid based it looks like I can overlap stuff, so its not so restricted to a grid.

I see the String inputText line, but im not sure how to alter it.

Appreciate the help.

I'm getting some inconsistent behaviour with PImage.width, PImage.height, and PImage.resize() when working with Movie files. Width and height will almost always return 0, though will occasionally return the correct dimensions. PImage.resize() will sometimes throw an error: "Width(0) and Height(0) cannot be <= 0" - even when the dimensions are hardcoded in. I'm posting this here because I'm not sure whether this is a bug or I'm just doing something silly with the code:

macOS 10.12.5; Quicktime 10.4; P3.3.5

import processing.video.*;

Movie m;
PImage mS;
int vScale = 4;
int mW;
int mH;

void setup() {
  size(480, 270);
  m = new Movie(this, "test.mov"); // original dim: 1920 1080
  m.loop();
  mW = m.width; 
  mH = m.height;

  // Almost always returns 0 for both values, but occasionally returns the correct dimensions.  
  println("width: " + mW +" " + "Height: " + mH); 
}

void draw() {
  mS = m.get();

  //This almost never works
  //mS.resize(mW/vScale, mH/vScale); 

  //This works most of the time, but not always!
  //mS.resize(1920/vScale, 1080/vScale); 

  //Again works most of the time, but not always...
  mS.resize(480, 270);


  image(mS, 0, 0);
}

void movieEvent(Movie m) {
 m.read(); 
}

I am trying to crop an image. I've used the resize(); function but this changes the proportions of the image. Does anyone know how to crop an image without stretching it? I only want it to scale up and down within the decided size (or mask).

Hope it makes sense!

Thanks,

Jonathan

What I want is to be able to draw whatever I want in any particular type of window, but for it to always draw within the bounds of the window. Right now I can only draw rectangles, and it simply intersects their bounds with the window's before it draws each one, but, for example, there is no way to just draw a partial rounded rectangle (which happens to be my window shape) in Processing without an annoying manual construction, and if I ever want anything more complicated I'm probably not going to be able to / want to do it manually.

I considered using a stored PGraphics on each window, which would let me draw offscreen then paste in the area I want, but the user can resize windows (PGraphics can't be resized), and the documentation states that creating a new PGraphics is too expensive to do constantly.

Is there some faster way to draw anything I can draw on a PGraphics only within a certain rectangle? Would the slowdown from making a new PGraphics whenever the mouse drags actually not be that bad?

You have deliberately vandalised this discussion.

Please read the discussion DO NOT DELETE YOUR POSTS.

koogs has restored your original posting below.

EDIT: I made the stupid mistake of not mentioning that when I when I said "a lower spec system" I meant an andriod phone

ArrayList <Bullet> bullets;
int background_y;

PImage background;
PImage player;
PImage enemy;
PImage bullet;

int bullet_traveling;
int bullet_timer1;
int bullet_timer2;
int bullet_shot;
int bullet_side;
int bullet_x;
int bullet_y;

int enemy_health;
int enemy_x;
int enemy_y;

int player_x;
int player_y;

void setup() {
  fullScreen();
  frameRate(60);
  bullets = new ArrayList();

  background = loadImage("https://" + "s21.postimg.org/oubg978af/background.png");
  player = loadImage("https://" + "s13.postimg.org/hy84r98mv/player.png");
  bullet = loadImage("https://" + "s23.postimg.org/45ev766kr/bullet.png");
  enemy = loadImage("https://" + "s27.postimg.org/6njql63gz/enemy.png");

  bullet.resize(bullet.width/3, bullet.height/3);
  background.resize(width, height);

  player_y = height/4*3;
  player_x = width/2;
}

void draw() {
  background();
  for (Bullet temp : bullets) temp.update();
  bullet_enemy();
  player();
  enemy();

  if (mousePressed) {
    if (bullet_timer1 == 0) {
      bullet_timer1 = 1;
      bullet_timer2 = millis();
    }
    if (millis() - bullet_timer2 >= 200) {
      bullet_timer1 = 0;
      if (bullet_side == 1) {
        Bullet temp = new Bullet(player_x+55, player_y);
        bullets.add(temp);
        bullet_side = 0;
      } else {
        Bullet temp = new Bullet(player_x-55, player_y); 
        bullets.add(temp);
        bullet_side = 1;
      }
    }
  }
}

void background() {
  image(background, 0, background_y);
  image(background, 0, background_y-height);
  background_y += 1;
  if (background_y >= height) background_y = 0;
}

void enemy() {
  if (enemy_health == 0) {
    enemy_health = 1;
    enemy_y = -enemy.width/2;
    enemy_x = int(random(enemy.width/2, width-enemy.width/2));
  }
  if (enemy_y-enemy.width/2 >= height) {
    enemy_health = 0;
  }
  enemy_y += 3;

  image(enemy, enemy_x-enemy.width/2, enemy_y-enemy.height/2);
}

void player() {
  if (mousePressed && player_x < mouseX) player_x = player_x + 12;
  if (mousePressed && player_x > mouseX) player_x = player_x - 12;
  image(player, -player.width/2+player_x, -player.height/2+player_y);
}

void bullet_enemy() {
  if (player_x <= enemy_x+100 && player_x >= enemy_x-100 || bullet_traveling == 1) {
    bullet_traveling = 1;
    if (bullet_shot == 0) {
      bullet_x = enemy_x;
      bullet_y = enemy_y;
      bullet_shot = 1;
    }
    rect(bullet_x, bullet_y, 10, 10);
    bullet_y = bullet_y + 30 ;
  }

  if (bullet_x <= player_x+player.width/2 && bullet_x >= player_x-player.width/2 && bullet_y >= player_y) {
    bullet_traveling = 0;
    bullet_shot = 0;
  }
}

class Bullet {
  float x;
  float y;
  float speed;

  Bullet(float tx, float ty) {
    x = tx;
    y = ty;
  }

  void update() {
    image(bullet, -bullet.width/2+x, -bullet.height/2+y);
    y -= 25;
    if (x <= enemy_x+enemy.width/2 && x >= enemy_x-enemy.width/2 && y <= enemy_y) {
      x = -10000;
      enemy_health = 0;
    }
  }
}

I can't find where is the problem with my sketch. Every time I resize the browser's window, the drawing made with line(pmouseX, pmouseY, mouseX, mouseY) disappears. Is this normal? How could I avoid it?

Here is the Pen from it: https://codepen.io/skmecs/pen/LWapZJ

thank you all in advance

best regards, Gil

float w,a,s,d = 0; float menu = 1; float game = 0; float ram = 0; float running = 1; float x = 50; float y = 50; PImage title; PImage start; PImage quit; PImage down; PImage left; PImage right; PImage up; PImage ver; PImage pistol; PImage spistol; PImage uzi; PImage xm1; PImage xm2; PImage cursor; PImage map1; PImage dir; void setup() { size(1366,768); surface.setResizable(true); background(0); noStroke(); fill(255); noCursor(); title = loadImage("title.gif"); start = loadImage("start.gif"); quit = loadImage("quit.gif"); down = loadImage("Down.png"); left = loadImage("Left.png"); right = loadImage("Right.png"); up = loadImage("up.png"); ver = loadImage("ver.png"); pistol = loadImage("Pistol.gif"); spistol = loadImage("Scope Pistol.gif"); uzi = loadImage("UZI.png"); xm1 = loadImage("XM-1.png"); xm2 = loadImage("XM-2.png"); cursor = loadImage("cursor.png"); map1 = loadImage("map1.png"); dir = down; textSize(20); } void draw() { if(menu == 1) { clear(); text(frameRate, width-32, 20); image(title,width/2.732,030); image(start,width/3.902,250); image(quit,width/3.902,350); pistol.resize(132,84); right.resize(150,150); image(right,width/1.437,275); image(ver,0,0); image(pistol,width/1.366,350); cursor.resize(32,32); image(cursor,mouseX,mouseY); } if(game == 1) { clear(); text(frameRate, width-32, 20); image(map1,x,y); dir.resize(75,75); image(dir,683,384); keypress(); detect(); } } void detect() { if(x == 630) { x=620; } if(x == -1690) { x=-1680; } if(y == 330) { y=320; } if(y == -1990) { y=-1980; } if(x == -1060 && y<-880) { x=-1050; } if(y == -890 && x<-1050 && x>-1200) { y=-880; } if(x==-1190 && y<-880) { x=-1200; } if(x==-1060 && y>-380) { x=-1050; } if(x==-1190 && y>-380) { x=-1200; } if(y==-370 && x>-1200 && x<-1050) { y=-380; } if(x==-20 && y<-320 && y>-1170) { x=-10; } if(x==-140 && y<-320 && y>-1170) { x=-150; } if(y==-330 && x>-150 && x<-10) { y=-320; } if(y==-1160 && x>-150 && x<-10) { y=-1170; } } void keypress() { if(w == 1) { dir=up; y=y+2.5; } if(a == 1) { dir=left; x=x+2.5; } if(s == 1) { dir=down; y=y-2.5; } if(d == 1) { dir=right; x=x-2.5; } } void mouseReleased() { if(menu == 1) { if(mouseX>width/3.902 && mouseX <width/3.902+185 && mouseY>350 && mouseY <350+75) { exit(); } if(mouseX>width/3.902 && mouseX <width/3.902+185 && mouseY>250 && mouseY <250+75) { menu = 0; game = 1; x=50; y=50; } } } void keyPressed() { if(keyCode == ESC) { game = 0; menu = 1; key=0; } if(key == 'w') { w = 1; } if(key == 'a') { a = 1; } if(key == 's') { s = 1; } if(key == 'd') { d = 1; } } void keyReleased() { if(key == 'w') { w = 0; } if(key == 'a') { a = 0; } if(key == 's') { s = 0; } if(key == 'd') { d = 0; } }

void setup() {
    if (cam == null) cam = new KetaiCamera(this, camWidth, camHeight, 30);    
}

void draw() {
    img = cam.get();
    img.loadPixels();
    img.updatePixels();
    // render the original image to screen, seems to be necessary before resizing...
    image(img, width/2, height/2, height, width);

    img.resize(7, 5);
    img.loadPixels();
    // render the scaled image over the original one
    image(img, width/2, height/2, height, width);
}

This has always worked fine for me while using the Processing 2 Android lib. Now I'm trying to port this to Processing 3. I had to change some details (e.g. width, height have become displayWidth, displayHeight) but what bothers me most is that I'm not able to display the scaled image over the original one. I suspecting it's related to resize() not working quite as expected but I don't know for sure. I am simply not seeing the image though I don't get an error. For testing purposes I checked the color of the first pixel of the resized image - I'm always getting 0, 0, 0 which is certainly not right but doesn't explain why I'm not seeing the image.

Does anyone know what might cause the problem? Have there been any changes between p2 and 3 regarding how resize() works?

Thanks very much, Stefan

Yesterday for most of my day I tried to figure out how to get the values of parent and pass them to the canvas width and height. I made so many tries but faild multiple times. The code that I have now works, but doesnt scale canvas. Here is the skeleton of how have i created and assigned the canvas to div.

var sketch0 = function( p ) {
  p.setup = function() {
    var cnv = p.createCanvas(500,500); // createCanvas(windowWidth, windowHeight); 
   //Some magic should happen here
  };

  p.draw = function() {
    p.background(255,0,0);
  };

var myp5_0 = new p5(sketch0, 'selection0'); //assigning the canvas to div 'selection0'

Now some backstory - I'm trying to make 'one page' webpage with multiple full screen divs scrolling vertically. All that I have ready to go and working in html and everything works just fine, but the canvas are not responsive at all.

windowWidth and windowHeight makes the canvas disapear. resize() doesnt work either. I guess that the parent() should do the trick but I cant get the parent's width and height.

I'm trying to write a program that reduces the size of an image by a predetermined factor. My program has to load an image file into a PImage, construct a new PImage, eight times smaller in every dimension, with the scaled content, and save that new PImage to disk.

Saving an image with save() works but i'm struggling to simultaneously rescale as well. Is it possible to use resize() with save() to achieve this? Or is there perhaps a more efficient way of going about doing this?

Any help would be greatly appreciated! Thanks

For the most part, I do understand what it happening. I just want to know these few things will not work and how to fix them. Thank you in advance!

I've used the following examples to help me out so far:

https://forum.processing.org/two/discussion/4229/help-with-dragging-and-dropping-multiple-images-in-an-array https://processing.org/discourse/beta/num_1256052533.html

My code is as follows:

String[] images = {
  "Sprite.png", "Sprite2.png", "Sprite3.png"
};

float[] positions =new float [images.length*2] ;

// 0,1,2,3,4,5
// 4,5,6,7,8,9
float bx;
float by;
int bs = 40;
int bz = 30;
boolean bover = false;
boolean locked = false;
float bdifx = 0.0; 
float bdify = 0.0; 
PImage[] image1 = new PImage [images.length]; 
float newx, newy;
int whichImage;

void setup() 
{
  imageMode (CENTER);
  size(600, 400);
  bx = width/2.0;
  by = height/2.0;

  for (int i=0; i < images.length; i++) {
    image1 [i]= loadImage(images[i]); //loads in the images
   // image (image1[i], random(width), random(height), 50, 50) ;
  } 

  for (int j=0; j < images.length*2; j+=2) { //Positions for Images
    positions[j]= random(100);
    positions[j+1]= random(100);
  }
}

void draw() 
{ 
  background(255);
  // Test if the cursor is over the box 
  for (int i=0; i < images.length; i++) {
    if (mouseX > positions[i*2]-bs && mouseX < positions[i*2]+bs && 
      mouseY > positions[i*2+1]-bs && mouseY < positions[i*2+1]+bs) 
    {
      println ("mouseover image: "+i);
      whichImage=i;

      bover = true;  
      if (!locked) 
      { 
        stroke(255); 
        fill(153);
      }
      break;
    } 
    else
    {
      stroke(153);
      fill(153);
      bover = false;
    }
  }
  for (int j=0; j < images.length; j++) {
    image (image1[j], positions[j*2], positions[j*2+1], 50, 50) ;
  }
}
void mousePressed() {
  if (bover) { 
    locked = true;
  } 
  else {
    locked = false;
  }
}
void mouseReleased() {
  locked = false;
}
void mouseDragged() {
  if (locked) {
    newx = mouseX; 
    newy = mouseY;
  } 
  positions [whichImage*2] = newx;
  positions [(whichImage*2)+1] = newy;
}

void draw() {
  background(#FFFAFA);

strokeWeight(5);
fill(255);
rect(70,60,800,470,0,105,105,0);
//resizes the image and fills a rectangle shape
PImage static1 = loadImage("static.jpg");
static1.resize(700, 463);
image(static1, 73, 64);

}

In one of my programs I am loading three images on runtime from set of images in a folder. The images are changing runtime. Raspberrypi is fast enough to run the code and atleast load three images of each less then 150kb and of resolution 1260x760.

But my output becomes extremely slow while loading these images together. Loading one image runs smooth, two slower and three super slow. I have no guess about why is processing not able to run fast when Raspberypi is capable to running the code. The same code runs with perfect speed on my laptop in windows.

Part of the code is as under :

  //Load Images
  imgA = loadImage(path+ displayuserid +"/"+ displayobjectid +"/" + (imageno)%36 +  ".jpg");
  imgB = loadImage(path+ displayuserid +"/"+ displayobjectid +"/" + (imageno+1)%36 +  ".jpg");
  imgC = loadImage(path+ displayuserid +"/"+ displayobjectid +"/" + (imageno+2)%36 +  ".jpg");     


    //Display Images
    imgA.resize(0,250);
    image(imgA, width/2 - imgA.width/2, height/2 + height/2 - imgA.height);      


     pushMatrix();
     translate(width/2,height/2);
     rotate(90*TWO_PI/360);
     imgB.resize(0,250);
     image(imgB, -imgB.width/2, height/2-imgB.height);
     popMatrix();

     pushMatrix();
     translate(width/2,height/2);
     rotate(-90*TWO_PI/360);
     imgC.resize(0,250);
     image(imgC, -imgC.width/2, height/2-imgC.height);
     popMatrix();