// working code    
float mx,my,ratio,xpt,ypt,xzt,yzt,swt,zoom;
void setup() {
 size(600,600);
  zoom=1.0;
  mx=width/60;
  my=mx*height/width;
  ratio=mx/my;
}
void draw() {
  scale(zoom);
  translate(xpt-xzt,ypt-yzt);
  background(128);
  grid(60,60/ratio);
}
void mouseDragged(){
  xpt-=(pmouseX-mouseX)/zoom;
  ypt-=(pmouseY-mouseY)/zoom;
}
void mouseWheel(MouseEvent event) {
  swt-=event.getCount();
  if (swt==0) {
    zoom=1.0;
  } else if (swt>=1 && swt<=10) {
    zoom=pow(2, swt);
  } else if (swt<=-1 && swt>=-10) {
    zoom=1/pow(2, abs(swt));
  }
  xzt=((zoom-1)*width/2)/zoom;
  yzt=((zoom-1)*height/2)/zoom;
  if(event.getCount()<=-1){
  xpt-=(mouseX-width/2)/zoom;
  ypt-=(mouseY-height/2)/zoom;
  } else {
  xpt+=(mouseX-width/2)/(pow(2, swt+1));
  ypt+=(mouseY-height/2)/(pow(2, swt+1));
  }
}
void grid(float x, float y) {
  stroke(0);
  for(int i = 0; i < x; i++){line(i*width/x,0,i*width/x,height);}
  for(int i = 0; i < y; i++){line(0,i*height/y,width,i*height/y);}
fill(#ff0000);rect(mx*10,mx*10,mx,mx);
fill(#ffff00);rect(mx*49,mx*10,mx,mx);
fill(#00ff00);rect(mx*10,mx*49,mx,mx);
fill(#0000ff);rect(mx*49,mx*49,mx,mx);
}

Original post I struggled with zoom for a long time and it's irritating and I'm about to give up.
First I was using variables instead of translate() or scale() because I didn't know they existed.
Just wanna zoom in on whatever I'm pointing the mouse at which sounds simple but yet it's zooming in somewhere else.
If don't pan, or only pan when at zoom 1.0 then it works as intended.
BUT if I pan at another zoom say 0.5 or 2.0 then zooming immediately becomes chaotic.
I just detached the issue in a separate sketch and tried using the transform functions, and yet it acts the exact same way.
Here is that sketch, problem must be somewhere between line 20 and 40

// non working original code
float mx,my,ratio; // not relevant for problem

float xpt; // translation
float ypt;
float xzt; // zoom translation
float yzt;
float swt; //scrollwheel ticks
float zoom = 1.0;

// setup not relevant
void setup() {
 size(600,600);
  mx=width/60;
  my=mx*height/width;
  ratio=mx/my;
}

// here starts the relevant part

void draw() {
  scale(zoom);
  translate(xpt-xzt,ypt-yzt);
  background(128);
  grid(60,60/ratio);
}
void mouseDragged(){
  xpt-=(pmouseX-mouseX)/zoom;
  ypt-=(pmouseY-mouseY)/zoom;
}
void mouseWheel(MouseEvent event) {
  swt-=event.getCount(); // swt = wheel ticks
  if (swt==0) {
    zoom=1.0;
  } else if (swt>=1 && swt<=10) {
    zoom=pow(2, swt);
  } else if (swt<=-1 && swt>=-10) {
    zoom=1/pow(2, abs(swt));
  }
  xzt=((zoom-1)*mouseX)/zoom;
  yzt=((zoom-1)*mouseY)/zoom;
}

// here ends the relevant part

void grid(float x, float y) {
  for(int i = 0; i < x; i++){line(i*width/x,0,i*width/x,height);}
  for(int i = 0; i < y; i++){line(0,i*height/y,width,i*height/y);}
fill(#ff0000);rect(mx*10,mx*10,mx,mx);
fill(#ffff00);rect(mx*49,mx*10,mx,mx);
fill(#00ff00);rect(mx*10,mx*49,mx,mx);
fill(#0000ff);rect(mx*49,mx*49,mx,mx);
fill(250);rect(xzt+mouseX/zoom-xpt-mx/2,yzt+mouseY/zoom-ypt-mx/2,mx,mx);
}

EDITED:

void setup(){
  size(500,500);
}

float zoom=1;

void draw(){
  background(200);

  translate(mouseX,mouseY);

  scale(zoom);

  translate(-(mouseX),-(mouseY));

  ellipse(20,200,500,300);
  rect(200,400,300,300);
  ellipse(400,200,100,100);

}

void mouseWheel(MouseEvent event) {
  float e = event.getCount();
  //println(e);
  zoom-=e/10;

}

void mouseWheel(MouseEvent event) {
  float e = event.getCount();
}

Thanks in advance, Alex

String[] headlines = {
"Aniden yerimden fırladım ve üzerine atladım. Ayağım takıldı ve düşmemle birlikte kafamı yere çarptım.  Uyandığımda sırılsıklamdım",
};
String c="Please scroll the mouse wheel to read the story";

PFont f;
PFont f2;
float x;
int index = 0;

void setup() {
  size(800, 450);
  textAlign(CENTER);
  f = createFont("calibri", 16, true); 
  f2 = createFont("calibri", 10); 
  x = width;
}

void draw() {
  background(245);

  stroke(255, 200, 0);
  fill(255, 200, 0);
  rect(293, 164, 220, 20);

  textFont(f, 16);        
  fill(100, 100, 100);
  text(headlines[index], x, 180); 

  textFont(f2, 10);
  fill(70);
  text(c, 400, 400);

  stroke(255, 255, 255);
  fill(255, 255, 255);
  rect(500, 164, 400, 20);
  rect(0, 164, 293, 20);

  if (x < -textWidth(headlines[index])) {
    x = width; 
    index = (index + 1) % headlines.length;
  }
}

void mouseWheel(MouseEvent event) {
  x-=event.getCount();
}

String[] headlines = {
"Aniden yerimden fırladım ve üzerine atladım. Ayağım takıldı ve düşmemle birlikte kafamı yere çarptım.  Uyandığımda sırılsıklamdım",
};
String c="Please scroll the mouse wheel to read the story";

PFont f;
PFont f2;
float x;
int index = 0;

void setup() {
  size(800, 450);
  textAlign(CENTER);
  f = createFont("calibri", 16, true); 
  f2 = createFont("calibri", 10); 
  x = width;
}

void draw() {
  background(245);

  stroke(255, 200, 0);
  fill(255, 200, 0);
  rect(293, 164, 220, 20);

  textFont(f, 16);        
  fill(100, 100, 100);
  text(headlines[index], x, 180); 

  textFont(f2, 10);
  fill(70);
  text(c, 400, 400);

  stroke(255, 255, 255);
  fill(255, 255, 255);
  rect(500, 164, 400, 20);
  rect(0, 164, 293, 20);

  if (x < -textWidth(headlines[index])) {
    x = width; 
    index = (index + 1) % headlines.length;
  }
}

void mouseWheel(MouseEvent event) {
  x-=event.getCount();
}

import controlP5.*;
ControlP5 cp5;

int c = color(100);

void setup() {
size(800, 800);
smooth();
cp5 = new ControlP5( this );
cp5.addColorWheel("c", 596, 3, 200 ).setRGB(color(128, 0, 255));
noStroke();
background(0, 255, 255);

//Below is the drawing area black border.
stroke(0);
strokeWeight(8);
rect(10, 220, 780, 570);
fill(255);

PFont font;
font = loadFont("UrbanClass-10.vlw");

//Instructions are below in this code.
String s = "Your objective is to complete the following drawing in 2 minutes. If you don't finish then restart and try again! This is only a beta.";
fill(50);
text(s, 10, 10, 400, 100); // Text wraps within text box

//Below is "Draw Here!" inside of rect.
textFont(font, 12);
fill(0);
text("Draw Here!", 360, 240);
}

void draw() {
frameRate(800);
println(mouseX + " : " + mouseY);

if ( mouseX < 790 && mouseY > 10) {

//Draw normal
if (mousePressed && (mouseButton == LEFT)) {
ellipse(mouseX, mouseY, 5, 5);
fill(c);
noStroke();

//Eraser
} else if (mousePressed && (mouseButton == RIGHT)) {
ellipse(mouseX, mouseY, 10, 10);
noStroke();
fill(255);
}
}
}

void mouseWheel(MouseEvent event) {
float e = event.getCount();
println(e);
ellipse(mouseX, mouseY, 10, 10);
fill(c);
noStroke();
}

    translate(-mouseX,-mouseY);
    scale(scaling);
    translate(mouseX,mouseY);

Here is my code:

//Code Starts
void settings(){
  size(600,400,OPENGL);
}

void setup(){
  background(0);

  scaleLevel=1;
  xAxis=0;
  yAxis=0;
}

void draw(){
  background(0);
  transform();
  drawRects();
}

void drawRects(){
  for(int i=0; i<24;i++){
    for(int j=0; j<15; j++){
      fill(255);
      rectMode(LEFT);
      rect(i*25,j*25,i*25+20,j*25+20);
    }
  }
}

void mouseWheel(MouseEvent event) {

    //Update Scale Axis
    xAxis = mouseX;
    yAxis = mouseY;

    //This method controls scaleLevel variable
    if(event.getCount()==-1)
      scaleLevel += 0.2;
    else if(event.getCount()==1)
      if(scaleLevel>=1.2)
        scaleLevel -= 0.2;
      else
        scaleLevel = 1;

    System.out.println("Heatmap>> Scale Level: "+scaleLevel);
}

void transform(){
   translate(-1*xAxis,-1*yAxis);
   scale(scaleLevel);
}


float scaleLevel;
int xAxis;
int yAxis;

However, when I tested this, the axis seemed to move little bit more forward, which mouseX,Y wasn't the axis. sperate transformation worked fine, but when I come all three together, the result goes unpredictable.

Could any of you help me out?

void setup() {
    size(1000, 500);
    background(168, 100, 168);
}

void draw() {
    noCursor();
    println (mouseX +"," + mouseY);
    noStroke();
    fill(168, 100, 168);
    rect(0, 0, 50, displayHeight);
    rect(0, 0, displayWidth, 20);
    rect(950, 0, 200, displayHeight);
    rect(0, 480, displayWidth, 20);
    triangle(70, 0, 70, 200, 110, 0);
    triangle(130, 20, 90, 220, 130, 480);
    triangle(70, 260, 70, 480, 110, 480);
    triangle(130, 480, 170, 20, 130, 20);
    triangle(190, 20, 230, 480, 230, 20);
    quad(150, 480, 155, 460, 205, 460, 210, 480);
    triangle(160, 440, 200, 440, 180, 220);
    triangle(250, 20, 270, 220, 290, 20);
    rect(310, 20, 20, displayHeight);
    triangle(250, 480, 250, 440, 270, 480);
    triangle(270, 480, 290, 440, 290, 480);
    rect(350, 20, 20, displayHeight);
    rect(390, 20, 100, 440);
    rect(490, 20, 460, displayHeight);

    strokeWeight(20);
    stroke(249, 173, 129);
    line(pmouseX, pmouseY, mouseX, mouseY);
}

//create variables for hsb color values
int  bright, dark;
boolean clearButtonOn; // clear button state
int activeBrush; 
static final int  pattern1=0;   //use as activeBrush state indicator
static final int  erase=1;      //use as activeBrush state indicator
int bwidth, bheight, menuX;  //menu dimensions
int  clearBtnY;  //clear button y postion
int  pattern1BtnY;// pattern1 button y position
int  eraseBtnY; //eraser button y position


void setup () {
    size (400, 300);
    colorMode(HSB);
    background (255, 0, 255);  //white in HSB
    bright=255; dark=180;  //brightness values for HSB hover change
    fill (255, 255,bright);        // start with red meaning it's off
    clearButtonOn=false;
    bwidth=100; bheight=height/3;  //set button width and height
    menuX=width-bwidth;  // x position for menu buttons
    clearBtnY=0;   // y position for clearBtn
    pattern1BtnY=clearBtnY + bheight;  //start y position for pattern1 Btn
    eraseBtnY=clearBtnY + (2* bheight);  //start y position for eraseBtn
    activeBrush=pattern1;
    smooth();
}

void draw () {
   if(clearButtonOn==true){  //check if clear button is active
     clearCanvas(0, 0,width, height);
   }
   drawBrushPattern();
   drawMenu(menuX,0, 100, height);
   //draw menu buttons last
   drawP1Button(menuX, pattern1BtnY, bwidth, bheight);
   drawEraseButton(menuX, eraseBtnY, bwidth, bheight);
   drawClearButton (menuX, clearBtnY,bwidth, bheight);   
}

//test to see what brush is active, call that function
void drawBrushPattern(){

}

// test if mousePressed, test if over canvas, draw some pattern at mouseX,mouseY
void drawPattern1(){

}

// test if mousePressed, test if over canvas, draw some pattern at mouseX,mouseY
void drawEraser(){

}
//draw a black rectangle as background for buttons
void drawMenu(int _x, int _y, int _width, int _height){
       fill(0);  //black
       strokeWeight(1);
       stroke(100);
       rect(_x, _y, _width, _height);
}

//draw the pattern for the clearCanvas button, make sure to include hover behavior
void drawClearButton (int _x, int _y, int _width, int _height) {
  fill(255);
  rect(_x, _y, _width, _height);  //background rect
  stroke(255, 255,bright);
   // check to see if the mouse is over the button
  if ((!mousePressed) && (mouseX > _x && mouseX < (_x + _width) && (mouseY > _y && mouseY < (_y+_height)))){
        stroke(255, 255, dark); // hover color
    }
   //draw button shape - Erase Symbol
    strokeWeight(12);
    float _center=_width/2;
    translate(_x+_center, _y+_center);
    ellipse(0, 0, _width-20,_width-20);
    rotate(degrees(-45));
    rectMode(CENTER);
    rect(0,0,70, 2);
    rectMode(CORNER);
    resetMatrix();
  }

  //draw shape for P1 button, should have 1 design when activeBrush==pattern1, and 
  // a different design when activeBrush != pattern1
 void drawP1Button(int _x, int _y, int _width, int _height){


 }

 //draw shape for P1 button, should have 1 design when activeBrush==pattern1, and 
  // a different design when activeBrush != pattern1
void drawEraseButton(int _x, int _y, int _width, int _height){
      fill(255);
      rect(_x,_y,_width,_height);

 }

void clearCanvas (int _x, int _y, int _width, int _height) {
     noStroke();
    fill(255,0,255,240);  
    rect (_x, _y, _width, _height );
    clearButtonOn=!clearButtonOn;  //change button state to off   
}

void mouseClicked (){
   //check global dimensions of clear button 
   if (mouseX > menuX && mouseX < (menuX + bwidth) && (mouseY > clearBtnY && mouseY < (clearBtnY+bheight))){
      clearButtonOn=!clearButtonOn;   //change button state to on
      println ("clear button state " + clearButtonOn);
      } 
      //now check to see if mouse is over either other button and if so, then change state 
      //of activeBrush
      /*
      //if mouseX,mouseY on pattern1 : activeBrush==pattern1
     if(){

     }
     //if mouseX,mouseY on erase : activeBrush==erase
     else if(){

     }
      */
    }

Any help would be greatly appreciated! Thank you so much!!

Code 1 - The copy is called explicitly

PImage photo;

void setup() {
  size(900, 360);
  photo = loadImage("Data/test.png");  // Load the image into the program
}

void draw() {
  background(0);
  image(photo, 0, 0);
  // Displays a part of the image to a new section of the window.
  copy(photo, 330, 0, 100, height, 750, 0, 100, height);  
}

Code 2 - The copy is based on an equation

PImage photo;
float x;
int speed, z;

void setup() {
  size(900, 360);
  photo = loadImage("data/test.png");
  speed=30;
}

void mouseWheel(MouseEvent event) {
  float e = event.getCount();
  //Change direction
  x=x+(speed*e);
  //Check boundry
  if (x < 0) {
    x = 540;
  } else if (x > 540) {
    x = 0;
  }
  println(x);
}

void draw() 
{
  z=int(x);
  background(0);
  //z=(int)x;
  image(photo, 0, 0, 640, 360);
  copy(photo, z, 0, z+100, height, 750, 0, 100, height);
  line(z, 0, z, height);
  line(z+100, 0, z+100, height);
}

I need to crop an image but the form of croping should be rounded.i dont have a clue to do it. Thanks for any help.:)

I want to make this snippet of code work:

void mouseWheel(UP){

port.write("u");

}

void mouseWheel(DOWN){

port.write("d");

}

Thanks very much!