It is also manually adjustable by changing the BPM or milliseconds in the two float boxes. You can also stop the flashing with the “Stop” button.

It’s very simple and straightforward, but it is a great little program to create as an introduction to graphical programming in Max and getting an idea of how it functions.

You can download the Max patch here.

The aim of the week 6 KKB210: Computational Arts 1 tutorial is to take the provided example, audio-scrubbing.pd to change the playback speed randomly every 100 milliseconds. I had a lot of trouble with this, not because it is difficult to do, but because I could not get it to run stably on my own computer.

Pd crashes on my computer at varying intervals and there does not seem to be any relation between any of the crashes. Since I won’t be able to work on this on my own computer, and only on the lab computers, I have decided I definitely won’t be using this for my three main works for assignment 3.

Whilst working on this exercise in the lab, I found that Pd was quite simple to use, though, after working in Quartz Composer in the following tutorial, Quartz is definitely a nicer patching program to use, though I am not sure how they compare as far as limitations go.

However, Flex is free, open source, and is written using MXML. It consists of Actionscrupt libraries that give access to the Flash drawing engine and a compiler, however, rather than compiling through the development environment such as in flash, it is done via the command line. Flash is also based more around the time line than Flex.

Flex has similarities to HTML and to my understanding is based on XML, so most of it seems fairly easy to read to me. The Actionscript files are virtually the same as the appearance of the Actionscript files you would use in Flash.

The exercise in the KKB210: Computational Arts 1 week 5 tutorial is based around a “Moon Buggy” and making it jump. We were provided with the basis of it with an Actionscript file, an mxml file and a swf file of what the final solution should look like.

Initially, the buggy moves across the screen, what we have to do though is to make it jump whenever the user clicks with the mouse.

The documentation on the Adobe site is quite useful and explanatory, though it does take a bit of sifting to find what we need.

We didn’t need to make any changes to the mxml file, but the Actionscript was another story.

We end up with a Actionscript file that looks like this:

package
{
import mx.core.UIComponent;
import flash.events.MouseEvent;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.Event;

public class MoonPatrolGame extends UIComponent
{
private var backgroundLoader:Loader;
private var middlegroundLoader:Loader;
private var foregroundLoader:Loader;
private var buggyLoader:Loader;
private var verticalSpeed:int;
private var groundLevel:int;

public function MoonPatrolGame() {

// Call the constructor for the superclass UIComponent
super();

// Load the images for the buggy, the foreground, midddleground and background
backgroundLoader = new Loader();
middlegroundLoader = new Loader();
foregroundLoader = new Loader();
buggyLoader = new Loader();
backgroundLoader.load(new URLRequest(".uploads/flex/MoonPatrolSimple/img/background.png"));
middlegroundLoader.load(new URLRequest(".uploads/flex/MoonPatrolSimple/img/middleground.png"));
foregroundLoader.load(new URLRequest(".uploads/flex/MoonPatrolSimple/img/foreground.png"));
buggyLoader.load(new URLRequest(".uploads/flex/MoonPatrolSimple/img/buggy.png"));

}

public function initialiseGame():void {

// buggy is at groundLevel
buggyLoader.y = 375;

// The buggy stays in the centre
buggyLoader.x = (width / 2) - (buggyLoader.content.width / 2);

// We want to update every frame so we add a listener for ENTER_FRAME events
addEventListener(Event.ENTER_FRAME, drawGame);

// Check for a mouse click
addEventListener(MouseEvent.CLICK, clickCallback);

// Add the background, middleground, foreground and buggy objects to the display list
addChild(backgroundLoader);
addChild(middlegroundLoader);
addChild(foregroundLoader);
addChild(buggyLoader);

// These variables are for making the buggy jump up in the air
verticalSpeed = 0;         // this is the rate at which the buggy is moving upwards (in pixels per frame)
groundLevel = 375;        // this is the y-value of the ground level
}

public function drawGame(event:Event):void {

// Move the background, middleground and foreground at different rates
backgroundLoader.x = backgroundLoader.x - 1;
middlegroundLoader.x = middlegroundLoader.x - 2;
foregroundLoader.x = foregroundLoader.x - 4;

// This makes the the buggy move up and down according to it's vertical speed
if (buggyLoader.y > groundLevel) {
buggyLoader.y = groundLevel;
verticalSpeed = 0;
}
buggyLoader.y = buggyLoader.y - verticalSpeed;
verticalSpeed = verticalSpeed - 1;
}

// This gets called when the mouse is clicked
public function clickCallback(event:MouseEvent):void {
buggyLoader.y = groundLevel - 1;
verticalSpeed = 20;
}

}
}

To see it in action, have a look at the .SWF here. The .mxml is available here, and the .as is available here.

Now, the actual exercise is to take the image variations from the grid of the second file and apply them to each side of the rotating cube in the first. So each side of it will have the same four images with all of the effects and so on applied to them.

For me, rather than playing around with it, the best way to do this was to look at how each of the images had been done on the second file and then apply the same things to the images on the cube. It could easily enough be done using different effects on each side as well as each image, by duplicating the “Render in Image” patch a few times and applying each one to a different side (rather than the same one to each side), and then editing the image effects for each one individually.

The full size screenshots of the macro patches are available by clicking the above thumbnails. The .qtz file is available here, and the Quicktime movie is available here. There is one thing not shown in the above screenshots. When you double click the Render in Image patch, it takes you to four Macro Patches. These patches are the ones that contain the information in the second screenshot above. Each one of them applies to a different image in the grid.

Our first exercise was to make a rotating cube and apply the provided Marilyn painting to each side in a different colour. This was reasonably easy as the colours could all be controlled just by changing the settings in the cube Patch Inspector.

We simply had to create the cube, apply an interpolation to it, and add an image importer that sent the image to each side of the cube. After entering the cube Patch Inspector, each side could have it’s colour quickly and easily changed and appear through the image of Marilyn.

The .qtz file is available here and the Quicktime movie is available here.

We did not work on the challenge in class, instead we looked at bringing in a picture to use as the background and creating tints.

I won’t put up the full source code here, you will have to have a look at the Java applet for all of it, but I will have a look at how to do tints.

Tints are really quite easy to implement. They work the same way as fill works for a rect object, except that it tints the colour of the photo to whatever you specify.

So, the syntax is the same as fill(), it is tint(red,green,blue,alpha).

When using it, it looks like this:

tint(0,153,204,100);
image(laptop,0,0,width,height);

From what I learned earlier in the other parts of the tutorial, it was pretty easy to figure out how to put in the image as the background.

As you would have noticed with fill, by using the alpha channel, you can modify the opacity, so if you were to change the fourth tint() parameter to say 10, it gives the ball and paddles trails. This can of course be adjusted to a suitable length simply by changing the level of opacity.

Have a look at the Java applet.

Note, only one paddle works.

First off, put the image you plan to use in the same folder as the .pde of the file you are working on, keeping in mind that it must be one of the four common formats supported by Processing.

The sketch we will be making will be very similar and will use much of the same code as the previous exercise, so if you have it saved, you could use it as the basis for this exercise.

Setting up the canvas is slightly different to what we have done before in order to include the image, but it is easy enough to follow.

// Variables for random numbers for position and size.
int x1, x2, y1, y2;

// Position and size variables that will be modified.
int boxWidth=250;
int boxHeight=250;
int boxX=100;
int boxY=100;

// Creating the image variable.
PImage laptop;

void setup(){
size(500,500);
// Assigning the image to the variable.
laptop = loadImage("laptop.JPG");
}

void draw() {

PImage object is the datatype that holds images, so an image variable has to be created using PImage. I am using a photo of my laptop since that is the first thing I came across while doing the tutorial, so I have named my variable “laptop”.

As part of the setup, we assign the image to the variable. You can use relative paths, but it is easier if you just copy the photo into the same folder as the .pde.

We load the image into the variable using laptop = loadImage(“laptop.JPG”); within the setup(){}.

Moving onto the rest of the sketch, the majority of it stays the same as the previous exercise. The only change is that we can get rid of the (r,g,b) variables as well as fill() and rect(). We will be replacing these with an image object.

So we should have something like this:

fill(0,0,250,10);
rect(0,0,width,height);

x1 = int(random(6)-3);
x2 = int(random(6)-3);
y1 = int(random(6)-3);
y2 = int(random(6)-3);

boxX += x1;
boxY += y1;
boxWidth += x2;
boxHeight += y2;

// This replaces the rect and fill.
image(laptop,boxX,boxY,boxWidth,boxHeight);
}

We don’t need fill because we already have a coloured image.

So finally, you should have something that looks like this:

int x1, x2, y1, y2;

int boxWidth=250;
int boxHeight=250;
int boxX=100;
int boxY=100;

int r=150;
int g=140;
int b=180;

PImage laptop;

void setup(){
size(500,500);
laptop = loadImage("laptop.JPG");
}

void draw() {
fill(0,0,250,10);
rect(0,0,width,height);

x1 = int(random(6)-3);
x2 = int(random(6)-3);
y1 = int(random(6)-3);
y2 = int(random(6)-3);

boxX += x1;
boxY += y1;
boxWidth += x2;
boxHeight += y2;

r += int(random(4)-2);
g += int(random(4)-2);
b += int(random(4)-2);

//fill(r,g,b);
//rect(boxX,boxY,boxWidth,boxHeight);
image(laptop,boxX,boxY,boxWidth,boxHeight);
}

Have a look at my Java applet to see how it should render.

To start with we will be looking at having the changes to the variables being kept at the start of the next loop. IE, having the loop start with the box in the same position and the same colour as it was at the end of the previous loop.

In order to do this, we need to specify the variables prior to the loop, otherwise at every loop, the variable contents will go back to whatever was specified when the variables were created. So the start of our canvas will look like this:

int x1, x2, y1, y2;

int boxWidth=250;
int boxHeight=250;
int boxX=100;
int boxY=100;

int r=150;
int g=140;
int b=180;

void setup(){
size(500,500);
}

void draw() {
fill(0,0,250,10);
rect(0,0,width,height);

We have created a couple of different variables for colours from what I had used before. Previously I used c1, c2, c3 and sc1, sc2, sc3, however, when we were shown this part it was done using r, g, b, which is potentially a better set of variables to use since they are more descriptive.

By specifying the variables prior to the loop, it means that since we are no longer assigning their value at the start of each loop, their value remains the same as it was at the end of the previous loop.

We have also specified that the first thing the loop is to do is to create a box that starts at the origin (0,0) and be the width and height of the document (width,height). There is something a little bit different about this though. You may have noticed that I have used four parameters in the fill instead of the three that we have used previously. The fourth parameter is the alpha channel, so the syntax is fill(red,green,blue.alpha).

We have assigned 10 as the alpha channel, this allows for a degree of transparency by controlling the fill opacity.

It seems a little unusual to me that to create the appearance of a trail to the motion that we apply a lower opacity to the object below the one we want to have a trail, but it works.

Now that we have our canvas all set up, we can go ahead and work with those variables.

We will use the same random call for the movement of the box as we used in the previous part of the exercise:

// Get a random number for each of the four variables.
x1 = int(random(6)-3);
x2 = int(random(6)-3);
y1 = int(random(6)-3);
y2 = int(random(6)-3);

// Set the size and position based on the random variables.
boxX += x1;
boxY += y1;
boxWidth += x2;
boxHeight += y2;

Now, we want to do something with that list of colour variables, (r,g,b).

r += int(random(4)-2);
g += int(random(4)-2);
b += int(random(4)-2);

For the random colours we used previously, we just used random to pick an integer between 0 and 255. As we are trying to make the colour changes more gradual, we want the random number to be small. For this reason, we have set random to pick an integer between 0 and 4 and then subtract 2 from it.

This means that the colour can, at the most, be adjusted by +2 or -2.

Now to put this into play:

fill(r,g,b)
// rect doesn’t change from the previous exercise.
Rect(boxX,boxY,boxWidth,boxHeight);
}

There you have it, if you have all that together you should get something like this:

int x1, x2, y1, y2;

int boxWidth=250;
int boxHeight=250;
int boxX=100;
int boxY=100;

int r=150;
int g=140;
int b=180;

void setup(){
size(500,500);
}

void draw() {
fill(0,0,250,10);
rect(0,0,width,height);

x1 = int(random(6)-3);
x2 = int(random(6)-3);
y1 = int(random(6)-3);
y2 = int(random(6)-3);

boxX += x1;
boxY += y1;
boxWidth += x2;
boxHeight += y2;

r += int(random(4)-2);
g += int(random(4)-2);
b += int(random(4)-2);

fill(r,g,b);
rect(boxX,boxY,boxWidth,boxHeight);
}

Not sure how it should look? Have a look at how mine turned out.

You can easily edit the previous sketch to do this, or you can write it up from scratch.

Getting things started:

void setup() {
size(500,500);
}

void draw() {
background(0);

Recognise everything so far? Ok, we are going to use the variables from part 2 along with four new ones that we are going to assign more specific values to.

// Setup the variables we used before.
int x1, x2, y1, y2;

// Setup the new variables.
// Assign them with more specific values.
int boxWidth=250;
int boxHeight=250;
int boxX=100;
int boxY=100;

// Assign the first viariables with a
// more controlled random.
x1 = int(random(6)-3);
x2 = int(random(6)-3);
y1 = int(random(6)-3);
y2 = int(random(6)-3);

// Add assign the first variables to the
// second variables.
boxX += x1;
boxY += y1;
boxWidth += y2;
boxHeight += y2;

The random variables should make sense, they are a slight variation on what we have used before. The random number will be chosen from between 0 and 6, and then it will have 3 subtracted from it.

The new variables are what we will be using for the positioning and movement of the box. When we first created them, we assigned them with fixed values. We made the box a square by assigning boxWidth and boxHeight 250, making it 250 wide by 250 high. We then gave the square a fixed position by assigning boxX and boxY 100, making it 100 from the top and 100 from the left.

After the random numbers have been generated for the first set of variables, we then assign them to the second set. However, in order for them to not overwrite our specific sizing and positioning completely, we use an add assign, which is what the += operator is. Add assign basically takes the variable and adds whatever we specify to it. There is also subtract assign available, the syntax for it is -= however we haven’t used it in this scenario.

The add assign takes our specified measurements and then adds the random number to it. This gives us much more controlled motion as for each loop the position and size of the box is reset and then adjusted based on a random number between 0 and 6 less 3, so it is very restricted as to just how far it can go.

Of course for this to actually work, you have to change the parameters of rect slightly. So the last part of this exercise would be:

fill(255,0,0);
rect(boxX,boxY,boxWidth,boxHeight);
}

Have a look at my version if you aren’t sure about how it should look.

I have dropped the stroke and random colours from the previous parts, but these are very easy to implement here as well.

All you would have to do is make the following changes:

void setup(){
size(500,500);
}

void draw() {
//do some drawing
background(0);

int x1, x2, y1, y2;

int boxWidth=250;
int boxHeight=250;
int boxX=100;
int boxY=100;

x1 = int(random(6)-3);
x2 = int(random(6)-3);
y1 = int(random(6)-3);
y2 = int(random(6)-3);

boxX += x1;
boxY += y1;
boxWidth += x2;
boxHeight += y2;

// Add the colour variables.

// Box and border colours.
int c1, c2, c3, sc1, sc2, sc3;
c1 = int(random(255));
c2 = int(random(255));
c3 = int(random(255));
sc1 = int(random(255));
sc2 = int(random(255));
sc3 = int(random(255));

// Add the stroke functions.

stroke(sc1, sc2, sc3);
strokeWeight(10);

// Change the fill to use the random colours.

fill(c1,c2,c3);
rect(boxX,boxY,boxWidth,boxHeight);
}

I used a fixed width stroke for this one, but you could of course make it a random width like in the previous part by adding a variable for it and using the random() command.

For example:

// Add the variable.
int swidth;
swidth = int(random(50));

stroke(sc1,sc2,sc3)
// Change strokeWeight.
strokeWeight(swidth);

Making these changes I got this. Note that this has lots of rapidly flashing colours, so if you think you might have an adverse reaction, don’t look at it.

We used the square that we drew in the previous part for the basis of this motion.

Now, to do random movement, you don’t need anything special because the draw() function that we used earlier actually loops over the contents of draw() {} continuously until it is ended with noLoop() or the program is closed.

So for movement, we just have to specify what we want to happen within the draw() {} loop.

As part of the week 4 tutorial, we made the box move randomly all over the screen and change size randomly.

To do this, we have to specify a list of variables within draw that will be used for the width, height and positioning of the box in place of the fixed parameters we used previously.

We do this with the following:

int x1, x2, y1, y2;

Now, we need to tell it what the value of these variables will be,.

x1 = int(random(width/2));
x2 = int(random(width/2));
y1 = int(random(height/2));
y2 = int(random(height/2));

The int () function converts the contents of the () to integers, be it a primitive datatype, string, or array.

The random() function selects a random number and can have one or two parameters. If one is specified then a random number will be selected between 0 and the parameter. If two parameters are specified, then the first is the lowest number and the second is the highest number and are written as random(low, high); and a random number will be chosen between these two parameters.

What we used in the tutorial for these parameters was a single high parameter based on the total width and height of the canvas. For the two x variables, we are generating a random number between 0 and half the width of the canvas. For the two y variables we are generating a random number between 0 and half the height of the canvas. This is done simply by saying width/2 (width divide 2) and height/2 (height divide 2).

So now, each time Processing runs through the draw loop, a new random integer will be assigned to the x1, x2, y1, and y2 variables. This doesn’t make the box change position though as it still uses the fixed parameters we assigned to it in the first part of the tutorial.

Just leave stroke(), strokeWeight() and fill() as they are, we want to look at rect();.

Instead of the fixed integers we used previously, we are going to replace them with a variable like below:

rect(x1,y1,x2,y2);

So, as in the previous part, the first two parameters are the position from the top left corner, so we have replaced the fixed parameters with x1 and y1. Then the last two parameters are the size of the box. We have replaced these with x2 and y2.

That’s it. You should have something like the following:

// Setup the canvas.
void setup(){
size(800,500);
}

// Create the draw loop.
void draw() {
background(0);

// Specify the variables.
int x1, x2, y1, y2;
x1 = int(random(width/2));
x2 = int(random(width/2));
y1 = int(random(height/2));
y2 = int(random(height/2));

// Draw the boxes.
stroke(255,255,0);
strokeWeight(5);
fill(255,0,0);
rect(x1,y1,x2,y2);
}

When run, this should give you a canvas with a box constantly moving and changing size. The default speed has the box moving fast enough that there appear to be multiple boxes appearing at once in different places.

If you aren’t sure that yours is behaving right, have a look at how mine turned out.

The variables above of course don’t have to stay like that. We have simply specified that the maximum random number should be half the width or height of the canvas. This is so that the boxes don’t end up positioned out of the box or bigger than the box entirely. You can of course remove the /2 on x1 and y1 for some larger boxes, or on x2 and y2 to allow the boxes to be rendered on any starting point on the canvas, even if it means the majority of the box will be off the canvas. You can of course do a combination of both, or put other variables there for other movements.

Additionally, you can have the colours of the boxes and their borders width and colour change the same way by adding some more variables:

// Setup the canvas.
void setup(){
size(800,500);
}

// Create the draw loop.
void draw() {
background(0);

// Specify the variables.
// Box widths and positions.
int x1, x2, y1, y2, swidth;
x1 = int(random(width));
x2 = int(random(width/2));
y1 = int(random(height));
y2 = int(random(height/2));
swidth = int(random(50));

// Box and border colours.
int c1, c2, c3, sc1, sc2, sc3;
c1 = int(random(255));
c2 = int(random(255));
c3 = int(random(255));
sc1 = int(random(255));
sc2 = int(random(255));
sc3 = int(random(255));

// Draw the boxes.
stroke(sc1, sc2, sc3);
strokeWeight(swidth);
fill(c1,c2,c3);
rect(x1,y1,x2,y2); }

Have a look at how mine came out if you aren’t sure what it should look like. Note that this has lots of rapidly flashing colours, so if you think you might have an adverse reaction, don’t look at it.