How should i start learning Processing?

rublev · August 2017

Hello, I am a beginner. I don't have any coding and math background. I am a design and media student. I really want to execute some generative motion graphic arts, audio visualization, random fractals, particles and so on. I am not interested in interactive arts for now. I decided to learn Processing and i watched Daniel Shiffman's Processing videos on Youtube. But i have so many missing points especially about object oriented programming and arrays. Actually i couldn't understand anything about them. That's why i decided to look some examples and other works. However i can not understand the logic behind the most of lines of codes. I guess I have so many roads to take in order to execute some works which i want to execute. So, please tell me some really really basic resources (other basic tutorial videos, e-book etc.) to start processing. I mean at least i want to understand logic behind some sketches from this website so that i can improve my coding skills by myself :https://openprocessing.org/ Thanks for help and all of your sharing. (Sorry for my English if there are any problem.)

Chrisir · August 2017

Hi and welcome again!

Tutorials

Start by reading the first 5 tutorials here.

There is also a tutorial for arrays and one for objects (object oriented programming)

https://processing.org/tutorials/

For arrays and classes

Also see here:

https://forum.processing.org/two/discussion/8082/from-several-variables-to-arrays

http://forum.processing.org/two/discussion/8081/from-several-arrays-to-classes

Practice

Your own sketches and trial and error is the best practice to learn it.

Post the concrete sketches and questions here and people will help you.

GoToLoop · August 2017

You 1st need to specify whether you wanna learn Java syntax for Java Mode or JavaScript for p5.js.

rublev · August 2017

Thank you so much Chrisir.

Chrisir · August 2017

you might also want to read this:

https://github.com/Kango/Processing-snippets/wiki/programming-and-functions

https://github.com/Kango/Processing-snippets/wiki/Object-Oriented-Programming

https://github.com/Kango/Processing-snippets/wiki/Complexity-of-programs

I saw you already wrote a nice sketch in your other discussion - congratulations!

rublev · August 2017

You 1st need to specify whether you wanna learn Java syntax for Java Mode or JavaScript for p5.js.

Thanks GoToLoop. I don't know what does it mean Java syntax or p5.js. I have seen some p5.js videos on Daniel Shifman's videos. I just downloaded the Processing app and started to learn and write some code. I going to research what those are. If you have a brief answer about them i want to listen. Thanks for help.

GoToLoop · August 2017

Java Mode: https://Processing.org/reference/
p5.js: https://p5js.org/reference/
https://GitHub.com/processing/p5.js/wiki/Processing-transition

rublev · August 2017

you might also want to read this:

https://github.com/Kango/Processing-snippets/wiki/programming-and-functions

https://github.com/Kango/Processing-snippets/wiki/Object-Oriented-Programming

https://github.com/Kango/Processing-snippets/wiki/Complexity-of-programs

I saw you already wrote a nice sketch in your other discussion - congratulations!

Thanks Chrisir. The links which you shared with me are really useful and they explain some basic coding logic. That's good for me.

rublev · August 2017

I will share a Daniel Shiffman video about comparing p5.js and Processing. Maybe some other new Processing users want to know about differences at basic level.

Chrisir · August 2017

A word about Arrays and Object oriented programming

This is basically a summary of the links (from-several-variables-to-arrays etc.) above.

Let's say you want to make a game for a cat running on the screen. Or have program for your customers or items in your web shop.

You would have variables to represent the cat like:

cat1X
cat1Y
cat1Speed

This is its position and speed.

Then you can easily display the cat, reflect it on the screen border etc.

ok, now let's say you want to have 3 cats.

cat1X
cat1Y
cat1Speed

cat2X
cat2Y
cat2Speed

cat3X
cat3Y
cat3Speed

Which gives you very long code (for display and reflection you need to copy the lines).

Arrays

Next step is to use a arrays here. Since you already have cat1X, cat2X and cat3X, why not make a list out of it? Because this is what arrays are: Lists. Basically you have 3 parallel arrays which hold the data. Think of 3 parallel shopping lists. The 0th (zero) line in all 3 lists holds all data for cat zero, 1st line for cat one etc.:

int catX= new int[3];
int catY = new int[3];
int castSpeed = new int[3];

then you can use for-loops to loop over the arrays to display the cats and reflect the cats and change their data.

That's a huge improvement when you have 100 cats. Instead of having 100 lines ellipse(cat1X,cat1Y,14,14); you only need:

for(int i=0; i<100; i++) {
    ellipse(catX[i],catY[i],14,14); 
}

solution 3

But now let's go on. Some might say it's clumsy to have the data for one cat in three arrays.

Can't we have one array and each item in the array is an entire cat?

Here you need object oriented programming. The entire cat in the slot of the array is an object (consisting of x,y,speed).

You already have the data for one cat :

cat1X
cat1Y
cat1Speed

now we make a class Cat that holds those in one package:

class Cat {

    int x; 
    int y;
    int speed;

} // end of class

you can add here also the function display() etc. inside the class. So it's all in one neat package class Cat.

Understand that the class is the cookie maker and one object is the cookie, derived from the class.

Now you can make an array from that class:

Cat cats = new Cat[3];   // array of type Cat

So that makes things better readable than with multiple arrays.

for(int i=0; i<100; i++) {
    cats[i].display(); 
}

I hope this helps.

Best, Chrisir ;-)

rublev · August 2017

Thanks Chrisir. It was useful explanation for me.

Chrisir · August 2017

one good practice project for you might be to do the codes for my above text Variables, Arrays and object oriented programming:

1st a program with one cat (just an ellipse) bouncing on the screen borders and flying diagonally
2nd a program with 2 cats
3rd a program with 100 cats and 3 arrays.
4th a program with 100 cats and 1 array using object oriented programming.

rublev · August 2017

Yes. It will be good practice for me. There was a practice like this on Daniel Shiffman's videos but i didn't try personally. I guess Object Oriented Programming and Arrays are really important component of Processing. I will get used to them. Thanks Chrisir.

Chrisir · August 2017

yes, they are.

hudson_m4000 · August 2017

Buy the Getting Started with Processing book. Great easy code to learn about processing and simple object oriented programming.

Chrisir · August 2017

Good idea

here is another one:

http://natureofcode.com/book/

rublev · August 2017

Thank you. I'm going to buy one of them. I guess ' The Nature of Code' covers more complicated topics. Right?

hudson_m4000 · August 2017

Nature of Code is far more complex. If you are a beginner, like I was, Getting Started is ideal, as the title implies.

rublev · August 2017

Okey. Thanks Hudson.

clankill3r · August 2017

Buy the blue processing book. And type all code that is in it. Don't think, o that is easy, I understand that I don't have to type that over. Type everything!