I am trying to rotate an OBJ from maya around an axis in Maya. It works just fine with a sphere, but with my own object - it is following an orbit. Maybe I don't understand the shape(parameters).
PShape s;
float theta = 0;
void setup() {
size(500, 500, P3D);
shapeMode(CENTER);
s = loadShape("obj2.obj");
}
void draw() {
background(32);
lights();
float z = 0;
pushMatrix();
translate(0,height*1/4);
rotateY(theta);
theta += .01;
scale(4.0);
box(100);
//shape(s, 0,0);
popMatrix();
}
here is the object: https://drive.google.com/open?id=0B3ddDpsAjuqPYUR6RHd0OFBfVU0
Take out this line of code:
shapeMode(CENTER);
For some reason, this line of code is causing the offset you're seeing. I'm not sure exactly why this causes the offset, but getting rid of it seems to fix your problem.
There is a good simple example of loading and displaying a 3d shape in the examples that come with the Processing editor. Just go to File > Examples and then go to Basics > Shape > LoadDisplayOBJ.
Kevin is right, part of the problem is shapeMode(CENTER).
Additionally you may want to double check if the mesh is centered in your editor.
I've imported your mesh in Blender, and although there is a difference in scale, the origin of your geometry was not at 0,0,0
Here's a tweaked version of your .obj and .mtl exported from Blender after manually translating the mesh so it's closer to the center:
PShape s;
float theta = 0;
void setup() {
size(500, 500, P3D);
s = loadShape("coral.obj");
}
void draw() {
background(32);
lights();
float z = 0;
pushMatrix();
translate(width * .5,height* .5);
rotateY(theta);
theta += .01;
scale(50.0);
shape(s, 0,0);
popMatrix();
}
Additionally you can manually compute the mesh bounding box and centroid to orbit around that position, or look a library that provides this functionality.
Related
I tried to make a simple 3d spinning cube in processing.
int size = 100;
float angle = 0;
void setup() {
size(500, 500, P3D);
}
void draw() {
lights();
translate(width/2, height/2, 0);
rotateY(angle);
rotateX(angle);
background(0);
box(size);
angle+=0.05;
}
When i run it, i got a nice spinning cube but there is some problem in rendering.
Found a similar thread with no answer:-
Processing P3D Animation leaving artifacts behind
Image Depicting the problem
Although I could not found the reason for this weird effect. But here is a quick hack which worked out for me.
Instead of using the background function to fill the background, simply draw a filled rectangle every frame.
int size = 100;
float angle = 0;
void setup() {
size(500, 500, P3D);
}
void draw() {
//black
fill(0);
//rectangle to fill the canvas
rect(0,0,width,height);
lights();
fill(255);
translate(width/2, height/2, 0);
rotateY(angle);
rotateX(angle);
box(size);
angle+=0.05;
}
I'm using Processing to create a learning experience project that allows users to join network components together. I have links using standard lines, but I want to be able to show a signal moving through the line if there is a valid connection. Think of the line as a network cable for example. Is there anyway I can animate this line?
void draw(){
pushStyle();
stroke(0);
line(from.x, from.y, to.x, to.y);
popStyle();
}
} //draw function in the 'link' file
Of course you can, but your question is a little broad. You do have a particular type of animation in mind? Endless possibilities ;)
The basic way to handle something like this in processing is to increase some animation-variables every frame (or use time management - though that is beyond the basics).
Because the animation-variables (for instance position or color) are changed every frame, the animation is different every frame. It's animated.
Below I give an example of a small green line traveling over a black 'connection' line. If you read through the code I think you'll figure it out. This should be incorporated in a nice 'connection' class for ease of use on a larger scale.
//set coordinates for connection-line
int fromX = 100;
int toX = 600;
int fromY = 100;
int toY = 200;
//copy start coordinate for animation
int animx = fromX;
int animy = fromY;
//determine animation stepsize
int stepX = (toX-fromX)/10;
int stepY = (toY-fromY)/10;
void setup() {
size(800, 300);
//set framerate so animation is not to fast
frameRate(5);
//draw thick lines
strokeWeight(10);
}
void draw() {
background(255);
// draw connection in black
stroke(0);
line(fromX, fromY, toX, toY);
//draw animation in green
stroke(0, 255, 0);
line(animx, animy, animx+stepX, animy+stepY);
// step animation for next frame
animx = animx+stepX;
animy = animy+stepY;
// check for reset (if the animation on the next frame is drawn outside the line)
if (animx+stepX > toX)
{
animx = fromX;
}
if (animy+stepY > toY)
{
animy = fromY;
}
}
I've been trying to make the texture ( the img ) to be visible only where wave form active is. But so far my attempts failed. I didn't quite understand the usage of vertex.
PImage img;
import ddf.minim.*;
Minim minim;
AudioPlayer song;
void setup()
{
size(800, 600,P2D);
minim = new Minim(this);
song = minim.loadFile("song.mp3");
song.play();
img = loadImage("img.jpg");
}
void draw()
{
background(0);
stroke(255);
for (int i = 0; i < song.bufferSize() - 1; i++)
{
beginShape();
texture(img);
vertex(0,height/2);
vertex(i, height-100 - song.right.get(i)*50);
vertex(i+1, height-100 - song.right.get(i+1)*50);
vertex(width,height/2);
vertex(0,height/2);
vertex(0,height/2+100);
endShape();
}
}
You're almost there:
you are are passing the x,y values for the vertex position which renders the shape
you are not passing the texture mapping u,v coordinates
Be sure to read the vertex() reference:
This function is also used to map a texture onto geometry. The texture() function declares the texture to apply to the geometry and the u and v coordinates set define the mapping of this texture to the form. By default, the coordinates used for u and v are specified in relation to the image's size in pixels, but this relation can be changed with textureMode().
It's unclear what shape you are trying to draw, but one simple thing you could do is pass the x,y coordinates as u,v coordinates as well (instead of just vertex(x,y); use vertex(x,y,u,v);):
PImage img;
import ddf.minim.*;
Minim minim;
AudioPlayer song;
void setup()
{
size(800, 600,P2D);
noStroke();
minim = new Minim(this);
song = minim.loadFile("song.mp3");
song.play();
img = loadImage("img.jpg");
}
void draw()
{
background(0);
stroke(255);
for (int i = 0; i < song.bufferSize() - 1; i++)
{
beginShape();
texture(img);
vertex(0,height/2, //vertex 0,x,y
0,height/2); //vertex 0,u,v
vertex(i, height-100 - song.right.get(i)*50, //vertex 1,x,y
i, height-100 - song.right.get(i)*50); //vertex 1,u,v
vertex(i+1, height-100 - song.right.get(i+1)*50, //vertex 2,x,y
i+1, height-100 - song.right.get(i+1)*50); //vertex 2,u,v
vertex(width,height/2, //vertex 3,x,y
width,height/2); //vertex 3,u,v
vertex(0,height/2, //vertex 4,x,y
0,height/2); //vertex 4,u,v
vertex(0,height/2+100, //vertex 5,x,y
0,height/2+100); //vertex 5,u,v
endShape();
}
}
Not tested, but the comments should help spot the difference.
Here's a super basic example of using vertex() with texture():
PImage img;
void setup(){
size(100,100,P2D);
//make a texture
img = createImage(50,50,RGB);
for(int i = 0 ; i < img.pixels.length; i++) {
int x = i % img.width;
int y = i / img.height;
if(x % 4 == 0 && y % 4 == 0){
img.pixels[i] = color(255);
}else{
img.pixels[i] = color(0);
}
}
img.updatePixels();
}
void draw(){
background(0);
//sampling different u,v coordinates (vertex 1 is mapped to mouse) for same x,y
beginShape();
texture(img);
vertex(0,0,0,0);
vertex(50,0,mouseX,mouseY);
vertex(50,50,50,50);
vertex(0,50,0,50);
endShape();
text("u:"+mouseX+"v:"+mouseY,5,height);
translate(50,0);
//mapping u,v to x,y coordinates
beginShape();
texture(img);
vertex(0,0,0,0);
vertex(50,0,50,0);
vertex(50,50,50,50);
vertex(0,50,0,50);
endShape();
}
Notice how the texture distorts when you move the mouse, as it controls vertex 1's texture coordinates. vertex(x,y,u,v) is very similar to vertex(x,y), but in addition to the coordinate where the vertex gets rendered on screen you also can control the coordinate of where the texture is sampled from.
As the reference mentions, by default textureMode() is image, meaning the u,v coordinates are in the image coordinates (from 0,0 to texture image width,height). There's another mode available: NORMAL in which the u,v sampling coordinates are normalised (between 0.0 and 1.0) is closer to what you might have spotted in 3D applications UV mapping features
I am trying to rotate a vector I have created in illustrator using processing. I would like it to rotate this vector from it's center so it appears to be spinning as oppose to moving around an invisible point. Below is my attempt:
PShape WOE;
void setup(){
WOE = loadShape("WOE.svg");
size (500, 500);
smooth();
}
void draw(){
background(20);
shape(WOE, width/2, height/2, WOE.width, WOE.height); //draw shape in "center" of canvas (250, 250)
translate(-WOE.width/2, -WOE.height/2); //move shape so that center of shape is aligned with 250, 250
WOE.rotate(0.01);
}
From a strictly logical point of view this should work, however this results in the vector rotating around the center of the canvas, but approximately 100px away. I have tried using shapeMode(CENTER); but this unfortunately causes no improvement. Hope someone can help, thanks!
For Reference
Here is WOE.svg: https://www.dropbox.com/s/jp02yyfcrrnep93/WOE.svg?dl=0
I think part of your problem is that you're mixing rotating the shape and translating the entire sketch. I would try to stick with one or the other: either translate and rotate the entire sketch, or only translate and rotate the shape.
That being said, I'm not surprised this gave you trouble.
I would expect this to work:
PShape WOE;
void setup() {
size (500, 500);
WOE = loadShape("WOE.svg");
WOE.translate(-WOE.width/2, -WOE.height/2);
}
void draw() {
background(20);
WOE.rotate(.01);
shape(WOE, width/2, height/2);
}
However, this exhibits the same off-center behavior you're noticing. But if I switch to the P2D renderer, it works fine!
size (500, 500, P2D);
Now the shape is centered in the window and rotates around the shape's center. The difference between renderers seems buggy, but I can't find an open bug on GitHub. Edit: I found this SO question, which lead to this GitHub issue.
In any case, it might be easier to rotate the entire sketch instead of the shape:
PShape WOE;
float rotation = 0;
void setup() {
size (500, 500);
WOE = loadShape("WOE.svg");
shapeMode(CENTER);
}
void draw() {
background(20);
translate(width/2, height/2);
rotate(rotation);
shape(WOE);
rotation += .01;
}
This code works by translating the entire sketch to the center of the window, then rotating the entire sketch, then drawing the shape. Think of this like moving the camera instead of moving the shape. If you have other stuff to draw, then you can use the pushMatrix() and popMatrix() functions to isolate the transformation. This works the same in the default renderer and the P2D renderer.
I am trying to rotate a line around in a circle that represents the direction a sensor is facing, while also plotting distance measurements. So I can't use background() in the draw function to clear the screen, because it erases the plotting of the distance readings. I've tried pggraphics and a few others ways, but can't seem to find a way to do it.
This is what I have right now:
void setup() {
background(255,255,255);
size(540, 540);
}
void draw() {
translate(width/2, height/2);
ellipse(0,0,100,100);
newX = x*cos(theta)- y*sin(theta);
newY = x*sin(theta)+ y*cos(theta);
theta = theta + PI/100;
//pushMatrix();
fill(255, 255);
line(0, 0, newX, newY);
rotate(theta);
//popMatrix();
}
I am new to Processing, and coding in general, but can anyone point me in the right direction on how to do this? Thanks
This is what it outputs: http://imgur.com/I825mjE
You can use background(). You just need to redraw the readings on each frame. You could store the readings in an ArrayList, which allows you to add new readings, change them and remove them.
An example:
ArrayList<PVector> readings;
int readingsCount = 15;
void setup() {
size(540, 540);
// create collection of random readings
readings = new ArrayList<PVector>();
for(float angle = 0; angle < TWO_PI; angle += TWO_PI/ readingsCount) {
float distance = random(100, 200);
// the new reading has an angle...
PVector newReading = PVector.fromAngle(angle);
// ... and a distance
newReading.mult(distance);
// Add the new reading to the collection
readings.add(newReading);
}
}
void draw() {
background(255);
// Put (0, 0) in the middle of the screen
translate(width/2, height/2);
float radius = 250;
noFill();
ellipse(0, 0, 2*radius, 2*radius);
// draw spinning line
float angle = frameCount * 0.1;
line(0, 0, radius * cos(angle), radius * sin(angle));
// draw readings
for(PVector p : readings) {
ellipse(p.x, p.y, 20, 20);
}
}