I'm working on a Quad-copter and for testing purposes I have decided to use Processing to give me a visual example of what the micro-controller is processing and calculating (and possibly some control algorithm simulation later on). So I have made a simple model of a Quad-copter and was displaying it in the upper right of my screen. In the "rest position," I want a perfect side view of the Quad-copter, like this:
Instead, I get an image like this:
The second image was when I rendered the Quad in the upper right, and the first is when I rendered it dead center in the window.
I understand what is happening here but I don't know how to fix it. The rendering system assumes my point of view is dead center in the screen, so anything up and to the right of my point of view is seen from underneath and in the front a little. I poked around on the Reference tab on their website and nothing seems to do exactly what I want. I would think that there would be a solution to this, but I currently can't find one.Does anyone know how to fix this? Thanks.
It sounds like you might be looking for the ortho() function. You can read about it in the reference here.
Sets an orthographic projection and defines a parallel clipping volume. All objects with the same dimension appear the same size, regardless of whether they are near or far from the camera.
Consider this little example program without calling the ortho() function:
void setup(){
size(500, 500, P3D);
}
void draw(){
background(255);
translate(300, 100);
noFill();
stroke(0);
box(100, 100, 100);
}
Now let's add the call to the ortho() function:
void setup(){
size(500, 500, P3D);
}
void draw(){
background(255);
translate(300, 100);
ortho();
noFill();
stroke(0);
box(100, 100, 100);
}
You now no longer see the "depth" of the square. You can add parameters to the ortho() function to make it do exactly what you want, but those are the basics.
Alternatively, you could do something like setup a view that you draw to the middle of, and then draw that view in the upper-right corner of your main view.
Related
I'm looking for a way to limit what gets done in the draw loop.
I have a system where when I click, it add's a rect.
This rect then starts spawning circles that move.
since the rect does not change location, it isn't ideal to redraw it in every frame.
Is there a way to put the rects on a different layer of sorts, or is there another mechanism that I can use to limit the rect-drawing without impeding the circle-drawing?
I've tried with createGraphic to make a background with the rects, but I can't make the 'foreground' where the circles reside to be transparant.
Curious about this I tried myself. My idea was simply grabbing the canvas and interacting with it regardless of p5.js.
My result was that the draw... in this case ctx.fillRect did not render on screen.
However the fillStyle was changed.
Canvas is surprisingly efficient as well as WebGL and can handle the performance usually... unless you are rendering hundreds(mobile) to thousands(laptop/desktop) of objects.
I would have liked to have a better outcome but I think it was worthwhile posting what I had tried and my outcome nonetheless.
//P5 Setup
function setup(){
createCanvas(1500, 750);
background('rgba(0, 0, 0, 0.3)');
stroke(255);
fill(255)
doNonP5Drawing();
}
//Render
function draw(){
background(0);
frame();
}
function doNonP5Drawing(){
let canvas = document.querySelector('canvas'),
ctx = canvas.getContext('2d');
ctx.fillStyle="red";
ctx.fillRect(canvas.innerWidth/2 - 100,canvas.innerHeight/2 - 100,200,200);
}
I'm new to coding and I am trying to write a program that shows a car moving. I can't figure out how to move the car back and forth using parameters. Any help would be appreciated.
void setup()
{
size(500,500);
rectMode(CORNER);
ellipseMode(CORNER);
}
void draw()
{
background(50,200,255);
drawCar(80,340);
drawWheel(45,410);
}
void drawCar(int x, int y)
{
noStroke();
fill(255,0,0);
beginShape();
vertex(x,y);
vertex(x+50,y);
vertex(x+80,y+50);
vertex(x+110,y+50);
vertex(x+110,y+80);
vertex(x-60,y+80);
vertex(x-60,y+50);
vertex(x-30,y+50);
endShape(CLOSE);
}
void drawWheel(int wx,int wy)
{
fill(0);
noStroke();
ellipse(wx,wy,40,40);
ellipse(wx+85,wy,40,40);
}
It's hard to help with broad "how do I do this" type questions, but I'll try to help in a general sense.
You have the code that draws your car here:
drawCar(80, 340);
drawWheel(45, 410);
Those numbers control where the car shows up. Right now you're always passing in the same values, so the car always shows up in the same place.
What happens if you pass in different values? Try something like this:
drawCar(mouseX, mouseY);
drawWheel(mouseY, mouseX);
This should show your car wherever your mouse is.
Now, if you want to show the care moving around on its own, you probably want to store your state in a set of variables, and then change those variables over time.
Shameless self-promotion: here is a tutorial on animation in Processing.
Im trying to make a side-scroller game and I got stuck on the running background part. I've looked for solutions and I've discovered some , but they were using javascript not the p5 library.
I started from the tutorials found on The Coding Train , and looked over all the examples and references on their site.
Although I could avoid this by using something else, just for the sake of it being here in case someone gets stuck on the same issue, could anyone offer a solution to this in p5? Disclaimer: Im a total noob p5.js.
later edit : By running background i mean moving Background image in a loop from left to right
Honestly, from the discussion we had in the comments, it sounds like you're overthinking it.
The general approach to animation (that tutorial is for Processing, but the principles apply to P5.js as well) is as follows:
Step 1: Create a set of variables that represent the state of your scene.
Step 2: Use those variables to draw your scene every frame.
Step 3: Change those variables over time to make your scene move.
You already know what to do: load an image that contains your background, then draw that image, and move it a little bit each frame.
You've said you want to call the background() function instead of the image() function, which doesn't make a ton of sense. The background() function is not any more efficient than the image() function. In fact, the background() function just calls the image() function for you!
From the P5.js source:
p5.prototype.background = function() {
if (arguments[0] instanceof p5.Image) {
this.image(arguments[0], 0, 0, this.width, this.height);
} else {
this._renderer.background.apply(this._renderer, arguments);
}
return this;
};
P5.js simply checks whether the argument is an image, and if so, calls the image() function for you. So it doesn't really make sense to say that using the image() function is "less efficient" than using the background() function.
Taking a step back, you should really avoid thinking about these kinds of micro-optimizations until you A: understand the problem and B: actually have a problem. Don't make assumptions about "efficiency" until you've actually measured your code for performance.
Anyway, back to your question. You also said that you're loading the image twice, which you shouldn't have to do. You can just load the image once (make sure you do that in the setup() function and not the draw() function, and then draw that image twice:
var img;
function preload() {
img = loadImage("image.jpg");
}
function setup() {
image(img, 0, 0);
image(img, 100, 100);
}
And since you can draw two images, you'd then just draw them next to each other. Here's an example using colored rectangles to show the approach more clearly:
var offsetX = 0;
function setup() {
createCanvas(200, 200);
}
function draw() {
background(0);
fill(0, 255, 0);
rect(offsetX, 0, width, height);
fill(0, 0, 255);
rect(offsetX + width, 0, width, height);
offsetX--;
if(offsetX <= -width){
offsetX = 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>
There are other ways to do it, like creating an image that contains the wrapping itself. But the general approach is pretty much the same.
If you're still stuck, please try to break your problem down into smaller pieces like I've done here. For example, notice that I created a simple sketch that deals with images, and another simple sketch that deals with moving rectangles. Then if you get stuck, please post a MCVE in a new question post and we'll go from there. Good luck.
Maybe it is a late answer.. but you can make the environment 3D and then move the camera.
Docs: https://p5js.org/reference/#/p5/camera
Example:
function setup() {
createCanvas(windowWidth - 200, windowHeight - 200, WEBGL);
background(175);
frameRate(30);
}
function draw() {
background(175);
//move the camera Xaxis when mouse is moved
let camX = map(mouseX, 0, width, 0,width);
camera(camX, 0, (height/2.0) / tan(PI*30.0 / 180.0), camX, 0, 0, 0, 1, 0);
normalMaterial();
noStroke();
ambientLight(251,45,43);
box(100, 100, 50);
ang += 0.3;
rotateY(ang * 0.03);
}
Keep calm and Happy Coding!
I am using Processing under Fedora 20, and I want to display an image of the extending tracks of objects moving across part of the screen, with each object displayed at its current position at the end of the track. To avoid having to record all the co-ordinates of the tracks, I usesave("image.png"); to save the tracks so far, then draw the objects. In the next frame I use img = loadImage("image.png"); to restore the tracks made so far, without the objects, which would still be in their previous positions.. I extend the tracks to their new positions, then usesave("image.png"); to save the extended tracks, still without the objects, ready for the next loop round. Then I draw the objects in their new positions at the end of their extended tracks. In this way successive loops show the objects advancing, with their previous positions as tracks behind them.
This has worked well in tests where the image is the whole frame, but now I need to put that display in a corner of the whole frame, and leave the rest unchanged. I expect that createImage(...) will be the answer, but I cannot find any details of how to to so.
A similar question asked here has this recommendation: "The PImage class contains a save() function that exports to file. The API should be your first stop for questions like this." Of course I've looked at that API, but I don't think it helps here, unless I have to create the image to save pixel by pixel, in which case I would expect it to slow things down a lot.
So my question is: in Processing can I save and restore just part of the frame as an image, without affecting the rest of the frame?
I have continued to research this. It seems strange to me that I can find oodles of sketch references, tutorials, and examples, that save and load the entire frame, but no easy way of saving and restoring just part of the frame as an image. I could probably do it using Pimage but that appears to require an awful lot of image. in front of everything to be drawn there.
I have got round it with a kludge: I created a mask image (see this Processing reference) the size of the whole frame. The mask is defined as grey areas representing opacity, so that white, zero opacity (0), is transparent and black, fully opaque (255) completely conceals the background image, thus:
{ size (1280,800);
background(0); // whole frame is transparent..
fill(255); // ..and..
rect(680,0,600,600); // ..smaller image area is now opaque
save("[path to sketch]/mask01.jpg");
}
void draw(){}
Then in my main code I use:
PImage img, mimg;
img = loadImage("image4.png"); // The image I want to see ..
// .. including the rest of the frame which would obscure previous work
mimg = loadImage("mask01.jpg"); // create the mask
//apply the mask, allowing previous work to show though
img.mask(mimg);
// display the masked image
image(img, 0, 0);
I will accept this as an answer if no better suggestion is made.
void setup(){
size(640, 480);
background(0);
noStroke();
fill(255);
rect(40, 150, 200, 100);
}
void draw(){
}
void mousePressed(){
PImage img =get(40, 150, 200, 100);
img.save("test.jpg");
}
Old news, but here's an answer: you can use the pixel array and math.
Let's say that this is your viewport:
You can use loadPixels(); to fill the pixels[] array with the current content of the viewport, then fish the pixels you want from this array.
In the given example, here's a way to filter the unwanted pixels:
void exportImage() {
// creating the image to the "desired size"
PImage img = createImage(600, 900, RGB);
loadPixels();
int index = 0;
for(int i=0; i<pixels.length; i++) {
// filtering the unwanted first 200 pixels on every row
// remember that the pixels[] array is 1 dimensional, so some math are unavoidable. For this simple example I use the modulo operator.
if (i % width >= 200) { // "magic numbers" are bad, remember. This is only a simplification.
img.pixels[index] = pixels[i];
index++;
}
}
img.updatePixels();
img.save("test.png");
}
It may be too late to help you, but maybe someone else will need this. Either way, have fun!
I'm trying to make a time lapse geographic twitter visualization inspired by Jer Thorp's "Just Landed". I am using the latest version of processing.
I'm using an SVG image for my map because I want to be able to zoom into the map at an arbitrary angle, to focus on certain localities, then show the twitter connections on a global scale. I'm running into several problems, the first of which is a flickering of path boundaries of the countries when I rotate my map. Here's a screenshot of my problem:
Here is my code which is causing the problem:
import processing.opengl.*;
import java.awt.event.*;
PShape map;
PShape test1;
PShape test2;
//camera position/movement intialization
PVector position = new PVector(450, 450);
PVector movement = new PVector();
PVector rotation = new PVector();
PVector velocity = new PVector();
float rotationSpeed = 0.035;
float panningsSpeed = 0.035;
float movementSpeed = 0.05;
float scaleSpeed = 0.25;
float fScale = 2;
void setup(){
map = loadShape("blank_merc.svg"); //swap out for whatever file
size(900, 900, OPENGL);
smooth();
fill(150, 200, 250);
addMouseWheelListener(new MouseWheelListener(){
public void mouseWheelMoved(MouseWheelEvent mwe){
mouseWheel(mwe.getWheelRotation());
}
});
}
void draw(){
if (mousePressed) {
if (mouseButton==LEFT) velocity.add( (pmouseY-mouseY) * 0.01, (mouseX-pmouseX) * 0.01, 0);
if (mouseButton==RIGHT) movement.add( (mouseX-pmouseX) * movementSpeed, (mouseY-pmouseY) * movementSpeed, 0);
}
//TODO: implement reset functionality: DONE
if (keyPressed){
if (key=='r'){
position.set(450,450);
rotation.sub(rotation.get());
velocity.sub(velocity.get());
movement.sub(movement.get());
}
}
velocity.mult(0.95);
rotation.add(velocity);
movement.mult(0.95);
position.add(movement);
background(255);
//lights();
translate(position.x, position.y, position.z);
rotateX(rotation.x*rotationSpeed);
rotateY(rotation.y*rotationSpeed);
scale(fScale);
shape(map,-250,-250,1000,1000);
}
void mouseWheel(int delta){
fScale -= delta * scaleSpeed;
fScale = max(0.5, fScale);
}
I was told it might be z-fighting amongst the paths, and I think this might be the problem because the flickering is more problematic when the map is mid rotation, especially at angles that are non orthogonal to the viewing plane. I tried to remedy this by "translating" a PShape child of the file a small amount in the Z direction with the test1.translate(0,0,0.1); command, but I get an error telling me illegal argument exception: cannot use translate(x,y,z) on a PMatrix2D.
I've also had trouble testing my code with other SVG map files and generally getting the SVG to look like what I think it should look like. There are a bunch of cities and other weird markers on my SVG map, and even when i download the completely "blank" svg world map mercator projection from wikimedia commons. There are these city marker/region attributes which show up in the processing render that dont show up in the browser view. I'm trying to figure out how to "clean" my SVG file up in Inkscape, but I'm unsure what specifically to look for.
For example, I've run it with this map: http://commons.wikimedia.org/wiki/File:Mercator_Projection.svg
but the dots and lines I have no use for, and I'm having to resort to manually selecting and deleting the paths, which is not a very thorough process
and when I use this map, which is supposed to be the "blank version" of the above without all the markers, I see not only a bunch of markers (presumably hidden with some style attribute in the SVG XML?) but also this weird vertical banding, and my camera controls are super slow. The applet appears to be behaving as if the file is way too large, but its like 2MB. Here's a screenshot of what this looks like:
I'm really just looking for a way to get a "clean" SVG world map into Processing so I can spin it around and zoom in on it, and if I can get that to work I can start the Arc-Drawing part. I would sincerely appreciate any assistance anyone could give me.
Thanks
If I understand your question correctly, the flickering is only on the edges, presumably where they overlap. That would suggest z-fighting to me. I usually find that a simple test outside your main sketch is best, just as a quick way to see what's happening and how you might fix it.
If you make a simple SVG with two overlapping shapes, sharing just one edge, does the same thing happen?
If so, I think the easiest solution (though not that easy) would be either:
Select all the countries in Illustrator
Use Object > Transform > Scale... and shrink by a tiny amount
Then share your fixed map for everyone else!