Intermediate level workshop

asimes

in Events and Opportunities • 7 months ago

I was asked to give an Intermediate level workshop on Processing at my lab. Two other people will be giving a Beginner and Advanced level workshops and all of the workshops will be 50 minutes.

I was wondering if there is a good estimate of what an Intermediate Processing user would or would not know. I looked at the Learning section ( http://processing.org/learning/ ) to get an idea, and it seems like it is mostly how to manipulate the Coordinate System, Trigonometry, and custom shapes.

If you feel like you are in this range I'd appreciate knowing what kind of Processing sketches you are working on. The workshop is at The University of Illinois in Chicago on the 23rd if anyone is interested in attending.

Edit:

From 4:00 - 8:00 at the Electronic Visualization Labratory (EVL)

842 W Taylor, Room 2032 Chicago, IL 60607

Replies(5)

asimes

Re: Intermediate level workshop

7 months ago

I think I will be presenting parametric animation pathing for visual objects. I had in mind to cover:

- Traversing arbitrary lines at a normalized speed

- Traversing multiple lines (a series of the above)

- Making visual objects face the direction they are moving towards

- Traversing circles / arcs

- Combining line with arc pathing

asimes

Re: Intermediate level workshop

6 months ago

The main idea of the sketches were to interpolate Cartesian and Polar Coordinate spaces to make an object move along a path. Here are the sketches I explained for any interested. For more information visit the Processing tutorials, I covered some topics for Intermediate level: http://processing.org/learning/

- Traversing an arbitrary line. The line is randomly placed to demonstrate that it works for any line.

PVector p1 = new PVector();
PVector p2 = new PVector();
float t;
void setup() {
size(600, 600);
noFill();
reset();
}
void draw() {
background(255);
line(p1.x, p1.y, p2.x, p2.y);
float tx = p1.x+t*(p2.x-p1.x);
float ty = p1.y+t*(p2.y-p1.y);
ellipse(tx, ty, 20, 20);
if (t < 1.0) {
t += 0.01;
if (t > 1.0) t = 1.0;
}
}
void mousePressed() {
reset();
}
void reset() {
p1.x = random(width);
p1.y = random(height);
p2.x = random(width);
p2.y = random(height);
t = 0.0;
}

- Traversing multiple arbitrary lines (a path). The lines are defined as points. If there are n points then there are n-1 lines.

PVector[] p = new PVector[10];
float t;
int curr;
void setup() {
size(600, 600);
noFill();
for (int i = 0; i < p.length; i++) p[i] = new PVector();
reset();
}
void draw() {
background(255);
for (int i = 0; i < p.length-1; i++) line(p[i].x, p[i].y, p[i+1].x, p[i+1].y);
float tx = p[curr].x+t*(p[curr+1].x-p[curr].x);
float ty = p[curr].y+t*(p[curr+1].y-p[curr].y);
ellipse(tx, ty, 20, 20);
if (t < 1.0) {
t += 0.025;
if (t > 1.0) {
t = 0.0;
if (curr < p.length-2) curr++;
else t = 1.0;
}
}
}
void mousePressed() {
reset();
}
void reset() {
for (int i = 0; i < p.length; i++) {
p[i].x = random(width);
p[i].y = random(height);
}
t = 0.0;
curr = 0;
}

- Traversing an arbitrary arc (Polar Coordinates). By default it travels clockwise, making it work for counter-clockwise involves flipping the angle interpolation.

float a1, a2, rad, t;
void setup() {
size(600, 600);
noFill();
reset();
rad = 200;
}
void draw() {
background(255);
arc(width/2, height/2, rad*2, rad*2, a1, a2);
float ta = a1+t*(a2-a1);
float tx = width/2+cos(ta)*rad;
float ty = height/2+sin(ta)*rad;
ellipse(tx, ty, 20, 20);
if (t < 1.0) {
t += 0.01;
if (t > 1.0) t = 1.0;
}
}
void mousePressed() {
reset();
}
void reset() {
float randAng1 = random(TWO_PI);
float randAng2 = random(TWO_PI);
a1 = min(randAng1, randAng2);
a2 = max(randAng1, randAng2);
t = 0.0;
}

- Traversing multiple arcs. Due to the complications in demoing with conditionals to determine if the arc should be traversed clockwise or counter-clockwise, I made all of the arcs clockwise (a spiral). There also is a class to handle the arc information.

ClassArc[] carc = new ClassArc[8];
float[] a = new float[carc.length+1];
float t;
int curr = 0;
void setup() {
size(800, 600);
reset();
// Fibonacci Spiral
carc[0] = new ClassArc(width/2, height/2, 10); // Note: This one has an arc of PI radians
carc[1] = new ClassArc(width/2, height/2+10, 20);
carc[2] = new ClassArc(width/2-10, height/2+10, 30);
carc[3] = new ClassArc(width/2-10, height/2-10, 50);
carc[4] = new ClassArc(width/2+20, height/2-10, 80);
carc[5] = new ClassArc(width/2+20, height/2+40, 130);
carc[6] = new ClassArc(width/2-60, height/2+40, 210);
carc[7] = new ClassArc(width/2-60, height/2-90, 340);
a[0] = HALF_PI;
a[1] = PI+HALF_PI;
for (int i = 2; i < a.length; i++) a[i] = a[i-1]+HALF_PI;
}
void draw() {
background(255);
for (int i = 0; i < carc.length; i++) {
fill(i*32, 128);
arc(carc[i].x, carc[i].y, carc[i].rad*2, carc[i].rad*2, a[i], a[i+1]);
}
float ta = a[curr]+t*(a[curr+1]-a[curr]);
float tx = carc[curr].x+cos(ta)*carc[curr].rad;
float ty = carc[curr].y+sin(ta)*carc[curr].rad;
fill(255, 0, 0);
ellipse(tx, ty, 20, 20);
if (t < 1.0) {
t += 0.025;
if (t > 1.0) {
t = 0.0;
if (curr < carc.length-1) curr++;
else t = 1.0;
}
}
}
void mousePressed() {
reset();
}
void reset() {
t = 0.0;
curr = 0;
}
class ClassArc {
float x, y, rad;
ClassArc(float inX, float inY, float inRad) {
x = inX;
y = inY;
rad = inRad;
}
}

GoToLoop

Re: Intermediate level workshop

6 months ago

Nice amusing workshop there! Looking forward to know more later!

For now, I've refactored a lil' 1st code sample at the top just for fun too:

// http://forum.processing.org/topic/intermediate-level-workshop

final static PVector p  = new PVector();
final static PVector p1 = new PVector();
final static PVector p2 = new PVector();

float t;

final static float SPD = .015;
final static byte  DIM = 20;

void setup() {
  size(800, 600, P2D);
  frameRate(50);
  smooth();
  noFill();
  strokeWeight(1.5);

  reset();
}

void draw() {
  background(-1);

  line(p1.x, p1.y, p2.x, p2.y);

  float tx = p1.x + p.x*t;
  float ty = p1.y + p.y*t;

  ellipse(tx, ty, DIM, DIM);

  if ( (t += SPD) > 1. )   noLoop();
}

void mousePressed() {
  reset();
  loop();
}

void reset() {
  p1.set(random(width), random(height), 0);
  p2.set(random(width), random(height), 0);

  p.set( PVector.sub(p2, p1) );

  println(p1);
  println(p2);
  println(p + "\n");

  t = 0.;
}

asimes

Re: Intermediate level workshop

6 months ago

Nice. Yes, I did not try to optimize the original code, just demo it to show people how it works. Some thoughts:

- That background(-1) is pretty funny, may take someone quite a while to understand why it works :)

- Usually people refer to what you wrote as PVector p as delta.

- My computer is being repaired (I'm using a computer at work) so I cannot test it right now, but have you ever seen a speed advantage or any advantage from using final static? I've seen you use that many times on this forum and I've never seen anyone else use that in Processing.

GoToLoop

Re: Intermediate level workshop

6 months ago

Usually people refer to what you wrote as PVector p as delta.

Forgot about delta! I only remember it when doing quadratic equations!

A pity it's 5 letters instead of 1 though.

... but have you ever seen a speed advantage or any advantage from using final static?

Advantage comes from whenever any1 is reading your code, there's no need to do any extra search for
where such a variable may happen to be assigned a different value later on; since it's a constant now!
For primitive variables, it also helps out gr8ly to use all-caps convention!

Performance-wise, not so sure when it comes to object variables. But it helps out w/ predictability anways!

On the other hand, primitive variables get a real wee boost, since their stored value is inlined at compile time!!!
It is as if we had used pre-processor directive from C -> #define!

It is final which does that, not static though. But static may help to raise the chance for compile-time inlining,
or later on at run-time; who knows?

Also, the combination final static is the only way to have static primitives inside non- static inner classes!

Even in Processing source code, one can spot its usage as public static final field variables,
like JAVA2D, LEFT, ENTER, TWO_PI, CENTER, RADIUS, etc!

Top Reply