Learning Processing Day 0003

Exercise 4 - 3:
Or "Why Codecademy Needs an Overhaul and Learning to Code Will Ultimately Open Up Possibilities Hitherto Undreamt Of In Xpresso in C4D"

Have a circle increase in size as the mouse moves around, and have it follow the mouse around:

I think this might be the moment when I realised that I can actually begin to translate the answer to a problem into lines of code.

One of the pitfalls that I have found whilst trying to learn programming on Codecademy (particularly their painfully slow-loading and often cryptically-worded Python course) has been the sense that I am just ticking boxes in order to get on to the next exercise. A glimpse at the Q&A forums on the site as you go along with the exercises seems to prove my point: a lot of perplexed individuals asking questions which show that we are not understanding conceptually what we are doing as we complete the exercises, nor learning sufficiently well as we go along to enable us to use the tools we have already covered.

Something in the Codecademy approach doesn't quite work.

I remember battling my way through giant 500 - 1000 page software manuals in the early 2000s, and dismissing that approach with the explosion of the web and online tuts, but you know what? I know I'm learning in a more solid and fundamental manner by studying processing using a book. It helps too that that book seems to have been written by a master educator with an intuitive understanding of the needs of the beginning programmer.

For posterity, here's the answer I came up with:

int circleSize = 0;
int circleX = 0;
int circleY = 0;

void setup(){
size(200,200);
}

void draw(){
background(0);
stroke(255);
fill(175);
ellipse(circleX, circleY, circleSize, circleSize);
 
circleX = mouseX;
circleY = mouseY;
circleSize += abs (mouseX - pmouseX);
}

Whilst I'm at it, here's a little gif from another exercise, reinforcing the concept of variables, this time using trig functions to change values over time. Does it look like that square is going round and round to you? Of course the possibilities are endless, but what Shiffman is so brilliant at is connecting the learner's brain to the seemingly abstract goings on within the code. I actually jumped ahead a wee bit here because I've got used to using trig functions in Xpresso in C4D. On this point, a friend once asked me what the point of learning to code in C4D is, since Xpresso is so handy. The point is that it's paradoxically less clunky: I'd have to dig about through all the Xpresso submenus for the appropriate function, then grab say a math node, then fill in the relevant variables in the Attribute Manager, then grab say a range finder node, and again fill in the variables...

I understand now that I could potentially do more in a few lines of code than I could do with a mighty spaghetti monster of a an Xpresso rig.
 

float posX_r = 100;//didn't end up using this
float posY_r = 100;
float posX_e = 100;
float posY_e = 100;

float h_e = 10;
float w_e = 10;
float angle = 0;

void setup(){
size (200, 200);
smooth();
}

void draw(){
float x = (sin(angle)+1) * width/2;
float h_r = (cos(angle)+1) * 50;
float w_r = (cos(angle)+1) * 50;
background(255);
stroke(0);
rectMode(CENTER);
fill(125);
rect(x, posY_r, w_r, h_r);
fill(255);
ellipse(posX_e, posY_e, w_e, h_e);
angle += 0.05;

}