Beginner coding question

Esmenoth

Hi,

Trying to assist my child in learning coding. He attending a short course and did an online tutorial. We set up an account at openprocessing.org and he set to writing some code. So far, so good.

In the online tutorial, he created this short piece of code, which does what he wanted it to, creating one shape as the cursor moves, another only when he clicks. Great.

void setup() {
  size(500, 400);
  background(10, 80, 100);
}

void draw() {
 if (mousePressed){
 ellipse(mouseY, mouseX, 300, 1);
 }
  stroke(255, 255, 255);
  fill(255,0,0);

  fill(160, 210, 230);
  rect(mouseX , mouseY, 1, 240);

  fill(255, 255, 255);

}

Then at the openprocessing site, this doesn't work but part of it does when we use the word function instead of void. Now, it isn't the same code, but it's trying to do the same sort of thing: one thing drawn as the cursor moves, one when clicking. Problem is, it only draws the elipsis, not the rectangle when clicking.

function setup() {
  createCanvas(windowWidth, windowHeight); 
  background(100);  
} 

function draw() {
  ellipse(mouseX, mouseY, 100, 50);
}

if (mousePressed){
  rect(mouseX, mouseY, 100, 100);
}

So, for anyone out there who knows more than me (that's all of you!) could you please answer the following questions.

1. Why won't the second piece of code draw the rectangle when clicking on the mouse?

2. Why does one site use/advise "void" to start the drawing and the other use "function"?

Regards in advance.

koogs

in the second bit of code, your mousePressed is outside of a function. in the first one it's inside draw()...

that first bit of code uses the java based version of processing.

openprocessing uses the javascript based version of processing which is an entirely different language (with similarly named methods / functions).

additionally, some of the methods need to change names in javascript, because you can't have members and methods called the same thing. one of these is mousePressed. you might find it's called mouseIsPressed in javascript.

http://p5js.org/reference/#/p5/mouseIsPressed

koogs

(this is complicated slightly more by there being two different javascript versions of processing. best stick to the p5.js for now, i guess. use the reference pages in the link for examples)

GoToLoop

I wonder how old is that code? B/c only recently OpenProcessing.org added support for p5.js, besides the old mainstay Pjs, and made it the default library:

1. http://p5js.org/reference/
2. http://ProcessingJS.org/reference/

If your child's sketch was written for Pjs, you're gonna need to go to "Settings".
Then change Mode for "Processing.js".

p5.js uses JS programming language syntax.
And Pjs is mainly Java. Although we can mix both Java & JS too. :ar!

Esmenoth

OMG.

Well, thank you both for clearing this up. More than one kind of Processing. It's bad enough that the program uses a gerand of a common computing word as its name (like having a kind of food called "eating") but it also has multiple versions.

Which one ought a beginner who wants to eventually design computer games use?

quark

Trying to assist my child in learning coding

Which one ought a beginner who wants to eventually design computer games use?

Don't worry to much about the language choice there is so much more to programming than the language syntax. For most programming paradigms it all boils down to sequence-selection-iteration and the skill is being able to think logically and put these together to create algorithms that solve problems.

The ability to think logically and design problem solving algorithms are prime attributes for any computer programmer and are not language dependent.

Trying to predict the programming paradigm or the languages in use when your child becomes an adult is problematic.

I am sure others will add their thoughts and you can decide then the language to use for now.

GoToLoop

Agreed! 1st computer language is merely a tool to learn basic programming. B-)
Such as variables, containers, if/else blocks, for/while loop blocks, functions, classes, etc.
Once the basics are finally learnt, the pupil can choose its own programming languages. \m/

Anyways, here's a good start for beginners. It's based on ProcessingJS (Pjs) + JS syntax: :bz
https://www.KhanAcademy.org/computing/computer-programming/programming

Esmenoth

Terrific advice. Much appreciated.