When I write down the image as a parameter it all goesa black any help ?

Was hoping anybody here could help me with this... For a project I want to pack data into a texture and use it in a fragment shader because it can potentially be a lot of data. Thing is... I need the data as floats in my shader code but I can't seem to get it right.

I wrote a little test case below which illustrates my problem. The goal of this sketch is to make the left half of the screen white and the right half of the screen black. That would be the case if the data passed via the texture would be interpreted correctly.

Tried a lot of methods to pack/unpack data, but I'm thinking I got it wrong on the processing side of things. I also noticed that when using println(pixels[0]), the value that gets printed is NOT the same as Float.floatToIntBits gives... so something get's changed.

Anyway, if anybody knows the correct way of passing float values to a shader via a texture and unpacking them from vec4 to float I would be really grateful. Thanks!

Processing sketch:

PShader shader;
PImage sampler;

void setup() {
  size(1280, 720, P2D);

  shader = loadShader("shader.glsl"); 
  shader.set("resolution",1280,720);

  // no texture interpolation
  ((PGraphicsOpenGL)g).textureSampling(3);

  sampler = createImage(2,1,ARGB);   
  sampler.loadPixels();
  sampler.pixels[0]=Float.floatToIntBits(5); // left half of screen < 1
  sampler.pixels[1]=Float.floatToIntBits(15); // right half of screen > 10
  sampler.updatePixels();

  shader.set("sampler",sampler);
}

void draw() {
  filter(shader);
}

Shader code:

                uniform sampler2D sampler;
                uniform vec2 resolution;

                const vec4 bitEnc = vec4(1.,255.,65025.,16581375.);
                const vec4 bitDec = 1./bitEnc;

                float DecodeFloatRGBA (vec4 v) {
                    return dot(v, bitDec);
                }

                void main(){
                  vec4 test = texture2D(sampler,gl_FragCoord.xy/resolution);
                  float testfloat = DecodeFloatRGBA(test);

                  if (testfloat<10){
                    gl_FragColor=vec4(0,0,0,1);
                  }
                  else{
                    gl_FragColor=vec4(1,1,1,1);
                  }
                }

I feel like I'm close but I'm not getting any results.

I have simplified my code and commented the lines that I'm having trouble with.

int y= 1;
PImage tempBuffer;
PGraphics offScreenBuffer;


void setup() {
  size(1280,720);
  offScreenBuffer = createGraphics(16, 9); 
  stroke(255);

}

void draw() {

background (0);
offScreenBuffer.beginDraw();

fill (255,0,0,255);
rect (0,y,1280,80);
y=(y+2) % 720;
loadPixels();


tempBuffer = get(0,0,1280,720); // copy screen to temp buffer
offScreenBuffer.image(tempBuffer, 0, 0,16,9); // copy temp to offscreen and scale to 16x9
offScreenBuffer.copy(0,0,16,9,0,0,160,90); // copy back to the top corner for debug

offScreenBuffer.endDraw();

noFill();
rect(0,0,160,90); // stroke for debug
}

import processing.video.*;

Capture video;

PImage prevFrame;

float threshold = 50;

void setup() {
  size(600,400);
  video = new Capture(this, 640, 480,30);
  video.start();
  ps = new ParticleSystem(new PVector(width/2, 50));
  prevFrame = createImage(video.width, video.height, RGB);
}

void captureEvent(Capture video) {
  prevFrame.copy(video, 0, 0, video.width, video.height, 0, 0, video.width, video.height);
  prevFrame.updatePixels();
  video.read();
}

void draw() {
  background(0);
  image(video, 0, 0);
  ps.addParticle();
  ps.run();
  loadPixels();
  video.loadPixels();
  prevFrame.loadPixels();

  float sumX = 0;
  float sumY = 0;
  int motionCount = 0;

  for (int x = 0; x < video.width; x++ ) {
    for (int y = 0; y < video.height; y++ ) {
      color current = video.pixels[x+y*video.width];

      color previous = prevFrame.pixels[x+y*video.width];

      float r1 = red(current);
      float g1 = green(current);
      float b1 = blue(current);
      float r2 = red(previous); 
      float g2 = green(previous);
      float b2 = blue(previous);

      float diff = dist(r1, g1, b1, r2, g2, b2);

      if (diff > threshold){
        sumX += x;
        sumY += y;
        motionCount ++;
      }
    }
  }

  float avgX = sumX / motionCount;
  float avgY = sumY / motionCount;


  smooth();
  noStroke();
  fill(0);
  ellipse(avgX, avgY, 16, 16);
}

  ParticleSystem ps;


class ParticleSystem {
  ArrayList<Particle> particles;
  PVector origin;

  ParticleSystem(PVector position) {
    origin = position.copy();
    particles = new ArrayList<Particle>();
  }

  void addParticle() {
    particles.add(new Particle(origin));
  }

  void run() {
    for (int i = particles.size()-1; i >= 0; i--) {
      Particle p = particles.get(i);
      p.run();
      if (p.isDead()) {
        particles.remove(i);
      }
    }
  }
}

class Particle {
  PVector position;
  PVector velocity;
  PVector acceleration;
  float lifespan;

  Particle(PVector l) {
    acceleration = new PVector(0, 0.05);
    velocity = new PVector(random(-1, 1), random(-2, 0));
    position = l.copy();
    lifespan = 255.0;
  }

  void run() {
    update();
    display();
  }

  void update() {
    velocity.add(acceleration);
    position.add(velocity);
    lifespan -= 1.0;
  }

  void display() {
    stroke(255, lifespan);
    fill(255, lifespan);
    ellipse(avgX, avgY, 8, 8);
  }

  boolean isDead() {
    if (lifespan < 0.0) {
      return true;
    } else {
      return false;
    }
  }
}

I have two pieces of code with one being able to detect motion and place a dot where it is detected and the other is a particle system and I am trying to place the particle system where movement is detected but I am unsure as to why it is not working, any help is appreciated!

Here's an example of how I'm using the methods:

var img = createImage(width, height); img.save("test", "png"); // or this save(img, "test.png");

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?

var api = "https://" + "api.flickr.com/services/rest/?method=flickr.photos.search";
var apiKey = "&api_key=a0dd883dc062aadeaec4addb5211da7f";

var tag = "planet"

var query = "&per_page=500&tags=" + tag + "&is_commons=true&format=json&nojsoncallback=1";

var i = 14;

var imgurl;
var img;

function preload() {
 var url = api + apiKey + query;

 loadJSON(url, gotData);


}

function setup() {
 createCanvas(300, 300);
 pixelDensity(1);


}

function gotData(data, imgurl) {

 var farmid = data.photos.photo[i].farm;
 var serverid = data.photos.photo[i].server;
 var id = data.photos.photo[i].id;
 var secret = data.photos.photo[i].secret;

 imgurl = "farm" + farmid + ".staticflickr.com/" + serverid + "/" + id + "_" + secret + ".jpg";

}

function draw() {
img = createImage(imgurl);
image(img,0,0);

}

thank you

import processing.sound.*; import processing.video.*; SoundFile file;

Capture webcam; PImage image = createImage(66, 66, RGB); long lastTime; int currentImage; int x = 0; PImage[] images = new PImage[36];

void setup(){ fullScreen(); // file = new SoundFile(this, "sample.mp3"); // file.play(); webcam = new Capture( this, width, height ); image(image, 0, 0, width, height); webcam.start(); lastTime = millis(); currentImage = 0; for ( int i = 0; i< images.length; i++ ){
images[i] = createImage( 150, 150, RGB ); } }

void draw(){ if( webcam.available() == true ){ webcam.read(); if( millis() - lastTime >= 800 ){ lastTime = millis(); println( "CAPTURE ", millis() ); if( currentImage <= 35){ images[currentImage].copy( webcam, 0, 0, webcam.width, webcam.height, 0, 0, images[currentImage].width, images[currentImage].height ); currentImage = currentImage + 1; //currentImage = 0; } println( currentImage + 1); } for(int i = 0; i < 6; i++ ) { for(int j = 0; j < 6; j++ ) { image(images[j + i6], 150j, 150*i ); } } if (x < 100) { line(x, 0, x, 100); x = x + 1; } //void mousePressed() { // if (mouseButton == LEFT) { // webcam.start(); // } else if (mouseButton == RIGHT) { // webcam.stop(); // } //if (mousePressed && (mouseButton == LEFT)) { //webcam.start(); }// else if (mousePressed && (mouseButton == RIGHT)) { // webcam.stop(); //} //} }

I am trying to use PImage to set the pixels of an image from a series of bytes that I have stored in a .txt file which I am importing using readBytes, but I am a bit confused about the loops and I must be doing something wrong because the image does not update and the program does not get out of the loop.

Help would be much appriciated! Thanks!

Here is the relevant code:

    PImage finger;
    boolean photoRead = false;

    void setup(){
      size(600,600);
      finger = loadImage("fingerimage.png");
    }

    void draw(){
      if(photoRead == false){
        // Open a file and read its binary data 
        byte b[] = loadBytes("fingerprint.txt"); 
        // Print each value, from 0 to 255 
        for (int i = 0; i < b.length; i++) { 
          // Every 258th number, start a new line 
          if ((i % 258) == 0) { 
            println();
          } 
          // bytes are from -128 to 127, this converts to 0 to 255 
          int a = b[i] & 0xff; 
          int dimension = finger.width * finger.height;
          finger.loadPixels();
          for (int j = 0; j < dimension; j += 1) { 
            finger.pixels[j] = color(a);
          }
          // Print a blank line at the end 
          finger.updatePixels();
          photoRead = true;
        }
      }
   }

//code to get Degree of Redness
import processing.video.*;
Capture cam; 
PImage img,imDeg,imThresh;
void setup()
 {
  imDeg=createImage(320,240,GRAY);
  imThresh=createImage(320,240,GRAY);
  size(640, 480);
  String [] cameras=cam.list();
  cam = new Capture(this,320,240,cameras[0]);
  cam.start(); 
} 

void DegreeRed()
{
  img.loadPixels();
  imDeg.loadPixels();
  for(int x=0;x<320;x++)
  {
    for(int y=0;y<240;y++)
    {

      //location of pixel
      int loc=x*240+y;

      //get RGB values
      float r1=red(img.pixels[loc]);
      float g1=green(img.pixels[loc]);
      float b1=blue(img.pixels[loc]);

      //Degree of Redness
      float r=r1-(g1+b1);
      float g=r1-g1;
      float b=r1-b1;
      if(r<0) r=0;
      if(g<0) g=0;
      if(b<0) b=0;
      float Dr=r+g+b;
      imDeg.pixels[loc]=int(Dr);
    }
  }
  imDeg.updatePixels();
}

void draw() 
{
  scale(2);
  if (cam.available()) { 
    // Reads the new frame
    cam.read(); 
  }
  img=cam;
  DegreeRed();
  //Thresh();
  image(imDeg, 0, 0); 
}

I'm continuously taking images from a camera and passing it through this function and printing the resulting imDeg image on the screen. But the image always appears empty. Thank You for your help.

Currently the html code loads an image to the screen but then p5 cannot read the value of the pixel of the loaded image (I believe because they are being drawn to separate frames/canvases ?) It is correctly reading colour of pixels of things drawn in the sketch.js file (below this is shown with a test shape - a red circle)

Thanks for the help. Code below...

index.html

  
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render image.
          var span = document.createElement('span');
          span.innerHTML = ['img src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);


  
  
   body {padding: 0; margin: 0;} 

sketch.js

function setup(){
  colorMode(RGB, height, height, height);
  createCanvas(1024, 768);

}

function draw() {
  // put drawing code here
  fill("red");
  ellipse(50, 50, 80, 80); // putting something on the sketch canvas
}

function mouseMoved(){
    var color_under_mouse = get(mouseX, mouseY);
    println(mouseX);
    println(mouseY);
    println(color_under_mouse);
}

PImage blurImg = createImage(img2.width, img2.height, RGB);

//Loop through every pixel in the image  
  for (int y = 1; y < img2.height-1; y++) {   // Skip top and bottom edges
  for (int x = 1; x < img2.width-1; x++) {  // Skip left and right edges

    int loc = x + (y*img2.width); // Current pixel location
    float sumr = 0; // Kernel sum for this pixel 
    float sumg = 0;
    float sumb = 0;
    for (int ky = -1; ky <= 1; ky++) {
    for (int kx = -1; kx <= 1; kx++) {

// Calculate the adjacent pixel for this kernel point
   int pos = (y + ky)*img2.width + (x + kx);

// Image is grayscale, red/green/blue are identical
   float valr = red(img2.pixels[pos]);
   float valg = green(img2.pixels[pos]);
   float valb = blue(img2.pixels[pos]);

// Multiply adjacent pixels based on the kernel values
   sumr += kernel[ky+1][kx+1] * valr;
   sumg += kernel[ky+1][kx+1] * valg;
   sumb += kernel[ky+1][kx+1] * valb;
 }
}

// For this pixel in the new image, set the gray value
// based on the sum from the kernel
   blurImg.pixels[y*img2.width + x] = color(sumr,sumg,sumb);
    }
  }

// State that there are changes to blurImg.pixels[]
  blurImg.updatePixels();

  image(blurImg, 0, 0); //Blur image

    }

I'm very new to this, so sorry if its unclear.. Thank you!

I would like that someone explain me this code cuz i don't understand what's correspond of sumr, why a ' k ' .... Thx to reply me