# Export PImage file to JSON

**URL:** <https://discourse.processing.org/t/export-pimage-file-to-json/45321>\
**Category:** Libraries\
**Created:** [November 11, 2024, 7:48pm UTC](https://discourse.processing.org/t/export-pimage-file-to-json/45321 "2024-11-11T19:48:08Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![edugimeno](https://avatars.discourse-cdn.com/v4/letter/e/9fc29f/32.png) [@edugimeno](https://discourse.processing.org/u/edugimeno)\
**Post date:** [November 11, 2024, 7:48pm UTC](https://discourse.processing.org/t/export-pimage-file-to-json/45321/1 "2024-11-11T19:48:08Z")

</div>

Hi! I have a short sketch that reads the input from a kinect file, calculates colors, and prints out the resulting array on screen. All information is saved on a PImage file type. It’s pretty small as the resolution of the kinect is only 320x240 pixels  
I would like to save this PImage to a file and maybe json is a nice file format, but I can’t find the code for this. I’ve seen code for saving a JsonObject but my PImage is not that file type.  
Any ideas on how can I do it?  
Thanks!

---

<div class="post-metadata">

**Author:** ![eightohnine](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eightohnine/32/19793_2.png) [@eightohnine](https://discourse.processing.org/u/eightohnine)\
**Post date:** [November 11, 2024, 8:19pm UTC](https://discourse.processing.org/t/export-pimage-file-to-json/45321/2 "2024-11-11T20:19:51Z")

</div>

Maybe I’m misunderstanding your intentions here, but why not just [save the PImage as an image](https://processing.org/reference/save_.html)?

What information are you after (and how are you intending to further use it)? The pixels that make up an image? Or some quantitative information extracted from all the color values?

---

<div class="post-metadata">

**Author:** ![edugimeno](https://avatars.discourse-cdn.com/v4/letter/e/9fc29f/32.png) [@edugimeno](https://discourse.processing.org/u/edugimeno)\
**Post date:** [November 11, 2024, 8:50pm UTC](https://discourse.processing.org/t/export-pimage-file-to-json/45321/3 "2024-11-11T20:50:48Z")

</div>

It’s not your fault, I failed to provide some information.  
Each pixel on this image actually stores a z-axis depth, the Kinect sensor gives out distance for each X-Y pixel and it is stored in the Image array. I updatePixels with a color that depends on the depth of the pixel, so it’s like a colored depth map.  
The goal of the file is to keep a record of the measured image, but not as a displayable image, but as a file that holds each height for every pixel. Im not sure yet how I will process the file afterwards, and we may not get involved in that stage, as this is an R&D project. For now I need to export the heights file to some format I create.  
I thought of a JSON file as it is an open file type that can be processed by all programming languages directly  
Thanks

---

<div class="post-metadata">

**Author:** ![eightohnine](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eightohnine/32/19793_2.png) [@eightohnine](https://discourse.processing.org/u/eightohnine)\
**Post date:** [November 11, 2024, 9:32pm UTC](https://discourse.processing.org/t/export-pimage-file-to-json/45321/4 "2024-11-11T21:32:32Z")

</div>

Ah, yes, the hint was in “Kinect”. That’s all about depth information.  
I’m not very knowledgeable on JsonObjects, but I believe it indeed reasonable to use those.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 12, 2024, 11:45am UTC](https://discourse.processing.org/t/export-pimage-file-to-json/45321/5 "2024-11-12T11:45:06Z")

</div>

Hello @edugimeno,

You can certainly save as a PNG (not a lossy algorithm) and extract the data.  
Don’t save as a JPG which is a lossy algorithm!

Example:

```auto
/*
 Project: Save data in a PNG
 Author: GLV
 Date: 2024-11-12
 Version: 1.0.0
*/

// Reference:
// https://stackoverflow.com/questions/13162839/kinect-depth-image

PImage kin = createImage(320, 240, RGB);

int cols = 320;
int rows = 240;

size(400, 400, P3D);
background(255);

float angleY = TAU/90;
float angleX = TAU/90;

kin.loadPixels();

for (int y = 0; y< rows; y++)
  {
  for (int x = 0; x < cols; x++)
    {
    int loc = x + y*cols;
    float z1 = sin(x*angleX) + sin(y*angleY); // Range is -2, 2
    int data = (int) map(z1, -2, 2, 0, 2047);
    kin.pixels[loc] = data;
    }
  }

kin.save("data.png");

PImage data = loadImage("data.png");

//image(data, 0, 0); // If you really want to "see" it!

lights();
translate(width/2, height/2, -150);
rotateX(TAU/8);

for (int y = 0; y< data.height; y+=10)
  {
  for (int x = 0; x < data.width; x+=10)
    {
    int loc = x + y*data.width;
    
    //stroke(255, 0, 0);
    //strokeWeight(5);
    //point (x-160, y-100, kin.pixels[loc]/20+20);

    pushMatrix();
    translate(x-160, y-100+40, (kin.pixels[loc]/20)/2);
    //noStroke();
    fill(128, 255, 0);
    box(10, 10, kin.pixels[loc]/20);
    popMatrix();
    }
  }

```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/e/1/e10dfc28d0e409df433ac91b053af76686a5ac9e.png)

Or save and load as a data file with:

> **[saveBytes() / Reference](https://processing.org/reference/savebytes_)**
>
> As the opposite of loadBytes(), this function will write an entire array of bytes to a file. The data is saved in binary format. This file is saved to the sketch's folder, which is opened by se…

> **[loadBytes() / Reference](https://processing.org/reference/loadbytes_)**
>
> Reads the contents of a file and places it in a byte array. If the name of the file is used as the parameter, as in the above example, the file must be loaded in the sketch's "data" directory/folder. …

I used this for the data:  
_[3D Mesh of Sine Waves from Coding Challenge](https://discourse.processing.org/t/3d-mesh-of-sine-waves-from-coding-challenge/22806)_

`:)`

---

<div class="post-metadata">

**Author:** ![edugimeno](https://avatars.discourse-cdn.com/v4/letter/e/9fc29f/32.png) [@edugimeno](https://discourse.processing.org/u/edugimeno)\
**Post date:** [November 12, 2024, 2:48pm UTC](https://discourse.processing.org/t/export-pimage-file-to-json/45321/6 "2024-11-12T14:48:31Z")

</div>

Awesome! So the first example kind of renders the depth array as a 3D image?? That’s great!!  
Ok I will explore all the suggested options!  
Thanks!!

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 20, 2024, 1:32am UTC](https://discourse.processing.org/t/export-pimage-file-to-json/45321/7 "2024-11-20T01:32:51Z")

</div>

> [@edugimeno](#):
>
> Awesome! So the first example kind of renders the depth array as a 3D image??

That it does!

I stored the data in a PNG and retrieved it, processed it (with Processing!) and displayed it!

Once you get the data to Processing you can visualize any way you can imagine:  
_[Processing + Arduino Force Sensor Visualizing - #3 by glv](https://discourse.processing.org/t/processing-arduino-force-sensor-visualizing/30459/3)_

`:)`