# Project approach (height map from image)

**URL:** <https://discourse.processing.org/t/project-approach-height-map-from-image/44281>\
**Category:** Libraries\
**Tags:** homework\
**Created:** [April 15, 2024, 10:52am UTC](https://discourse.processing.org/t/project-approach-height-map-from-image/44281 "2024-04-15T10:52:33Z")\
**Posts on this page:** 1\
**Showing post:** 4

<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:** [April 16, 2024, 12:31am UTC](https://discourse.processing.org/t/project-approach-height-map-from-image/44281/4 "2024-04-16T00:31:36Z")

</div>

Hello @Qprocessing ,

Try creating tiles with just QUADS and then later you can `fill()` or `texture()` them.  
Focus on the QUAD vertices first! Then try `fill()` and then `texture()`.  
Once you master this then consider more advance methods.

Example:

```auto
PImage img;

void setup() 
  {
  size(800, 600, P3D);
  img = loadImage("http://learningprocessing.com/code/assets/sunflower.jpg"); 
  img.resize(500, 500);
  textureMode(NORMAL);
  }

void draw() 
  {
  background(255);

  noFill();
  translate(width/2, height/2-50);
  rotateX(PI/4);
  
  int xo = img.width/2;
  int yo = img.height/2;
  float s = 3;
  
  int iw = img.width;
  
  for (int y = 0; y < img.height-10; y+=10) 
    {
    for (int x = 0; x < img.width-10; x+=10) 
      {   
      PImage im = img.get(x, y, 8, 8); // I made it 8 instead of 10 to see the 8x8!
      image(im, x-xo, y-yo); // Use later in your texture
      
      // You will need to provide the correct vertices.
      //beginShape(QUADS);
      //texture(im);
      //vertex(x, y, x, u, v);
      //vertex(x, y, x, u, v);
      //vertex(x, y, x, u, v);
      //vertex(x, y, x, u, v);
      //endShape();
      }  
    }
  }

```

You will have to complete:

- 4 vertices for the QUAD using x, x+10, y, y+10
- correct u and v coordinates for each vertex; see order in reference
- z is the brightness of each corner of the QUAD

Build on what you have already done!

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/f/6/f6b1077565a0abfe4adfbad6923a66f38dda1449.jpeg)

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

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/1/019efdf9e6f497f4eb8bd4723e93b65e40812ac5.jpeg)

You can also` fill()` a QUAD shape with a color! A bit _blocky_.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/9/39948ad1143eb757980ccb320cf785ea303e64db.png)

You can also `fill()` each vertex with a color for nice gradients!  
I used the same `fill()` as I used for the z component of the vertex.  
_['Rotate' gradient background - #6 by glv](https://discourse.processing.org/t/rotate-gradient-background/39989/6)_

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/9/a9d2e70143564b49b20e595b3d066fe1adb63bbe.jpeg)

Reference:

- [texture() / Reference / Processing.org](https://processing.org/reference/texture_.html)
- [textureMode() / Reference / Processing.org](https://processing.org/reference/textureMode_.html)
- [get() / Reference / Processing.org](https://processing.org/reference/PImage_get_.html)

`:)`

---

_[View the full topic](https://discourse.processing.org/t/project-approach-height-map-from-image/44281)._