PVector position, velocity, gravity, force, centre, mouse;

void setup(){
position = new PVector(50, 50);
velocity = new PVector(4, 0.6);
gravity = new PVector(0, 0.5);
force = new PVector();
centre = new PVector(0.5*width, 0.5*height);



void draw(){
mouse = new PVector(mouseX, mouseY);

force.add( forceFromMouse() );

point(position.x, position.y);

void bounce(){
if(position.x > width){
position.x = width;
velocity.x = -velocity.x;
else if (position.x < 0){
position.x = 0;
velocity.x = -velocity.x;

if(position.y > height){
position.y = height;
velocity.y = -velocity.y;
else if (position.y < 0){
position.y = 0;
velocity.y = -velocity.y;

PVector forceFromMouse(){
return mouse.get();

The above code produces:


Processing: agents

In todays lecture we are learning about using agents.

float x, y;

float c;

^ declared variables
void setup(){
c = color(22,222,222);

^ assignment

void draw (){

x += random(-1, 1);
y += random(-1, 1);

^ update of variables
rect(x, y, 10, 10);

the updated variables can be put into their own voids:

void updateAgent(){

x += random(-1, 1);

y += random(-1, 1);

void drawAgent(){
rect(x, y, 10, 10);

Screen Shot 2014-10-31 at 15.40.27

The above classes code creates a small rectangle agent that floats and wiggles around the canvas. The below code creates wiggling agents at the point where the mouse is clicked. It also makes random coloured agents.

Screen Shot 2014-10-31 at 16.17.20 Screen Shot 2014-10-31 at 16.18.46

The workshop today fully explained everything from previous lectures and I feel that i understand processing a lot more. Although I’m still not comfortable with using the language to write by myself.

Processing, for loops, image processing and if statements

tinting images:

Screen Shot 2014-10-24 at 15.00.01Screen Shot 2014-10-24 at 14.59.46  Screen Shot 2014-10-24 at 15.01.49

getting to grips with for loops

int s=20;

void draw(){

for(int y =0; y<height; y=y+s){
for(int x =0; x<width; x=x+s){

This for loops creates a grid of rectangles to create pixels.


processing tutorials for pixels:

Screen Shot 2014-10-24 at 15.35.41 Screen Shot 2014-10-24 at 15.43.51

using the pixelated image above, I used:

if (mousePressed && mouseButton== LEFT || key==’i’){
} else {

to change the image to another image when clicked or by pressing the i button.


Screen Shot 2014-10-24 at 16.18.05 Screen Shot 2014-10-24 at 16.17.57

Workshop blogging

Making Houses

Screen Shot 2014-10-17 at 14.55.15

Experimenting with this code:

void setup(){

void draw(){

void house(){


Screen Shot 2014-10-17 at 15.06.21

using if loops to create rows of the house:

Screen Shot 2014-10-17 at 15.09.46

Screen Shot 2014-10-17 at 15.16.58

creating a colour array:

using square brackets means array!

Screen Shot 2014-10-17 at 15.24.39

used adobe kuler to find hex code colours to add to the code:

Screen Shot 2014-10-17 at 15.24.28

using the colour codes I chose:

Screen Shot 2014-10-17 at 15.29.36

Screen Shot 2014-10-17 at 15.29.42

rotating the rows, without a stroke:

Screen Shot 2014-10-17 at 15.51.09

Screen Shot 2014-10-17 at 15.49.04 Screen Shot 2014-10-17 at 15.48.51


Screen Shot 2014-10-17 at 16.03.15

created using rotating houses and then using an ellipse which follows the mouse on the x axis.

using the code: if(mousePressed){save(“foobar.png”);};
I saved this image:



Processing is a programming language, development environment, and online community. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology. Initially created to serve as a software sketchbook and to teach computer programming fundamentals within a visual context, Processing evolved into a development tool for professionals. Today, there are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning, prototyping, and production.


In todays workshop I experimented with generative design. Generative design is a method to produce images, sound, architectural models and animations which are a set of rules or an Algorithm, normally by using a computer program. Most generative design is based on parametric modelling.


First of all I created a simple draw tool which changed size over time, using the function x=(x+1)%50; it will continue to add 1 to the value of x until it reaches 49 and then the modulo function resets the counter to zero and then it starts again. I used different mouse clicks to create different colours using HSB (hue, saturation, brightness).

IMG_6112 IMG_6120


Next, i experimented with if statements. I made a simple greyscale grid by using rectangles. After this I changed the colours of the rectangles to change randomly and then grow and shrink randomly (above).


During the end of the workshop we were experimenting with rotating images. I made a rectangle rotate and a new rectangle would be drawn of the top and rotate, to create a pattern. At first the rectangle was filled in white with a black outline. I thought this was a bit boring so removed the fill and it created lots of lines, I thought this was a bit too busy so removed the outline and randomised the colours fill. Once i’d done this, I then looked at a way to make it interactive so I used mouseX, mouseY to get the spinning rectangle to follow the mouse (below) and I thought this was a good way to create some interesting imagery which I am going to mess around with over the weekend.