For example, let's say that my sketch needs to render an image at 4000x4000. When it is done, it saves the image using save(). However, I want to be able to see what's going on as the sketch is being generated, but my screen is only 2560 x 1600.

Is there a way to zoom out so that I can see the entire image while it is been generated, but retain the high resolution I need as a final result?

I realize that I could pre-generate a smaller version, and then let it work on the larger version once I "approve it." However, that does not work for me for various reasons, one of them being that I don't want to do the work twice, even if the first time is at low-resolution.

Any ideas?

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;

}

float shapeScale=1;
float speedScale=1.1;
void setup() {
  size(500, 500);
  frameRate(60);
}
void draw() {
  shapeScale = shapeScale + speedScale;
  background(0);
  pushMatrix();
  //translate(width/2, height/2);
  scale(shapeScale);
  triangle(700, 700, 850, 430, 1000, 700);
  popMatrix();

  if (shapeScale>=50.0 || shapeScale<=0) {
    speedScale= speedScale*-1;
  }
}

I'm just trying to draw a parabola. I have now tried it over several days but it doesn't work. Here is the basic code I have to use.

    void setup() {
      size(301, 301);
      noLoop();
      background(0);
    }

    void draw() {

      strokeWeight(3);
      stroke(#66C1FC);
      line(0, 300, 300, 300);
      stroke(#F55719);
      line(150, 0, 150, 300);

      stroke(255);
      strokeWeight(1);

      // My problems begin, I have to rescale the x axis, so only values between -4
      // and 4 used for calculation  without map(). 
      for (int i = 0; i < 301; i ++) {  
       point(i,parabola(?));                    
      }
    }

    float parabola(float xValue) {
      float r;
      r = xValue * xValue;
      return r;
    }

I dont get it and believe me I tried everything.

PImage body1;
int w = 400;    
int h = 200;

void setup() {    
  size(1000, 700, P3D);   
  body1 = loadImage("Basketball.png");    
}

void draw() {    
  background(200);   
  translate(width/2, height/2);   
  float x = map(mouseX, 0, width, -PI/2, PI/2);   
  rotateY(x);

  noFill();   
  box(w, h, w);

  pushMatrix();
  translate(-100, 15);
  scale(.25);    
  image(body1, 0, 0);    
  popMatrix();    
}

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;

import processing.video.*;
import g4p_controls.*;
import java.awt.Font;
import gab.opencv.*;


OpenCV opencv;

PFont f;     

boolean filterT=false;


Capture cam;

GButton btnFilterT;

int n = 1;

void setup() {
  size(1024, 768); 

  f = createFont("Arial", 48, true);

  btnFilterT = new GButton(this, 740, 50, 140, 20);
  btnFilterT.setText("On");
  btnFilterT.setLocalColorScheme(GCScheme.GREEN_SCHEME);

  cam = new Capture(this, 640, 480);
  cam.start();
}


void draw() {

  if (cam.available() == true) {
    cam.read();
  }


  pushMatrix();
  scale(-1, 1);
  image(cam.get(), -width, 0, width, height);
  popMatrix();  

  opencv = new OpenCV(this, cam);
  opencv.loadImage(cam);


  if (filterT==true) {
    opencv.brightness((int)map(mouseX, 0, width, -255, 255));
    image(opencv.getOutput(),0, 0, width, height);
  }
}

public void handleButtonEvents(GButton button, GEvent event) {

  if (button == btnFilterT) {
    filterT=true;
  }
}

I have two problems:

if I press the T button to start the brightness and contrast in gray, the screen flips over and becomes no mirror.

how can I have brightness and contrast with the mirror video?

how can I have the brightness and contrast of the webcam color?

thank you

I tried using rotate(-angle) and then drawing an image, but it won't display the image. (I also put resetMatrix() behind)

I guess displaying an image rotated is one of those things that's impossible to do as well? (I was only trying to rotate the image multiples of PI/2)

Kind regards, OrOrg

https://processing.org/tutorials/print/

 /* 
     * Example 6: Scale and segment an image
     * 
     * Draws an image larger than the screen by tiling it into small sections.
     * The scaleValue variable sets amount of scaling: 1 is 100%, 2 is 200%, etc.
     */

    int scaleValue = 3;  // Multiplication factor
    int xoffset = 0;     // x-axis offset 
    int yoffset = 0;     // y-axis offset

    void setup() {
      size(600, 600);
      stroke(0, 100);
    }

    void draw() {
      scale(scaleValue);
      translate(xoffset * (-width/scaleValue), yoffset * (-height/scaleValue));
      line(10, 150, 500, 50);
      line(0, 600, 600, 0); 
      setOffset();
    }

    void setOffset() {
      save("lines-" + xoffset + "-" + yoffset + ".jpg");
      xoffset++;
      if (xoffset == scaleValue) {
        xoffset = 0;
        yoffset++;
        if (yoffset == scaleValue) {
          exit();
        } 
      }
      background(204);
    }

the problem is that I have to use translate() several times after this and it makes impossible exporting the image correctly. Example:

void draw() {
  scale(scaleValue);
  translate(xoffset * (-width/scaleValue), yoffset * (-height/scaleValue));
  line(10, 150, 500, 50);
 translate(0,height/2);
  line(0, 600, 600, 0); 
  setOffset();
}

I've tried another ways like: Example 4: accumulate many frames into one pdf Example 5: high-resolution off-screen buffer

The problem is that I must use "aa" < fft.specSize() in my sketch and I can't enlarge it. Also there is a lot of transparency what makes it difficult to use a pdf/svg vector mode for exporting.

Thanks, sorry for my spanglish.

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

void setup()
{
  size(1000, 600);
  noLoop();
}

void draw()
{
  scale(width/2, height/4);
  noFill();
  rect(0,0,1,1);
}

I'm expecting a unfilled rectange taking half the width and quarter the height but I'm seeing a filled rectange with strange boundaries.

Is there any reason or is this a bug ? The same happens with shapes.

I try to realize some pattern out of the logo of my University. This is a small project for a programming class we have in our design degree. But since I'm a designer I encounter some problems to realize the idea. So I got the anchor points from our logo and made it to draw it out of an array with all the coordinates. That works quite well.

My next step now should be to draw the shape again but in smaller size inside the first one. That step I want to repeat several times. My professor suggested me something with the scale command and a variable to do this, but I can't figure out how to do it properly. Always I put the code in the resizing works, but I can't get it do display in the shape in smaller.

I would appreciate any help with code or idea what to do! :)

float[] rightshape = {111.8, 5.9, 111.8, 5.9, 62.8, 70.80000000000001, 62.8, 70.80000000000001, 62.8, 70.80000000000001, 62.8, 70.80000000000001, 62.599999999999994, 171.20000000000002, 62.599999999999994, 171.20000000000002, 62.599999999999994, 171.20000000000002, 62.599999999999994, 177.50000000000003, 67.6, 182.50000000000003, 73.89999999999999, 182.50000000000003, 73.89999999999999, 182.50000000000003, 73.89999999999999, 182.50000000000003, 73.89999999999999, 182.50000000000003, 73.89999999999999, 182.50000000000003, 73.89999999999999, 182.50000000000003, 80.1, 182.50000000000003, 85.19999999999999, 177.50000000000003, 85.19999999999999, 171.20000000000002, 85.19999999999999, 171.20000000000002, 85.19999999999999, 171.20000000000002, 85.39999999999999, 78.40000000000002, 85.39999999999999, 78.40000000000002, 85.39999999999999, 78.40000000000002, 85.39999999999999, 78.40000000000002, 111.79999999999998, 43.40000000000002, 111.79999999999998, 43.40000000000002, 111.79999999999998, 43.40000000000002, 111.79999999999998, 43.40000000000002, 111.79999999999998, 5.9, 111.79999999999998, 5.9, 111.79999999999998, 5.9, 111.79999999999998, 5.9, 111.8, 5.9, 111.8, 5.9};
float[] leftshape = {34.685, 136.132, 34.685, 136.132, 34.685, 59.888, 34.685, 59.888, 34.685, 59.888, 34.685, 59.888, 8.371, 27.128, 8.371, 27.128, 8.371, 27.128, 4.465, 22.253, 5.239000000000001, 15.152, 10.114, 11.239, 10.114, 11.239, 14.978, 7.329, 22.087, 8.111, 26, 12.97, 26, 12.97, 26, 12.97, 57.292, 51.942, 57.292, 51.942, 57.292, 51.942, 57.292, 51.942, 57.292, 136.132, 57.292, 136.132, 57.292, 136.132, 57.292, 142.36700000000002, 52.222, 147.434, 45.986000000000004, 147.434, 45.986000000000004, 147.434, 39.743, 147.433, 34.685, 142.367, 34.685, 136.132};

void setup() {
  size(800, 600);
  background(255);

  println(rightshape);
  //println(leftshape);
}

int size = 10;
float s = 1;

void draw() {

  scale(s);
  //s = s-0.3;
  strokeWeight(2);

  //translate(-50, -60);
  translate(width/2, height/2);
  //Draw the left part of the logo
  //
  for (int countleft = 0; countleft < 63; countleft = countleft+8) {

    stroke(53, 37, 92);
    bezier(leftshape[countleft], leftshape[countleft+1], leftshape[countleft+2], leftshape[countleft+3], leftshape[countleft+4], leftshape[countleft+5], leftshape[countleft+6], leftshape[countleft+7]);

  }

  //Draw the right part of the logo
  for (int countright = 0; countright < 71; countright = countright+8) {

    stroke(29, 112, 183);
    bezier(rightshape[countright], rightshape[countright+1], rightshape[countright+2], rightshape[countright+3], rightshape[countright+4], rightshape[countright+5], rightshape[countright+6], rightshape[countright+7]);
  }
}

Here is a small scribble how it should go together, in case you don't get from my description what I mean. http://www.dropbox.com/s/k78wv5s3lkqddkg/Foto 22.01.17, 14 04 17.jpg

Found good code for rotating PShapes, but scale doesn't seem to work for me. I always end up with scale somehow in the draw loop, which to my understanding means it is going to be run over and over (See results). I know this is a very basic question, but I'm still learning.

Thanks,

// A list of objects ArrayList polygons;

void setup() { size(640, 360, P3D);

// Make a PShape PShape star = createShape(); star.beginShape(); star.noStroke(); star.fill(0, 127); star.vertex(0, -50); star.vertex(14, -20); star.vertex(47, -15); star.vertex(23, 7); star.vertex(29, 40); star.vertex(0, 25); star.vertex(-29, 40); star.vertex(-23, 7); star.vertex(-47, -15); star.vertex(-14, -20); star.endShape(CLOSE);

// Make an ArrayList polygons = new ArrayList();

// Add a bunch of objects to the ArrayList // Pass in reference to the PShape // We coud make polygons with different PShapes for (int i = 0; i < 25; i++) { polygons.add(new Polygon(star)); } }

void draw() { background(255);

// Display and move them all for (Polygon poly : polygons) { scale(0.9); poly.display(); poly.move(); } } // A class to describe a Polygon (with a PShape)

class Polygon { // The PShape object PShape s; // The location where we will draw the shape float x, y; // Variable for simple motion float speed; float theta1 = 0;

Polygon(PShape s_) { x = random(width); // y = random(-500, -100); y = random(height); s = s_; // speed = random(2, 6); speed = 0; }

// Simple motion void move() { y += speed; if (y > height+100) { y = -100; } } //

// Draw the object void display() { pushMatrix(); translate(x, y); rotateZ(theta1); // scale(0.5); shape(s); theta1+=0.02; popMatrix(); } }

import processing.video.*; int cols, rows; Capture cam;

void setup() {

//displays it full screen size (displayWidth, displayHeight);

cols = width;
rows = height; //30 fps is default so bellow won't change anything cam = new Capture(this, width, height, 30);

// Start capturing the images from the camera cam.start();

frameRate(30); background(0); }

void draw() { if(cam.available()) { //reads fresh-est pixels from camera cam.read(); cam.loadPixels(); loadPixels(); // Loop through every pixel. ++i is equivalent to i = i + 1. //for (int i=0; i<cam.pixels.length; i++) {

// Begin loop for columns(using width)
for (int i = 0; i < cols;i++) {
  // Begin loop for rows(using length)
  for (int j = 0; j < rows;j++) {

    // Where are we, pixel-wise? (cam.width - i - 1) means x-coordinate of the pixel mirrored
    int loc = (cam.width - i - 1) + j*cam.width;  // Reversing x to mirror the image

    if (brightness(cam.pixels[loc]) > 253) {
      pixels[loc] = color(255);       
    }

 float red = red(pixels[loc]);
 float green = green(pixels[loc]);
 float blue = blue(pixels[loc]);

 blue = blue - 5;
 if(blue < 0) blue = 0;

 red = red - 5;
 if(red < 0) red = 0;

 green = green - 5;
 if(green < 0) green = 0;

 pixels[loc] = color(red, green, blue);

} 

}

updatePixels();

} }

This is, of course, part of the continual conundrum we intro level teachers face as we try to show learners without great math skills that programming is do-able and even fun: is the code to invert the Y axis unobtrusive enough so that we can use the coordinate system my students (kind of) already know or must I teach them "computer coordinates" which are the undoing of half of what my math colleagues have labored to teach them?

[Apologies: frustrated rant to follow]

In creating his brilliant Python Graphics module, John Zelle included a function which transforms coordinates (any way you want) for an entire program with just a single, short line of code you put in at the start. Now I know Python is not a great language for writing video games, but this graphics module nonetheless demands consideration by all teachers of "diverse learners" because you don't have to work against what students have already struggled to learn, i.e. - that Y 'moves' upwards positively and downwards negatively. At the start of every class you don't have to remind them how computers do it differently. You don't have to double the number of vectors students are storing in memory. You don't have to send them off to their math classes or state exams with inverted directions rattling around in their brains. (With graduations now pinned to ever more finicky standardized exams, this is not a small thing.) IF PROCESSING IS SUCH A WONDROUS TEACHING LANGUAGE, HOW ON EARTH COULD SOMEONE NEGLECT TO INCLUDE A SIMILAR COORDINATE SETTING FUNCTION?

[Apologies once more; question resumes]

So, I've seen that perhaps a solution exists using pushMatrix() and popMatrix(), but I haven't been able to make that work. Additionally, I can probably leave my students unconfused by a couple of instances of scale() and translate(), but adding pushMatrix() and popMatrix() with indented code nested between them probably adds more distraction than teaching them the inverted Y concept.

Can anyone share code for aligning inverted Y coordinates across draw() and mousePressed()? With much respect and hope that the misunderstanding is mine, Brooklev

boolean record;
int scalePG = 2;

void setup() {
    size(600, 600, P3D);
    smooth();
}

void draw() {
    if(!record)
        background(#ffffff);
    translate(width/2, height/2);
    fill(#ff0000);
    rotateX(60);
    rotateZ(60);
    box(100);
}
void keyPressed() {
    save("lowres.png");

    if(keyCode == ENTER) {
        PGraphics PGpx = createGraphics(width * scalePG, height * scalePG, P3D);
        record = true;
        beginRecord(PGpx);
        PGpx.background(#ffffff, 0); // Clear the offscreen canvas (make it transparent)
        PGpx.scale(scalePG);
        draw();
        endRecord(); // originally was AFTER call to save() in next line - but didn't save anything.
        PGpx.save("highres.png"); // Save image as PNG (JPGs can't have an alpha channel) and save it before endRecord()

        record = false;
    }
}

I posted some pictures about this in this post: https://forum.processing.org/two/discussion/17162/high-resolution-output-for-p3d

Does anyone know how to fix this?

Currently, I'm trying to mask images. But for some reason as soon I apply a filter, the image flips (or rotates 180º). And I just can't get them back to the current position.

This happens not only with mask() method, but also with other filters (with filter method itself or the blend() one)

I'm giving you an example code:

PGraphics mappingZone;
.. mappingZone = applet.createGraphics(kinect.width, kinect.height, PApplet.P2D);
.. filteredImg = applet.createImage(kinect.width, kinect.height, PApplet.P2D); ...

  mappingZone.beginDraw();
  mappingZone.background(0);            
  mappingZone.image(mappingTexture, 0, 0);
  mappingZone.mask(filteredImg);    
  mappingZone.endDraw();        

  applet.image(mappingZone, 0, 0, applet.width, applet.height);

I tried several things to flip the image to the correct position, like: mappingZone.scale(-1, -1);

But nothing works. However, applying a second filter usually return the image to the correct position. Any clue?

pushMatrix(); // only adjusts translate/scale within matrix translate(width/2, height/2); // suggestion to draw from center out scale(.65); xrect(0,0,250,250); popMatrix();

void xrect(float x1, float y1, float w1, float h1) { rect(x1, y1, w1, h1); String shape = "rect"; float x1out = map(screenX(x1, y1), 0, width, 0, 1); float y1out = map(screenY(x1, y1), 0, height, 0, 1); float w1out = map(w1, 0, width, 0, 1); float h1out = map(h1, 0, height, 0, 1); // .. OSC message w/ these values sent after this }

perhaps i should just be grabbing the screenX of (x1+w1) to know where that xpoint is then check the distance between those points? Wondering if there's a better way to check for transformations and know if anything's being scaled.

  PGraphics g;
  g = createGraphics(width, height, P3D);
  g.beginDraw();
  g.image(srcImg, 0, 0);
  g.endDraw();
  PImage output = g.get();

  PGraphics g2; 
  g2 = createGraphics(width, height, P3D);
  g2.beginDraw();
  g2.image(srcImg, 0, 0);
  g2.scale(-1,1);
  g2.endDraw();
  PImage output2 = g2.get();

My program shows the picture I set the cursor to be, but the picture is pixely, contains colors that aren't in the original picture and gets distorted at times. Since, apparantly the mouse isn't visible when you take a screenshot I don't know how to show you. I thought I would just show you most of the code, since I'm a beginner and might leave stuff out that actually causes the problem.

//Intialize picture aimingpoint
PImage aimingpoint;

//define class object
hare one;

//define boolean for pulling gun
boolean pull;

int width = 600;
int height = 600;

float middleX = width/2;
float middleY = height/2;

//Define values for position and size hunters
float xPosHunter1 = 0;
float yPosHunter1 = 0;
float xPosHunter2 = -200;
float yPosHunter2 = 0;
int radHunter = 10;

int deadlyDistance = 150;

//Define animalspeed
int animalSize = 10;
float hareSpeed = 1;

void setup() {
  size(width, height);
  smooth();
  //Define hare one
  one = new hare(100, 1);
  aimingpoint = loadImage("aimingpoint.png");
}

void draw() {
  //calculate angle between the line that goes fromthe origin to the mouse and postive x-axis
  //I posted a question about this on forum.processing.org: https://forum.processing.org/two/discussion/14433/rotate-line-in-such-a-way-that-one-point-is-in-the-middle-of-the-canvas-and-other-follows-the-mouse#latest

  background(255);

  //Move origing to the middle of the canvas.
  translate(0.5 * width, 0.5 * height);

  //Flip the canvas in the x-axis so that the axis system is like a 'normal' one.
  scale(1, -1);

  //draw mouse as aimingpoint
  //http://stackoverflow.com/questions/12539840/change-mouse-cursor-in-processing
  cursor(aimingpoint, 16, 16);
  //  ellipseMode(CENTER);
  //  ellipse(mouseX, mouseY, 5, 5);
  //  noFill();
  //  ellipse(mouseX, mouseY, 30, 30);

     if ((keyPressed == true && key == 'p' || key == 'P') && mousePressed == true && distanceOriginMouse() <= deadlyDistance){
     background(0, 255, 0);
  } 
    else if ((keyPressed == true && key == 'p' || key == 'P') && mousePressed == true && distanceOriginMouse() > 0.5 * deadlyDistance){
      background(255,0,0);
  }

  //draw gun when p is pressed
  if (keyPressed == true && key == 'p' || key == 'P') {
    pushMatrix();
    rotate(-angleMouse());
    line(0, 0, 40, 0);
    popMatrix();
  }

  ellipseMode(RADIUS);
  //draw deadly
  noFill();
  ellipse(0,0,deadlyDistance, deadlyDistance); 

  fill(255);
  //Draw Hare1
  one.show();
  one.move();

  pushMatrix();
  rotate(radians(135));
  line(0,0,500,0);
  popMatrix();

  stroke(0);
  //Hunter1
  ellipse(xPosHunter1, yPosHunter1, radHunter, radHunter);
  //Hunter2
  ellipse(xPosHunter2, yPosHunter2, radHunter, radHunter);
  //if (mousePressed == true && mouseButton == LEFT && mouseX >=) {
}

The picture is 16 x 16 pixels, so that probably causes the pixelyness, but if I take a larger picture, processing won't show the entire picture anymore.

Hope you guys can help out!

-Bodhidharma482

how do we determine if a color is behind any of those rectangles ?

for example lets say i have my video screen from my webcam open right, and lets say im pointing at a white wall "absolute white" and lets say i bounce a red or black ball across the webcams view so now you should see a white background with a color ball in it right, now how can i detect that ball ?

by detecting i mean detect & track it.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

now i dont just want to track the ball but i want to guide the cursor of my mouse across the screen.

void draw()
{
    image(video, 0, 0 );
    noFill();
    stroke(255, 0, 0);
    ellipse(300, 300, 20, 20);
}

using this color tracker and incorporating the mouseMove functions i think i can get what im looking for, the Q is where do i get a example of mouse move? i forgot where i seen it.

  float worldRecord = 100.0;//500 Before we begin searching, the "world record" for closest color is set to a high number that is easy for the first pixel to beat.
  // XY coordinate of closest color
  int closestX = 0;
  int closestY = 0;

  // Begin loop to walk through every pixel
  for (int x = 0; x < video.width; x ++ ) {
    for (int y = 0; y < video.height; y ++ ) {
      int loc = x + y*video.width;
      // What is current color
      color currentColor = video.pixels[loc];
      float r1 = red(currentColor);
      float g1 = green(currentColor);
      float b1 = blue(currentColor);
      float r2 = red(trackColor);
      float g2 = green(trackColor);
      float b2 = blue(trackColor);

      // Using euclidean distance to compare colors
      float d = dist(r1, g1, b1, r2, g2, b2); // We are using the dist( ) function to compare the current color with the color we are tracking.

      // If current color is more similar to tracked color than
      // closest color, save current location and current difference
      if (d < worldRecord) {
        worldRecord = d;
        closestX = x;
        closestY = y;
      }
    }
  }

  // We only consider the color found if its color distance is less than 10. 
  // This threshold of 10 is arbitrary and you can adjust this number depending on how accurate you require the tracking to be.
  if (worldRecord < 95.73401)//10 
  { 
    // Draw a circle at the tracked pixel
    fill(trackColor);
    strokeWeight(4.0);
    stroke(0);
    ellipse(closestX, closestY, 16, 16);
  }

Code:

void setup () {
  size (900, 506);
  background (0, 0, 12);
  drawStars ();
  drawPlanets ();
  drawLargeStar ();
}

void draw () {
}

void drawPlanets () {
  drawPlanet (300, 110, 50);
  pushMatrix ();
  scale (.1);
  drawPlanet (1000, 1000, 100);
  popMatrix ();
}

void drawPlanet (int x, int y, int grey) {
  translate (x, y);
  stroke (0);
  fill (150, 150, 255);
  ellipse (0, 0, 708, 698);
  fill (255);
  ellipse (0, 0, 697, 687);
  fill (grey);
  ellipse (0, 0, 680, 680);
}

void drawStars () {
  for (int num = 0; num < 400; num++) {
    fill (255);
    stroke (random (0, 255), random (0, 255), random (0, 255));
    ellipse (random (0, 900), random (0, 506), random (1, 8), random (1, 8));
  }
  filter(BLUR, 4);
}

void drawLargeStar () {
  fill (255);
  stroke (255);
  ellipse (450, 200, 150, 150);
}

I created a simple recursive tree using a proto-L-System and I'd like for the recursion to stop if it goes out of the box I've drawn. However, because of all the translations, I'm confused as to how this can be achieved.

I'd be very grateful if someone can point me in the right direction.

Many Thanks, Charles

// A simple recursive tree using a proto-L-System

import processing.opengl.*;
Branch axiom;
PVector cameraPos = new PVector(600, -100, 600);

void setup()
{
  size(800, 800, OPENGL);
  axiom = new Branch();
}
void draw()
{

  background(0);
  stroke(192);
  fill(255);
  translate(width/2, height);
  rotateY(frameCount*0.01);
  axiom.draw();
  if (frameCount % 50 == 0) {
    axiom.replace(0);
  }
  translate(0, height*-0.5);
  noFill();
  box(400, 600, 400);

  camera(cameraPos.x, cameraPos.y, cameraPos.z, width/2, height*0.5, 0, 0, 1, 0);
}
void mousePressed()
{
  axiom = new Branch();
}

class Branch
{
  PMatrix3D joint;
  Branch child_a;
  Branch child_b;
  Branch()
  {
    joint = new PMatrix3D();
    child_a = null;
    child_b = null;
  }
  void replace(int depth)
  {
    // still need to prevent infinite recursion:
    if (depth > 16) {
      return;
    }
    // note: grow children before yourself
    if (child_a != null) {
      child_a.replace(depth+1);
    }
    if (child_b != null) {
      child_b.replace(depth+1);
    }
    // now I grow myself
    rule();
  }
  void rule()
  {
    // rule: grow offshoot branches
    // B -> B (+B) (-B)
    if (child_a == null) {
      // main stem -- almost straight
      child_a = new Branch();
      child_a.joint.rotateY(random(0, PI));
      child_a.joint.rotateX(random(-PI/16, PI/16));
    }
    if (child_b == null) {
      // branching off
      child_b = new Branch();
      child_b.joint.rotateY(random(0, PI));
      child_b.joint.rotateX(random(-PI/4, PI/4));
    }
  }
  void draw()
  {
    applyMatrix(joint);
    pushMatrix();
    {
      translate(0, -height/8, 0);
      box(10, height/4, 10);
    }
    popMatrix();
    pushMatrix();
    {
      translate(0, -height/4, 0);
      scale(0.7);
      if (child_a != null) {
        child_a.draw();
      }
    }
    popMatrix();
    pushMatrix();
    {
      translate(0, -height/4, 0);
      scale(0.7);
      if (child_b != null) {
        child_b.draw();
      }
    }
    popMatrix();
  }
}

    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.

Here's my code :

PImage img3; float i = 1;

void setup(){

size(1000,1000,P3D); background(0,0,0); img3 = loadImage("logo.png");

} void draw(){

scale(1,1,i); imageMode(CENTER);
image(img3,width/2,height/2); i = i/2;

}

I'm sorry if it's an easy question, but i've tried a lot of things, like scale and translate : i just succeeded with some text, but i can't find out for a picture !

Thanks for your replies !!

Any ideas?

I saw many library available for line chart.

I also want zoom in & zoom out function in line chart.

Any library which provide zoom in & zoom out feature.

Thanks