processing

Portfolio

Hello Processing

In one of the sessions we learned the basic steps of processing, including essential functions to run the code, variables, interaction with geometrical objects, loops, debugging, moving and animating objects.

Processing is a software that teaches you to code and be able to see the functionality on the screen. It is based on Java; however some pieces of code are already included, for example- the main canvas block.It is user friendly and helps in finding errors in the code by displaying hints in the message window.

Processing can be downloaded for free on the website below which includes over 100 libraries and different tutorials on how to use it.

In Processing all functions are case sensitive.

First word usually starts with a lower-case and second word with an upper-case.

Every line of the code is a function call. Functions have a name, followed by a set of arguments enclosed in parentheses.

Each line must always end with a semicolon.

When drawing an object, it is important to specify its colour,stroke and other parameters before the shape is drawn on the window. If it is done in the other way round, shape will not be able to apply called functions.

Comments are essential to include in the processing. They are used as reminders of what the code means, helps with debugging, and so on.

Comments on a single line are created with two forward slashes //, and over multiple lines are marked by /* text */.

There are two essential steps needed in order to run processing;

Step1 –Set starting conditions for the program one time

Step2 -Do something over and over again until the program quits.

In processing these steps are called;

void setup() { } - “void” calls the function. In the setup block computer updates the information and environment properties as the program starts. This function runs only once when the program starts.
Curly brackets open and close the code.

void draw() {}- is a function which allows to draw objects over and over again.

What is processing?

Useful information I learned using processing.

1. Calling a vector function.
I used 'float distance' function in order to move object when the mouse curosr is close.

2. Defining the path of the vector to measure the distance between a mouse and the object. Using the coordinates of the P vector for the accurate measurements.

3. Drawing one rectangle and quad which are joned together.

4. Using "If" function I was able to make my object change to a random colour when the mouse is clicked.

1. file

//Declaring. Need an array
to specify the amount of the elements.

// Initializing. Calling a function to
define a random length from 0 to width.

// Calling the functionality and running each ball.

2. Class Ball

//Using variable to declare speed and direction.

//Using constructor

//Applying a behaviour.

//Drawing ellipses and displaying them on the screen.

Here are my projects in processing

Sketches from the learning process

PVector position;
PVector v;
float distance;

void setup() {
size(800, 800);
position = new PVector(600, 200);
v= new PVector(100, 0);

}

void draw()
{
background(0);
rect(position.x, position.y, 80, 100);
quad(position.x, position.y, 400, 18, position.y, 360, 144, 360 );
v.x= mouseX- position.x;
v.y = mouseY-position.y;
distance= v.mag();
v.normalize();
position.x= position.x + v.x; // add vector
position.y = position.y+v.y;

if (mousePressed == true )
{
fill(random(255), random(255),random(255));
}

quad(position.x, position.y, 216, 18, 216, 360, 144, 360 );
v.x= mouseX- position.x;
v.y = mouseY-position.y;
distance= v.mag();
v.normalize();
position.x= position.x + v.x; // add vector
position.y = position.y+v.y;

if (mousePressed == true )
{
fill(random(255), random(255),random(255));
}

else {
fill(255);
}

Ball[] ballColection = new Ball [40];
void setup(){
size(800, 800);
}

for (int i = 0; i < ballColection.length; i++) {
float r = random(255);
float g = random(255);
float b = random(255);
color myColor = color(r, g, b);

ballColection[i] = new Ball(random(0, width), random(0, 200));
}
}

void draw(){
background(0);
for (int i=0; i < ballColection.length; i++){
ballColection[i]. run();
}
}

class Ball{
float x = 0;
float y = 0;
float speedX = random(-4, 4);
float speedY = random(-1, 4);

Ball(float _x, float _y){
x= _x;
y= _y;
}

void move() {
x+= speedX;
y+=speedY;
}
//updates position by adding frames

void display() {
fill(#5C8AE6);
ellipse(x,y,100,100);

fill(#E65CB8);
ellipse(x,y,100,20);

fill(#B2B247);
ellipse(x,y,20,100);

}
}

void run(){
display();
move();
bounce();
}

void bounce() {

if(x > width){
speedX = speedX * -1; // invert from positive to negative// ball bounces only end of the corner
}
if(x < 0){
speedX = speedX*-1; // specifying all the corners 4x times ;
}
if(y > height){
speedY = speedY*-1;
}
if(x < 0){
speedY = speedY*-1;
}

}

[syntax for void setup and draw]

Home

About

Portfolio