Browsing articles tagged with " Java"

# Processing Tutorial 5 – Basic 3D

May 26, 2011   //   by   //   Digital Illustrations, Portfolio, Processing Tutorials  //  No Comments

In this tutorial we cover the basics of 3d rendering in processing and animated
some boxes.
the material for this tutorial is at this address:

http://www.jaboston.com/tutorials/Tutorial_5

# Processing Tutorial 4 – lets create something useful

May 24, 2011   //   by   //   Processing Tutorials  //  No Comments

Tutorial Material:

http://www.jaboston.com/tutorials/Tutorial_4

In this tutorial I explain how to create an animated banner and explain some concepts such as:

- the color function
- boolean values
- integers and floats
- increments in value
- PFont (using font)
- Typography
- .vlw files
- Opacity and Alpha

# Processing Tutorial 3 – Using Methods

May 23, 2011   //   by   //   Processing Tutorials  //  No Comments

In this tutorial I explain some basic concepts about methods.

Here is a link to the code from this session.

http://www.jaboston.com/tutorials/Tutorial_3/Tutorial_3.pde

# Processing Tutorial 2 – Basic Shapes

May 20, 2011   //   by   //   Portfolio, Processing Tutorials  //  No Comments

The Second Tutorial video of a series of Processing Tutorial Videos.

In this tutorial video we cover basic shapes and how to manipulate them.

A few functions such as beginShape(), endShape() and variables such as mouseX and mouseY are covered.

The Shapes rectangle, ellipse and triangle are covered.

# Processing Tutorial 1 – Getting to know Processing

May 20, 2011   //   by   //   Portfolio, Processing Tutorials  //  3 Comments

references for this tutorial:

http://www.processing.org/reference/draw_.html

# SHAFT

Apr 1, 2011   //   by   //   Portfolio, Processing Sketches  //  2 Comments

This projects purpose is to explore the principles of time and space in simple in simple third person games in a 3D OPENGL Processing Environment. In this project we use sound and imagery to convey a space and time warping effect and bewilder the player. We will be externally sourcing our music.
I first started by creating a blog and assigning it to a domain name for the project (the projects address is www.projectfireball.com). We used this blog to post any updates to code we could. This allowed us to go back and find any fixes that we added. We also used it for adding video links and images for project ideas.
I designed and uploaded the original class layout for the game which has had changes made to it as we developed the product. After Several weeks of discussion on how the wall code should be made I came up with a simple solution in which I concluded to keep the code simple the camera itself should be used to generate the four sides of the wall. This code for generating a floor does not have to be modified instead only the camera angle has to be modified.
Without the code for generating a single wall the basic principle to this can be found in the code below:

```void update(){
this.rate = 0.5; // the rate at which the tiles move relative to the cam height.
this.ypos = (frameCount%this.rate);

// ------------------------- DRAW FLOOR TILES ------------------------------------

camera(0,0,this.cameraHeight,0,this.ypos+400,40,0,-1,0);
drawtiles(this.tiles_floor, this.rate, this.ypos);

// -------------------------- DRAW CEILING TILES ----------------------------------

camera(0,0,this.cameraHeight+24,0,this.ypos+400,73,0,1,0);
drawtiles(this.tiles_floor, this.rate, this.ypos);

// -------------------------- DRAW RIGHT WALL TILES ------------------------------

camera(10,0,this.cameraHeight+10,20,this.ypos+400,60,1,0,0);
drawtiles(this.tiles_floor, this.rate, this.ypos);

//--------------------------- DRAW LEFT WALL TILES -------------------------------

camera(-10,0,this.cameraHeight+10,-20,this.ypos+400,60,-1,0,0);
drawtiles(this.tiles_floor, this.rate, this.ypos);

```

as you can see from the code I have changed the way the camera is facing then generated a new wall. Although there was much disagreement in the group on this way of generating the walls as there was misunderstanding as to how it was generating it. A better solution was never found so this was the method we ended up using, although I would have much preferred the rest of the group to have seen the benefits.
How is a single wall generated?
The tiles are draw using a single for loop (with nested for loops) to fill array values which is then used to determine the x and y position of some rectangles. The camera is then rotated so that you are looking at the side of the rectangles as though you are lying down and looking along the floor. Then the floor is rotated and drawn again. Then the values were carefully tweaked and the sides were put together.

Making the walls interactive with sound

The next step I took to making the walls look more interesting was adding sound interaction to them. To do this I have used Matthew Yee-King’s classes to get samples of sound and put them into a buffer. This means that you can read the various frequency values and use it for beat detection and for the sound to interact with the walls.
Here is a short part of the code for a very basic example of how I have used the frequency to alter the walls size positon and color:

```if(abs(world.audioData[world.readHead2]) > 0.3) {
if(frameCount%900<600 && frameCount%900>300){
}
if(frameCount%900<300){
}
if(frameCount%900>600){
}
}
```

Here is an example of a bug-fix I implemented designed to try and stop background noise in the wav recordings used from effecting the look and feel of the game (the visual sound element).

```    if(abs(world.audioData[world.readHead2]) > 0.005) {
rect(this.position.x+inc,this.position.y+inc,this.w-  abs(inc),this.h-abs(inc));
}
else{
rect(this.position.x,this.position.y,this.w-(abs(inc)*0.1),this.h-(abs(inc)*0.1));
}
```

Another idea I had to implement was to smooth out the way the rectangles change size. With just the code above the rectangles will change color, size and position in a jittery way and for the human eyes it doesn’t represent the music very well. To fix this I used a threshold. and until the threshold is met it runs this code:

```if(inc > 20 || inc < -20){
inc = 0;
}
inc++;
}
else{
inc--;
}
}
```

This means the blocks, walls, player or whatever is effected by inc can’t go passed a certain width and height, won’t be able to go above a certain pigmentation and won’t be able to move more than 20 pixels up, down , left or right. This gives a smoother look and feel meaning that the walls itself (as well as looking more hypnotic) will represent the music more heavily and set the player into more of a trance.
Increasing the effect
To make the effect look and feel more in-sync I have added another ‘bug-fix’. Because the speed at which the tiles are rendered and the human eyes can interpret them then the brain relate that to the sound I have made it so that the Audio Data is read 4096 readings ahead of time by implementing a second Head. This means the video should be more in-sync with the sound in terms of the way it is processed. However I have not fully researched this and gone by the word of a well renowned researcher on its effectiveness. In my own opinion and from my own tests it does look more effective, however we can sometimes trick our minds into thinking something is different when really it isn’t.
Here is the code for this fix:

```        buffer[i] = audioData[readHead];
if(readHead % audioData.length >= audioData.length - 5000){
}
else{
}

readHead += speed;  // set the speed of the music
wait++;
```

So simply put, if the second head gets right near the end then move it back to the beginning. Also move back the first head to the beginning just for that section as the second head is a future representation of the first head.
Putting a menu in a OPENGL environment
Although the title sounds like putting in a menu would be relatively simple.... it is not... when putting in menu to an OPENGL environment the way in which it renders breaks the timeline rule. What I mean by this is that OPENGL has its own depth buffer and this overrides itself and overlays its rendering on anything else if it is closer in depth.
So for example... it renders more like an eye... than how your eyes would perceive the stacking of several books. It may not necessarily be the last book put on the pile that you can see... but its actually the book that is closest to you.

The problem I had was that the tiles were rendering themselves over the menu causing the menu to be unreadable. To fix this I had to clear the OPENGL depth buffer and then draw the menu to get the menu to overlay the rectangles. I actually was closing and opening me eyes then realised that... when looking at an optical illusion... sometimes certain layers can look like they are in-front of others or visa-versa after closing and opening our eyes again... however they are not... it is just the way our eyes render the image, hence the solution to this problem.

Here is the code:

```pushStyle();
fill(0);
gl.glClear(GL.GL_DEPTH_BUFFER_BIT);
camera(width/2,height/2,+520,width/2,height/2,0,0,1,0);
rect(width, height, -100, -20);
fill(255);
textSize(10);
text("Score   " + score, width-90, height-5);
popStyle();```

As you can see this also required me to redirect the camera to a ‘birds eye view’ again.
The Android version

In the timescale we had I would say that the android version of the game is not as developed as I would like it to be. However there is a completed version on the way which might possibly be found at:

Hopefully by the time you have read this there will also be a new WordPress blog post for the android version.

# Sounds generative walls.

Mar 25, 2011   //   by   //   Portfolio, Processing Sketches  //  No Comments

Version 2

# ROK Android App

Mar 22, 2011   //   by   //   Portfolio, Processing Sketches  //  No Comments

I developed this Simple Android Application for ROKuniversal.co.uk. A quick guide video is shown below.

# Blob the Defender Alpha v0.0001

Mar 5, 2011   //   by   //   Interactive Programs, Portfolio  //  No Comments

I just finished the basic core of my game ready for an alpha version. looking for anyone willing to bugtest it!. Please leave comments below! feedback is greatly appreciated!!

# Dance Projection Lights.

Feb 21, 2011   //   by   //   Interactive Programs, Portfolio, Processing Sketches  //  No Comments

here is an example i created of how processing could be used as dance projection lights. This could be a really interesting specific piece of software with a bit of development.

this is an example of the use of minim library with processing discourse. You can create interesting effects using the minim library. This particular example uses loops to create different sized shapes around the edge. Its only using the audio left and right inputs to create this but you can use FFT (part of the minim library) to make it more accurate to the sounds being produced by the music. Feel free to check out my other projects below also!

Below is the source code for this project:

```import ddf.minim.*;
Minim minim;
AudioInput in;
int var1 = 200;
PImage bg;

void setup()
{

minim = new Minim(this);
in = minim.getLineIn(Minim.STEREO, 512);
size(500, 500);
smooth();
frameRate(25);
this.rolling();

}

void draw(){
filter(BLUR, 3);
float a = 8;
translate(width*0.5, height*0.5);
stroke(255, 120);
strokeWeight(3);
for(int i = 0; i < 40; i++){
fill(in.left.get(i)*var1*3, 140, in.right.get(i)*30, 60);
rotate(PI/10);
rect(in.left.get(i)*70, in.left.get(i)*70, in.right.get(i)*70, in.right.get(i)*70);
fill(in.right.get(i)*var1/10, in.left.get(i)*var1, in.right.get(i)*-var1, 60);
ellipse(-200, in.left.get(i)*70, in.right.get(i)*var1, in.right.get(i)*70);
}
var1 += -10;
if(var1 < 20){
var1 += 300;
}
}

void stop()
{
// always close Minim audio classes when you are done with them
in.close();
minim.stop();

super.stop();
}

void rolling(){
int y = 0;
int x = 0;
if((y | x) == 0){

for(y = 0; y < height; y ++){
for(x = 0; x < width; x ++){
point(x, y);
stroke(30, 0, 0);
}

}

int i;
for(i = 0; i < width; i++){
float r = random(10);
strokeWeight(r);
stroke(255, 255, 255, r-4);
line(i, height, i, 0);
}

}

}

```

# Cong Box v1. Another example of sound interacting with shape generation.

Feb 18, 2011   //   by   //   Interactive Programs, Portfolio, Processing Sketches  //  No Comments

This example is using OPENGL to generate a cube.
Using the minim library I have integrated sound to make it decrease and increase in size.
Below is the source code:

```/**I created a cube that is colored
using RGB values when settings the vertex positions.
I am using the minim library to change the size of the cube.
I also textured the cube in Normalized mode.
On top of this I left two sides untextured to give a cool glitchy seethrough effect.
LIKE A G6.

This 3d shape interacts with sound and is textured.
**/

import processing.opengl.*;
import ddf.minim.*;
import ddf.minim.signals.*;
import ddf.minim.analysis.*;
import ddf.minim.effects.*;

int si = 30;
PFont fontA;
int var1 = 200;
PImage img;
Minim minim;
AudioOutput out;
SineWave sine;
AudioPlayer music;

float xmag, ymag = 0;
float newXmag, newYmag = 0, i;
float il = 0;
float il2 = 0;

void setup()
{
size(500, 500, OPENGL);
strokeWeight(3);
stroke(0);
textureMode(NORMALIZED);
minim = new Minim(this);
music = minim.loadFile("music.mp3", 2048);
// get a line out from Minim, default sample rate is 44100, default bit depth is 16
out = minim.getLineOut(Minim.STEREO, 2048);

// create a sine wave Oscillator, set to 440 Hz,
//at 0.5 amplitude, sample rate 44100 to match the line out
//sine = new SineWave(440, 0.5, out.sampleRate());
// add the oscillator to the line out
music.play();
}

void draw()
{
textFont(fontA, 32);
stroke(int(random(255)), int(random(255)), int(random(255)));

if(frameCount % 5 == 0){
background(255);
}
if(frameCount % 1700 < 20 && frameCount > 1700){
//this creates a really awesome feedback glitch
music = minim.loadFile("music.mp3", 2048);
music.play();
}
println(frameCount);
pushMatrix();

translate(width/2, height/2, -30);

newXmag = mouseX/float(width) * TWO_PI;
newYmag = mouseY/float(height) * TWO_PI;

float diff = xmag-newXmag;
if (abs(diff) >  0.01) { xmag -= diff/4.0; }

diff = ymag-newYmag;
if (abs(diff) >  0.01) { ymag -= diff/4.0; }

rotateX(-xmag);
rotateY(-ymag);

il = music.left.get(1)*100;
il2 = music.right.get(1)*100;
float outs = il+il2;
if(outs < 40){
outs = 40;
}

scale(outs);
texture(img);
vertex(-1,  1,  1, 0, 0);
vertex( 1,  1,  1, 1, 0);
vertex( 1, -1,  1, 1, 1);
vertex(-1, -1,  1, 0, 1);

vertex( 1,  1,  1, 0, 0);
vertex( 1,  1, -1, 1, 0);
vertex( 1, -1, -1, 1, 1);
vertex( 1, -1,  1, 0, 1);

vertex( 1,  1, -1, 0, 0);
vertex(-1,  1, -1, 1, 0);
vertex(-1, -1, -1, 1, 1);
vertex( 1, -1, -1, 0, 1);

vertex(-1,  1, -1, 0, 0);
vertex(-1,  1,  1, 1, 0);
vertex(-1, -1,  1, 1, 1);
vertex(-1, -1, -1, 0, 1);

vertex(-1,  1, -1);
vertex( 1,  1, -1);
vertex( 1,  1,  1);
vertex(-1,  1,  1);

vertex(-1, -1, -1);
vertex( 1, -1, -1);
vertex( 1, -1,  1);
vertex(-1, -1,  1);

endShape();

popMatrix();

fill( int(random(255)), int(random(255)), int(random(255)));
stroke( int(random(255)), int(random(255)), int(random(255)));
text("Cong   Box        v1.0", width/2-100, 30 );
}

void stop()
{
// always close Minim audio classes when you are done with them
out.close();
minim.stop();

super.stop();
}

void musicalVar()
{
stroke(255);
// draw the waveforms
for(int i = 0; i < out.bufferSize() - 1; i++)
{
line(i, 50 + out.left.get(i)*50, i+1, 50 + out.left.get(i+1)*50);
line(i, 150 + out.right.get(i)*50, i+1, 150 + out.right.get(i+1)*50);
}
}

```

## Get In touch!

contact@jaboston.com