logo

About News Features Screenshots Download Contact FAQ Tutorials Project Page

Tutorial Section
Here you can learn how to do mostly everything with jackalberry.
#include "jackalberry.hpp"

int main()
{
	jackalberry gl;
	
	gl.window("A jackalberry window", 640, 480);

	int logo = gl.loadimage("jblogo.png", 190, 200);

	for (;;)
	{
		gl.msleep(100);
		gl.refresh();
	}

	return 0; // Control flow will never get here.
}
Tutorial 1 - Load Image

Compile and install GLFW, or just install the package with your package manager (apt, synaptic, etc)

How to set-up a window and load an image.

Compile with:

g++ helloworld.cpp -o helloworld -ffast-math -lglfw -lGL -lXrandr -lX11 -lGLU -pthread -lm -O4

or just use the script:

./jbcomp.sh helloworld 
#include "jackalberry.hpp"
#include <time.h>

int main()
{

	jackalberry gl;
	gl.window("jackalberry clock", 515, 515);

	gl.loadimage("clockface.png",0,0);
	int h = gl.loadimage("hour.png",1,1);
	int m = gl.loadimage("minute.png",1,1);
	int s = gl.loadimage("second.png",1,1);
	gl.loadimage("nub.png",1,1);

	int second = 0, minute = 0, hour = 0;
	int halfhour = 0, SwissTime = 1;

	time_t time1=time(NULL);
	struct tm * timeinfo;

	for (;;)
	{
		gl.msleep(100);

		time1=time(NULL);
		time (&time1);
	  	timeinfo = gmtime(&time1);

		second = timeinfo->tm_sec;
		minute = timeinfo->tm_min;
		hour = timeinfo->tm_hour%24+SwissTime;

		if (minute > 30)
			halfhour = 15;
		else
			halfhour = 0;

		gl.rotateimage(s,(360 / 60 * second));
		gl.rotateimage(m,(360 / 60 * minute));
		gl.rotateimage(h,(360 / 12 * (hour%12) + halfhour));

		gl.refresh();
	}
}
 Tutorial 2 - Rotate Image

This is the jackalberry clock. It's just a simple clock. The hands move around the face using the rotate command.

Usage:

gl.rotateimage(handle,degrees);

When referencing an image, or animation or other type of "widget" or "object" an integer is returned when it's initialised.

For example:

int pic = gl.loadimage("p.png",0,0);

loadimage returns a simple integer "pic", you can use this int variable to modify the object, such as rotation, or one of the other functions you'll see later on.

gl.rotateimage(pic,45);

As you might guess, this rotates "pic" by 45 degrees.
 
#include "jackalberry.hpp"

int main()
{
	jackalberry gl;
	
	gl.window("A jackalberry window", 640, 480);
	
	int logo = gl.loadimage("jblogo.png", 190, 200);
	gl.moveimage(logo, 100, 100);
	gl.rotateimage(logo, 45);
	gl.spinimage(logo, 45);
	gl.flipimage(logo, 45);
	gl.scaleimage(logo, 2.0, 2.0);

	for (;;)
	{
		gl.msleep(100);
		gl.refresh();
	}

	return 0; // Control flow will never get here.
}
Tutorial 3 - Transform the Image a bunch of ways

This simple example shows that an image can be transformed.

 
#include "jackalberry.hpp"

int main()
{
	jackalberry gl;
	
	gl.window("Glass image", 640, 480);

	int logo = gl.loadimage("jblogo.png", 170, 170);
	int logo2 = gl.loadimage("jblogo.png", 190, 200);
	
	gl.glassimage(logo2, true, 0.5);

	for (;;)
	{
		gl.msleep(100);
		gl.refresh();
	}

	return 0; // Control flow will never get here.
}
 Tutorial 7 - Glass Image

Glass image adjusts the OpenGL alpha value for a specified image.

In this example the first parameter is the image handle, the second parameter is a boolean value indicating if transparency is on or off for this image. The third value can be between 0.0 (completely transparent) and 1.0 (completely opaque).

 
#include "jackalberry.hpp"

int main()
{
	jackalberry gl;
	
	gl.window("A jackalberry window", 640, 480);
	
	int logo = gl.loadimage("jblogo.png", 190, 200);

	gl.visibleimage(logo, false);	

	for (;;)
	{
		gl.refresh();
	}

	return 0; // Control flow will never get here.
}
Tutorial 8 - Visible Image

This is the way to turn off the display of a particular image.

Better to use this than use glassimage to achieve the same effect as this way, the system actually removes the image from the render cycle which increases resources for other images.
 
#include "jackalberry.hpp"

int main()
{
	jackalberry gl;
	
	gl.window("Gradient Example", 640, 480);
	
	int grad = gl.gradientimage(10,10,100,100,0.0,0.0,0.0,1.0,1.0,1.0);

	for (;;)
	{
		gl.msleep(100);
		gl.refresh();
	}

	return 0; // Control flow will never get here.
}
Tutorial 9 - Gradient Image

Gradient image allows you to make a simple gradient. You specify the x and y, and the size of the image and then the the RGB of the start and the RGB of the finish color.

Gradient image can be treated like any other image and can be moved, scaled, spun, flipped and made semi-transparent.
 
#include "jackalberry.hpp"

int main()
{
	jackalberry gl;
	
	gl.window("A jackalberry window", 640, 480);
	
	int logo = gl.loadimage("jblogo.png", 190, 200);
	int clonelogo = gl.cloneimage(logo, 250, 250);

	for (;;)
	{
		gl.msleep(100);
		gl.refresh();
	}

	return 0; // Control flow will never get here.
}
Tutorial 10 - Clone Image

 
#include "jackalberry.hpp"

int main()
{
	jackalberry gl;
	
	gl.window("A jackalberry window", 640, 480);

	gl.backgroundcolor(1.0, 1.0, 1.0);

	int logo = gl.loadimage("jblogo.png", 190, 200);

	for (;;)
	{
		gl.msleep(100);
		gl.refresh();
	}

	return 0; // Control flow will never get here.
}

 Tutorial 11 - Background Color

Background color settings can be adjusted by three floating-point values ranging from 0.0 to 1.0, the three values represent Red, Green and Blue.
 
#include "jackalberry.hpp"

int main()
{
	jackalberry gl;
	
	gl.window("A jackalberry window", 640, 480);
	
	int logo = gl.loadimage("jblogo.png", 190, 200);

	float x,y;

	gl.getimagesize(logo, x, y);

	cout<<"Image is "<<x<<" across and "<<y<<" down.\n";

	return 0; // Control flow will never get here.
}
Tutorial 12 - getimagesize

The twin to this is unintuitively the "resizeimage" command.

 
gl.resizeimage(logo, x, y);

 
#include "jackalberry.hpp"

int main()
{
	jackalberry gl;
	
	gl.window("Motion Blur", 640, 480);
	
	int logo = gl.loadimage("jblogo.png", 190, 200);

	int x,y;

	gl.motionblur(5);

	for (;;)
	{
		gl.msleep(10);

		gl.xymouse(x,y);
		gl.moveimage(logo,x,y);

		gl.refresh();
	}

	return 0; // Control flow will never get here.
}
Tutorial 13 - Motion Blur

Motion blur works with values between 1 and 9. Value 0 switches it off.

 
#include "jackalberry.hpp"

int main()
{
	jackalberry gl;
	
	gl.window("Animation example", 640, 480);
	gl.backgroundcolor(1.0,1.0,1.0);	


	int ani = gl.loadanimation("horse/muybridge");
	gl.scaleanimation(ani, 0.6, 0.6);

	int ani2 = gl.cloneanimation(ani);

	float r = 0.0;

	for (;;)
	{
		gl.playanimation(ani, 90,50);
		gl.playanimation(ani2, 200,80);

		r=r + 0.5;
		if (r >= 360.0)
			r = 0.0;

		gl.rotateanimation(ani2,r);
		gl.spinanimation(ani2,r);
		gl.glassanimation(ani2, true, 0.5);

		gl.msleep(50);
		gl.refresh();
	}

	return 0; // Control flow will never get here.
}
Tutorial 14 - Load & Play, Clone, Scale, Rotate and Spin Animation

Here we look at how animation is used. It's all fairly straight forward. Note that the frames are called muybridge0.png, muybridge1.png.. etc. The system understands animations beginning at 0. Jackalberry will keep loading frames until it can't find anymore with the specified name.

In the source package there is a directory called "horse" which contains the muybridge animation.
 
#include "jackalberry.hpp"

int main()
{
	jackalberry gl;
	
	gl.window("Flexbox example", 640, 480);
	gl.backgroundcolor(1.0,1.0,1.0);

	int textbox = gl.newtextinput(300, 100);
	int fb = gl.flexboxnew(50,50,100);

	int xout,yout,width;
	string flextext;
	string inputboxtext;

	for (;;)
	{
		gl.msleep(5);

		inputboxtext = gl.updatetextinput (textbox);
		flextext = gl.flexboxgetpos (fb, xout, yout, width);

		cout<<"flex text = "<<flextext<<"\n";
		cout<<"input box text = "<<inputboxtext<<"\n";
		
		gl.refresh();
	}

	return 0; // Control flow will never get here.
}
Tutorial 21 - Flex Box (edit area) and Text Input 
#include "jackalberry.hpp"

int main()
{
	jackalberry gl;
	
	gl.window("Flex Image", 640, 480);
	
	int xout, yout, width;
	int flximg = gl.fleximagenew("jblogo.png", 200, 200);	

	for (;;)
	{
		gl.msleep(10);
		gl.fleximagegetpos(flximg, xout, yout, width);
		gl.refresh();
	}

	return 0; // Control flow will never get here.
}
 Tutorial 22 - Flex Image
 
#include "jackalberry.hpp"
#include <iostream>

using namespace std;

int main()
{
	jackalberry gl;
	
	gl.window("Flex button", 640, 480);

	int button = gl.flexbuttonnew("grabbutton.png", 310, 200);
	int bh = 0;

	for (;;)
	{
		gl.msleep(10);

		gl.flexbuttonpush(bh);

		if (bh == button)
			cout<<"Button pushed!\n";

		gl.refresh();
	}

	return 0; // Control flow will never get here.
}
 Tutorial 23 - Flex Button

Flex button allows you to take a png image and turn it into a button. In this example we load grabbutton.png and set-up the integer bh to be the feedback telling us which button (yet another integer) has been pressed.

flexbuttonpush polls all buttons and returns the button that has just been pressed.
 
vector <float> glidex;
vector <float> glidey;

	gl.glide( 0, 0, 400, 400, glidex, glidey);
	
	for (int i = 0;i<glidex.size();i++)
	{
		gl.msleep(1);
		gl.movecamera(glidex[i], glidey[i]);
		gl.refresh();
	}
 Tutorial 24 - Glide

This is just a code snippet but you can easily fit this into any of the other code examples, there is no prerequisites for this apart from what you see here.

Glide is a special helper function that given current coordinates and destination coordinates will plot a smooth course directly between the two points. Glide returns two vectors filled with the charted course.

Played back at linear speed, it creates an interpolated smooth transition.

This is useful for smooth movement of the camera or images or animations.
 

#include "jackalberry.hpp"

int main()
{
	jackalberry gl;
	
	gl.window("A jackalberry window", 640, 480);

	int logo = gl.loadimage("jblogo.png", 190, 200);

	gl.movecamera(100, 100);

	for (;;)
	{
		gl.msleep(100);
		gl.refresh();
	}

	return 0; // Control flow will never get here.
}
 Tutorial 25 - Move Camera

This moves the camera around the jackalberry surface.
 
#include "jackalberry.hpp"

int main()
{
	jackalberry gl;
	
	gl.window("Input example", 640, 480);
	
	int logo = gl.loadimage("jblogo.png", 190, 200);

	int x,y,m1,m2,m3,key;

	for (;;)
	{
		gl.msleep(500);
		gl.xymouse(x,y);

		key = gl.key();
		cout<<key<<"\n";

		gl.mousebuttons(m1,m2,m3);
		cout<<"Left "<<m1<<" Right "<<m2<<" Middle "<<m3<<"\n";

		gl.moveimage(logo,x,y);

		gl.refresh();
	}

	return 0; // Control flow will never get here.
Tutorial 26 - Mouse X,Y, Visibility and Mouse Buttons and Keyboard Events

Probably worth noting with this implementation of the key input, if the system is under heavy load key input may occur out of order, so "A" "S" "D" will be read as "D" "S" "A". You can see this occur if you increase the msleep time to make it really sluggish.

gl.key() returns a key press. In the implementation there is a stack, so it's worth perhaps looping gl.key() to exhaust the stack of key presses that might have been built up. If there are no key presses "key" returns -1.



 
#include "jackalberry.hpp"

int main()
{
	jackalberry gl;
	
	gl.window("A jackalberry window", 640, 480);

	int logo = gl.loadimage("jblogo.png", 190, 200);

	for (;;)
	{
		gl.msleep(100);
		gl.refresh();
		gl.quit();
	}

	return 0; // Control flow will never get here.
}
 Tutorial 28 - Quit

This opens a window and quits closing the window. Very brief example but this is how you neatly terminate the jackalberry state and leave memory free.