Hi, I've been switching between Processing and ProcessingJS often during the last days and I keep finding differences between them. Maybe you have some ideas about dealing with these:
isNaN(), a JavaScript function, is Float.isNaN() in Java. Float does not exist in JavaScript. How would you write code that uses isNaN() and is compatible with both? (isNaN stands for "is not a number")
In Java I can do myPImage.copy(g, ...) to copy from the main canvas into an image. But "g" does not exist in ProcessingJS. Is it doable? Is there a way to write compatible code? Or the only way is using pixels[]?
Try/catch is not documented in the ProcessingJS reference, but it seems to work. I thought I could try to use isNaN and if it fails, catch and use the other isNaN. The funny thing is that Processing (Java) does not let me run something with an error, so I can not even attempt to call isNaN() in the Java version.
I want to write a program that can smoothly pan and zoom in a photo. It should have keyframes and positions. It should pass each position at the right frame.
Drawing a continuous curve using bezier curves is not hard. The problem comes when animating. If one segment has more frames than the next one there will be a sudden change in speed, which I want to avoid.
TL;DR Does someone have code that allows that kind of animation?
According to
Wikipedia, "In computer graphics, Catmull–Rom splines are frequently used to get smooth interpolated motion between key frames. For example, most camera path animations generated from discrete key-frames are handled using Catmull–Rom splines. They are popular mainly for being relatively easy to compute, guaranteeing that each key frame position will be hit exactly, and also guaranteeing that the tangents of the generated curve are continuous over multiple segments.
"
This seems to be the right direction, but at least in the example all time segments have the same duration, and that ActionScript/MXML code is not that straightforward to translate. I can not try these demos (no Silverlight plug-in) but I think
this is what I want to achieve, done the Microsoft way.
Hi! I'm trying to optimize a program by dividing one task into four threads. On each frame I want to draw 10 collections of 600 lines, so I'm creating four threads. The first two draw 2 collections, the next two 3 collections (2+2+3+3=10).
The lines must be drawn using rect() because if I use line() there are very ugly position rounding errors. That means I must translate() and rotate() the rect() into the right position. If I used lines I could just calculate the position of both ends and avoid translating and rotating.
Now, the result is quite cool and messed up :) Not exactly what I want. The problem is (I think) that each traslate() and rotate() is interfering with the other calls to the same functions in the other threads, so the translations and rotations pile up. I even get some crazy huge rectangles for free.
Can this problem be distributed at all into several threads?
void setup() {
size(600, 300);
colorMode(HSB, 1);
noStroke();
smooth();
}
void draw() {
background(0);
float f = frameCount / 88.0;
SimpleThread t1 = new SimpleThread(0, 1, f);
t1.start();
SimpleThread t2 = new SimpleThread(2, 3, f);
t2.start();
SimpleThread t3 = new SimpleThread(4, 6, f);
t3.start();
SimpleThread t4 = new SimpleThread(7, 9, f);
t4.start();
if (frameCount % 50 == 0) {
println(int(frameRate));
}
}
class SimpleThread extends Thread {
int yfrom;
int yto;
float f;
SimpleThread (int from, int to, float rf) {
yfrom = from;
yto = to;
f = rf;
}
void run () {
for (int y = yfrom; y <= yto; y++) {
float they = y/10.0;
for (int x=0; x < width; x++) {
float thex = x/100.0;
fill((they + thex + f) % 1.0, 1, 1);
translate(x, 50+y*20);
rotate(they + thex + f);
rect(0, 0, 1, 15);
resetMatrix();
}
}
}
void quit() {
interrupt();
}
}
I know it would be more efficient to create 4 threads once instead of making new ones all the time, but I have no idea (yet) about how to keep them in sync with draw().
