Processing #3

In the third Processing workshop we developed our knowledge and understanding of how you can make interesting patterns with different shape functions.

From the past two workshops I have learnt that the basic setup for a Processing sketch is putting


void setup() { size(1280,720); smooth(8);

background(0); frameRate(25); }

This is a standard setup defining the size and setting the background to black and the framerate to 25fps. This was the basic setup because, the background needed to be black so that the pattern that would be created can be clearly seen. After the initial setup of the sketch, code needed to be setup for the pattern that will be drawn.

For this, we setup up an array of colours called p.


color[] p = {#eb5050,#ff8827,#edeaee,#e8be55};

This was because we can easily put the array colours in without having to put each colour again and again where we want the colours. These types of functions make the coding of sketches in Processing much simpler and easier. Whereas before in the past Processing workshops, we did many functions manually instead of setting up features such as ‘p’ for an array of colours. Now that I know we can use assets such as these, the code for different Processing sketches will be a lot less cluttered. After this, a float function was setup to initialise and declare a variable as a floating point number, this was used to control the roatation angle of the pattern being created.

float r 0;

Now we have the rotation of the pattern being created, the next thing to do was to create the pattern itself. For this, we used various types of rect() translate() fill() to create the basic pattern.


void draw(){
fill(0,10); noStroke();
rect(0,0,width,height);
translate(width/2,height/2);
rotate(r);
r=r+0.1;

}

With this, we were instructed to include another shape into this. This shape was going to be called house.


for (float i=10; i < height/3; i = i+30){

house(i,20,33);

}

This was included into the void draw(). This is for a loop that draws a row of houses. We learnt today that the this house function is not built in like rect(). This means that it is defined below the draw loop, which we had to set up.

The function for the house to be created was:


void house(float x, int y, int o){
color c = p[int(random(p.length))];
fill(c,o); stroke(255,30);
triangle(x+15, y, x, y+15, x+30, y +15);
rect(x,y+15,30,30);
rect(x+12,y+30,10,15);
noFill();
stroke(255,70); strokeWeight(1);
float radius = random(150);
ellipse(x,y,radius,radius);
stroke(c,40);
line(x,y,x+100,y+100);
}

This created a house shape whx

Advertisements

Processing #2

From the first Processing workshop, I learnt some of the basic functions and some of the basic lines of code. In the second Processing workshop the aim of the workshop was to create a pattern using different shape functions. The first thing to set up was the canvas. For this I used a sizing of 800×800 then for the background colour, I used a random fill of rect() with the colour values of black and white. The full code looks like this:


void setup(){
size(800,800);
frameRate(25);
smooth();
colorMode(HSB, 100);

for (int y=0;y<height;y=y+60){
for (int x=0;x<height;x=x+60){
fill(random(100),70);
rect(x,y,60,60);
}
}
}

This meant that when the Processing file loaded up, the background would have a black and white squared pattern. Which looked like:

Screen Shot 2015-01-09 at 14.18.01

This background works for the sketch as it emphasises the different uses of patterns and colour values. The basic function of this Processing tutorial was to show the different pattern techniques you can use. The next thing to implement on this canvas was a spiral pattern. The purpose of this was to experiment with different shapes and functions in Processing as we are still learning this new program. To make the spiral effect, the code needed looks like this:


void setup(){
size(800,800);
frameRate(25);
smooth();
colorMode(HSB, 100);

for (int y=0;y<height;y=y+60){
for (int x=0;x<height;x=x+60){
fill(random(100),70);
rect(x,y,60,60);
}
}
}

int s = 0;
int r = 0;
float h = 0;

void draw(){
translate(width/2, height/2);
rotate(r);
r=r+1;
fill(h,100,100,20);
h=(h+0.5)%100;
rect(0,0,s,s/6);
s=(s+2)%(width/2);
if (mousePressed){
save("an_image.png");
}
}
<pre>

With this code, the finished product looks like:

Screen Shot 2015-01-09 at 15.34.46

The finished Processing piece combines both the background pattern using shapes and the shapes that make the spiral pattern. The reasoning behind this piece of Processing is to experiment with different shapes and how they interact with one an other. I feel as though I have learnt a lot from this workshop as I have discovered how to use shape functions and how to create patterns using these functions. I can apply what I have learnt in this workshop to future projects as, using shapes in Processing is a key element in creating new pieces of Processing.

Dorset Independence Project – Putting it in the space/overview of assignment

Today was the day where we put the posters in the foyer in Weymouth house. The aim of today was to see how people react to the posters and if the posters grab the peoples attention. Can’t be too difficult, can it?

One of the main parts of this was the placement of our poster. This was the main part of today because if we put it in a bad place or a place where people can’t see it, it means that we will not see how our posters are perceived by other people. We looked at the different places where we could put the poster and because everyone else on our course was doing the same thing, there wasn’t many places to put myself and Sam’s poster. Although, we had an idea which no one had used yet. This idea was putting our poster in both elevators on the mirror. We did this because normally people in an elevator want to avoid conversation with other people in the lift so if there’s something to look at and read, they will read it. This was our thought process for the placement of our poster. This worked well as a few people got the elevator and every person read the poster. This task was good to assess how working with a space can make or break your poster.

Overall, this assignment gave us an insight on how to design a poster for a purpose and an audience. However, I think it could of been a better purpose as trying to make Dorset independent is quite a far fetched idea and I struggled to make Dorset appealing, no offence people who live in Dorset. Although saying that, the process of thinking of where to put the poster for peoples reactions and being aware of the space was a good experience. I believe I can use techniques and awareness learnt in this task in my future tasks that use the space.

Processing – The Start

Today marked the beginning of learning and using Processing. I am excited to begin this as this program allows you to create various creative texts. In the first workshop we looked at the basics of Processing and getting used to using the software.

The first thing we learned to do whilst using Processing was sizing the canvas. This is the first thing we were taught to do. This is possibly the most useful part of the whole process as it defines how big the thing you are making is.

size(640, 360);

From this we were taught how to implement different features such as text, points and lines. These were accompanied by background color, strokeWeight and smoothing. These are some of the basic lines of coding for Processing which would be used in almost every project created on Processing. At this point in time, we have this code:

size(640, 360);
background(255);
stroke(0);
strokeWeight(12);
smooth();
point(50,50);
line(100,100,200,50);

This was important for us to learn as it gave us some basic grounding in Processing and, as we are just beginners in this particular software, will help us expand our knowledge and understanding when trying to tackle more difficult Processing tasks. After this we were taught how to implement primitive shapes. The codes we were using and trying out were, triangle(), rect(), quad(), ellipse() and arc(). We were shown that different shapes require different lines of code to make them work.

Ellipses

ellipse(252, 144, 72, 72);

Rectangles, Triangles

rect(81, 81, 63, 63);
triangle(288, 18, 351, 360, 288, 360);

Each of the values on the shapes can be changed into variables from a fixed number. This allows us to change the shapes much easier which makes our lives a lot easier when creating the values of the shapes.

size(640, 360);
int a = 50;
int b = 120;
int c = 180;
line(a, b, a+c, b);
line(a, b+10, a+c, b+10);
line(a, b+20, a+c, b+20);
line(a, b+30, a+c, b+30);
a = a + c;
b = height-b;

Now that I have practiced using all of these different functions, it’s time to put them all together to create a piece of Processing.

void setup() {
size(640, 360);
}
void draw() {
background(127);
noStroke();
for (int i = 0; i < height; i += 20) {
fill(129, 206, 15);
rect(0, i, width, 10);
fill(255);
rect(i, 0, 10, height);
}
}

This code was used to create this:
processingbull1

This encompasses all of the techniques taught in the workshop so far. This sketch can be changed in numerous different ways. At this point, I have learnt a lot of basic functions and tools of Processing.

The second part of the workshop was focused on animation and mouse movement. We wanted to learn this as this implements interactivity to the piece of Processing which is much more exciting than just visual. The first animation we created was an animation loop.

void setup() {
size(200, 200);
}
void draw() {
background(204);
line(width/2, height/2, mouseX, mouseY);
}

This is the outcome:
processingbull2
The mouse isn’t shown in the screenshot however, whenever you move the mouse, the end of the line moves with the mouse cursor. This creates a user interaction with the piece of processing. I can see foresee mouse interaction becoming ever growing feature of future Processing sketches I make.

The next part of Processing we looked at and tried out was the random() feature. This makes anything in the sketch to become random. This can be useful especially with colours.

</pre>
<pre>
void setup() {
size(640, 360);
noStroke();
}
void draw() {
fill(random(0,255));
ellipse(random(0,width), random(0,height), 30, 30);
}

This was the outcome:

processingbull3
The random() was set to a gray-scale so the random() only randomises between white and black. Also, a random() was set on the ellipses so that they would appear in random places on the canvas.

I altered this code by including a multi-coloured range of random() and also, as the sketch progresses, the ellipses become bigger as more are randomly created.

float z = 1;
void setup(){
size(640, 360);
noStroke();
}
void draw(){
fill(random(0,255),random(0,255),random(0,255));
//background(0);
ellipse(random(0,width), random(0,height), z, z);
//z++;
z = z+0.1;
z=constrain(z,10,160);
}

This was the outcome:
processingbull4
As you can see, the ellipses range from small to big and are random colours. I tried this as it makes it more visually appealing rather than just having the ellipses all the same size and also, making the colour multi-coloured rather than gray-scale.

From this, we looked at how we could integrate interactivity into this sketch. For this we added a simple if mousePressed function so when the mouse was pressed, a stream of ellipses would appear starting from small to big.

The first workshop on Processing as been a somewhat easy experience as we are dealing with quite simple functions and learning the basics. From this workshop, I can see how Processing can get harder and more complex. I am looking forward to the next workshop as I will be trying to expand my knowledge from this workshop.

Dorset Independence Poster – Final Design

In the previous blog post, I discussed how we had the basic skeleton of the poster and the text font we were going to use for the information on the poster. During the time between then and now, we brainstormed what information we would want to put on the poster. This was harder than we first thought because, we wanted people to support the movement of Dorset becoming independent. The problem was that, we were struggling to find positives about Dorset that weren’t to do with the beach and environment. We didn’t want this information on the poster because, if a country or county for this matter is becoming independent, the only reason why people would vote for this is if the place could support itself. So we looked for statistics and facts about Dorset that leaned more towards the economic side of Dorset and also just generally good facts about Dorset.

After we decided what we would put on the poster, the final poster looked like this:

dorsetdependant

As you can see, we stuck to the original idea of having the fist as the vocal point of the poster. Moreover, we used the Dorset flag colours for the colour scheme of the poster to signify that the poster is solely about Dorset. Although, we used different colours for the promotional side of the poster. For this information, we used the colours green for “Have your say” and blue for the website and Twitter hash tag “#DONTDEPEND”. We used green because for “Have your say” because green is perceived as a positive colour and green is used for traffic lights for when a car can go. Furthermore, we wanted this sublimely put across for people to see this poster and ‘go’ to the website and use the Twitter hash tag to get involved with Dorset’s independence. We used the blue for the website and the Twitter hash tag as twitter is blue and most websites on the internet have blue.

Overall, we were pleased with the final poster. This was because, we felt it conveys the message well and it fits the brief almost exactly. However, our opinion does not matter as such because, the final part of this assignment is putting this in foyer of Weymouth house and seeing how people react to it and if they read it or not.

Dorset Independence Poster – Creating

Now that we have the basic idea, we can start putting our ideas into Photoshop and see if they work. At this point, we still have plenty of time to change our ideas if they do not work. The first idea we altered was the fist. We decided that instead of having a plain fist on the poster that we should put the Dorset flag on the fist, so the whole fist is the Dorset flag. We decided this because it is then clear that the fist represents Dorset as a whole and that Dorset is powerful and independent. This was the outcome:

dorsetposterdraft

We felt that this fist works well with the Dorset flag over it. We chose a blue background for the poster as this is a neutral colour (used for most social media), and so the fist stands out against a darker background. We placed the fist at the side of the poster as we are putting text next to it and above it.

The next stage for us was to decide on a font. We wanted a unique font and also a font that looks like it belongs on an independence poster. We research fonts used on propaganda posters. However, these were too harsh and were too obviously linked to propaganda; we wanted subtle use of propaganda. After sifting through many different fonts, we decided on the font KG Defying Gravity Font:

font

We chose this font because it stands out, and we liked the banner look. We used this font for every text part of the poster. We wanted to put the text in the space next to the fist as it would look good together and then put the title of the campaign above everything else, defining it as the title. The colours of the text needed to stand out so we decided, after trying out different colours against the dark blue background, to have the text in the colours of the Dorset flag. We chose this because when you look at the poster and look at the text, you know exactly what the poster is about. This is because the colours are in the Dorset flag colours so the viewer will know that the poster is about Dorset. Now that we know what font we wanted to use, we are then going to experiment with text placement and also what sort of information to put on the poster in the next few days.

Dorset Independence Poster – The Brief/initial ideas

Recently, Scotland tried to become independent from the rest of the UK. This came with many different campaigns to try and persuade Scotland to vote ‘Yes’ to becoming independent. Although they did not succeed in becoming independent, the bid for independence produced a variety of interesting and eye-catching posters which were trying to sway the thoughts of the people of Scotland.

With this in mind, what if Dorset wanted to become independent? This is the task we were set. We had to create a poster to promote Dorset becoming independent and to encourage people to join the campaign. This meant that the poster had to be eye-catching, have a clear target audience and also clearly show that the poster is campaigning for Dorset to become independent. We were asked to form groups so I decided to pair up with my housemate, Samuel Jones. We mutual decided that this would be the best course of action as we can work on it and discuss it easily.

Our first course of action was to decide on the key areas of the poster and what would be the vocal points of the poster. We decided these areas by researching Scotland’s independence posters and also, we looked at Britain’s First posters. We looked at these two areas as they both are strongly showing that they want independence from something. After looking at several posters we settled on the idea of having a significant picture on the poster which conveys the overall idea of the posters. Furthermore, we looked at propaganda posters for war to encourage people to join and sign up. Me and Sam liked the look of these posters as they are very direct and eye-catching. One of the posters that stood out to us was this:

We liked the idea of using a fist as this is a symbol of rising up against something and power. We felt that becoming independent also represents these ideals. We wanted the fist to be the vocal point of the poster however, have information accompanying the fist.

At this point in time, me and Sam have decided the rough idea of the poster so the next step is us to figure out how to put our ideas into reality.