I'm attempting to load a font (Gotham) to use in my sketch and it seems to be ignoring the font weight. The font is an .otf font. Comparing with what I see in illustrator it seems all weights of the font display as "medium."
I've tried creating a .vlw in processing and I have tried using the createFont() method. Both produce the same results.
PFont myFont;
void setup(){
background(255);
fill(0);
size(500, 200);
String[] fontList = PFont.list();
println(fontList);
myFont = createFont("Gotham-ExtraLight", 32);
textFont(myFont);
text("The quick brown fox jumped over the lazy dog", 10,50);
}
Related
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 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 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.
My image is 200px x 200px size. When I'm trying to draw it as 100px x 100px the image is being rendered awfull and unacceptable.
#Override
public void render(SpriteBactch batch){
batch.begin();
batch.draw(img, 0, 0,100,100);
batch.end();
}
When I'm drawin it like this:
#Override
public void render(SpriteBactch batch){
batch.begin();
batch.draw(img, 0, 0);
batch.end();
}
it has acceptable quality. Can i fix this and how? Below you can find screenshot from image rendering:
try to apply your Texture Linear TextureFilter
Texture texture = new Texture(... //creating your texture
texture.setFilter(TextureFilter.Linear, TextureFilter.Linear); //add this line
Sprite img = new Sprite(texture);
Please notice that when you are scaling picture down there is always quality loose risk so you can still can be not satisfied with the result.
To get some information about TextureFilter and how to deal with them just read:
http://www.badlogicgames.com/wordpress/?p=1403
Im new to Processing. I would like to put a .jpg or .png over curves and ellipses, so that they can see only where the image is transparent.
My code is below. The problem with it is that the transparent area is not fully transparent, but transparent white and the not-transparent parts have also decreased opacity.
PImage img;
void setup() {
size(300,500);
frameRate(30);
strokeWeight(4);
img = loadImage("sziluettmeret.jpg");
}
void draw() {
background(0, 50, 70);
stroke(0,70,90);
noFill();
beginShape();
curveVertex(-100, -100);
curveVertex(10, 10);
curveVertex(250, 250);
curveVertex(300, 300);
endShape();
fill(255);
ellipse(20 ,20,15,15);
noFill();
tint(255, 100);
image(img, 0, 0);
}
UPDATE:
I have this in my code:
loadPixels();
for(int i=0; i < img.pixels.length; i++) {
tmpColor = img.pixels[i];
tmpRed = red(tmpColor);
tmpGreen = blue(tmpColor);
tmpBlue = green(tmpColor);
tmpAlpha = 255 - ((tmpRed + tmpGreen + tmpBlue)/3);
img.pixels[i] = color(2*tmpRed,tmpGreen/2,tmpBlue,0);
if(0xFFFFFF == tmpColor)
}
updatePixels();
The picture does not become transparent. (But it becomes purple, so the loop runs on every pixel for sure)
tint() doesn't do greenscreening. It'll recolor your image (if you use a non-neutral colour), and set the mix transparancy, so with tint(255,100), you effective gave the image an opacity of (approximately) 0.39
If you want to do greenscreening (or in your case, whitescreening), you want to run through the image's pixels when you load the image, then set opacity to 0 whenever r/g/b are 255, effectively "removing" all your white pixels.