Project approach (height map from image)

[glv]

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:

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!

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

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

Reference:

• texture() / Reference / Processing.org
• textureMode() / Reference / Processing.org
• get() / Reference / Processing.org

:)