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

     var particles = [];
        var fundos = [];
        var glifos = [];
        var img;
        var logotri;
        var teste;
        var m = 0;
        var loop;
        var alphafade = 255;
        var idlogo= 255;
        var idglifo = 0;


        function setup() {
          cvn = createCanvas(windowWidth, windowHeight);
          logotri = loadImage("logofinal.png");
          teste = loadImage("primeira-tela-1.png");
          loop = 0;

          for (var i = 0; i < 8; i++){
            fundos[i] = loadImage("primeira-tela-" + (i+1) + ".png");
          }

          for (var i = 0; i < 7; i++){
            glifos[i] = loadImage("Glifo" + (i+1) + ".png");
          }

          for (var i = 0; i < 256; i++) {
            p = new Estrelas();
            particles.push(p); // Criação do vetor das estrelas do fundo
          }
        }

        function draw() {
          background(fundos[0]);

          if (m == 0) { //Página inicial estática
            estrelas();
            image(logotri, windowWidth / 3, windowHeight / 3);
          }

          else if (m == 1){ //Fadeout do logo
            tint(255, alphafade);
            image(logotri, windowWidth / 3, windowHeight / 3);
            estrelas();
            fadeout(2, 2);
            noTint();
            }

          else if (m == 2){ //Fadein do glifo 1 + mudança de fundo
            tint(255, alphafade);
            image(fundos[1], 0,0);
            image(glifos[0], windowWidth / 2, windowHeight / 2, 100, 100);
            fadein(3, 3);
            estrelas();
            noTint();

          }

          else if (m == 3){
            image(fundos[1], 0,0);
            tint(255, alphafade);
            image(glifos[0], windowWidth / 2, windowHeight / 2, 100, 100);
            fadeout(4, 2);
            estrelas();
            noTint();


          }
            else if (m == 4){
            image(fundos[1], 0,0);
            texto('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere sapien vitae vulputate aliquam.');
            estrelas();
            fadein(5, 1);

          }
          else if (m == 5){
            image(fundos[1], 0,0);
            texto('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere sapien vitae vulputate aliquam.');
            estrelas();
            fadeout(6, 2);
          }

          else if (m == 6){
            image(fundos[1], 0,0);
            tint(255, alphafade);
            image(fundos[2], 0,0);
            image(glifos[1], windowWidth / 2, windowHeight / 2, 100, 100);
            estrelas();
            fadein(7, 1);
            noTint();
          }

          else if (m == 7){
            image(fundos[2], 0,0);
            tint(255, alphafade);
            image(glifos[1], windowWidth / 2, windowHeight / 2, 100, 100);
            estrelas();
            fadeout(8, 1);
            noTint();
          }


          else if (m == 8){
            image(fundos[2], 0,0);
            estrelas();
            }
          }

        //Função que controla o movimento das estrelas do fundo
        function estrelas() {
          for (var i = 0; i < particles.length - 1; i++) {
            if (particles[i].getalfa() < 5) {
              particles[i].reset(); //Quando o alfa das particulas está quase apagando, ele reseta a particula
              break;
            }
          }

          for (i = 0; i <= particles.length - 1; i++) {
            particles[i].update();
            particles[i].show(); //Mostra as particulas se movendo
          }
        }

        //Função que controla o fadeout das imagens e passa pro proximo nivel de animação
        function fadeout(proximonivel, speed){
          alphafade = alphafade - speed;
          if (alphafade < 0)
            {
                alphafade = 0;
                m = proximonivel;
              }
        }

        //Função que controla o fadein das imagens e passa pro proximo nivel de animação
        function fadein(proximonivel, speed){
          alphafade = alphafade + speed;
          if (alphafade > 255)
            {
                alphafade = 255;
                m = proximonivel;
              }
        }

        //Função que controla no início se houve movimento na roda do mouse
        function mouseWheel(event) {
          if (event.delta != 0 && loop == 0) {
            m = 1;
            loop = 1;
          }
        }

        //Função que controla no inicio se houve clique do mouse
        function mouseClicked(){
          if ( loop == 0){
            m = 1;
            loop = 1;
          }
        }

        //Função que mostra texto e controla as propriedades
        function texto(string){
          tint(255, alphafade);
          fill(255, alphafade);
          textSize(20);
          textAlign(CENTER, CENTER);
          text(string, windowWidth / 2, windowHeight / 2);
          noTint();
        }

        class Estrelas {

          constructor() {
            this.x = random(0, 1200);
            this.y = random(0, 800);
            this.vx = random(-1, 1);
            this.vy = random(-2, -1);
            this.alfa = random(0, 100);
          }

          getalfa() {
            return this.alfa;
          }

          reset() {
            this.x = random(0, 1200);
            this.y = random(0, 800);
            this.vx = random(-1, 1);
            this.vy = random(-2, -1);
            this.alfa = 100;


          }

          update() {
            this.x += this.vx;
            this.y += this.vy;
            this.alfa--;

          }

          show() {
            fill(255, 255, 255, this.alfa);
            noStroke();
            ellipse(this.x, this.y, 5, 5);
          }

        }

I have tried a lot of things but i can't make it work.

Evolution.js:

var img;
var X;
var Y;
var noclipspeed = 20
var Z
var shp
var shpi
var speed
var freecam = false
var XR = 0
var YR = 0
var debug = true
function preload() {
town = loadImage('./assets/town.png');
BG = loadImage('./assets/BG.png');
X = random(-250,250)
Y = random(-250,250)
Z = 1
shop = loadImage('./assets/shop.png')
hax = loadImage('./assets/hax.png')
cursor(CROSS)
}


function setup() {
 createCanvas(1905,1065,WEBGL);
}


function draw() {
  rotateY(XR)
  rotateX(YR)
  cursor(CROSS)
  keyPressed()
  translate(0,0,10000)
  texture(hax)
  plane(10000,10000)
  translate(0,0,-10000)
  translate(0,0,-10000)
  texture(BG)
  plane(10000000,1000000)
  texture(town)
  translate(0,0,10000)
  translate(X-1000,Y-1000,Z)
  plane(950,567)
  translate(800,750)
  texture(shop)
  plane(100,100)
  if(freecam === false) {
  if (Z>577) {
  Z = 577
} else if (Z < -2600) {
  Z = -2600
} else if (Z === 0 ) {
 Z = 1
}
}
if (shpi === 1) {
Z = 577
X = -814.219833927416
Y = -751.7183831208923
}
if (noclipspeed < 10) {
noclipspeed = 10
}
}

function keyPressed() {
 if (keyIsDown(70)) {
   fullscreen(1)
} else if (keyIsDown(78)) {
   fullscreen(0)
} else if (keyIsDown(79)) {
    freecam = true
  } else if (keyIsDown(76)) {
    freecam = false
    XR = 0
    YR = 0
  } else if (keyIsDown(113)) {
saveCanvas("EvolutionTST","png")
}
 if (freecam === false) {
 XR = 0
 YR = 0
 if (keyIsDown(65)) {
    X+=10;
  } else if (keyIsDown(68)) {
    X-=10;
  } else if (keyIsDown(87)) {
    Y+=10;
  } else if (keyIsDown(83)) {
    Y-=10;
  } else if (keyIsDown(70)) {
   fullscreen(1)
  } else if (keyIsDown(78)) {
   fullscreen(0)
  }
} else {
 if (keyIsDown(65)) {
    X += noclipspeed
} else if (keyIsDown(68)) {
    X -= noclipspeed
} else if (keyIsDown(87)) {
    Z += noclipspeed
} else if (keyIsDown(83)) {
    Z -= noclipspeed
} else if (keyIsDown(32)) {
    Y += noclipspeed
} else if (keyIsDown(16)) {
    Y -= noclipspeed
} else if (keyIsDown(39)) {
    XR += 0.05
} else if (keyIsDown(37)) {
    XR -= 0.05
} else if (keyIsDown(38)) {
    YR -= 0.05
} else if (keyIsDown(40)) {
    YR += 0.05
} else if (keyIsDown(107)) {
    noclipspeed += 10
} else if (keyIsDown(109)) {
    noclipspeed -= 10
} 
}
}

function mouseWheel(event) {
   Z -= event.delta
}

My sketch basically draws objects from left to right. I implemented a zoom function with the mouse wheel with translation but it doesn't zoom relative to my mouse.

Any ideas how to fix this?

float x = 100;
int y = 200;
int gap = 50;
float scale = 1.0;

ArrayList<Body> bodies = new ArrayList<Body>();

class Body {

  String name;
  int size;

  Body(String name, int size) {
    this.name = name;
    this.size = size;
  }

  float getSize() {
    return this.size * scale;
  }

  void draw(float x) {
    fill(255);
    noStroke();
    ellipse(x, y - this.getSize() / 2, this.getSize(), this.getSize());
    noFill();
    stroke(255,0,255);
    rect(x, y - this.getSize() / 2, this.getSize(), this.getSize());
  }
}

float getOffset() {
  int offset = 0;
  for (Body body : bodies) {
    offset += body.getSize();
    offset += gap;
  } 
  return offset;
}

void setup() {
  size(1600, 900);
  ellipseMode(CORNER);

  bodies.add(new Body("test", 100));
  bodies.add(new Body("2", 400));
  bodies.add(new Body("big", 1000));
}

void draw() {
  fill(0);
  noStroke();
  rect(0, 0, 1600, 900);

  pushMatrix();
  translate(x, y);

  float drawX = x;
  for (Body body : bodies) {
    body.draw(drawX);
    drawX += (body.getSize() + gap);
    fill(255,255,0);
    noStroke();
    rect(drawX - gap, y - gap / 2, gap, gap);
  }

  popMatrix();
}

void keyPressed() {
  float prevOffset = getOffset();
  if (keyCode == UP) {
    scale *= 1.1;
    float newOffset = getOffset();
    //x -= (newOffset - prevOffset) / 2;
    x -= mouseX * 0.1;
  } else if (keyCode == DOWN) {
    scale *= 0.9;
    float newOffset = getOffset();
    //x += (prevOffset - newOffset) / 2;
    x += mouseX * 0.1;
  } else if (keyCode == LEFT) {
    x += 10;
  } else if (keyCode == RIGHT) {
    x -= 10;
  }
  if (scale < 0) {
    scale = 0;
  }
}

void mouseWheel(MouseEvent event) {
  float e = event.getCount();
  if (e < 0) {
    scale *= 1.1;
  } else if (e > 0) {
    scale *= 0.9;
  }
  x -= event.getCount() * mouseX / 1000;
}

The sphere is textured with an image file. How would I go about finding the colour on the surface of the sphere at the point a line from each cube to 0,0,0 intersects the surface ?

looking for general ideas at this stage... was thinking collision detection,raytracing... but also wondered (hoping!) if there may be a simpler method ?

cheers, mala

I'm calculating the mandelbrot set and would like to download i high resolution image. This is done by calculating a large image (the global img variable), assigning it to the downloadImage variable for storage and issuing a download. All this is working as intended, however the download doesn't always work. Especially when I try to render a large image with 5000 pixels in width the download sometimes does not start. Chrome recognizes that a download has been issued and shows the green wave like animation on the menu bar but the download window never appears. Since the download sometimes works fine and sometimes not, I have not been able to locate the problem so far.

Any imput is appreciated as I am stuck.

EDIT: The download happens in the function downloadImage()

var ratio;
var mapSize;
var centerX;
var centerY;
var renderSpeed = 20;
var currentLine = 0;
var img;
var downloadImage;
var calcTime;
var downloadButton;

function setup() {

  mapSize = 2;
  centerX = -1;
  centerY = 0;

  setupCanvas();

  downloadButton = createButton('Download');
  downloadButton.position(5, 85);
  downloadButton.mousePressed(downloadImage);

  noLoop();
}

function setupCanvas()
{
  resizeCanvas(window.innerWidth, window.innerHeight);
  ratio = window.innerWidth / window.innerHeight;
  pixelDensity(1); // Enables fine rendering for HDPI screens
  loadPixels(); // Enables pixels[]
  updateMandelbrotSet(window.innerWidth, window.innerHeight, true);
  updateText();
}

function windowResized() {
  setupCanvas();
}

function downloadImage()
{
  updateMandelbrotSet(window.innerWidth, window.innerHeight, true);
  updateMandelbrotSet(5000, 5000 / ratio, false);
  downloadImage = img;
  //downloadImage.save('Mandelbrot','png');  
  updateText();

  var mimeType = 'image/png';
  var downloadMime = 'image/octet-stream';
  var imageData = downloadImage.canvas.toDataURL(mimeType);
  var extension = 'png';
  var filename = 'Mandelbrot';
  imageData = imageData.replace(mimeType, downloadMime);

  //Make the browser download the file
  p5.prototype.downloadFile(imageData, filename, extension);

}

function updateText() {fill(255, 255, 255, 255);
  text('Calculation time: ' + calcTime + ' ms', 5, 15);
  text('CenterX: ' + centerX, 5, 35);
  text('CenterY: ' + centerY, 5, 55);
  text('Size: ' + mapSize, 5, 75);
}

function updateMandelbrotSet(xWidth, yWidth, update) {
  var start = millis();
  img = createImage(xWidth, yWidth);
  img.loadPixels();
  for (var x = 0; x < xWidth; x++) {
    for (var y = 0; y < yWidth; y++) {

      var reOrg = map(x, 0, xWidth, centerX - mapSize * ratio, centerX + mapSize * ratio)
      var imOrg = map(y, 0, yWidth, centerY - mapSize, centerY + mapSize)
      var re = reOrg;
      var im = imOrg

      var nMax = 99; // Iteration count (precision)
      var n = 0;
      var z = 0;

      while (n < nMax) {
        var reNew = re * re - im * im;
        var imNew = 2 * re * im;
        re = reNew + reOrg;
        im = imNew + imOrg;

        if (re * re + im * im > 4)
        {
          break;
        }

        n++;
      }

      var pix = (x + y * xWidth) * 4;
      if (n == nMax) {
        img.pixels[pix + 0] = 0;
        img.pixels[pix + 1] = 0;
        img.pixels[pix + 2] = 0;
        img.pixels[pix + 3] = 255;
      } else {
        img.pixels[pix + 0] = ((n - 33)/33) * 255;
        img.pixels[pix + 1] = ((n - 66)/33) * 255;
        img.pixels[pix + 2] = ((n - 0)/33) * 255;
        img.pixels[pix + 3] = 255;
      }
    }
  }
  img.updatePixels();

  if (update)
  {
    image(img, 0, 0);
  }

  var end = millis();
  calcTime = end - start;
  console.log("This took: " + calcTime + "ms.")
}

function mouseWheel(event) {
  if (event.delta < 0) {
    if (mapSize > 5e-16) {
      x = map(mouseX, 0, window.innerWidth, centerX - mapSize * ratio, centerX + mapSize * ratio)
      centerX = centerX + (x - centerX) * 0.3;
      y = map(mouseY, 0, window.innerHeight, centerY - mapSize, centerY + mapSize)
      centerY = centerY + (y - centerY) * 0.3;
      mapSize = mapSize * 0.7; 
    }
  } else {
    x = map(mouseX, 0, window.innerWidth, centerX - mapSize * ratio, centerX + mapSize * ratio)
    centerX = centerX - (x - centerX) * 0.3;
    y = map(mouseY, 0, window.innerHeight, centerY - mapSize, centerY + mapSize)
    centerY = centerY - (y - centerY) * 0.3;
    mapSize = mapSize / 0.7; 
  }

  updateMandelbrotSet(window.innerWidth, window.innerHeight, true);
  updateText();
}

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;

}

Because I can't fit all the text of the prompt on screen with a reasonable font, I'm instead allowing the ability for the tester to scroll down and up the text. Here's a standalone example of what it would be like :

String originalText = "Happy birthday to you\n" + 
                      "Happy birthday to you\n" +
                      "Happy birthday Dear Random User\n" +
                      "Happy Birthday to you.\n\n" +

                      "From good friends are true,\n" +
                      "From old friends and new,\n" +
                      "May good luck go with you,\n" +
                      "And happiness too.";
String displayText;
int scrollAmount;
PFont font;
float scrollMultiplier;

void setup() {
  size(800, 800);
  displayText = originalText;
  font = createFont("Arial", 35);  
  scrollMultiplier = 30;
}

void draw() {
  background(0);
  fill(255);
  textFont(font);
  text(displayText, 40, 40, 700, 600);

}

void mouseWheel(MouseEvent event) {
 float value = event.getCount();
 scrollAmount += (int) value * scrollMultiplier;
 scrollAmount = constrain(scrollAmount, 0, originalText.length());
 displayText = originalText.substring(scrollAmount, originalText.length());
}

This is most of what I need. However, I want it so the user scrolls line by line instead of what it is right now where the lines kinda shift around since I'm splicing at random places in the substring.

What I need is to get the amount of characters of a certain line on screen and have this be the amount mulitplied by e in the mouseWheel method (essentially set the amount of characters to scrollMultiplier). This way it adds or subtracts an entire line of text instead of an arbitrary 30. The problem is ... I have no idea how to do this. I'm using the text option that takes four parameters as a box, with the specific line being

I'm not even sure if what I want is possible :| I can't just take the normal amount of characters that fit in a line since some are bigger than others and sometimes a line breaks midway to start a new paragraph. In short, I just need to get the amount of characters that are present on a certain line and have this value for scrolling purposes.

Thanks!

This is how I calculated the translation: trans += getStriplength() * deltascale getStriplength returns the length of the whole strip of objects while deltascale is the amount that is reduced each time when the mouse scrolls. Its default value is 0.2, which means the objects will be either 1.02 times bigger or 0.98 times smaller than the original. Therefore I am getting the difference of the lengths of the strip before and after, and adding it to the offset. However as I mentioned before it doesn't work the more you zoom in/out. Any help will be appreciated!

Code:

PImage backgroundImage;
PFont font;
int x = 0;
int xoffset = 0;
int deltax = 5;
float scale = 512/30;
float deltascale = 0.02;
ArrayList<celestialObject> ObjectList;
String[] objectfile;
String[] configfile;
int savetimer = 0;
static int screenwidth = 1920;
static int screenheight = 1080;
float trans = 0;

class celestialObject {
  String name;
  float diameter;
  String unit;
  String sprite;
  PImage img;
  int wid;
  int hei;
  int xpos;

  celestialObject(String Oname, float Odiameter, String Ounit, String Oimg) {
    name = Oname;
    diameter = Odiameter;
    unit = Ounit;
    sprite = Oimg;
    img = loadImage(Oimg);
    wid = img.width;
    hei = img.height;
  }
}

void setup() {
  size(1920, 1080);
  frameRate(200);
  objectfile = loadStrings("objects.txt");
  configfile = loadStrings("config.ini");
  backgroundImage = loadImage("background.png");
  font = createFont("Franklin Gothic Book Regular.ttf", 32);
  textFont(font, 32);
  textAlign(CENTER, CENTER);
  imageMode(CENTER);
  ObjectList = new ArrayList();
  readObjects();
  readConfig();
  loadOffset();
}

void addObject(String Aname, float Adiameter, String Aunit, String Aimg) {
  println("Loading "+Aname);
  if (Aimg.equals("null")) {
    ObjectList.add(new celestialObject(Aname, Adiameter, Aunit, "images/"+Aname+".png"));
  } else {
    ObjectList.add(new celestialObject(Aname, Adiameter, Aunit, "images/"+Aimg));
  }
}

void readObjects() {
  for (int i = 0; i < objectfile.length; i++) {
    String[] currentObject = split(objectfile[i], ",");
    addObject(currentObject[0], float(currentObject[1]), currentObject[2], currentObject[3]);
  }
}

void readConfig() {
  for (int i = 0; i < configfile.length; i++) {
    char slash = configfile[i].charAt(0);
    if (slash != '/') {
      //getting config values based on line number
      if (i == 1) {
        xoffset = int(configfile[i]);
      } else if (i == 3) {
        scale = float(configfile[i]);
      }
    }
  }
}

void loadOffset() {
  //for (int i = 0; i <= xoffset; i++) {
  //  int x = 0 + xoffset;
  //  for ( celestialObject drawObject : ObjectList ) {         
  //    float dia;
  //    if (drawObject.unit.equals("km")) {
  //      dia = drawObject.diameter * 1000;
  //    } else {
  //      dia = drawObject.diameter;
  //    }
  //    int drawWidth = int(scale * dia);
  //    //checks if image is too small to be drawn
  //    if (x+drawObject.img.width >= 0 && x <= 1500) {
  //      int drawWidth = int(scale * dia);
  //      int drawHeight = int(drawWidth * drawObject.hei / drawObject.wid);
  //      if (drawWidth > 0 && drawHeight > 0) {
  //        //drawObject.img.resize(drawWidth, drawHeight);
  //        image(drawObject.img, x+(drawWidth/2), 400,drawWidth, drawHeight);
  //        //calculates font size relative to object's current size
  //        int textSize;
  //        //checks if the name or diameter is longer, then uses the longer one for calculation
  //        if (drawObject.name.length() < str(drawObject.diameter).length()) {
  //          textSize = int(drawObject.img.width/str(drawObject.diameter).length());
  //        } else {
  //          textSize = int(drawObject.img.width/drawObject.name.length());
  //        }
  //        if (textSize > 0) {
  //          textSize(textSize);
  //          float texty = 418+(drawObject.img.height/2);
  //          if (texty < (418+(drawObject.img.height/2))) {
  //            texty = 418;
  //          }
  //          text(drawObject.name, x+(drawObject.img.width/2), texty);
  //          text(drawObject.diameter+drawObject.unit, x+(drawObject.img.width/2), texty+textSize);
  //        }
  //      }
  //    }
  //    drawObject.xpos = x;
  //    x += (drawObject.img.width*0.08 + drawObject.img.width);
  //  }
  //}
}

void draw() {
  image(backgroundImage, screenwidth/2, screenheight/2);
  int x = int(0 + xoffset + trans);
  for ( celestialObject drawObject : ObjectList ) {
    float dia;
    if (drawObject.unit.equals("km")) {
      dia = drawObject.diameter * 1000;
    } else {
      dia = drawObject.diameter;
    }
    int drawWidth = int(scale * dia);
    if (x+(scale*dia) >= 0 && x <= screenwidth) {
      //checks if image is too small to be drawn 
      int drawHeight = int(drawWidth * drawObject.hei / drawObject.wid);
      if (drawWidth > 0 && drawHeight > 0) {
        //drawObject.img.resize(drawWidth, drawHeight);
        image(drawObject.img, x+(drawWidth/2), screenheight/2, drawWidth, drawHeight);
        //calculates font size relative to object's current size
        int textSize;
        //checks if the name or diameter is longer, then uses the longer one for calculation
        if (drawObject.name.length() < str(drawObject.diameter).length()) {
          textSize = int(drawWidth/str(drawObject.diameter).length());
        } else {
          textSize = int(drawWidth/drawObject.name.length());
        }
        if (textSize > 0) {
          textSize(textSize);
          float texty = screenheight/2+18+(drawHeight/2);
          if (texty < (screenheight/2+18+(drawHeight/2))) {
            texty = screenheight/2+18;
          }
          text(drawObject.name, x+(drawWidth/2), texty);
          text(drawObject.diameter+drawObject.unit, x+(drawWidth/2), texty+textSize);
        }
      }
    }
    drawObject.xpos = x;
    x += (drawWidth*0.08 + drawWidth);
  }
  //display deltax
  textSize(32);
  text(str(deltax), screenwidth-50, 10);
  text(str(deltascale), screenwidth-50, 50);
  //display Saved
  if (savetimer > 0) {
    text("Saved", screenwidth-50, 90);
    //text(str(savetimer),1450,130);
  }
  if (savetimer > 0) {
    savetimer -= 1;
  }
  //println(str(scale));
}

void mouseWheel(MouseEvent event) {
  float e = event.getCount();
  if (e < 0) {
    scale *= (1 + deltascale);
    mouseX = xoffset;
    trans -= (getStriplength() * deltascale);
  } else if (e > 0) {
    scale *= (1 - deltascale) ;
    mouseX = xoffset;
    trans += (getStriplength() * deltascale);
  }
}

void keyPressed() {
  if (key == CODED) {
    if (keyCode == LEFT) {
      xoffset += deltax;
    } else if (keyCode == RIGHT) {
      xoffset -= deltax;
    } else if (keyCode == UP) {
      deltax += 5;
    } else if (keyCode == DOWN) {
      deltax -= 5;
    }
  }
  if (key == 's') {
    for (int i = 0; i < configfile.length; i++) {
      if (i == 1) {
        configfile[i] = str(xoffset);
      } else if (i == 3) {
        configfile[i] = str(scale);
      }
    }
    saveStrings("config.ini", configfile);
    savetimer = 500;
  } else if (key == 'q') {
    deltascale += 0.02;
  } else if (key == 'a') {
    deltascale -= 0.02;
  }
  if (deltax < 0) {
    deltax = 0;
  } else if (deltascale < 0) {
    deltascale = 0;
  }
}

float getStriplength() {
  float x = 0;
  int i = 0;
  for ( celestialObject getObject : ObjectList ) {
    float dia;
    if (getObject.unit.equals("km")) {
      dia = getObject.diameter * 1000;
    } else {
      dia = getObject.diameter;
    }
    int drawWidth = int(scale * dia);
    x += (drawWidth*0.08 + drawWidth);
    i++;
    //println(ObjectList.size());
    if (i == ObjectList.size()) {
       x -= drawWidth*0.08;
    }
    //println(x);
  }
  //println(x);
  return x;  
}

Also, first time here. I was wondering if topics here is mostly processing/java or p5js.

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

Thanks in advance, Alex

// 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);
}

1. Desktop: How do you find out if scrolled down or up?

Here's the site: http://matthias.pitscher.xyz/scrollgrad.html

Here's the code:

var rows;
function setup(){
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB,360,100,100);
  background(0);
  rows = 10;
  noStroke();
}

var index = 0;
function draw(){
  for (var i = 0; i < windowHeight; i+=rows) {
    var gradient = (i / windowHeight * 20 + index) % 360;
    fill(gradient, 70, 100);
    rect(0, i-rows, windowWidth, i);
  }
}

function mouseWheel() {
  index++;
  return false;
}

function touchMoved() {
    index++;
  return false;
}
function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
}

i can't use the example in the reference since it uses an immage. Really i tried to use it but without good results. any idea? maybe i miss a library that could help me?

I tried doing function mouseWheel(MouseEvent event){}, but it's not working.

Does somebody have a solution for this?

PImage img;
PImage newimg;

int radius = 100;
float alpha = 0;
float r = 0.5;
float seed = -0.6;
float segments = 6;
float part = segments/2;
float x, y;
float angle_steps;
float angle_deg;

int col = 2;
int row = 2;

void setup() {
  size(800, 600, P2D);
  smooth(6);
  textureMode(NORMAL);
  //img = loadImage("ilrae.jpg");
}

void draw() {
  background(255);
  hexGrid();
}

void hexGrid(){
  for(int y=0; y<row+1; y++){
    for(int x=0; x<col+1; y++){
      int hexHeight = radius*2;
      int hexWidth = (int) sqrt(3)/2 * hexHeight;      

      int xPos = x * hexWidth;
      int yPos = y * hexHeight;
      hexShape(radius, xPos, yPos);
    }
  }
}

void hexShape(int _radius, int _xPos, int _yPos) {
  noFill();
  stroke(0); 
  //noStroke();   

  pushMatrix();
  beginShape(TRIANGLE_FAN);
  translate(_xPos, _yPos);
  rotate(-PI/2);
  //texture(img);
  vertex(0, 0, 0.5, 0.5); // center
  for (int i=0; i<segments+1; i++) {
    angle_steps = 360/segments;
    angle_deg = angle_steps * i;

    x = cos(radians(angle_deg)) * _radius;
    y = sin(radians(angle_deg)) * _radius;

    vertex(x,y);
    //if (i%2 == 0) {
    //  vertex(x, y, .5 + r * cos(alpha + PI / part), .5 + r * sin(alpha + PI / part));
    //} else {
    //  vertex(x, y, .5 + r * cos(alpha), .5 + r * sin(alpha));
    //}
  }
  endShape();
  popMatrix();

  alpha = 1.9*sin(seed);
  seed += 0.001;
}

//void mouseWheel(MouseEvent event) {
//  int e = event.getCount(); //returns UP:-1 DOWN:1
//  segments += (e*2)*-1;
//}

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();
}

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();
}

My question is in two parts.

1. can the mouse wheel be used to control two things - the zoom and the volume? I want the music to increase as the user zooms in.

2. how can this be achieved using minim?

Thank you in advance

The original code ` /**

Use mouse to control it. Use left button to organize it's movement, right to organize it's position. Scroll to change it's calmness

int n = 2000; // number of cells
float bd = 30; // base line length
float sp = 0.001; // rotation speed step
float sl = .9; // slow down rate

float bcg_color = 0;

Cell[] all = new Cell[n];

public class Cell {

  float x, y;
  float x_start, y_start;
  float s = 0; // spin velocity
  float c = 0; // current angle

  Cell(float x, float y) {
    this.x=x;
    this.y=y;
    this.x_start = x;
    this.y_start = y;
  }

  void sense() {
    if (pmouseX != 0 || pmouseY != 0)
      s += log(sp * .5 * abs(det(x, y, pmouseX, pmouseY, mouseX, mouseY)) / (dist(x, y, mouseX, mouseY) + 1) + 1);
    s *= sl + 0.01;
    c += s;
    float d = bd * s + .001;
    stroke((50 + abs(d)*5));
    line(x, y, x + d * cos(c), y + d * sin(c));
    x = (x + (.5 * d * cos(c)));
    y = (y + (.5 * d * sin(c)));
  }

  void reset() {
    x = x_start;
    y = y_start;
  }
}

void setup() {
  size(1000, 600, P2D);
  // for full-size web:
  //  size(window.innerWidth, window.innerHeight);
  int w = min(width - 300, 600);
  int h = min(height - 300, 400);
  for (int i = 0; i < n; i++) {
    // float xx = random(w) + (width - w)/2;
    // float yy = random(h) + (height - h)/2);
    all[i] = new Cell(random(w) + (width - w)/2, random(h) + (height - h)/2);
  }
  bcg_color = map(sl, .85, .99, 40, 0);
}

void draw() {
  //  fill(max(min(1000 - millis()/10,255), bcg_color));
  background(bcg_color);
  //  text("Use mouse to control it. \nUse left button to organize it's movement, \nright to organize it's position\nScroll to change it's calmness", 100, 100);
  for (int i = 0; i < n; i++)
    all[i].sense();
}

void mousePressed() {
  float c = random(0, 2*PI);
  if (mouseButton == LEFT) {
    for (int i=0; i<n; i++)
      all[i].c = c;
  } else {
    for (int i = 0; i < n; i++)
      all[i].reset();
  }
}

void mouseWheel(MouseEvent event) {
  float e = event.getCount();
  sl = max(min(sl + e/200, .99), .85);
  bcg_color = map(sl, .85, .99, 40, 0);
}

// for web scrolling
/*void mouseScrolled() {
 if(mouseScroll > 0) {
 sl = max(min(sl + 1/200, .99), .85);
 bcg_color = map(sl, .85, .99, 40, 0);
 } else {
 sl = max(min(sl - 1/200, .99), .85);
 bcg_color = map(sl, .85, .99, 40, 0);
 }
 }
 */
float det(float x1, float y1, float x2, float y2, float x3, float y3) {
  return (float) ((x2-x1)*(y3-y1) - (x3-x1)*(y2-y1));
}

`

My code ` class Cell {

  float x, y;
  float St_CellX, St_CellY;
  float s = 0;//spin velocity
  float c =0;//current  angle
  float sp = 0.001; // rotation speed step
  float sl = .9; // slow down rate
  float bd = 30; // base line length

  Cell(float x, float y) {

    this.x=x;
    this.y=y;
    this.St_CellX = x;
    this.St_CellY = y;
  }


  float det(float x1, float y1, float x2, float y2, float x3, float y3) {
    return (float) ((x2-x1)*(y3-y1) - (x3-x1)*(y2-y1));
  }


  void sense() {

    if (pmouseX != 0 || pmouseY != 0)
      s += log(sp * .5 * abs(det(x, y, pmouseX, pmouseY, mouseX, mouseY)) / (dist(x, y, mouseX, mouseY) + 1) + 1);
    s *= sl + 0.01;
    c += s;
    float d = bd * s + .001;
    stroke((50 + abs(d)*5));
    line(x, y, x + d * cos(c), y + d * sin(c));
    x = (x + (.5 * d * cos(c)));
    y = (y + (.5 * d * sin(c)));
  }

  void reset() {
    x = x_start;
    y = y_start;
  }
}

`

    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);
}

Screen Shot 2015-12-23 at 11.30.32 (The green line jitters around on purpose)

I managed to get the points of the drawn line into an array, as well as make a shape out of these points. However, the cropping of the image is still a problem.

Processing has this functionality in vertex: (https://processing.org/reference/vertex_.html)

However, I don't believe P5 has this functionality. I really don't want to have to convert the entire sketch into Processing. Is there any way to do this in P5, or to quickly convert this sketch into processing?

    // Make a variable to store the start image, as well as the drop image.
    var img;

    var cropX = [];
    var cropY = [];
    var pos = 25;
    // Make an array for all paths.
    var paths = [];

    // Make a bool for whether or not I am painting.
    var painting = false;

    // Int for how long until drawing the next circle
    var next = 10;

    // Make vars for vectors that determine where the line is drawn.
    var current;
    var previous;

    // Make ints for how much the lines dance around.
    var shake = 10;
    var minShake = shake * -1;
    var maxShake = shake * 1;

    // Make an int for the line thickness.
    var thickness = 2;
    var camera;
    var tracing = false;

    // Make vars to store the random values for colours into. 
    var rc1;
    var rc2;
    var rc3;

    // Variable for the framerate.
    var fr;

    // Variable that disables drawing lines when you didn't upload an image yet.
    var tracing = false;


    //------------------------------------------------------------------------------------------------


    function preload() {

      //Load the starting image, and store it in img.
      img = loadImage("assets/startscreen.png");

      //Load the sound that plays when you export a screenshot.
      soundFormats('mp3');
      camera = loadSound('assets/camera.mp3');

    }


    //------------------------------------------------------------------------------------------------


    function setup() {



      // Set the framerate so the lines don't jump about too quickly.
      fr = 20;

      // Setup a canvas
      var c = createCanvas(1680, 1050);

      // Store a random value out of 255 into the random colour values.
      rc1 = random(255);
      rc2 = random(255);
      rc3 = random(255);

      // Apply the right framerate
      frameRate(fr);

      // Add an event named drop, that runs function gotFile when a file is dropped onto the canvas
      c.drop(gotFile);

      // Store 0,0 vectors in current and previous.
      current = createVector(0, 0);
      previous = createVector(0, 0);

    };

    //------------------------------------------------------------------------------------------------

    function draw() {


      // Colour the background dark grey.
      background(200);

      // Draw the loaded image at 0,0 coordinates.
    image(img, 0, 0);



      //------------------------------------------------------------------------------------------------


      // Count if I've been painting for longer than the 'next' variable.
      // Also check if tracing is enabled (if I've dropped an image or not).
      // If these are true I can draw a new line.
      if (millis() > next && painting && tracing) {

        // Grab mouse position and store it in variables mouseX and mouseY.  
        current.x = mouseX;
        current.y = mouseY;

        // Add new particle
        paths[paths.length - 1].add(current);

        // Update the 'next' variable, to allow itself 200 extra millisecond for drawing the actual line.
        next = millis() + 200;

        // Move the mouse values used to draw the end of the line
        // to a variable used to draw the start of the line,
        // so that the line is continuous.
        previous.x = current.x;
        previous.y = current.y;
        append(cropX, current.x);
        append(cropY, current.y);
      }

      // Make an integer called i, with a value of 0.
      // Add 1 to i for each item in the array paths.

      // Run this once for each item in the array.
      // Name each item in the array 'i' while working.
      // Display each item in the array.
      for (var i = 0; i < paths.length; i++) {

        // Update the current object in the array.
        paths[i].update();

        // Display each item in the array.
        paths[i].display();
      } 
      noStroke();
      noFill();
         beginShape();

         for (var i = 0; i < cropX.length; ++i) {
           vertex(cropX[i], cropY[i]);
         }
         endShape(CLOSE);


    }


    //------------------------------------------------------------------------------------------------

    var ready = false;

    // Make a function called gotFile, using the variable file.
    function gotFile(file) {

      // Check if the dropped file is an image file
      if (file.type === 'image') {

        // Enable drawing lines.
        tracing = true;

        // if (ready) {
        //   img.remove();
        // }
        // Store the dropped image in the container which used to hold the startimage.
        img = createImg(file.data).style("opacity: 100; position: absolute; top: -10; right: -10; z-index: 100;draggable=false;");

        ready = true;

        // Error message in case not an image file.
      } else {
        println('Not an image file!');
      }
    }


    //------------------------------------------------------------------------------------------------

    function mouseWheel(event) {
      //event.delta can be +1 or -1 depending
      //on the wheel/scroll direction
      print(event.delta);
      //move the square one pixel up or down
      pos += event.delta;
      //uncomment to block page scrolling
      return false;
    }

    function mouseDragged() {
    return false;
      }


    // If left mousebutton is pressed down,
    function mousePressed() {
      if (mouseButton == LEFT) {

        // set the variable counting when to place a new line to 0,
        next = 0;

        // set painting to true,
        painting = true;

        // store the mouse coordinates in mouseX and mouseY,
        previous.x = mouseX;
        previous.y = mouseY;

        // and add a new Path method to the array.
        paths.push(new Path());
      }
    }

    // When mouse is released, set painting to false, which disables any paths being drawn.
    function mouseReleased() {
      painting = false;
    }


    //------------------------------------------------------------------------------------------------


    // Describe the Path function that should be pushed to the array.
    function Path() {

      // Create an array inside this function named particles.
      this.particles = [];
    }

    // Add the variable position to the function Path as its function'()' variable.
    Path.prototype.add = function(position) {

      // Add a new particle to this particle array with a position and hue.
      this.particles.push(new Particle(position, this.hue));
    }

    // Take the Path() function, and and add this command to it.
    Path.prototype.update = function() {

      // Make an integer called i, with a value of 0.
      // Add 1 to i for each item in the array paths.

      // Run this once for each item in the array.
      // Name each item in the array 'i' while working.
      // Display each item in the array.
      for (var i = 0; i < this.particles.length; i++) {
        this.particles[i].update();
      }
    }

    // Display the Path array.
    Path.prototype.display = function() {

      // Loop through the array of particles backwards.
      for (var i = this.particles.length - 1; i >= 0; i--) {

        // Display each of these particles.
        this.particles[i].display(this.particles[i + 1]);

      }

    }

    // Particles along the path
    function Particle(position, hue) {

      // Set the position of Particles to the mouseposition by creating a vector.
      this.position = createVector(position.x, position.y);
    }

    // Constantly update Particle.
    Particle.prototype.update = function() {}

    // Draw particle and connect it with a line
    // Draw a line to another
    Particle.prototype.display = function(other) {
      stroke(255, 255);

      // If we need to draw a line
      if (other) {
        stroke(rc1, rc2, rc3);
        strokeWeight(thickness);
        line(this.position.x + random(minShake, maxShake), this.position.y + random(minShake, maxShake), other.position.x + random(minShake, maxShake), other.position.y + random(minShake, maxShake));
      }
      if (keyIsDown(LEFT_ARROW) && !camera.isPlaying()) {
        camera.play();
        save('myRemix.jpg');
        print(cropX);
        print(cropY)

      }

    }

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