we have a problem again. We are drawing a bunch of circles. In the middle of one of these drawingCountry Methods it suddenly doesn't draw circles anymore. Also following drawingCountry Methods don't draw circles anymore, but they still get called. We tested it by inserting println("test"). Does anyone have an idea why this happens?
Our code looks similar to this:
public void drawRussia(){
canvas.ellipseMode(CORNER);
canvas.ellipse(705*factorWidth, 149*factorHeight, 75, 75);
canvas.ellipse(629.5*factorWidth, 161.5*factorHeight, 75, 75);
canvas.ellipse(523*factorWidth, 164*factorHeight, 75, 75);
canvas.ellipse(562*factorWidth, 244*factorHeight, 10, 10);
canvas.ellipse(555*factorWidth, 253*factorHeight, 10, 10);
//--------------------------stops drawing circles -------------------
canvas.ellipse(720*factorWidth, 223*factorHeight, 15, 15);
canvas.ellipse(673*factorWidth, 116*factorHeight, 50, 50);
canvas.ellipse(777*factorWidth, 121*factorHeight, 75, 75);
}
After drawRussia(), there are similar methods following (which don't draw). Before everything works well.
Is there some kind of buffer, or limit in drawing ...
Thanks for your help.
Related
I am trying to create a 3d spirograph effect. In this fiddle I have a simple Points plane rotating. When you press the Enter key a transparent plane material is added in front of the camera creating a trailing effect. This is all working as intended, but I was hoping to be able to add OrbitControls to be able to rotate around the spirograph as a whole without the trailing effect created by the transparent plane being affected by the OrbitControls as well.
var fadeMaterial = new THREE.MeshBasicMaterial({
color: 0x000000,
transparent: true,
opacity: 0.01
});
var fadePlane = new THREE.PlaneBufferGeometry(10, 10);
var fadeMesh = new THREE.Mesh(fadePlane, fadeMaterial);
fadeMesh.position.z = -0.08;
fadeMesh.renderOrder = -1;
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.add(fadeMesh);
camera.position.z = 60;
The image below shows the effect from a static viewpoint (before moving the camera with OrbitControls), but as soon as I move the camera the trailing effect is also affected. Essentially I would like to be able to rotate around this without the trailing effect changing.
I think the issue is caused by the transparent plane being in front of the camera, but I'm not sure how else to create the trailing effect. Any advice on how to create this while being able to rotate around it without disturbing the trailing effect?
This is not possible with your approach. You're essentially rendering 24 points onto the canvas at a time, and the reason they stay visible on your canvas is because you're using preserveDrawingBuffer: true on your renderer. Now when you're trying to move the camera, those previous points have already been painted to the canvas but they no longer exist in 3D space. It's similar to painting with ink; once you've painted a dot, you can't re-position it.
If you want to be able to orbit the camera while maintaining the spirograph look, you'd need to re-think you approach, and not preserve the drawing buffer. I think you'd need to add 24 new points on each frame, so they always exist in 3D space. Your geometry would need to grow in quantity from 24, 48, 72, 96, 120, 144, etc...
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'm trying to make fade in fade out effect in Processing. When I press the key 'z', the transparency of the rectangle go from 0 to 255, stay there for 1 sec then fade out from 255 to 0. Thank you in advance!
Here is one of my latest attempt:
int alphaValue;
void setup() {
size(640, 360);
rect1 = createShape(RECT,292, 85, 55, 55, 2);
rect2 = createShape(RECT,347, 140, 55, 55, 2);
rect1.setFill(0);
rect1.setStroke(color(255));
rect2.setFill(0);
rect2.setStroke(color(255));
}
void keyPressed() {
if (key == 'z')
{
fadingrectangle();
}
}
void fadingrectangle() {
rect1.setFill(color(229, 229, 229, alphaValue));
if (alphaValue < 255) {
alphaValue++;
}
}
I just can make it fading in but I don't know how to make it automatically fading out after appearing 1 second.
Stack Overflow isn't really designed for general "how do I do this" type questions. It's for specific "I tried X, expected Y, but got Z instead" type questions. But I'll try to help in a general sense.
First off, you need to break your problem down into smaller pieces. For example, can you create a simple program that just shows a rectangle? Can you create a separate program that just prints something to the console when the user presses the Z key? Get those working perfectly by themselves before you move on.
From there, you need to store the current state of your sketch. In your case, maybe that's a single variable that stores the transparency of the rectangle. Then you need to use that variable to draw each frame, and change that variable to make the rectangle fade in and out. Here is a tutorial I wrote about animation in Processing.
But again, you need to break your problem down into smaller pieces. Approach each piece by itself, and post a MCVE along with a specific technical question if you get stuck. Good luck.
I'm trying to export frames from a Processing sketch using the saveFrame() function, but they come out very rough, specially the fonts. I'm on a Mac with retina display and even though when I'm running the sketch everything looks good and sharp, when I save the frames they look bad.
I have included the following lines (in the setup function) but they don't improve the outcome of the saveFrame() function:
size(1280, 720, "processing.core.PGraphicsRetina2D");
hint(ENABLE_RETINA_PIXELS);
smooth(8);
Any ideas?
Text is clean with this sketch, do you run it in java mode ?
// size(960, 540); //
size(960, 540, "processing.core.PGraphicsRetina2D");
hint(ENABLE_RETINA_PIXELS);
textSize(32);
text("word", 10, 30);
fill(0, 102, 153);
text("word", 10, 60);
fill(0, 102, 153, 51);
text("word", 10, 90);
If you like a clean retina screenshot, you need to double your sketch size with size(1920,1080).
If you need this picture for a website you can use this html <img src="retina" width="960" height="540">
I found an odd behavior while working on my pet game. I wanted to draw few objects on canvas, some of them required image / icon to be rotated. It is quite common use case, usual solution is to make use of context's rotate method. Going with the blow I used also translate to nicely and consistently put images in desired place.
This worked fine, until I tried Chrome on Windows laptop, with hardware acceleration enabled. Images started to blink and teleport across the screen. I found that it is related to acceleration (turning off accelerated graphics fixes problem) and my best guess is that when updating frame the renderer assumes that drawing calls are independent and can be executed in parallel. When context transforms take place it is not the case because context state changes.
Example of undesired behavior: having a canvas element with ID 'screen' try the following:
var canvas = document.getElementById("screen"),
ctx = canvas.getContext("2d");
var drawrect = function () {
ctx.fillStyle = this.color;
ctx.translate(this.x+10, this.y+10);
ctx.rotate(this.rotation);
ctx.fillRect(-10, -10, 20, 20);
ctx.rotate(-this.rotation);
ctx.translate(-this.x-10, -this.y-10);
};
var red = {
x: 22,
y: 22,
rotation: 0,
color: "#ff0000",
draw: drawrect
};
var blu = {
x: 22,
y: 111,
rotation: 0,
color: "#0000ff",
draw: drawrect
};
function main_loop() {
ctx.clearRect(0, 0, 450, 450);
frameId = requestAnimationFrame(main_loop);
red.draw();
red.x += 1;
red.rotation +=0.1;
blu.draw();
blu.x += 1;
blu.rotation -=0.1;
}
main_loop();
Working example: http://jsfiddle.net/1u2d7uhr/7/ (tested on Chrome, Chromium, Firefox; accelerated Chrome glitches, others do not)
I was able to 'fix' this by removing translations and rendering rotating elements to separate canvas, which is then (after rotations) drawn onto the main one. This seems hackish to me though.
Is it code error on my part?
In this case what is the right way to render rotations (perhaps with this question I should go do codereview, but I'm not sure if this is the case)?
Or is it buggy behavior on browser side? I understand the logic behind it but it can be very much surprising (and cause some confusion) to developers. Or am I only one...