Main:

Images photoimg; population population; Button button;

void settings() { //Setup the box containing the images size(1600,600); }

void setup() { colorMode(RGB,1.0); int popmax = 3; //float mutationRate = 0.05; // A pretty high mutation rate here, our population is rather small we need to enforce variety // Create a population with a target phrase, mutation rate, and population max //population = new Population(mutationRate,popmax); population = new population(popmax); //create a new population button = new Button(15,560,160,20, "Evolve new generation"); //create a button //photoimg = new Images(); }

void draw() { background(1.0); // Display the faces population.display(); population.rollover(mouseX,mouseY); // Display some text textAlign(LEFT); fill(0); //text("Generation #:" + population.getGenerations(),15,190);

// Display the button button.display(); button.rollover(mouseX,mouseY); }

void mousePressed() { if (button.clicked(mouseX,mouseY)) { //population.selection(); //population.reproduction(); } }

void mouseReleased() { button.released();

}

class Images{ float increment = 0.02; float x, y; //postion of image int w, h; PImage photoimg, destination; //int wh = 600; boolean rolloverOn, clickedOn = false;

Rectangle r;

Images(float x_, float y_) { x = x_; y = y_; photoimg = new PImage(); photoimg = loadImage("jefferson.jpg"); w = photoimg.width; h = photoimg.height; //r = new Rectangle(int(x), int(y), int(wh), int(wh)); //destination = perlin(photoimg); }

/void settings(){ size(500,500); }/

void display(){ //update(mouseX, mouseY);

pushMatrix();
translate(x, y);
//stroke(255);
//image(photoimg,0,0);
//popMatrix();
noStroke();
/*if (rolloverOn == true){
  tint(100);
}
else{
  tint(255);
}*/
//stroke(255);
image(photoimg,0,0);
//image(destination,0,0);    
popMatrix();

}

void update(int mx, int my) { if( roll_over(mx, my, photoimg.width, photoimg.height) ) { rolloverOn = true; } else { rolloverOn = false; } }

//position, width, height boolean roll_over(int p, int z, int w, int h){ if (p >= x && p <= x+w && z >= y && z <= y+h) { //tint(100); return true; } else { //tint(255); return false; } }

boolean clicked(int mx, int my) { if (r.contains(mx,my)) clickedOn = true; return clickedOn; } }

class population {

Images[] population; int generations;

population(int num) { population = new Images[num]; generations=0; for (int i = 0; i < population.length; i++) { population[i] = new Images(15+i*530, 30); } }

void display() { for (int i = 0; i < population.length; i++) { population[i].display(); } }

void rollover(int mx, int my) { for (int i = 0; i < population.length; i++) { population[i].update(mx, my); } }

class Rectangle { int x; int y; int width; int height;

Rectangle(int x_, int y_, int w, int h) { x = x_; y = y_; width = w; height = h; }

boolean contains(int px, int py) { return (px > x && px < x + width && py > y && py < y + height); }

}

class Button { Rectangle r; // Button's rectangle String txt; // Button's text boolean clickedOn; // Did i click on it? boolean rolloverOn; // Did i rollover it?

Button(int x, int y, int w, int h, String s) { r = new Rectangle(x,y,w,h); txt = s; }

void display() { // Draw rectangle and text based on whether rollover or clicked rectMode(CORNER); stroke(0); noFill(); if (rolloverOn) fill(0.5); if (clickedOn) fill(0); rect(r.x,r.y,r.width,r.height); float b = 0.0; if (clickedOn) b = 1; else if (rolloverOn) b = 0.2; else b = 0; fill(b); textAlign(LEFT); text(txt,r.x+10,r.y+14);

}

// Methods to check rollover, clicked, or released (must be called from appropriate // Places in draw, mousePressed, mouseReleased boolean rollover(int mx, int my) { if (r.contains(mx,my)) rolloverOn = true; else rolloverOn = false; return rolloverOn; }

boolean clicked(int mx, int my) { if (r.contains(mx,my)) clickedOn = true; return clickedOn; }

void released() { clickedOn = false; }

}

Thank you!

I will like to be able in my sketch to place a keyword example like "kanye west" so it goes to Google images, tumblr or Flickr.From the 3 or 6 first page take 1 (10 or 15) image bigger than 600px . And display the image randomly.

I will also like to be able form the key word it will go Wikipedia page. Get the first part of the text everything between the title and the content and display it. Same thing from tweeter get some random tweet about the key word.

Hope somebody will be able to give me information about that where to look for it.

I know if I have a PImage "Shape" and I try to make a copy of Shape by saying

PImage copyShape = Shape;

I'll only create a reference to Shape.

How do I make a separate copy?

Thanks

PImage img;
int direction = 1;
float signal;
int imgX = 0;
int imgY = 0;
int w = width;
int h = height;




void setup() {
  size(1000, 500);
  //fullScreen();
  noFill();
  frameRate(60);
}




void draw() {
  // int boxX = img.width/2;
  //int boxY = img.height/2;
  img = loadImage("203.jpg");

  background(255);



  if (mousePressed) {
    int mx = constrain(mouseX, 0, width-1);
    int my = constrain(mouseY, 0, height-1);
    signal = my*width + mx;
  } else {
    //signal += 0.33*direction;
  }

 // set(imgX, imgY, img);  // fast way to draw an image

  int sx = int(signal) % width;
  int sy = int(signal) / width;
  color c = img.get(sx, sy);
  image(img, 0, 0, width, height);


  //rect(sx, sy, 10, 10);
  fill(c);
  rect(50, 50, 50, 50);

  print("Color " + c);
  println(" X " + sx + " Y " + sy );
}

In order for this code to work you have to set the canvas size to the resolution of the image, and I do not want that. Plus the canvas size cannot be re-sized.

If you run this program at the top left corner you will see a box that will copy the color of the pixel where your mouse is at, hover over any pixel to see what my problem is.

This code is from the processing website it takes an image and gets its pixels and displays them on the screen based on where your mouse is is, but they failed at explaining exactly what every line, I am completely confused, can anyone explain in detail what every line does here?

In this class i create a JFrame instance: let us call it "frame". Not any problem.

Then i want to add a panel to this frame So i code:

     JPanel panel = new JPanel();
     panel.setLayout(new BorderLayout());

    panel.setPreferredSize(new Dimension(wid, heigh));// these parameters are passed by constructor.

Not any problem: the frame appears (after having add pack() and setVisible()) with size and location as required.

Then i want to add an IMAGE to my panel; this image IS in the data folder from the sketch; i have also put a copy near the class itself at sketch root.

and i code:

    JLabel label = new JLabel();
    label.setIcon(new ImageIcon("/data/myImage.jpg");
    //or:(trying..)
    label.setIcon(new ImageIcon("myImage.jpg");
    //or
     label.setIcon(new ImageIcon("data/myImage.jpg");

then, as usually:

    this.frame.getContentPane().add(panel);
    this.frame.pack();
    this.frame.setVisible(true); 

the frame appears but not the image. Not any error.

In order to understand why, i add:

System.out.println(new File("myImage.jpg").exists());

it returns false (of course i have tried changing the path, without success)…

So i have add another method in order to see where the class is looking at:

            private void whereAreYouLookingAt(){
            try{
             File file = new File(".");  
             File[] files = file.listFiles();  
             System.out.println("Current dir : " + file.getCanonicalPath());
             for (int fileInList = 0; fileInList < files.length; fileInList++)  
             {  
                  System.out.println(files[fileInList].toString());  
                }
            }catch(IOException ex){
            }

            }

it runs and print all files which are present in my Applications folder (osX)!!! of course the image is not here... but WHY is it pointing there??? Is it because here is the Processing folder???? - i think so. Not sure...

After that (in order to verify again) i add::

System.out.println(new File("data/myImage.jpg").getAbsolutePath());

it returns: /Applications/data/myImage.jpg

Finally, in order to be sure that my code is good (it fires no error…) i have HARDCODED the path to myImage.jpg (sketch folder, data folder…) and the image appears in the frame!

Of course this is not a good solution... If anybody can explain what to do in this type of case (what path to use in an outer class which uses Image java class and not PImage) thanks in advance.

PS: i have found a workaround but i want to understand. thanks in advance.

ich hoffe hier sind auch einige Deutsche unter euch. Ich kenne mich in Processing leider gar nicht aus und muss ein Projekt darin machen. Verstehe so schon recht wenig, auf Englisch gleich gar nichts mehr.

Ich habe verschiedene Bilder, die nach einem Klick per Zufall erscheinen sollen. Es geht um einen Lebensweg, deswegen darf der Zufall nicht ganz wahllos sein. Der Betrachter entscheidet sich für Möglichkeit A oder B. Entscheidet er sich für B, kommt per Zufall ein Bild aus 2 Möglichkeiten. Je nachdem welches erscheint, kommt darauf das nächste Bild wieder aus 2 Möglichkeiten. Wie ein Baumdiagramm.

Benötige dringend Hilfe. Danke im voraus!

I'm new here to processing and to programming in general. I've tried to get into coding but I never had a goal to work to. Now I finally found something I want to build: a program that converts a image that you can draw yourself into a binary code.

I've made a simple start; a drawing program with erasing tool that draws a black line on white. but I'm running into 2 problems

1: zooming in, I want to convert a 16x16 image to binary but making a screen of that size is just way too small. I need to find a way to make it bigger without changing resolution.

2: The actual conversion a black pixel needs to become a 1 and a white (background) needs to become a 0. example of a 3x3 output: (every code is a horizontal row)

101
010
101

a friend of mine told me it's handy to use a bit shifter for this, but I just don't know how!

Any help would be appreciated.

this function sends the image with UDP to the other program when the facedetect detects a face in a video/camera

void sendImg(PImage img){
  BufferedImage bimg = new BufferedImage( img.width,img.height, BufferedImage.TYPE_INT_RGB );
  img.loadPixels();
  bimg.setRGB( 0, 0, img.width, img.height, img.pixels, 0, img.width);
  ByteArrayOutputStream baStream  = new ByteArrayOutputStream();
  BufferedOutputStream bos    = new BufferedOutputStream(baStream);

  Iterator iter = ImageIO.getImageWritersByFormatName("jpeg");
  ImageWriter writer = (ImageWriter)iter.next();

  ImageWriteParam iwp = writer.getDefaultWriteParam();
  iwp.setCompressionMode(ImageWriteParam.MODE_EXPLICIT);

  ImageOutputStream stream = null;

  try {
    stream = ImageIO.createImageOutputStream(bos) ;
  } 
  catch (IOException e) {
    e.printStackTrace();
  }

  writer.setOutput(stream);

  IIOImage imgb = new IIOImage(bimg, null, null);

  try {
    writer.write(null, imgb, iwp);
  } 
  catch (IOException e) {
    e.printStackTrace();
  }

  writer.dispose();
  byte[] packet = baStream.toByteArray();
  println("Sending datagram with " + packet.length + " bytes");
  try {
    ds.send(new DatagramPacket(packet,packet.length, InetAddress.getByName(ip),clientPort));
  } 
  catch (Exception e) {
    e.printStackTrace();
  } 
}

but in the other program I don't know how to do to receive this array of bites and save it as an image jpg in a data carpet. Someone knows how to do it or has any suggestion?

I have a sketch full of different transformations to a picture each happening over a certain amount of frames by a press of a key. I divided each transformation into each void. I now want to display ALL of the transformations over 100 frames by a press of the key once (within the same sketch). How do I do this?

Thanks for any help :)

The image is a colourful picture, 1280 x 720.

//Inverting image colour
void invertColor() {
background(img1);
image(img1,0,0);

for (int x = 0; x < img1.width; x++) {
        for(int y = 0; y <img1.height;y++) {
          color c = get(x,y);
          img1.set(x,y, color(255-red(c), 255-green(c), 255-blue(c)));

  }
 }
}

I'm very new to this, so sorry if it's unclear or confusing :/ I can give more information if needed. Thank you.

For example, starting with:

You can end up with this:

Another example:

Anyhow, you can find and play with the source code here. The Effros-Freeman article is in the data folder.

https://github.com/tricoders/texture-synthesis

//Project in Visualization

void setup()
{
  size(700,700);
  smooth();
  USA = loadImage("map.png");
  bfly = loadImage("bfly.jpg");
}

void draw()
{
  background(255);
  image(USA,-160,-50,1000,880);
  for (int i = 0; i < 4; i++)
  {
    if(mousePressed)
    {
      i++;
    //florida
    image(bfly,450,460,F[i],F[i]);
    //New England
    image(bfly,460,360,NE[i],NE[i]);
    //mexico
    image(bfly,280,540,M[i],M[i]);
    //north dakocta
    image(bfly,290,280,ND[i],ND[i]);
    }
  }
}

void mousePressed()
 {
   textSize(60);
   fill(0); 
   text("2000", 30, 600);
   noLoop();
 }

PImage USA;
PImage bfly;

void setup()
{
  size(400,400);
  USA = loadImage("map.png");
}

void Draw()
{
  background(0);
  image(USA,400,400);
}

PImage USA;

Here's the full code:

import twitter4j.util.*;
import twitter4j.*;
import twitter4j.management.*;
import twitter4j.api.*;
import twitter4j.conf.*;
import twitter4j.json.*;
import twitter4j.auth.*;

static String OAuthConsumerKey = "...";
static String OAuthConsumerSecret = "... ";
static String AccessToken = "...";
static String AccessTokenSecret = "... ";

String keywords[] = {"meaning of life"};

PImage bg;
int y;
TwitterStream twitterStream = new TwitterStreamFactory().getInstance();

void setup(){
  size(1920,1080);
  noStroke();
  connectTwitter();
  twitterStream.addListener(listener);

  size(1920, 1080);
 //bg = loadImage("twitterbackground.jpg");


  if (keywords.length==0){
    twitterStream.sample();
  }
  else{
    twitterStream.filter(new FilterQuery().track(keywords));
  }
}

//void draw() {
  //background(bg);

 // }



void connectTwitter() {
  twitterStream.setOAuthConsumer(OAuthConsumerKey, OAuthConsumerSecret);
  AccessToken accessToken = loadAccessToken();
  twitterStream.setOAuthAccessToken(accessToken);
}

// Loading up the access token
private static AccessToken loadAccessToken() {
  return new AccessToken(AccessToken, AccessTokenSecret);
}

StatusListener listener = new StatusListener(){
  public void onStatus(Status status){
    String tweets = status.getText();
    String user = "@" + status.getUser().getScreenName();
    tweets = user + " - " + tweets;
    println(tweets);


    status.getUser().getBiggerProfileImageURL(); 

    //ImageIcon = new ImageIcon(url);
    //Jlabel1.setIcon(img);

    text(status.getText(), random(width), random(height), 300, 200);
    text("@" + status.getUser().getScreenName(), random(width), random(height), 300, 200);



  }
  public void onDeletionNotice(StatusDeletionNotice statusDeletionNotice) {
    //System.out.println("Got a status deletion notice id:" + statusDeletionNotice.getStatusId());
  }
  public void onTrackLimitationNotice(int numberOfLimitedStatuses) {
    //  System.out.println("Got track limitation notice:" + numberOfLimitedStatuses);
  }
  public void onScrubGeo(long userId, long upToStatusId) {
    System.out.println("Got scrub_geo event userId:" + userId + " upToStatusId:" + upToStatusId);
  }

  public void onException(Exception ex) {
    ex.printStackTrace();
  }
  public void onStallWarning(StallWarning warning){

  }

};

This line isn't coming up with any errors:

status.getUser().getBiggerProfileImageURL();

I've been looking at forums for hours trying everything I can find, and after that I have these two lines:

    ImageIcon image = new ImageIcon(url);
    Jlabel1.setIcon(img);

Firstly it says "cannot find anything named "url". Then for the second line it says "Cannot find anything named "jlabel1". Am I missing a library or something?

Thank you so much - I know I'm probably making a very simple obvious mistake here.

I have incorporated a fade so when I click on an image in my grid the current image sequence displayed in the viewing area fades out and the new content fades in. This fade occurs only on the viewing area section (called as 'area' below).

I have been wanting to add some filters to my program to add other effects however when I go though the same process to apply a filter as I did with the fade the filter shows up on the grid of images as well as the viewing area.

Here is a simplified version of my program.

void draw() {
  for (int grid =0; grid<content.length; grid++) {
  tint(255);
  content[grid].display();
  if (content[grid].clicked) {
  img=grid;
  alpha = 0;
}
 area[img].display(alpha, Slider);
} 
 pushMatrix();
 if (alpha<255) {
 alpha += 10;
 } else {
 alpha = 0;
 }
 popMatrix();
 }

And here is the display part of my viewer class (called as area above).

  void display(float alpha) {
  currentFrame = (currentFrame+1) % numFrames;
  tint(255, alpha);
  image(viewImages[(currentFrame) % numFrames], 504, 0);
  filter(POSTERIZE, Slider);
}

I have resolved my issue of the filter showing up on the grid as well as the viewing area by changing this line "filter(POSTERIZE, 4);" with "viewImages[(currentFrame) % numFrames].filter(POSTERIZE, Slider);"

However now I am not calling image before view images. Therefore if the value of Slider changes it it not updated because I am not calling image again.

Is there a way to update the value of Slider even if I am still on the same image sequence?

Thanks.

Could you help me, or redirected me to another discuss? i'm really lost...

Thanks!!

import processing.video.*; import controlP5.*;

Capture cam;

ControlP5 cp5; Slider abc;

float threshold = 75;

PImage destination;

int width_px = 320; int height_px = 240; int frame = 25;

int margin = 0; int margin_left = 60;

void setup() { size(200, height_px); noStroke(); cam = new Capture(this, width_px, height_px, frame); cam.start(); destination = createImage(cam.width, cam.height, RGB);

cp5 = new ControlP5(this);

// add a vertical slider cp5.addSlider("threshold") .setPosition(0,0) .setSize(200,15) .setRange(0,200) .setValue(128) ; }

void draw() { if(cam.available()) { cam.read(); } cam.loadPixels(); //image(cam, -margin_left ,margin); destination.loadPixels();

for (int x = 0; x < cam.width; x++) {
for (int y = 0; y < cam.height; y++ ) {
  int loc = x + y*cam.width;
  // Test the brightness against the threshold
  if (brightness(cam.pixels[loc]) > threshold) {
    destination.pixels[loc]  = color(255);  // White
  }  else {
    destination.pixels[loc]  = color(0);    // Black
  }
}

}

// We changed the pixels in destination destination.updatePixels(); // Display the destination image(destination,-margin_left,margin);

if ( keyPressed ) { saveFrame("knit-####.png"); } }

void slider(float theThreshold) { threshold = theThreshold; //println("setting threshold to "+theColor); }

I hope this post isn't too specific.

I am creating a simple application which consists of a Classic car album where the user can flip through various pages. However I am not sure what is the best and easiest way to display pictures of various size neatly on the sketch, one next to each other, similar to for example Google Image search results as shown below:

Can someone recommend how this may be done or whether there exists any tools that can facilitate this task? I was thinking of splitting the sketch in equal grids and scaling each image to fit exactly in each box. However I am not sure if this is the best way to do it.

Any recommendations will be greatly appreciated!

I found some codes online to use the arduino uno and processing to transfer one image through the Arduino serial port (TX and RX). I need to transfer 6 images. How can i modify the processing code or arduino code to be able to transfer all images one after the other. Example: transfer image 1, then 2 etc.

Below is the Arduinocode:

     #include <SD.h>   

     File photoFile;   



     void setup(){   

      Serial.begin(115200);   



      //Serial.println("initializing sd card");   
      pinMode(10,OUTPUT);     // CS pin of SD Card Shield   

      if (!SD.begin(10)) {   
       Serial.print("sd initialzation failed");   
       return;   
      }   

     }   


     void loop(){   

      while(1){   

       Serial.flush();     




         File photoFile = SD.open("IMAGE09.jpg");   

         if (photoFile) {   
          while (photoFile.position() < photoFile.size()) {   


           Serial.write(photoFile.read());   
          }   

          photoFile.close();   

         }    

         else {   
          Serial.println("error sending photo");   
         }         
        }   

       }   
      }   

PROCESSING CODE: // READ: Upload arduino code then processing.File //will be created in processiong library under my documets // //image will begin to transfer. . Click on //the grey processing box AFTER complete imgae size // has been reached... and press any button. //Image should have transferred.Click stop.

import processing.serial.*;  

Serial myPort;

OutputStream output;  
//OutputStream output2;

void setup() 
{  

  size(320, 240);  

  //println( Serial.list() );  
  myPort = new Serial( this, Serial.list()[0], 115200);  
  myPort.clear();  
  output = createOutput("IMAGE09.jpg");

}  


void draw() 
{  

  try {   
    while ( myPort.available () > 0 ) 
    {  
      output.write(myPort.read());
    }
  }   
  catch (IOException e) {  
    e.printStackTrace();
  }
}  


void keyPressed()
{  
  try 
  {   
    output.flush(); // Writes the remaining data to the file 
    output.close();  // Finishes the file 
  }   

  catch (IOException e)
  {  
    e.printStackTrace();
  }
}    

1. I want to create a loop constantly displaying random images from a folder, one by one, one image on top of another.

2. All of them should be displayed inside of one unchanged ellipse.

3. The constant reappearance of new images should be stopped when mouse is clicked. For that moment you would see the last image that appeared before you clicked. When you stop pressing the mouse button, the random image display would continue.

Here is what I've found to make the mask for an ellipse, but that is just one checkpoint. I still have no idea how to create that 'image lottery'.

        PGraphics mask;
        PImage img;    

        void setup() {    
          img=loadImage("0.jpg");    
          img.resize(1000,0);    
            size(img.width,img.height);    
           background(40);    
          mask=createGraphics(width,height);//draw the mask object    
          mask.beginDraw();    
          mask.background(0);//background color to target    
          mask.fill(255);    
          mask.ellipse(width/2,height/2,500,500);    
          mask.endDraw();      
          img.mask(mask);     
         image(img,0,0);
        }

I will love you endlessly for your help!

Is there a way I can automatically set the size of the application window based on the background image W and H?

FYI, background is a PShape stored in an SVG file.

I truly appreciate your help!

Puzzle code: http://www.openprocessing.org/sketch/74233