// 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:

In processing library there are some examples of dragging the pictures, but they do so without mouse click and it is not possible to drop them. So I am wondering, is there any advanced example of drag & drop img that can run in Processing, or I better have to download this p5.js?

Cheers, tija

` PShape[][] shapes = new PShape[4][4];

var boxCount = 3;
var[] positions = new var [boxCount] ;

var boxSize = 50;
var draggingBox = false;
var boxBeingDragged = 0;
var dragOffset = createVector(0, 0); 

var logo;
var index = 0;
function setup() 
{
   logo = loadImage("thesis_logo.png");
  createCanvas(1920, 1080, P2D); 
  rectMode(CENTER);

  for (var j=0; j < boxCount; j++) {
    var x = random(100, 600);
    var y = random(400, 680);
    positions[j]=  createVector(x, y);
  }
  noStroke();
  fill(#5BC0EB);

  shapes[0][0] = createShape(RECT,1440,450,boxSize,boxSize);
  fill(#000000);
  shapes[0][1] = createShape(RECT,1440,510,boxSize,boxSize);
  shapes[0][2] = createShape(RECT,1440,570,boxSize,boxSize);
  shapes[0][3] = createShape(RECT,1440,630,boxSize,boxSize);

   fill(#5BC0EB);
  shapes[1][0] = createShape(RECT,1350,540,boxSize,boxSize);
  fill(#000000);
  shapes[1][1] = createShape(RECT,1410,540,boxSize,boxSize);
  shapes[1][2] = createShape(RECT,1470,540,boxSize,boxSize);
  shapes[1][3] = createShape(RECT,1530,540,boxSize,boxSize);


  fill(#5BC0EB);
  shapes[2][0] = createShape(RECT,1410,510,boxSize,boxSize);
  fill(#000000);
  shapes[2][1] = createShape(RECT,1470,510,boxSize,boxSize);
  shapes[2][2] = createShape(RECT,1410,570,boxSize,boxSize);
  shapes[2][3] = createShape(RECT,1470,570,boxSize,boxSize);

  fill(#5BC0EB);
   shapes[3][0] = createShape(RECT,1410,480,boxSize,boxSize);
   fill(#000000);
  shapes[3][1] = createShape(RECT,1470,480,boxSize,boxSize);
  shapes[3][2] = createShape(RECT,1410,540,boxSize,boxSize);
  shapes[3][3] = createShape(RECT,1410,600,boxSize,boxSize);
  patternChange();

}

function draw() 
{ 
  background(255);
  fill(#5BC0EB);
  noStroke();
  rect(480,540,50,50);
  for(var j =0; j < 4;j++){
    fill(0);
   shape(shapes[index][j],50,50,boxSize,boxSize);
  }


    stroke(0);
  strokeWeight(2);
  line(width/2,0,width/2,height);
   for (var j=0; j < boxCount; j++) {
    if (draggingBox && j == boxBeingDragged) {
      stroke(255);  // white
    } else {
      noStroke();
    }
    rect( positions[j].x, positions[j].y, boxSize, boxSize) ;
  }

  patternChange();

image(logo, 50, 50, width/8, height/8);

}

function mousePressed() {
  grabBox();
}

function mouseReleased() {
  draggingBox = false;
}

function mouseDragged() {
  if (draggingBox) {
    positions[boxBeingDragged].x = mouseX + dragOffset.x;
    positions[boxBeingDragged].y = mouseY + dragOffset.y;
  }
}
//
function grabBox() {
  for (var i=0; i < boxCount; i++) {
    // Test if the cursor is over the box
    var left = mouseX > positions[i].x - boxSize/2;
    var right = mouseX < positions[i].x + boxSize/2;
    var top = mouseY > positions[i].y - boxSize/2;
    var bottom = mouseY < positions[i].y + boxSize/2;
    if ( left  && right && top && bottom) {
      prvarln ("mouseover box: "+i);
      boxBeingDragged=i;
      draggingBox = true;
      dragOffset.x = positions[i].x - mouseX;
      dragOffset.y = positions[i].y - mouseY;
      break;
    } else {
      draggingBox = false;
    }
  }
}


function patternChange(){

 if (keyPressed) { //switch statement for changing grid createCanvas
    switch(key){
    case '1':
index = 0;
scramble();
    break;
    case '2':
index = 1;
scramble();
    break;
       case '3':
index = 2;
scramble();
    break;

           case '4':
index = 3;
scramble();
    break;
    }
    }
}

function scramble(){
 for (var j=0; j < boxCount; j++) {
    var x = random(100, 600);
    var y = random(400, 680);
    positions[j]=  createVector(x, y);
  }
}`

I have my first processing sketch running with no errors but I cannot get an image from the webcam.

import hypermedia.video.*;
import java.awt.Rectangle;

OpenCV opencv;

// contrast/brightness values
int contrast_value    = 0;
int brightness_value  = 0;



void setup() {

    size( 320, 240 );

    opencv = new OpenCV( this );
    opencv.capture( width, height );                   // open video stream
    opencv.cascade( OpenCV.CASCADE_FRONTALFACE_ALT );  // load detection description, here-> front face detection : "haarcascade_frontalface_alt.xml"


    // print usage
    println( "Drag mouse on X-axis inside this sketch window to change contrast" );
    println( "Drag mouse on Y-axis inside this sketch window to change brightness" );

}


public void stop() {
    opencv.stop();
    super.stop();
}



void draw() {

    // grab a new frame
    // and convert to gray
    opencv.read();
    opencv.convert( GRAY );
    opencv.contrast( contrast_value );
    opencv.brightness( brightness_value );

    // proceed detection
    Rectangle[] faces = opencv.detect( 1.2, 2, OpenCV.HAAR_DO_CANNY_PRUNING, 40, 40 );

    // display the image
    image( opencv.image(), 0, 0 );

    // draw face area(s)
    noFill();
    stroke(255,0,0);
    for( int i=0; i<faces.length; i++ ) {
        rect( faces[i].x, faces[i].y, faces[i].width, faces[i].height ); 
    }
}



/**
 * Changes contrast/brigthness values
 */
void mouseDragged() {
    contrast_value   = (int) map( mouseX, 0, width, -128, 128 );
    brightness_value = (int) map( mouseY, 0, width, -128, 128 );
}

The programme is supposed to display an image, detect a face and draw a rectangle around the face. I am using windows 7 with a USB webcam. I have tried a couple of versions of processing and both are the same.

Any ideas of where to look first?

Thanks Paul

I'd like to be able to move a specific particle with the mouse and see the distortion on the springs grid.

Here's what the sketch looks like

https://imgur.com/a/vUSd1

Main .Pyde file

add_library('verletphysics')
add_library('toxiclibscore')
from toxi.physics2d import VerletPhysics2D
from toxi.physics2d.behaviors import GravityBehavior 
from Particle import particle
from Locker import locker

def setup():
    size(600, 600, OPENGL)
    smooth(10)
    global physics, collection, lockers, n_rowcol

    physics = VerletPhysics2D()
    physics.addBehavior(GravityBehavior(Vec2D(0, 1)))

    collection, springs, lockers  = [], [], []
    n_rowcol, lngth, strength = 40, 10, .6

    #Display particles and add to Physics
    [[collection.append(particle(100 + (e * 10), 10 + (f * 10))) for f in range(n_rowcol)] for e in range(n_rowcol)]
    [physics.addParticle(e) for e in collection]

    #Lock specific particles
    [collection[e].lock() for e in (0, n_rowcol - 1, n_rowcol ** 2 - n_rowcol, n_rowcol ** 2 - 1)]

    #Display springs
    for e in range(0, n_rowcol ** 2 , n_rowcol):
        for f in range(n_rowcol - 1):
            a = collection[e + f]
            b = collection[e + f + 1]
            s = VerletSpring2D(a, b, lngth, strength)
            physics.addSpring(s)

    for e in range(n_rowcol):
        for f in range(0, n_rowcol ** 2 - n_rowcol, n_rowcol):
            a = collection[e + f]
            b = collection[e + f + n_rowcol]
            s = VerletSpring2D(a, b, lngth, strength)
            physics.addSpring(s)

    #Display lockers (red circles to move with mouse) 
    for e in (0, n_rowcol - 1, n_rowcol ** 2 - n_rowcol, n_rowcol**2 - 1):
        lockers.append(locker(collection[e].x(), collection[e].y()))


def draw():
    background(0)

    #Framerate
    [fill(255), text(int(frameRate), 10, 20)]

    #Run physics
    physics.update()

    #Draw lockers (red circles, not lockers really)
    for e in lockers:
        e.display()
        e.mousePressed()
        e.mouseDragged()

    #Draw particles
    [e.display() for e in collection]

    #Draw springlines
    springlines()


def springlines():
    for e in range(0, n_rowcol ** 2, n_rowcol):
        for f in range(n_rowcol - 1):
            a = collection[e + f]
            b = collection[e + f + 1]
            stroke(255)
            line(a.x(), a.y(), b.x(), b.y())

    for e in range(n_rowcol):
        for f in range(0, n_rowcol ** 2 - n_rowcol, n_rowcol):
            a = collection[e + f]
            b = collection[e + f + n_rowcol]
            stroke(255)
            line(a.x(), a.y(), b.x(), b.y())

Locker.py file

    class locker(object):

        def __init__(self, x, y):
            self.x = x
            self.y = y
            self.over = False
            self.locked = False

        def display(self):

            if dist(self.x, self.y, mouseX, mouseY) < 20:
                self.over = True
                fill(0, 0, 255)
            else:
                self.over = False
                fill(255, 20, 20)
            noStroke()
            ellipse(self.x, self.y, 20, 20)

        def mousePressed(self):
            if mousePressed and self.over:
                self.locked = True
            else:
                self.locked = False

        def mouseDragged(self):
            if self.locked:
                self.x = mouseX
                self.y = mouseY

Particle.py file

    from toxi.physics2d import VerletParticle2D

    class particle(VerletParticle2D):

       over = False

        def display(pos):
            if dist(pos.x(), pos.y(), mouseX, mouseY) < 4:
                pos.over = True
                fill(255, 20, 20)
            else:
                pos.over = False
                fill(255)

            ellipse(pos.x(), pos.y(), 4, 4)

The problem lies in the last snippet above (Particle.py):

To drag a specific particle when mousePressed, I need to access the x and y coordinates of the ellipse (the particle) and say something like:

    def mousePressed(): 
        if pos.over:
            pos.x() = mouseX
            pos.y() = mouseY

But doing so gives me an error: "can't assign to function call" because x() and y() appear as functions.

How can I access the x and y coordinates and make that mouse event work ?

I had assumed that mouseX and mouseY would receive the location of touch events on my phone's touchscreen, but then I realised that this might be where my problem is. I'd appreciate if someone could point me in the right direction for a straightforward way to get the location of touch events, in the same way that it is straightforward to get the location of the mouse.

Just this morning I discovered the existence of p5.js, and a quick look at the reference there shows that it has Mouse events and Touch events. Would it be more straightforward for me to abandon processing.js and just try to get my sketch working online with p5.js instead?

Thanks for your help, and sorry for the "newbie" question. I did some searching, but couldn't find exactly the answer to my question.

public void mousePressed(){
    dragBeginX = (mouseX - offsetX);
    dragBeginY = (mouseY - offsetY);
}

public void mouseDragged(){
    if (mousePressed) {
    offsetX = (mouseX - dragBeginX);
    offsetY = (mouseY - dragBeginY);
}

public void zoomTo(float sc){
    translate(width/2, height/2);
    scale(sc);
    translate(-width/2, -height/2);
    //actual zooming handled in separate thread for smoothness
};

and in before doing the graphic stuff:

translate(offsetX, offsetY);
zoomTo(currentZoom);

There is no actual bug in that code, but it doesn't quite work the way I want - when the application is zoomed in, the dragging speed remains the same which means that the graphics move much faster than the cursor. Opposite applies when application is zoomed out. I have tried inserting the zoom value in the dragging math so that the drag speed would depend on the zoom, but I can't find where exactly it needs to be.

To sum it up, I need to make it so that when zoomed in, the object moving speed matches with the cursor dragging speed.

Any help is appreciated.

EDIT: If it was unclear, offsetX/Y is the current dragged position of the screen;

There's a white 300x300 window. When you press the mouse in it, a rectangle is initiated. It has opposite corners (top left and bottom right) at that point and at the current location of the mouse respectively. The rectangle is blue and has no borders.

When the mouse is released, the rectangle is finished. The opposite corners are at (x1,y1), where the mouse was pressed, and (x2,y2), where it was released. The final rectangle is red with no borders.

Finally, the area of the rectangle drawn is displayed in integers at the centre of the screen, black, 24 font size, on top of the rectangle. The rectangle and text should both stay on until the mouse is pressed again, which repeats the procedure.

Preferably this would be done only in functions, no classes.

int x,y,x2,y2 = 0;

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


void draw() {
  background(255);
  fill(0,0,255);
  rect(x, y, x2, y2);
}

 void mousePressed() {
  x = mouseX;
  y = mouseY;
}


void mouseDragged() {
  x2 = mouseX - x;
  y2 = mouseY - y;
  rect(x, y, x2, y2);
}
void mouseReleased() {
  fill(255,0,0);
  rect(x,y,x2,y2);

}

void draw() {

    fill(0);
    rect(39, 124, 255, 60);
    fill(255, 0, 0);
    rect(39+255+value, 124, 20, 60);


}

void mouseDragged() {
  value = value - 1;
  if (value > 255) {
    value = 0;
  }
}

import peasy.*;
PeasyCam camera;
float[] rot; 
float disx;
float disy;
float yaw,pitch,roll;
void setup(){
  size(600,400,P3D);
  disx=width*0.6;
  disy=height/10;
  camera = new PeasyCam(this, 100);
  camera.setCenterDragHandler(null);
  strokeWeight(3);
}
float [] rec;

void draw(){
 background(180);
 disx=(float)camera.getDistance()*0.86;
 disy=(float)camera.getDistance()*0.57;
 rec = new float [] {-disx,-disy,0,disx,-disy,0,disx,disy,0,-disx,disy,0};
 //rot = camera.getRotations();
 //yaw=rot[0]; pitch=rot[1]; roll=rot[2];

 if(keyPressed){
 float rotspeed=0.03;
 if(key=='p') { pitch += rotspeed; }
 if(key=='y') {   yaw += rotspeed; }
 if(key=='r') {  roll += rotspeed; }
 if(key==ENTER) {  yaw=pitch=roll=0; }
 }
 camera.setRotations(yaw,pitch,roll);

 float sinyaw,cosyaw, sinpitch,cospitch, sinroll, cosroll;
 sinyaw=sin(-yaw-HALF_PI);
 cosyaw=cos(-yaw-HALF_PI);
 sinpitch=sin(pitch-HALF_PI);
 cospitch=cos(pitch-HALF_PI);
 cosroll=cos(roll);
 sinroll=sin(roll);

 for(int i=0; i<12; i+=3){
 float x,y,z,x0,y0,z0;
 x0=x=rec[i]; y0=y=rec[i+1]; z=z0=rec[i+2];

 x=x0*cosroll-y0*sinroll;
 y=y0*cosroll+x0*sinroll;

 z=x0*cospitch;
 y*=sinpitch;

 z=y*cosyaw;
 y*=sinyaw;

 rec[i]=x; rec[i+1]=y; rec[i+2]=z;

 }

 stroke(#ff0000);
 line(0,0,0,100,0,0);
 stroke(#00ff00);
 line(0,0,0,0,100,0);
 stroke(#0000ff);
 line(0,0,0,0,0,100);

 stroke(0);
 line(rec[0],rec[1],rec[2], rec[3],rec[4],rec[5]);
 line(rec[3],rec[4],rec[5], rec[6],rec[7],rec[8]);
 line(rec[6],rec[7],rec[8], rec[9],rec[10],rec[11]);
 line(rec[9],rec[10],rec[11], rec[0],rec[1],rec[2]);
}

A bit simpler example just a rotating square and static camera, only rotating in one axis at the time.
Also just found this https://khanacademy.org/computer-programming/3d-tutorial-4/1648921303

import peasy.*;
PeasyCam camera;
float S,C,R,D;
float [] rec;
void setup(){
  size(600,400,P3D);
  camera = new PeasyCam(this, 100);
  camera.setCenterDragHandler(null);
  strokeWeight(3);
  D=30;
}
void draw(){
 background(180);
 rec = new float [] {-D,-D,0,D,-D,0,D,D,0,-D,D,0};
 camera.setRotations(0,0,0);
 R+=PI/60;
 S=sin(R);
 C=cos(R);
 for(int i=0; i<12; i+=3){
 float x,y,z,x0,y0,z0;
 x0=x=rec[i]; y0=y=rec[i+1]; z=z0=rec[i+2];
 if(frameCount%180<60){
 x=x0*C-y0*S;
 y=y0*C+x0*S;
 }
 else if(frameCount%180<120){
 z=z0*C-x0*S;
 x=x0*C+z0*S;
 }
 else{
 y=y0*C-z0*S;
 z=z0*C+y0*S;
 }
 rec[i]=x; rec[i+1]=y; rec[i+2]=z;
 }
 stroke(#ff0000);
 line(0,0,0,100,0,0);
 stroke(#00ff00);
 line(0,0,0,0,100,0);
 stroke(#0000ff);
 line(0,0,0,0,0,100);
 stroke(0);
 line(rec[0],rec[1],rec[2], rec[3],rec[4],rec[5]);
 line(rec[3],rec[4],rec[5], rec[6],rec[7],rec[8]);
 line(rec[6],rec[7],rec[8], rec[9],rec[10],rec[11]);
 line(rec[9],rec[10],rec[11], rec[0],rec[1],rec[2]);
}

/* @pjs preload="ToxicTots.jpg","spine.jpg","top.jpg", "bottom.jpg"; */

PImage tex1; PImage tex2; PImage tex3; PImage tex4;

float rotx = PI/4; float roty = PI/4;

void setup() { size(800, 900, P3D); tex1 = loadImage("ToxicTots.jpg"); tex2 = loadImage("spine.jpg");
tex3 = loadImage("top.jpg");
tex4 = loadImage("bottom.jpg"); textureMode(NORMAL); fill(255); stroke(color(44,48,32)); }

void draw() { background(176,224,230); noStroke(); translate(width/2.0, height/3.0, -100); rotateX(rotx); rotateY(roty); scale(200); TexturedCube(tex1);
TexturedCube(tex2);
TexturedCube(tex3); TexturedCube(tex4); }

void TexturedCube(PImage tex) { beginShape(QUADS);

// +Z "front" face texture(tex1); vertex(-.25, -1, 1, 0, 0); vertex( 1, -1, 1, 1, 0); vertex( 1, 1, 1, 1, 1); vertex(-.25, 1, 1, 0, 1);

// -Z "back" face texture(tex1); vertex( 1, -1, .75, 0, 0); vertex(-.25, -1, .75, 1, 0); vertex(-.25, 1, .75, 1, 1); vertex( 1, 1, .75, 0, 1); endShape();

// +Y "bottom" face
beginShape(QUADS); texture(tex3); vertex(-.25, 1, 1, 0, 0); vertex( 1, 1, 1, 1, 0); vertex( 1, 1, .75, 1, 1); vertex(-.25, 1, .75, 0, 1); endShape();

// -Y "top" face beginShape(QUADS);
texture(tex4); vertex(-.25, -1, 1, 0, 0); vertex( 1, -1, 1, 1, 0); vertex( 1, -1, .75, 1, 1); vertex(-.25, -1, .75, 0, 1); endShape();

// +X "right" face beginShape(QUADS); texture(tex2); vertex( 1, -1, 1, 0, 0); vertex( 1, -1, .75, 1, 0); vertex( 1, 1, .75, 1, 1); vertex( 1, 1, 1, 0, 1);

// -X "left" face vertex(-.25, -1, 1, 0, 0); vertex(-.25, -1, .75, 1, 0); vertex(-.25, 1, .75, 1, 1); vertex(-.25, 1, 1, 0, 1); endShape(); }

void mouseDragged() { float rate = 0.01; rotx += (pmouseY-mouseY) * rate; roty += (mouseX-pmouseX) * rate; }

My initial idea was if the user clicks on a previously drawn rectangle, they will be able to interact with that particular rectangle, however I don't think it is possible because if shapes are overlapping it will select all those rectangles.

Instead I decided that when the user presses "i" they enter "Interact Mode" where they can interact with the top rectangle until they go back to drawing mode.

My problem is that the "Interact Mode" isn't working. I think it's because the user presses "i" and it enters "Interact Mode" however, as soon as they press a key after that to send the top rectangle back or forward, it changes the "key" and it leaves "Interact Mode"

boolean startDraw;
int a, b, c, d;
Rect newRect;
Rect topRect;
ArrayList<Rect> rectList = new ArrayList();
boolean undo = false;

void setup() {
  size(800, 600);
  a=0;
  b=0;
  c=0;
  d=0;
}


void draw() {
  background(255);
  fill(255);
  strokeWeight(2);
   for(Rect newRect : rectList) {    
    newRect.createRect();
    topRect = rectList.get(rectList.size() - 1);
  }

  if (startDraw)
  {
    newRect = new Rect(a, b, c, d);
    newRect.createRect();
  }  



  if (undo == true) {
    rectList.remove(rectList.size() - 1);
    undo = false;
  }
}


void mousePressed() {
  startDraw = true;
  a=mouseX;
  b=mouseY;  
}


void mouseDragged() {
  if (startDraw)
  {
    c=mouseX-a;
    d=mouseY-b;
  }  

}

void mouseReleased() {
  rectList.add(newRect);
  startDraw = false;
  a=0; b=0; c=0; d=0;
}

void keyPressed() {
  if (key == 'z') {
    undo = true;
  }    
  if (key == 'i') {
    interactRect();
  }    
}

void interactRect() {    
  int currentIndex = rectList.size() - 1;
  if(key == CODED) {
    if(keyCode == UP) {
      rectList.remove(topRect);
      rectList.add(topRect);        
    } if(keyCode == DOWN) {
      currentIndex = 0;
      rectList.remove(topRect);
      rectList.add(currentIndex, topRect);
      println(currentIndex);
    } if(keyCode == LEFT) {
      currentIndex--;
      rectList.remove(topRect);
      rectList.add(currentIndex, topRect);
    } if(keyCode == RIGHT) {
      currentIndex++;
      rectList.remove(topRect);
      rectList.add(currentIndex, topRect);
  }
 }
}

class Rect {
  int a, b, c, d;

  Rect(int w, int x, int y, int z) {
    a = w;
    b = x;
    c = y;
    d = z;
  }

  void createRect() {
    rect(a, b, c, d);
  }


}

I've been told to create a class for the drawn objects which would contain a PGraphics property, and also a draw method. While dragging the mouse, I can clear the latest Shape's PGraphic and draw it again.

I just have no idea how!

PS: I will implement other shapes the user can draw but they too need to be objects so I can manipulate them

Here is my code:

ArrayList<PGraphics> layer = new ArrayList();
float startX, startY;

void setup() {
  size(500, 500);
  cursor(CROSS);
  background(255);
  smooth();
}

void draw() {
  background(255);
  for(PGraphics pg : layer) {
    image(pg, 0, 0);
  }
}
void mousePressed() {
  startX = mouseX;
  startY = mouseY;
  PGraphics pg = createGraphics(width, height);
  layer.add(pg);
}

void mouseDragged() {
  // get most recent layer
  PGraphics pg = layer.get(layer.size() - 1);
  shapeLayer.beginDraw();
  shapeLayer.clear();
  shapeLayer.rectMode(CORNERS);
  shapeLayer.rect(startX, startY, mouseX, mouseY);
  shapeLayer.endDraw();
}

I'm using express and node to create it.

This is the current client code for drawing: http://pastebin.com/7DnTF8mn

If someone could point me in the right direction It'd be very appreciated!

`void setup(){
  size(1200, 1200);
  frameRate(30);
}

void draw(){
   background(255);
  //background(random(255), random(255), random(255));
}

void mouseDragged() {
  stroke(random(255), random(255), random(255));
  strokeWeight(random(20));
  line(pmouseX, pmouseY, mouseX, mouseY);
}`

The issue I'm having is with the background in draw(). I do want the background color to continuously load, but I also want the background to change to a new color each time some event is triggered (preferably a mouse release), and continuously load only that color until another trigger occurs. Right now I have the background just set to white.

So to reiterate the program logic:

1)Program starts with background continuously running initial color.

2)Mouse pressed and dragged creating colorful streak.

3)Mouse released triggering background change to new random color.

4)Background continuously runs the new random color.

5)Back to (2).

// scaletranslate A B comparission
float mx,my,ratio,xpt,ypt,xzt,yzt,cx,cy,swt,zoom;
boolean mode=false;
void setup() {
 size(600,600);
  zoom=1.0;
  mx=width/60;
  my=mx*height/width;
  ratio=mx/my;
}
void draw() {

  if(!mode){cxcy(60,60);}
  else if(mode){scaletranslate(60,60);}
}
void mouseClicked(){
  if(mouseButton == RIGHT){
    if(mode){mode=false;}else{mode=true;}

  }
}
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 cxcy(float x, float y) {
  cx=(xpt-xzt); cy=(ypt-yzt);
  background(128);
  stroke(0);
  strokeWeight(zoom);
  for(int i = 0; i < x; i++){line(((i*width/x)+cx)*zoom,cy*zoom,((i*width/x)+cx)*zoom,(height+cy)*zoom);}
  for(int i = 0; i < y; i++){line(cx*zoom,((i*height/y)+cy)*zoom,(width+cx)*zoom,((i*height/y)+cy)*zoom);}
  fill(#ff0000);rect((cx+mx*10)*zoom,(cy+mx*10)*zoom,mx*zoom,mx*zoom);
  fill(#ffff00);rect((cx+mx*49)*zoom,(cy+mx*10)*zoom,mx*zoom,mx*zoom);
  fill(#00ff00);rect((cx+mx*10)*zoom,(cy+mx*49)*zoom,mx*zoom,mx*zoom);
  fill(#0000ff);rect((cx+mx*49)*zoom,(cy+mx*49)*zoom,mx*zoom,mx*zoom);
  fill(#abcdef);ellipse((cx+width/2)*zoom,(cy+height/2)*zoom,width/8*zoom,height/8*zoom);
  textSize(4*mx*zoom);
  fill(0);
  textAlign(CENTER);
  text("CX CY Floats",(cx+width/2)*zoom,(cy+height/2)*zoom);
}

void scaletranslate(float x, float y) {
  scale(zoom);
  translate(xpt-xzt,ypt-yzt);
  background(128);
  stroke(0);
  strokeWeight(1.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);
  fill(#abcdef);ellipse(width/2,height/2,width/8,height/8);
  textSize(4*mx);
  fill(0);
  textAlign(CENTER);
  text("Scale Translate",width/2,height/2);
}

I want to convert this code into class in order to use wherever is possible,

PImage sample;
int x, y; 
void setup() {
  size(1000, 600); 
  noStroke(); 
  sample=loadImage("G2.png");
  x=0;
  y=400;
} 
void draw() { 
  background(255); 
  image(sample, x, y, 50, 30);
} 
void mouseDragged() { 
  x=mouseX; 
  y=mouseY;
}

I rewrote this code this way, but it nor show mistakes neither works, and I don't konw what am I doing wrong...

Draggingpic Dragging = new Draggingpic(); 
void setup() {
  size(600, 600); 
  noStroke(); 
  Dragging.charge();  
}
void draw() { 
  background(255);   
  Dragging.mouseDragged();
}
class Draggingpic
{
  int x;
  int y;
  PImage sample;
  void Draggingpic(int posx,int posy,PImage sample2)
  { 
    x=posx;
    y=posy;
    sample = sample2;
  }  
  void charge()
  { 
    sample=loadImage("g2.png");  
  }
  void mouseDragged() 
  { 
    x=mouseX; 
    y=mouseY;    
  }
}

boolean drawA = false;

boolean drawB = false;

boolean drawC = false;

void setup() {

size(600, 600);

noStroke();

background(255);

}

void mouseMoved(){

background(126);

float x = mouseX;

float y = mouseY;

float ix = width - mouseX; // Inverse X

float iy = height - mouseY; // Inverse Y

fill(255);

triangle(x, height/2, y, y,ix,iy);

fill(0);

ellipse(ix, height/2, iy, iy);

}

void keyPressed() {

if ((key == 'A') || (key == 'a')) {

drawA = true;

} else if ((key == 'B') || (key == 'b')){

drawB = true;

}else if ((key == 'C') || (key == 'c')){

drawC = true;

}

}

void keyReleased() {

drawA = false;

drawB = false;

drawC = false;

}

void mouseDragged(){

background(255);

fill(0);

ellipse(mouseX,mouseY,70,70);

}

void draw() {

background(255);

fill(0);

if (drawA == true) {

ellipse(100,300,25,25);

} else if(drawB == true) {

quad(290,0,290,600,310,600,310,0);

} else if (drawC == true){

triangle(500,200,400,400,600,400);

}

}

New to the forum/community. I have been learning a ton with p5js (and processing)! I have a question about clicking and dragging objects in an array. The click and drag seems to be working, but I'm not getting all my visual feedback. My stroke isn't changing on the click and drag (highlight effect). Am I missing something obvious? Or is this not the best way to get click and drag behavior working? (*This is an adaptation of click and drag from the processing site). Code below:

    var boxes = [];

    function setup() {
      createCanvas(500,500);
      for(var i=0; i<20; i++){
        boxes.push(new Box(random(255),random(10,30)));
      }
    }

    function draw() {
      background(0,200,200);
      for(var i = 0; i<boxes.length; i++){
        boxes[i].show();
      }
    }


    function mousePressed() {
      for(var i = 0; i<boxes.length; i++){
        if (boxes[i].boxover ) {
            boxes[i].locked = true;
            strokeWeight(4);
            stroke(0, 150, 255);
            print("mouse is pressed")
        } else {
            noStroke();
            boxes[i].locked = false;
            print("mouse isn't pressed")
        }
        boxes[i].xoffset = mouseX - boxes[i].xpos;
        boxes[i].yoffset = mouseY - boxes[i].ypos
        print(boxes[i].locked);
      }
    }

    function mouseDragged() {
      for(var i = 0; i<boxes.length; i++){
        if (boxes[i].locked) {
            boxes[i].xpos = mouseX - boxes[i].xoffset;
            boxes[i].ypos = mouseY - boxes[i].yoffset;
        }
      }
    }

    function mouseReleased() {
      for(var i = 0; i<boxes.length; i++){
        boxes[i].locked = false;
      }
    }

//Box Constructor

function Box(tempColor,tempSize) {
    this.c = tempColor
    this.xpos = random(width);
    this.ypos = random(height);
    this.boxsize = tempSize;
    this.boxover = false;
    this.locked = false;
    this.xoffset = 0;
    this.yoffset = 0;
    rectMode(RADIUS);

    this.show = function() {
        if (mouseX > this.xpos - this.boxsize && mouseX < this.xpos + this.boxsize &&
            mouseY > this.ypos - this.boxsize && mouseY < this.ypos + this.boxsize) {
            this.boxover = true;
            fill(255);
        } else {
            this.boxover = false;
            noStroke();
            fill(this.c);
        }
        rect(this.xpos, this.ypos, this.boxsize, this.boxsize,7);
    };
}

Any insights and links to other materials is greatly appreciated. Thanks!

Recently, somebody gave me a code which permits drag-and-drop an image wherever is possible, of course in works, I rewrote as a class, , but it nor has mistakes, but neither works.

Here is the code

Draggingpic Dragging = new Draggingpic(); void setup() { size(600, 600); noStroke(); Dragging.charge(); } void draw() { background(255); Dragging.mouseDragged(); } class Draggingpic { int x; int y; PImage sample; void Draggingpic(int posx,int posy) { x=posx; y=posy; image(sample, x, y, 50, 30); } void charge() { sample=loadImage("g2.png"); } void mouseDragged() { x=mouseX; y=mouseY; } }

Thanks

I am pretty new to programming and I'm using p5 so it would be amazing if you could help me out. Basically I would like to create a drawing app, I've managed to create really simple drawing functions but I have a few questions and I'm not sure how to go about it. I know my questions aren't that specific yet - If you could just refer me to the right references to look at, that would help me a lot.

1. Would it be possible to have an image of a Sketchbook laying on a desk as my background and only let the user draw on the actual book (not the rest of the background)?

2. How can I create different drawing tools (like pen, pencil etc.) that can be activated by clicking on an icon/image.

3. Is it possible to let someone draw something and then add filters to it. (editing the finished drawing)

4. Is there a way of including buttons, that let someone share what they've drawn on the canvas on Twitter, Facebook etc.

Thanks a lot, Elisa

String[] images = {"life1.png", "life2.png", "life3.png"};
PImage Background; 
float[] positions =new float [images.length*2] ;
float bx;
float by;
int bs = 37;
int bz = 37;
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);
  fullScreen();
  Background = loadImage("Background.png");
  bx = width/2.0;
  by = height/2.0;
  for (int i=0; i < images.length; i++) {
    image1 [i]= loadImage(images[i]); 
    image (image1[i], random(width), random(height), 75, 75) ;
  } 
  for (int j=0; j < images.length*2; j+=2) {
    positions[j]= random(width);
    positions[j+1]= random(height);
  }
}

void draw() 
{ 
  background(Background);
  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], 75, 75) ;
  }
}
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;
}

It is working well, you can drag and drop the pictures around, but the problem is that If you are holding one picture and drag it over another, it drops that piece and picks up the one that you were moving over. Why does this happen, and how can I fix it?

PImage sample;

void setup(){
size(1000, 600); noStroke(); sample=loadImage("test.png"); }

void draw(){ background(255); image(sample,0,400,50,30); }

void mouseDragged() { image(sample,mouseX,mouseY,50,30); }

void mouseReleased() { image(sample,mouseX,mouseY,50,30); }

I want to click a specific item on screen and remove it from an ArrayList. So far I can remove only the 0th item from the list. This is obvious since i've something like this:

 if (mouseButton == RIGHT) {
        if(bubbles.size() > 1) {
          if(mouseX> ballX-radius*2 && mouseX < ballX+radius
          && mouseY> ballY-radius   && mouseY < ballY+radius){
            bubbles.remove(0);   ////HERE BE PROBLEMS
           }

I cannot understand how to select whatever object from the ArrayList

I've got other problems in the code, but if you guys help me out with the remove problem i should be able to get the other parts right.

here is the complete code.

[see below]

var x;
var y;
var speedX=0;
var speedY=0;
var moveable= false;
var radius=30;



function setup() {
  createCanvas(windowWidth, windowHeight);
  strokeWeight(2);
  x= width/2;
  y= height/2;
}

function draw(){
  background(127);
  x+=speedX;
  y+=speedY;

  ellipse(x,y,radius,radius);
}


function mouseDragged(){
  var d= dist(mouseX,mouseY,x,y);
  if (d<radius){
    moveable= true;
    x= mouseX;
    y= mouseY;
  }
}

function mouseReleased(){
  if (moveable= true){
    speedX=mouseX-pmouseX;
    speedY=mouseY-pmouseY;
    print(speedX);
  }
}

trying to create my own class for spherical movement of camera (based on mouse movement), i am experiencing a problem setting the up vector for the camera: when scrolling the camera on the up and down the matrix (x and y) seem to flip.

don't seem to have this problem with the horizontal scroll.

help anyone?

thanks

float camX, camY, camZ;
float camRad = width*20;
float camTheta, camPhi;
float camDragX, camDragY;
float newCamX = 50;
float newCamY = 600;
boolean moveCam = false;
PVector up;

void cam() {                                                                                            //camera
  camPhi   = map(newCamX, 0, width, PI, -PI);                              //phi is the horizontal angle 0-2PI    
  camTheta = map(newCamY, 0, height, HALF_PI, -HALF_PI);        //theta is the vertical angle 0-PI
  up    = new PVector (sin(camPhi), cos(camPhi));


  camX = camRad*sin(camTheta)*sin(camPhi);
  camY = camRad*sin(camTheta)*cos(camPhi);  
  camZ = camRad*cos(camTheta);

  camera(camX, camY, camZ, 0, 0, 0, up.x, up.y, up.z);
}

void mousePressed() {
  if (mouseButton == RIGHT) {
    camDragX = mouseX - newCamX;
    camDragY = mouseY - newCamY;
    moveCam = true;
  }
}

void mouseDragged() {
  if (mouseButton == RIGHT) {
    if (moveCam) {
      newCamX = mouseX - camDragX;
      newCamY = mouseY - camDragY;
    }
  }
}

void mouseReleased() {
  moveCam = false;
}

void mouseWheel(MouseEvent event) {
  float zoom = event.getCount();
  zoom = zoom*50;
  camRad += zoom;
}

void setup () {
  size (500, 500, P3D);
  colorMode(HSB, 360, 1, 1, 1);  
}


void draw() {
  background (0, 0, 1);  
  drawAxis();
  cam();
  fill(1,0,0);
  ellipse (width/2, height/2, 250, 250);
}

void drawAxis() {
  stroke (0, 1, 1);
  line (0, 0, 0, 1000, 0, 0);
  stroke (90, 1, 1);
  line (0, 0, 0, 0, 1000, 0);
  stroke (210, 1, 1);
  line (0, 0, 0, 0, 0, 1000);
  noStroke();
}