I've been trying to fix this thing for a while now but it doesn't seem to work; "Could not run the sketch (Target VM failed to initialize)."
I'll post the full code down below.
In the draw(), there are three for loops.
for(int i = 0; i<objectAmount; i++) {
circles[i].drawObj();
}
The first one creates the circles, while the second nested ones take care of collision and drawing the lines;
for(int i = 0; i<rayAmount; i++) {
rays[i].update();
for(int j = 0; j<objectAmount; j++) {
rays[i].collide(circles[j]);
}
line(rays[i].xPos, rays[i].yPos, rays[i].xEnd, rays[i].yEnd);
}
the .collide takes point on the 'ray' and moves closer to the circle until it reaches some value, where it marks the line's end, which is then used by the line() function to draw it to the circle.
For some reason, when I implemented the .collide function, everything stopped working unless I set the amount of rays to one, in which case no rays would appear but the circle generation would follow along just fine.
int rayAmount = 45;
int angleCorrect = 360/rayAmount;
int objectAmount = 10;
Ray[] rays = new Ray[rayAmount];
Object[] circles = new Object[objectAmount];
void setup() {
size(600, 400, P2D);
for(int i = 0; i<rayAmount; i++) {
rays[i] = new Ray(i*angleCorrect);
}
for(int i = 0; i<objectAmount; i++) {
circles[i] = new Object(random(0, 600), random(0, 400), random(20, 100));
}
}
void draw() {
background(255);
stroke(100);
for(int i = 0; i<objectAmount; i++) {
circles[i].drawObj();
}
for(int i = 0; i<rayAmount; i++) {
rays[i].update();
for(int j = 0; j<objectAmount; j++) {
rays[i].collide(circles[j]);
}
line(rays[i].xPos, rays[i].yPos, rays[i].xEnd, rays[i].yEnd);
}
}
class Ray {
float xPos, yPos, Angle, xEnd, yEnd;
Ray(float angle) {
xPos = mouseX;
yPos = mouseY;
Angle = angle;
}
void update() {
xPos = mouseX;
yPos = mouseY;
//xEnd = xPos + 100 * cos(radians(Angle));
//yEnd = yPos + 100 * sin(radians(Angle));
}
void collide(Object other) {
float newXEnd = this.xEnd;
float newYEnd = this.yEnd;
float distToObject = sqrt(pow(other.xPos-this.xPos, 2) + pow(other.yPos-this.yPos, 2));
while(distToObject > 1) {
newXEnd = newXEnd + distToObject * cos(radians(Angle));
newYEnd = newYEnd + distToObject * sin(radians(Angle));
distToObject = sqrt(pow(other.xPos-newXEnd, 2) + pow(other.yPos-newYEnd, 2));
}
this.xEnd = newXEnd;
this.yEnd = newYEnd;
}
}
class Object {
float xPos, yPos, radius;
Object(float x, float y, float r) {
xPos = x;
yPos = y;
radius = r;
}
void drawObj() {
stroke(100);
circle(xPos, yPos, radius);
}
}
Related
So I have this weird bug in my terrain generation project
I have 2 methods that were supposed to fix offsets for different noise scales between chunks but for some reason when I implimented threading it stopped working in seemingly random areas. I'm 100% sure this worked before threading.
public struct GetMeshData : IJob
{
public ChunkData chunkData;
public NativeArray<float> noiseMap;
public MeshData meshData;
public void Execute()
{
for (int z = 0; z < chunkData.chunkSize + 1; z++)
{
for (int x = 0; x < chunkData.chunkSize + 1; x++)
{
noiseMap[z * (chunkData.chunkSize + 1) + x] = Noise.GetNoiseValue(chunkData, x, z);
}
}
MeshData temporaryMeshData = MeshGeneration.GenerateMesh(chunkData, noiseMap, meshData.triangles, meshData.vertices, meshData.uvs);
meshData = temporaryMeshData;
}
public GetMeshData(ChunkData chunkData, NativeArray<Vector3> vertices, NativeArray<Vector2> uvs, NativeArray<int> triangles, NativeArray<float> noiseMap)
{
this.chunkData = chunkData;
this.meshData = new MeshData(vertices, uvs, triangles);
this.noiseMap = noiseMap;
}
}
this is the job while this is my code to handle it
for (int i = 0; i < meshJob.Count; i++)
{
if (meshJob[i].IsCompleted)
{
meshJob[i].Complete();
TerrainChunk currentChunk = chunks[meshJobData[i].chunkData.chunkPosition.x,
meshJobData[i].chunkData.chunkPosition.y];
PostMeshGeneration(currentChunk, meshJobData[i].meshData);
toBeAdjusted.Add(currentChunk);
meshJobData[i].noiseMap.Dispose();
meshJobData[i].meshData.vertices.Dispose();
meshJobData[i].meshData.triangles.Dispose();
meshJobData[i].meshData.uvs.Dispose();
meshJob.RemoveAt(i);
meshJobData.RemoveAt(i);
}
}
this is what I do after the job is complete:
public void PostMeshGeneration(TerrainChunk chunk, MeshData meshData)
{
Mesh mesh = new Mesh();
mesh.vertices = meshData.vertices.ToArray();
mesh.triangles = meshData.triangles.ToArray();
mesh.uv = meshData.uvs.ToArray();
chunk.GetChunkGameObject().GetComponent<MeshFilter>().mesh = mesh;
ReadjustMeshCollider(chunk);
}
lastly this is trying to fix the scale offsets
if (toBeAdjusted.Count != 0 && meshJob.Count == 0 && meshJobData.Count == 0)
{
while (toBeAdjusted.Count > 0)
{
TerrainChunk currentChunk = toBeAdjusted[0];
Mesh mesh = currentChunk.GetChunkGameObject().GetComponent<MeshFilter>().mesh;
AdjustNoiseScaling(currentChunk);
FixCornerVerticesOffset(currentChunk);
mesh.UploadMeshData(false);
ApplyColorsToChunk(currentChunk, mesh.vertices);
ReadjustMeshCollider(currentChunk);
toBeAdjusted.RemoveAt(0);
}
}
if you need to see more code go to the github link https://github.com/htmhell69/TerrainGenerationUnity
So I am creating an endless terrain.
I can create the terrain but my chunks have gaps betwean them and they don't align properly.
I think the problem might be caused by my Noise Generation script, but I am not sure.
This is my Noise Generation script
public static class Noise_GENERATOR
{
public static float[,] GenerateNoise(int chunkSize, int octaves, int seed, float noiseScale, float persistence, float lacunarity, Vector2 offset)
{
float[,] noiseMap = new float[chunkSize, chunkSize];
System.Random prng = new System.Random(seed);
Vector2[] octaveOffsets = new Vector2[octaves];
float maxPossibleHeight = 0;
float amplitude = 1;
float frequency = 1;
for (int i = 0; i < octaves; i++)
{
float offsetX = prng.Next(-100000, 100000) + offset.x;
float offsetY = prng.Next(-100000, 100000) + offset.y;
octaveOffsets[i] = new Vector2(offsetX, offsetY);
maxPossibleHeight += amplitude;
amplitude *= persistence;
}
if (noiseScale <= 0)
{
noiseScale = 0.0001f;
}
float maxLocalNoiseHeight = float.MinValue;
float minLocalNoiseHeight = float.MaxValue;
float halfWidth = chunkSize / 2f;
float halfHeight = chunkSize / 2f;
for (int y = 0; y < chunkSize; y++)
{
for (int x = 0; x < chunkSize; x++)
{
amplitude = 1;
frequency = 1;
float noiseHeight = 0;
for (int i = 0; i < octaves; i++)
{
float sampleX = (x-halfWidth + octaveOffsets[i].x) / noiseScale * frequency;
float sampleY = (y-halfHeight + octaveOffsets[i].y) / noiseScale * frequency;
float perlinValue = Mathf.PerlinNoise(sampleX, sampleY) * 2 - 1;
noiseHeight += perlinValue * amplitude;
amplitude *= persistence;
frequency *= lacunarity;
}
if (noiseHeight > maxLocalNoiseHeight)
{
maxLocalNoiseHeight = noiseHeight;
}
else if (noiseHeight < minLocalNoiseHeight)
{
minLocalNoiseHeight = noiseHeight;
}
noiseMap[x, y] = noiseHeight;
float normalizedHeight = (noiseMap[x, y] + 1) / (maxPossibleHeight / 0.9f);
noiseMap[x, y] = Mathf.Clamp(normalizedHeight, 0, int.MaxValue);
}
}
return noiseMap;
}
}
To Generate the height of a mesh, I am using Animation Curve and multiplying it by elevationScale variable.
float height = heightCurve.Evaluate(noiseMap[x, y]) * elevationScale;
I thought about accesing each Terrain chunk and getting the height of the edges and matching them together but that would look really weird and I don't know how to do it properly.
EDIT: Here just in case my Mesh generator script and how I am creating the Terrain chunk
public static class Mesh_GENERATOR
{
public static MeshData GenerateChunkMesh(int chunkSize,float[,] noiseMapData,float elevationScale,AnimationCurve terrainCurve,int LODlevel )
{
float[,] noiseMap = noiseMapData;
AnimationCurve heightCurve = new AnimationCurve(terrainCurve.keys);
//Setup variables
Vector3[] vertices = new Vector3[chunkSize * chunkSize];
int[] triangles = new int[(chunkSize - 1) * (chunkSize - 1) * 6];
Vector2[] uvs = new Vector2[chunkSize * chunkSize];
int triangle = 0;
int levelOfDetailIncrement = (LODlevel == 0) ? 1 : LODlevel * 2;
int numberOfVerticesPerRow = (chunkSize) / levelOfDetailIncrement + 1;
for (int y = 0; y < chunkSize; y++)
{
for (int x = 0; x < chunkSize; x++)
{
int i = y * chunkSize + x;
//Create vertices at position and center mesh
float height = heightCurve.Evaluate(noiseMap[x, y]) * elevationScale;
Vector2 percentPosition = new Vector2(x / (chunkSize - 1f), y / (chunkSize -1f ));
Vector3 vertPosition = new Vector3(percentPosition.x * 2 - 1, 0, percentPosition.y * 2 - 1) * chunkSize/2;
vertPosition.y = height;
vertices[i] = vertPosition;
uvs[i] = new Vector2((float)x / chunkSize, (float)y / chunkSize);
//Construct triangles
if (x != chunkSize - 1 && y != chunkSize - 1)
{
triangles[triangle + 0] = i + chunkSize;
triangles[triangle + 1] = i + chunkSize + 1;
triangles[triangle + 2] = i;
triangles[triangle + 3] = i + chunkSize + 1;
triangles[triangle + 4] = i + 1;
triangles[triangle + 5] = i;
triangle += 6;
}
}
}
MeshData meshData = new MeshData(chunkSize, vertices, triangles, uvs);
return meshData;
}
}
public class MeshData
{
public int chunkSize;
public Vector3[] vertices;
public int[] triangles;
public Vector2[] uvs;
public Mesh mesh;
public MeshData(int chunkSize,Vector3[] vertices,int[] triangles, Vector2[] uvs)
{
this.chunkSize = chunkSize;
this.vertices = vertices;
this.triangles = triangles;
this.uvs = uvs;
}
public Mesh CreateMesh()
{
if(mesh == null) { mesh = new Mesh(); } else { mesh.Clear(); }
mesh.indexFormat = UnityEngine.Rendering.IndexFormat.UInt32;
mesh.vertices = vertices;
mesh.triangles = triangles;
mesh.uv = uvs;
mesh.RecalculateNormals();
return mesh;
}
}
And here is my TerrainChunk
public class TerrainChunk
{
GameObject meshObject;
Vector2 position;
Bounds bounds;
MeshRenderer meshRenderer;
MeshFilter meshFilter;
public TerrainChunk(Vector2 coord, int chunkSize, Transform parent,Material terrainMaterial)
{
position = coord * chunkSize;
bounds = new Bounds(position, Vector2.one * chunkSize);
Vector3 positionV3 = new Vector3(position.x , 0, position.y );
Debug.Log("CHUNK: COORD" + coord + "POSITION" + position + "POSITION3V" + positionV3);
meshObject = new GameObject("Terrain Chunk");
meshFilter = meshObject.AddComponent<MeshFilter>();
meshRenderer = meshObject.AddComponent<MeshRenderer>();
meshRenderer.material = terrainMaterial;
meshObject.transform.position = positionV3;
meshObject.transform.parent = parent;
SetVisible(false);
worldGenerator.RequestMapData(position,OnNoiseDataReceived);
}
void OnNoiseDataReceived(MapData mapData)
{
worldGenerator.RequestMeshData(mapData, OnMeshDataReceived);
}
void OnMeshDataReceived(MeshData meshData)
{
meshFilter.mesh = meshData.CreateMesh();
}
public void UpdateTerrainChunk(Vector2 viewerPosition, int maxRenderDistance)
{
float viewerDstFromNearestEdge = Mathf.Sqrt(bounds.SqrDistance(viewerPosition));
bool visible = viewerDstFromNearestEdge <= maxRenderDistance;
SetVisible(visible);
}
public void SetVisible(bool visible)
{
meshObject.SetActive(visible);
}
public bool IsVisible()
{
return meshObject.activeSelf;
}
}
}
If I undestand all your values and variables correctly.
The problem might lay in the Noise Generator.
You need to create the chunkSize to be bigger by 1 so if you are passing 250 you will need to pass 251, as the for loop in the Noise Generator stops at 249 and not 250. (I might be wrong about this ), If you do this the mesh generator will now have the right values for calculation.
So your chunksize variable should look like this
chunkSize = chunkSize + 1;
Now there will still be smaller gaps and the mesh will clip through each other, so to fix this you will need to position the Chunk and you do it this way ->
(If your coord serves as a direction in which the chunk will be created from your World generator object -> for example chunks pointing North will be with values x:0 y:1, chunks pointing West will be x:-1 y:0, NorthWest chunks x:-1 y:-1 and so on), you may need to change the 0.5f to your values so the chunks align properly.
Vector3 positionV3 = new Vector3(position.x + (coord.x + 0.5f), 0, position.y + (coord.y + 0.5f) );
There still may be some smaller gaps visible in the terrain, but this can be fixed by playing with the values, or you can try and access each Chunk and get the edge vertices and their heights and connect the chunks together this way.
My code takes an image and creates a pointillist image through creating ellipses with a pixel's color.
After a while, the image is fully 'painted' and I want to automatically switch to another image in my sketch folder.
I would like to be able to count the number of ellipses generated. Once 'z' ellipses are generated I want to tell my code to erase all ellipses and start over with a new image.
CODE:
PImage img;
int smallPoint, largePoint;
void setup() {
size(1920, 1080);
img = loadImage("rio.jpg");
smallPoint = 12;
largePoint = 12;
imageMode(CENTER);
noStroke();
background(255);
}
void draw() {
for (int i = 0; i < 1000; i++)
{
drawADot();
}
}
void drawADot()
{
int imageWidth = img.width;
int imageHeight = img.height;
int ptSize = int(random(100)) + 4;
float pointillize = map(mouseX, 0, width, smallPoint, largePoint); //not used right now but for controlling ellipse size
int x = int(random(0, imageWidth/8));
int y = int(random(0, imageHeight/8));
color pix = img.get(x*8, y*8);
fill(pix, 255);
ellipse(x*8, y*8, pointillize, pointillize);
}
Store the images in an array, count the dots added, and conditionally (based in number of dots) change the image being used to next one in the array, you can pass the image to the drawADot() function as a parameter. Something like:
PImage img[] = new PImage[2];
int smallPoint, largePoint;
final int DOTSPERDRAW = 500;
int numberOfDots = 0;
final int MAXDOTS = DOTSPERDRAW * 100;
PImage workingImage ;
int index;
void setup() {
size(810, 455);
img[0] = loadImage("http://assets2.exame.abril.com.br/assets/images/2014/8/506584/size_810_16_9_rio.jpg");
img[1] = loadImage("http://upload.wikimedia.org/wikipedia/commons/1/1e/Pilcomayo_rio.jpg");
img[1].resize(810, 0);
smallPoint = 12;
largePoint = 12;
imageMode(CENTER);
noStroke();
background(255);
workingImage = img[0];
}
void draw() {
if (numberOfDots > MAXDOTS) {
index = (index + 1) % img.length;
workingImage = img[index];
numberOfDots = 0;
}
for (int i = 0; i < DOTSPERDRAW; i++)
{
drawADot(workingImage);
}
numberOfDots += DOTSPERDRAW;
}
void drawADot(PImage theImage)
{
int imageWidth = theImage.width;
int imageHeight = theImage.height;
int ptSize = int(random(100)) + 4;
float pointillize = map(mouseX, 0, width, smallPoint, largePoint); //not used right now but for controlling ellipse size
int x = int(random(0, imageWidth/8));
int y = int(random(0, imageHeight/8));
color pix = theImage.get(x*8, y*8);
fill(pix, 255);
ellipse(x*8, y*8, pointillize, pointillize);
}
I found a project description on a course website for computer graphics. I am trying to complete the project for fun.
Here is the link to the problem description:
http://www.pdfhost.net/index.php?Action=Download&File=901bc7785bef41364b3a40f6f4493926
Below is my code. The problem I am running in to is that the terms of the series grow so fast I can't map the points to the screen correctly. From the problem description it says the points will be mappable within a -2 - 2 square but the difference in value between the points is so huge that normalizing by the largest would collapse most of the points to a single pixel.
I assume I have a fundamental misunderstanding that I can't identify. Any help or insight would be appreciated!
int w = 800, h = 600;
int numTimes = 10, cSize = 5;
float xr = 2, yr = 2;
void setup() {
size(w,h);
}
void draw() {
background(255);
Complex v = new Complex(mouseX*(xr/w) - (xr/2), mouseY*(yr/h) - (yr/2));
Complex[] exps = new Complex[numTimes];
for (int i = 0; i < numTimes; i++) {
exps[i] = complexExp(v,i);
}
ellipse(w/2, h/2, cSize, cSize);
for (int i = 0; i < numTimes; i++) {
drawSeries(new Complex(0,0), exps, i, i);
}
}
void drawSeries(Complex vToDraw, Complex[] exps, int count, int clrTrunc) {
if (count == 0) {
Complex v = exps[0];
float progress = float(clrTrunc) / float(numTimes);
fill(255*progress, 180, 255 - 255*progress);
vToDraw.add(v);
ellipse(vToDraw.r*(w/xr) + (w/2), vToDraw.i*(h/xr) + h/2, cSize, cSize);
vToDraw.sub(v);
vToDraw.sub(v);
ellipse(vToDraw.r*(w/xr) + (w/2), vToDraw.i*(h/xr) + h/2, cSize, cSize);
} else {
Complex v = exps[count];
vToDraw.add(v);
drawSeries(vToDraw, exps, count - 1, clrTrunc );
vToDraw.sub(v);
vToDraw.sub(v);
drawSeries(vToDraw, exps, count - 1,clrTrunc );
}
}
Complex complexExp(Complex v, int times) {
if (times == 0) {
return new Complex(1, 1);
} else if ( times == 1) {
return new Complex( v.r*v.r - v.i*v.i, 2*v.r*v.i );
} else {
return complexExp( new Complex( v.r*v.r - v.i*v.i, 2*v.r*v.i ), times - 1 );
}
}
class Complex {
float r, i;
Complex() {
this.r = 0;
this.i = 0;
}
Complex(float r, float i) {
this.r = r;
this.i = i;
}
void add(Complex nv) {
this.r += nv.r;
this.i += nv.i;
}
void sub(Complex nv) {
this.r -= nv.r;
this.i -= nv.i;
}
}
I think you can make the code cleaner if you write a more complete Complex class.
int w = 800, h = 600;
int numTimes = 10, cSize = 5;
float xr = 3, yr = 3;
void setup() {
size(w,h);
noLoop();
}
void mousePressed() {
redraw();
}
void draw() {
background(255);
Complex v = new Complex(mouseX*(xr/w) - (xr/2), mouseY*(yr/h) - (yr/2));
Complex[] exps = new Complex[numTimes];
for (int i = 0; i < numTimes; i++) {
exps[i] = v.raisedTo(i);
print(exps[i]);
}
ellipse(w/2, h/2, cSize, cSize);
print(exps);
drawSerie(exps, numTimes);
}
void drawSerie(Complex[] exps, int total)
{
Complex partial = new Complex(0, 0);
drawPartial(exps, total -1, partial);
}
void drawFinal(Complex toDraw)
{
point(toDraw.r*(w/xr) + (w/2), toDraw.i*(h/xr) + h/2);
}
void drawPartial(Complex [] exps, int depth, Complex partial)
{
if (depth == -1)
{
drawFinal(partial);
return;
}
int nextDepth = depth -1;
drawPartial(exps, nextDepth, partial);
Complex element = exps[depth];
drawPartial(exps, nextDepth, partial.add(element));
drawPartial(exps, nextDepth, partial.sub(element));
}
class Complex {
float r, i;
Complex() {
this.r = 0;
this.i = 0;
}
Complex(float r, float i) {
this.r = r;
this.i = i;
}
Complex(Complex other)
{
this.r = other.r;
this.i = other.i;
}
Complex mult(Complex other)
{
return new Complex(this.r*other.r - this.i*other.i, this.r*other.i + this.i*other.r);
}
Complex add(Complex nv) {
return new Complex(this.r + nv.r, this.i + nv.i);
}
Complex sub(Complex nv) {
return new Complex(this.r - nv.r, this.i - nv.i);
}
Complex raisedTo(int n) {
if (n == 0) {
return new Complex(1, 0);
}
else if (n % 2 == 0)
{
return (this.mult(this)).raisedTo(n/2);
}
else
{
return this.mult(this.raisedTo(n - 1 ));
}
}
String toString()
{
return "real: " + this.r + " imaginary: " + this.i;
}
}
The computation of the series is not efficient but, I think, it is clear
I want to create a list of operation's in a grid view. For example visit this URL.
http://cdn-static.cnet.co.uk/i/product_media/40000186/nokia1616_01.jpg
You can look at this question or this page(and use LWUIT or CustomItems) or extend "canvas".In this way you need to two pictures for every operation in grid view.One for normal state and another for highlighted.Here is a simple canvas that represents 4 operations in 2*2 grid:
public class GridCanvas extends Canvas {
int highlightedRow = 0;
int highlightedColumn = 0;
Image[][] normalImageMat;
Image[][] highlightedImageMat;
Image[][] imageMat;
int gridColumnNo;
int gridRowNo;
/**
* constructor
*/
public GridCanvas() {
gridColumnNo = 2;
gridRowNo = 2;
normalImageMat = new Image[gridRowNo][gridColumnNo];
highlightedImageMat = new Image[gridRowNo][gridColumnNo];
imageMat = new Image[gridRowNo][gridColumnNo];
try {
for (int i = 0; i < gridRowNo; i++) {
for (int j = 0; j < gridColumnNo; j++) {
normalImageMat[i][j] = Image.createImage("/hello/normalImage" + i + j + ".png");
}
}
for (int i = 0; i < gridRowNo; i++) {
for (int j = 0; j < gridColumnNo; j++) {
highlightedImageMat[i][j] = Image.createImage("/hello/highlightedImage" + i + j + ".png");
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* paint
*/
public void paint(Graphics g) {
g.setColor(255, 255, 255);
g.fillRect(0, 0, getWidth(), getHeight());
for (int i = 0; i < gridRowNo; i++) {
System.arraycopy(normalImageMat[i], 0, imageMat[i], 0, 2);
}
imageMat[highlightedRow][highlightedColumn] = highlightedImageMat[highlightedRow][highlightedColumn];
int width = 0;
int height = 0;
for (int i = 0; i < gridRowNo; i++) {
for (int j = 0; j < gridColumnNo; j++) {
g.drawImage(imageMat[i][j], width, height, 0);
width = width + imageMat[i][j].getWidth();
}
width = 0;
height = height + imageMat[0][0].getHeight();
}
}
/**
* Called when a key is pressed.
*/
protected void keyPressed(int keyCode) {
int gameAction = this.getGameAction(keyCode);
if (gameAction == RIGHT) {
highlightedColumn = Math.min(highlightedColumn + 1, gridColumnNo - 1);
} else if (gameAction == LEFT) {
highlightedColumn = Math.max(highlightedColumn - 1, 0);
} else if (gameAction == UP) {
highlightedRow = Math.max(0, highlightedRow - 1);
} else if (gameAction == DOWN) {
highlightedRow = Math.min(gridRowNo - 1, highlightedRow + 1);
}
repaint();
}
}
In real samples you would to detect gridColumnNo and gridRowNo due to screen and your icons dimensions.
If you can not go with LWUIT (license, library size, etc) and do not want to leave the screen rendering to LCDUI (CustomItem), you should extend Canvas.
I have shared code for an adaptive grid at http://smallandadaptive.blogspot.com.br/2010/12/touch-menu.html Feel free to use it.
At this sample all items are Strings, but you can change the TouchItem to draw Images instead.