Two squares/cubes (basic question OpenGL 3.x LWJGL)

Hello.
I hava basic qiestion how to display two squares?
Based on this tutorial
http://lwjgl.org/wiki/index.php?title=The_Quad_interleaved
I know how to display square even cube but I don’t know how to display two square (or cube).
I was thinking that I need only to set vertices
e.g.


float[] vertices = { 
				-0.2f,  0.2f, 0f, 1f, 
				-0.2f, -0.2f, 0f, 1f, 
				 0.2f, -0.2f, 0f, 1f, 
				 0.2f, 0.2f, 0f, 1f,
				 
				 0.3f,  0.2f, 0f, 1f, 
				 0.3f, -0.2f, 0f, 1f, 
				 0.6f, -0.2f, 0f, 1f, 
				 0.6f, 0.2f, 0f, 1f};

and colors:


float[] colors = { 
				1f, 0f, 0f, 1f, 
				0f, 1f, 0f, 1f, 
				0f, 0f, 1f, 1f, 
				1f,	1f, 1f, 1f,
				
				1f, 0f, 0f, 1f, 
				0f, 1f, 0f, 1f, 
				0f, 0f, 1f, 1f, 
				1f,	1f, 1f, 1f
				};

but it doesn’t work the second square does not appear.
Do I need to do something else with indices array?
How to tell OpenGL that after drawing first square move on this position and draw another square.

Here is my whole code


package com.opengl3.tutorial.frame;

import java.io.BufferedReader;
import java.io.FileReader;
import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.FloatBuffer;

import org.lwjgl.BufferUtils;
import org.lwjgl.LWJGLException;
import org.lwjgl.opengl.ContextAttribs;
import org.lwjgl.opengl.Display;
import org.lwjgl.opengl.DisplayMode;
import org.lwjgl.opengl.GL11;
import org.lwjgl.opengl.GL15;
import org.lwjgl.opengl.GL20;
import org.lwjgl.opengl.GL30;
import org.lwjgl.opengl.PixelFormat;
import org.lwjgl.util.glu.GLU;

public class TheQuadExampleColored {
	// Entry point for the application
	public static void main(String[] args) {
		new TheQuadExampleColored();
	}

	// Setup variables
	private final String WINDOW_TITLE = "The Quad: colored";
	private final int WIDTH = 800;
	private final int HEIGHT = 600;
	// Quad variables
	private int vaoId = 0;
	private int vboId = 0;
	private int vbocId = 0;
	private int vboiId = 0;
	private int indicesCount = 0;
	// Shader variables
	private int vsId = 0;
	private int fsId = 0;
	private int pId = 0;

	public TheQuadExampleColored() {
		// Initialize OpenGL (Display)
		this.setupOpenGL();

		this.setupQuad();
		this.setupShaders();

		while (!Display.isCloseRequested()) {
			// Do a single loop (logic/render)
			this.loopCycle();

			// Force a maximum FPS of about 60
			Display.sync(60);
			// Let the CPU synchronize with the GPU if GPU is tagging behind
			Display.update();
		}

		// Destroy OpenGL (Display)
		this.destroyOpenGL();
	}

	public void setupOpenGL() {
		// Setup an OpenGL context with API version 3.2
		try {
			PixelFormat pixelFormat = new PixelFormat();
			ContextAttribs contextAtrributes = new ContextAttribs(3, 2);
			contextAtrributes.withForwardCompatible(true);
			contextAtrributes.withProfileCore(true);

			Display.setDisplayMode(new DisplayMode(WIDTH, HEIGHT));
			Display.setTitle(WINDOW_TITLE);
			Display.create(pixelFormat, contextAtrributes);

			GL11.glViewport(0, 0, WIDTH, HEIGHT);
		} catch (LWJGLException e) {
			e.printStackTrace();
			System.exit(-1);
		}

		// Setup an XNA like background color
		GL11.glClearColor(0.4f, 0.6f, 0.9f, 0f);

		// Map the internal OpenGL coordinate system to the entire screen
		GL11.glViewport(0, 0, WIDTH, HEIGHT);
	}

	public void setupQuad() {
		// Vertices, the order is not important. XYZW instead of XYZ
		float[] vertices = { 
				-0.2f,  0.2f, 0f, 1f, 
				-0.2f, -0.2f, 0f, 1f, 
				 0.2f, -0.2f, 0f, 1f, 
				 0.2f, 0.2f, 0f, 1f,
				 
				 0.3f,  0.2f, 0f, 1f, 
				 0.3f, -0.2f, 0f, 1f, 
				 0.6f, -0.2f, 0f, 1f, 
				 0.6f, 0.2f, 0f, 1f};
		FloatBuffer verticesBuffer = BufferUtils
				.createFloatBuffer(vertices.length);
		verticesBuffer.put(vertices);
		verticesBuffer.flip();

		float[] colors = { 
				1f, 0f, 0f, 1f, 
				0f, 1f, 0f, 1f, 
				0f, 0f, 1f, 1f, 
				1f,	1f, 1f, 1f,
				
				1f, 0f, 0f, 1f, 
				0f, 1f, 0f, 1f, 
				0f, 0f, 1f, 1f, 
				1f,	1f, 1f, 1f
				};
		FloatBuffer colorsBuffer = BufferUtils.createFloatBuffer(colors.length);
		colorsBuffer.put(colors);
		colorsBuffer.flip();

		// OpenGL expects to draw vertices in counter clockwise order by default
		byte[] indices = {
				0, 1, 2,
				2, 3, 0,
				
				
		};
		indicesCount = indices.length;
		ByteBuffer indicesBuffer = BufferUtils.createByteBuffer(indicesCount);
		indicesBuffer.put(indices);
		indicesBuffer.flip();

		// Create a new Vertex Array Object in memory and select it (bind)
		vaoId = GL30.glGenVertexArrays();
		GL30.glBindVertexArray(vaoId);

		// Create a new Vertex Buffer Object in memory and select it (bind) -
		// VERTICES
		vboId = GL15.glGenBuffers();
		GL15.glBindBuffer(GL15.GL_ARRAY_BUFFER, vboId);
		GL15.glBufferData(GL15.GL_ARRAY_BUFFER, colorsBuffer,GL15.GL_STATIC_DRAW);
		GL20.glVertexAttribPointer(0, 4, GL11.GL_FLOAT, false, 0, 0);
		GL15.glBindBuffer(GL15.GL_ARRAY_BUFFER, 0);

		// Create a new VBO for the indices and select it (bind) - COLORS
		vbocId = GL15.glGenBuffers();
		GL15.glBindBuffer(GL15.GL_ARRAY_BUFFER, vbocId);
		GL15.glBufferData(GL15.GL_ARRAY_BUFFER, verticesBuffer,GL15.GL_STATIC_DRAW);
		GL20.glVertexAttribPointer(1, 4, GL11.GL_FLOAT, false, 0, 0);
		GL15.glBindBuffer(GL15.GL_ARRAY_BUFFER, 0);

		// Deselect (bind to 0) the VAO
		GL30.glBindVertexArray(0);

		// Create a new VBO for the indices and select it (bind) - INDICES
		vboiId = GL15.glGenBuffers();
		GL15.glBindBuffer(GL15.GL_ELEMENT_ARRAY_BUFFER, vboiId);
		GL15.glBufferData(GL15.GL_ELEMENT_ARRAY_BUFFER, indicesBuffer,GL15.GL_STATIC_DRAW);
		GL15.glBindBuffer(GL15.GL_ELEMENT_ARRAY_BUFFER, 0);
	}

	private void setupShaders() {
		int errorCheckValue = GL11.glGetError();

		// Load the vertex shader
		vsId = this.loadShader("src/com/opengl3/tutorial/frame/vertex.glsl", GL20.GL_VERTEX_SHADER);
		// Load the fragment shader
		fsId = this.loadShader("src/com/opengl3/tutorial/frame/fragment.glsl",GL20.GL_FRAGMENT_SHADER);

		// Create a new shader program that links both shaders
		pId = GL20.glCreateProgram();
		GL20.glAttachShader(pId, vsId);
		GL20.glAttachShader(pId, fsId);
		GL20.glLinkProgram(pId);

		// Position information will be attribute 0
		GL20.glBindAttribLocation(pId, 0, "in_Position");
		// Color information will be attribute 1
		GL20.glBindAttribLocation(pId, 1, "in_Color");

		GL20.glValidateProgram(pId);

		errorCheckValue = GL11.glGetError();
		if (errorCheckValue != GL11.GL_NO_ERROR) {
			System.out.println("ERROR - Could not create the shaders:"
					+ GLU.gluErrorString(errorCheckValue));
			System.exit(-1);
		}
	}

	public void loopCycle() {
		GL11.glClear(GL11.GL_COLOR_BUFFER_BIT);

		GL20.glUseProgram(pId);

		// Bind to the VAO that has all the information about the vertices
		GL30.glBindVertexArray(vaoId);
		GL20.glEnableVertexAttribArray(0);
		GL20.glEnableVertexAttribArray(1);

		// Bind to the index VBO that has all the information about the order of
		// the vertices
		GL15.glBindBuffer(GL15.GL_ELEMENT_ARRAY_BUFFER, vboiId);

		// Draw the vertices
		GL11.glDrawElements(GL11.GL_TRIANGLES, indicesCount,GL11.GL_UNSIGNED_BYTE, 0);

		// Put everything back to default (deselect)
		GL15.glBindBuffer(GL15.GL_ELEMENT_ARRAY_BUFFER, 0);
		GL20.glDisableVertexAttribArray(0);
		GL20.glDisableVertexAttribArray(1);
		GL30.glBindVertexArray(0);
		GL20.glUseProgram(0);
	}

	public void destroyOpenGL() {
		// Delete the shaders
		GL20.glUseProgram(0);
		GL20.glDetachShader(pId, vsId);
		GL20.glDetachShader(pId, fsId);

		GL20.glDeleteShader(vsId);
		GL20.glDeleteShader(fsId);
		GL20.glDeleteProgram(pId);

		// Select the VAO
		GL30.glBindVertexArray(vaoId);

		// Disable the VBO index from the VAO attributes list
		GL20.glDisableVertexAttribArray(0);
		GL20.glDisableVertexAttribArray(1);

		// Delete the vertex VBO
		GL15.glBindBuffer(GL15.GL_ARRAY_BUFFER, 0);
		GL15.glDeleteBuffers(vboId);

		// Delete the color VBO
		GL15.glBindBuffer(GL15.GL_ARRAY_BUFFER, 0);
		GL15.glDeleteBuffers(vbocId);

		// Delete the index VBO
		GL15.glBindBuffer(GL15.GL_ELEMENT_ARRAY_BUFFER, 0);
		GL15.glDeleteBuffers(vboiId);

		// Delete the VAO
		GL30.glBindVertexArray(0);
		GL30.glDeleteVertexArrays(vaoId);

		Display.destroy();
	}

	public int loadShader(String filename, int type) {
		StringBuilder shaderSource = new StringBuilder();
		int shaderID = 0;

		try {
			BufferedReader reader = new BufferedReader(new FileReader(filename));
			String line;
			while ((line = reader.readLine()) != null) {
				shaderSource.append(line).append("\n");
			}
			reader.close();
		} catch (IOException e) {
			System.err.println("Could not read file.");
			e.printStackTrace();
			System.exit(-1);
		}

		shaderID = GL20.glCreateShader(type);
		GL20.glShaderSource(shaderID, shaderSource);
		GL20.glCompileShader(shaderID);

		return shaderID;
	}
}

/////////////////////////////
#vertex.glsl

in vec4 in_Position;
in vec4 in_Color;

out vec4 pass_Color;

void main(void) {
	gl_Position = in_Position;
	pass_Color = in_Color;
}


/////////////////////
#fragment.glsl

in vec4 pass_Color;

out vec4 out_Color;

void main(void) {
	out_Color = pass_Color;
}


You need to add the other squares indices to your indices array.
The indices tells your vboi which of the vertices it should draw and what order to draw them in.

what do you mean other squares indices?
If you mean something like this


byte[] indices = {
				0, 1, 2,
				2, 3, 0,
				
				0, 1, 2,
				2, 3, 0,
		};

it doesn’t work.

I tested this before that’s why I asked.

Not quite, now you tell it to draw the same square twice.

Think of the vertices as if they are on a numbered list, the first 4 vertices in your vertices array are those of the first square.
The next 4 vertices are those of your second square.

So your indices should look something like this.


byte[] indices = {
            0, 1, 2,
            2, 3, 0,
            
            4, 5, 6,
            6, 7, 4,
      };

The indices simply tell the gpu which of the vertices you have sent it, it should draw, and what order to draw them in.
The advantage of this approach is that you don’t need to send the same vertex several times to join multiple triangles together.
As an example you only sent 4 vertices for each of the squares, but you need 6 to make a square by combining two triangles, but two of them is already on the same location.

Ok, true its working but when I want to draw cube I still have problem. My indices array If I’m not wrong should be


byte[] indices = {
				//FRONT
				0, 1, 2,
				2, 3, 0,
				//RIGHT
				0, 4, 7,
				7, 0, 3,
				//BACK
				4, 7, 6,
				6, 5, 4,
				//LEFT
				5, 6, 2,
				2, 1, 5,
				//TOP
				4, 0, 5,
				5, 0, 1,
				//BOTTOM
				7, 3, 6,
				6, 3, 2,
				
				
				//FRONT
				8, 9, 10,
				10, 11, 8,
				//RIGHT
				8, 12, 15,
				15, 8, 11,
				//BACK
				12, 15, 14,
				14, 13, 12,
				//LEFT
				13, 14, 10,
				10, 9, 13,
				//TOP
				12, 8, 13,
				13, 8, 9,
				//BOTTOM
				15, 11, 14,
				14, 11, 10
				
				
		};

where my vertices and colors array is


float[] vertices = CubeUtil.merge(CubeUtil.vertices(-1.5f,0.0f,0.0f,0.5f,0.5f,0.5f), CubeUtil.vertices(1.5f,0.0f,0.0f,0.5f,0.5f,0.5f));
float[] colors = CubeUtil.merge(CubeUtil.colors(), CubeUtil.colors());


....

/**
	 * @param x position on X axis
	 * @param y position on Y axis
	 * @param z position on z axis
	 * @param sizeX width
	 * @param sizeY height
	 * @param sizeZ length
	 */
	public static float[] vertices(float x, float y, float z, float sizeX, float sizeY, float sizeZ){
		float[] vertices = {
				//FRONT
				sizeX+x,   sizeY+y, sizeZ+z,
				-sizeX+x,  sizeY+y, sizeZ+z, 
				-sizeX+x, -sizeY+y, sizeZ+z, 
				sizeX+x,  -sizeY+y, sizeZ+z, 
				//BACK
				sizeX+x,   sizeY+y, -sizeZ+z, 
				-sizeX+x,  sizeY+y, -sizeZ+z,
				-sizeX+x, -sizeY+y, -sizeZ+z, 
				sizeX+x,  -sizeY+y, -sizeZ+z, 
				//LEFT
				-sizeX+x,  sizeY+y,  sizeZ+z, 
				-sizeX+x, -sizeY+y,  sizeZ+z, 
				-sizeX+x, -sizeY+y, -sizeZ+z, 
				-sizeX+x,  sizeY+y, -sizeZ+z,
				//RIGHT
				sizeX+x,  sizeY+y,  sizeZ+z, 
				sizeX+x, -sizeY+y,  sizeZ+z, 
				sizeX+x, -sizeY+y, -sizeZ+z, 
				sizeX+x,  sizeY+y, -sizeZ+z, 
				//TOP
				sizeX+x,  sizeY+y,  sizeZ+z, 
				-sizeX+x, sizeY+y,  sizeZ+z, 
				-sizeX+x, sizeY+y, -sizeZ+z, 
				sizeX+x,  sizeY+y, -sizeZ+z, 
				//BOTTOM
				sizeX+x, -sizeY+y,  sizeZ+z, 
				-sizeX+x, -sizeY+y,  sizeZ+z, 
				-sizeX+x, -sizeY+y,  -sizeZ+z, 
				sizeX+x, -sizeY+y,  -sizeZ+z 
		};
		return vertices;
	}

public static float[] merge(float[] a, float[] b) {
		int aLen = a.length;
		int bLen = b.length;
		float[] c = new float[aLen + bLen];
		System.arraycopy(a, 0, c, 0, aLen);
		System.arraycopy(b, 0, c, aLen, bLen);
		return c;
	}

public static float[] colors(){
		float[] colors = {
				0.583f,  0.771f,  0.014f,
				0.609f,  0.115f,  0.436f,
				0.327f,  0.483f,  0.844f,
				0.822f,  0.569f,  0.201f,
				
				0.435f,  0.602f,  0.223f,
				0.310f,  0.747f,  0.185f,
				0.597f,  0.770f,  0.761f,
				0.559f,  0.436f,  0.730f,
				
				0.359f,  0.583f,  0.152f,
				0.483f,  0.596f,  0.789f,
				0.559f,  0.861f,  0.639f,
				0.195f,  0.548f,  0.859f,
				
				0.014f,  0.184f,  0.576f,
				0.771f,  0.328f,  0.970f,
				0.406f,  0.615f,  0.116f,
				0.676f,  0.977f,  0.133f,
				
				0.971f,  0.572f,  0.833f,
				0.140f,  0.616f,  0.489f,
				0.997f,  0.513f,  0.064f,
				0.945f,  0.719f,  0.592f,
				
				0.543f,  0.021f,  0.978f,
				0.279f,  0.317f,  0.505f,
				0.167f,  0.620f,  0.077f,
				0.347f,  0.857f,  0.137f
		};
		return colors;
	}

You only have the vertices and colors for a single cube.
Ideally you could just draw the single cube twice and adjust its location with the model matrix.

Edit: Oh didn’t see you weren’t using matrices, maybe you should consider using some.

Hmmm… not quite function “CubeUtil.vertices” returns vertices for whole cube, function “CubeUtil.merge” marge
two array so in variable “vertices” i have two arrays. First param in “CubeUtil.vertices” sets cube on differents X axis positions (-1.5f and 1.5f). Same situation in colors array.
Or maybe there is some magic mistake which I don’t see.

Sounds interesting but I’m to new in OpenGL and I don’t know how to do this.
I’m really appreciate your help.

EDIT.
I started checking my code in indices and vertices functions and it looks like there is a bug in this functions.
Magn919 thanks for your help.