Open Processing
What is processing?
"Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology. There are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning and prototyping." Source https://processing.org
Research
The first thing on the processing website is this video. It gives a rough idea on how to use processing and how to code. I have watched the video a few times to get an overview on how to code .
Learning how to code in class
The first thing i learned was how to create simple line. Although it is a simple coding it showed me the very basics which has helped me create some future designs.
One of the main things i learned in this
I started experimenting with shapes in processing and was challenged to make a house.
I found it hard to move an object but then soon realised how to do it.
This stage of processing made me realise that a lot of coding is just repetition but with different values to edit the direction or placement of the shape/object.
I created the house on the left using the code i had learnt throughout the workshop.
CODE:
void setup()
{
size(600,500) ;
background(0,0,0,0) ;
}
void draw ()
{
stroke(250,0,255);
stroke(0,255,0);
fill(255,0,0);
rect(138,300,200,200);
stroke(30,0,40);
line(150,150,0,150);
triangle(128,300,212,80,344,300) ;
rect(150,340,50,50) ;
rect(260,340,50,50);
rect(210,430,50,70);
rect(400,400,150,20);
rect(445,352,70,50);
ellipse(445,440,50,50);
ellipse(510,440,50,50);
}
String DAYS [] = {"Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"};
int AM [] = {10,12,13,6,7,12,8};
int PM [] = {37,89,32,234,234,345,56};
void setup() {
size(1300,700);
background(0,0,0);
stroke(0,255,255);
smooth(2);
}
void draw ()
{
line(0,height/2,width,height/2);
stroke(250,150,250);
text("Amount of money i spend AM & PM.",40,50,200);
for (int i=0; i < AM.length; i++) {
fill(255);
ellipse (AM[i]*100, height/2,PM[i],PM[i]);
text(DAYS[i], AM[i]*100, height/3, PM[i], PM[i]);
}
}
In the 3rd stage of the workshop we were asked to create a representation of some data that reflected our lives. For example i used how much money i spend each week of october. the code above is another example which i made, it is what times i wake up from monday to sunday however it didn't work very well.
This is the outcome of the code- above
DEVELOPED SKETCH
This second attempt was a lot more affective than the first one, it shows clearly which weeks i spent more money on. Unfortunately during the workshop my laptop crashed and so i only have the screenshot of the sketch and not the actual code. I am going try and re crate this sketch in order to create further sketches from it. The key to creating this was trial and error. I kept on attempting different codes until finally i managed to take control on the placement of the circles.
Further Research
Processing has an external a web page which people can share their sketches on (http://www.openprocessing.org)
This webpage is fantastic for learning how to code and for inspiration. It gives you the option to copy and paste other peoples code which is very useful when you want to learn how to do a sketch which has inspired you.
I Looked at a few different sketched to look at the different possibilities of processing. I learnt that you can create responsive sketches that respond to the movement of the mouse and other things. There are also simple animations that can be created
OpenProcessing login - sign up browse classrooms collectionsbooksgo plus+jobs My New Sketch fractalTreeCake Twin Circles 1x 2x Three Periodic Arms Interactive Three Periodic Arms
fullscreen
sketch225244.pde
float t;
void setup()
{
size(900,450);
background(255);
frameRate(60);
t = 0;
}
void draw()
{
//circle 1
float x1 = 1 * cos(t);
float y1 = 1 * sin(t);
x1 = map(x1,-1,1,0,width/2);
y1 = map(y1,-1,1,height,0);
noStroke();
fill(200);
//ellipse(x1,y1,3,3);
//circle 2
float x2 = 1 * cos(-2*t);
float y2 = 1 * sin(-2*t);
x2 = map(x2,-1,1,width/2,width);
y2 = map(y2,-1,1,height,0);
fill(200);
//ellipse(x2,y2,3,3);
strokeWeight(0.5);
stroke(0);
line(x1,y1,x2,y2);
if (t > TWO_PI)
{
//saveFrame("blahc###.png");
//t = 0;
//background(255);
}
else
{
t = t + TWO_PI / 500;
}
}
void mouseClicked()
{
t = 0;
background(255);
}
These Skectesh are animations created and posted on the open processing page. these sketches have very simple code and is very short code in relative terms. i am going to edit the coding in these sketches to try and create my own versions of them and and experiment with animations interactive code using my mouse.
My edited Versions
These sketches i have taken some of the code and edited it, For the one above i have changed the movement of the circle.
for the one below i change the code which effects the weight of the lines. this has made it look darker. By editing the code i have learnt how it works and learnt how to change the weight of an object.
Once again i have change the weight of the ones in order to create a light cone
I changed the stroke weight from strokeWeight(2.0); to
strokeWeight(0.001);
CODE
Original version
My edited version
I really liked the way this sketch flowed, the colours and the shapes interested me a lot and so i decided to study the code and work out how to change the shapes and colours
I am going to further look at sketches related to this one and create more of my own and possibly use the base of this code to create a brand new design
Development, Movement & Colour
So far i have created simple designs with my own code and edited other peoples code. Now I'm going to attempt to create a design and change the colours myself using the RGB scale (RED, GREEN, BUE).
Attempt 1
Attempt 2
Using a base of code from the open processing webpage (http://www.openprocessing.org/) i created moving circles that moved in almost random directions but eventual repeat itself. i Changed the colour of the circle by changing the number of the string which correlated to the biggest circle.
Processing uses an RGB scale to colour and so it has 3 possible numbers
fill(80, 150, 700); this created the blue circle on the right hand side
I have created a moving circle and experimented with the different sizes, speed in which the circle spins, placement and direction. I again used trial and error in order to achieve these designs. I really like the visual effects that this sketch produces.
Above is a video of my sketch. i really like the way it has turned out however it has been created through trial and error and so it hasn't followed much direction and has just turned out the way it is just by chance and so now i am going to try and create a piece of code which i can control and adjust the settings. I have learnt how to create this code through tutorial videos and by adjusting pieces of code i have found on www.openprocesing.org
CLICK PLAY
CLICK PLAY
float angle = 0.0;
float speed = 100;
float radius = 10.0;
float sx = 7.0;
float sy = 6.0;
void setup() {
size(400, 400);
noStroke();
}
void draw() {
fill(0, 12);
rect(0, 0, width, height);
angle += speed;
float sinval = sin(angle);
float cosval = cos(angle);
float x = 200 + (cosval * radius);
float y = 200 + (sinval * radius);
fill(80, 150, 700);
ellipse(x, y, 30, 30);
float x2 = x + cos(angle * sx) * radius/2;
float y2 = y + sin(angle * sy) * radius/2;
}
float angle = 1.0;
float speed = 0.1;
float radius = 150.0;
float sx = 7.0;
float sy = 6.0;
void setup() {
size(400, 400);
noStroke();
}
void draw() {
fill(0, 12);
rect(0, 0, width, height);
angle += speed;
float sinval = sin(angle);
float cosval = cos(angle);
float x = 200 + (cosval * radius);
float y = 200 + (sinval * radius);
fill(80, 150, 700);
ellipse(x, y, 30, 30);
float x2 = x + cos(angle * sx) * radius/2;
float y2 = y + sin(angle * sy) * radius/2;
}
HOME
HOME