I Can't set noFill while rendering to a PGraphics object.
Trying to draw an arc gets me this.
While what i want is this.
I used the following code in the processing application for 64 bit windows 7
PGraphics pg;
void setup() {
size(123, 123);
pg = createGraphics(123, 123);
pg.strokeWeight(5);
pg.stroke(255);
pg.noFill();
noFill();
}
void draw() {
pg.beginDraw();
pg.background(0);
pg.translate(width/2, height/2);
pg.arc(0, 0, 100, 100, 0, PI+1);
pg.endDraw();
image(pg, 0, 0);
}
It is better to set modes and style for PG inside draw block and it works like you want:
pg.beginDraw();
pg.background(0);
pg.strokeWeight(5);
pg.stroke(255);
pg.noFill();
pg.translate(width/2, height/2);
pg.arc(0, 0, 100, 100, 0, PI+1);
pg.endDraw();
Related
I am creating a simulator using P5.js. Within the simulator, I need a green box, however it does not seem to be appearing. The code is below:
var outputs = [];
function setup() {
createCanvas(600, 400, WEBGL);
background(200);
for (var i = 0; i < 1; i++) {
drop = new Water(width / 2, height / 2, 0, 1);
outputs[i] = drop;
}
}
function draw() {
push();
translate(200, 150, 0);
stroke(0, 100, 0);
fill(0, 255, 0);
box(150, 150, 150);
pop();
for (var i = 0; i < outputs.length; i++) {
outputs[i].update();
}
background(200);
}
Here is the water class:
function Water(x_, y_, z_, yVel_) {
this.r = random(0.25, 1);
this.xOff = random(-(this.r / 10), (this.r / 10));
this.zOff = random(-(this.r / 10), (this.r / 10));
this.x = x_ + this.xOff;
this.y = y_;
this.z = z_ + this.zOff;
this.yVel = yVel_;
this.pos = createVector(this.x, this.y, this.z);
this.show = function() {
push();
translate(this.pos.x, this.pos.y, this.pos.z);
noStroke();
fill(0, 0, 255);
sphere(this.r * 2);
pop();
}
this.update = function() {
this.vel = createVector(random(-(this.r / 10), (this.r / 10)),
this.yVel, random(-(this.r / 10),
(this.r / 10)));
this.pos.add(this.vel);
this.show();
}
}
This is a web based simulation, with another module which appears to be working fine.
Any help would be greatly appreciated. Thanks in advance!
Removing the parts that require the Water class, and moving the background function call to the top of draw, it seems to work just fine.
So, the problem is
Either that you forgot to put background on top
Or something's wrong with the Water class.
Here's your code with the mentioned problems fixed.
var outputs = [];
function setup() {
createCanvas(600, 400, WEBGL);
}
function draw() {
background(200);
push();
translate(200, 150, 0);
stroke(0, 100, 0);
fill(0, 255, 0);
box(150, 150, 150);
pop();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.min.js"></script>
Its not rendering because you're background is over your scene
function draw() {
background(200);
push();
translate(200, 150, 0);
stroke(0, 100, 0);
fill(0, 255, 0);
box(150, 150, 150);
pop();
for (var i = 0; i < outputs.length; i++) {
outputs[i].update();
}
}
What your doing is drawing the box and the drops and you cover it all up with your background
if you don't have a background you will see how p5.js renders animation
p5.js not moving it, its just looping through draw every frame and the background covers up the previous frame
I have the below code which moves a group of rectangles and circles, but for some reason it always keeps the previous shapes. I want to delete the previous shapes and only draw the new shapes (so it looks like my shapes are moving). I end up with this:
But it should look like a truck is moving. Below is my code:
public class Truck extends Vehicle {
public Truck(float size, float speed) {
super(size, speed);
}
int x = width-250;
void display() {
while (x > -100) {
scale(size);
translate(-1, 0);
fill(255, 0, 0);
rect(x, 500, 200, 100); //body
rect(x-75, 525, 75, 75); //front
fill(0);
rect(x-75, 525, 45, 45); //window
ellipse(x-60, 610, 45, 45);
ellipse(x-20, 605, 35, 35);
ellipse(x+160, 610, 45, 45);
ellipse(x+117, 605, 35, 35);
delay(1);
x--;
}
}
}
So I have quite a bit of experience with the JavaScript version of processing, and if you add:
background(255);
before you draw everything I think that will fix your issue.
This is because the shapes leave a "trail" of sorts behind them when they move. Unless you draw the background periodically, that trail will be visible.
When I use my code it says: No uv text coordinates supplied with vertex() call.
This is the code I use:
PImage img;
void setup() {
size(720, 360, P3D);
}
void draw() {
beginShape();
img = loadImage("image.png");
texture(img);
vertex(50, 20);
vertex(105, 20);
vertex(105, 75);
vertex(50, 75);
endShape();
}
Like your error and George's comment say, to use a texture you need to pass in 4 parameters to the vertex() function instead of 2 parameters.
From the reference:
size(100, 100, P3D);
noStroke();
PImage img = loadImage("laDefense.jpg");
beginShape();
texture(img);
vertex(10, 20, 0, 0);
vertex(80, 5, 100, 0);
vertex(95, 90, 100, 100);
vertex(40, 95, 0, 100);
endShape();
(source: processing.org)
Also note that you should not be loading your image inside the draw() function, because that causes you to load the same image 60 times per second. You should load it once from the setup() function.
I'm trying to program an intro. I want the canvas to erase itself after it. I already have the trigger, but I do not know how to clear the canvas. Would just changing the background work? I still want to make stuff after it.
Here is the code:
void setup () {
frameRate(10);
stroke(255, 255, 255);
noFill();
rect(100,155,300,300);
size(500, 500);
}
void square () {
for (int x = 100; x <= 300; x += 100) {
for (int y = 155; y <= 355; y += 100) {
fill(random(0, 255), random(0, 255), random(0, 255));
rect(x, y,100,100);
}
}
};
void draw () {
int time = 0;
int logoLength = 100;
if (time < logoLength) {
fill(255, 255, 255);
background(0, 0, 0);
textFont(createFont("Lucida console", 19));
textAlign(CENTER,CENTER);
text("Ghost Cube Games presents",250,59);
time++;
print(time);
square();
} else if (time == logoLength) {
background(255, 255, 255);
}
}
You can simply call the background() function.
background(0); draws a black background.
background(255); draws a white background.
background(255, 0, 0); draws a red background.
More info can be found in the reference.
For a more specific example, if you want to show an intro screen, you can simply keep track of whether the intro screen is showing in a boolean variable. If that variable is true, then draw the intro screen. If not, then draw whatever else you want to draw. If you do this from the draw() function, then you don't really have to worry about clearing the screen, since calling the background() function will do that for you:
boolean showingIntro = true;
void draw() {
background(0);
if (showingIntro) {
text("INTRO", 20, 20);
} else {
ellipse(50, 50, 25, 25);
}
}
void mouseClicked() {
showingIntro = false;
}
I'm creating a stereoscopic test application where the scene is rendered into a PGraphics left and a PGraphics right with different camera angles for the two eye points. The two images is then combined into a side-by-side output in the draw() function.
The scene consists of a pre-rendered background, stored in a separate PGraphics, rendered once, and a rotating box() rendered for each frame.
The problem is that the call to gfx.background(gfxBackground); in render() is very CPU intensive. If I replace it with a gfx.background(0); call, the sketch runs smoothly.
My assumption was that blit'ing data from one PGraphics to another would be done with hardware acceleration, but it seems it isn't. Am I doing something wrong?
My sketch:
PGraphics leftBackground;
PGraphics rightBackground;
PGraphics left;
PGraphics right;
int sketchWidth() { return 1920; }
int sketchHeight() { return 1200; }
int sketchQuality() { return 8; }
String sketchRenderer() { return P3D; }
void setup()
{
noCursor();
leftBackground = createGraphics(width / 2, height, P3D);
renderBackground(leftBackground, "L");
rightBackground = createGraphics(width / 2, height, P3D);
renderBackground(rightBackground, "R");
left = createGraphics(width / 2, height, P3D);
left.beginDraw();
left.endDraw();
left.camera(-10, 0, 220,
0, 0, 0,
0, 1, 0);
right = createGraphics(width / 2, height, P3D);
right.beginDraw();
right.endDraw();
right.camera( 10, 0, 220,
0, 0, 0,
0, 1, 0);
}
void draw()
{
render(left, leftBackground);
render(right, rightBackground);
image(left, 0, 0);
image(right, left.width, 0);
}
void renderBackground(PGraphics gfx, String str)
{
gfx.beginDraw();
gfx.background(0);
gfx.stroke(255);
gfx.noFill();
gfx.rect(0, 0, gfx.width, gfx.height);
gfx.scale(0.5, 1.0, 1.0);
gfx.textSize(40);
gfx.fill(255);
gfx.text(str, 30, 40);
gfx.endDraw();
}
void render(PGraphics gfx, PGraphics gfxBackground)
{
gfx.beginDraw();
gfx.background(gfxBackground);
gfx.scale(0.5, 1, 1);
gfx.rotateY((float)frameCount / 100);
gfx.rotateX((float)frameCount / 90);
gfx.stroke(255);
gfx.fill(0);
gfx.box(30);
gfx.endDraw();
}
You've got multiple options to achieve the same visual output.
Here are a few options:
Simply overlay the "L"/"R" text:
in draw():
render(left, bgl);
render(right, bgr);
image(right, 0, 0);
image(right, left.width, 0);
text("L",100,100);
text("R",width/2+100,100);
using gfx.background(0) in render().
PGraphics extends PImage so instead of
gfx.background(gfxBackground);
you can use
gfx.image(gfxBackground,xoffset,yoffset);
You will need to offset because of the camera call, also, you will need to translate the box in Z direction since by default it will be at (0,0,0) and will intersect with the quad rendering the background image.
If you want to go deeper and find other bottlenecks sample the CPU using jvisualvm (if you have the JDK installed and PATH set to it you should be able to run this from terminal/commandline, otherwise there's an application in YOUR_JDK_INSTALL_PATH\bin).
Take a couple snapshots at different intervals and compare performance. You might find some other draw commands that could be changed to gain a few ms per frame.