I am stuck with my challenge, I want to make the image disappear as soon as it reaches a specific point.
In my case, I am making a bear who eats a fish. You have to move the fish by using the arrow keys, and as soon as the fish is at the mouth of the bear, I want the fish to disappear.
Could someone help me please?
(Any other tips about my code are welcome as well)
this is my code:
import controlP5.*;
import processing.serial.*;
ControlP5 cp5;
PImage vis;
int pvisx=700;//horizontal position of the fish
int pvisy=800;//vertical poition of the fish
float angle;//angle between the branches of the tree
void setup() {
background(10, 216, 255);
size(1000, 1000);
vis = loadImage ("vis geknipt.png");
cp5 = new ControlP5(this);
cp5.addTextfield("name")
.setPosition(350,25)
.setSize(300,45);
}
void draw() {
//draw a bear
smooth();
noStroke();
fill(95, 12, 12);//make the bear brown
ellipse(500, 550, 200, 200);//head of bear
ellipse(500, 785, 250, 300);//body of bear
ellipse(400, 470, 100, 100);//left ear
ellipse(600, 470, 100, 100);//right ear
ellipse(430, 950, 50, 100);//left leg
ellipse(560, 950, 50, 100);//right leg
ellipse(360, 700, 110, 60);//left arm
ellipse(635, 700, 110, 60);//right arm
fill(165, 42, 42);
ellipse(500, 785, 165, 190);//innerbody of bear
fill(250, 189, 242);//pink inner ears
ellipse(600, 470, 60, 40);//inner ear right
ellipse(400, 470, 60, 40);//inner ear left
fill(165, 42, 42);//light brownish snout
ellipse (500, 590, 150, 90);//ellipse for snout
stroke(0);
line(500, 547, 500, 600);//line for mouth
noFill();
beginShape();//smile to the left
curveVertex(500, 600);
curveVertex(500, 600);
curveVertex(465, 600);
curveVertex(445, 585);
curveVertex(445, 585);
endShape();
beginShape();//smile to the right
curveVertex(500, 600);
curveVertex(500, 600);
curveVertex(535, 600);
curveVertex(555, 585);
curveVertex(555, 585);
endShape();
fill(255);
ellipse(465, 520, 40, 60);//big eyes (left)
ellipse(530, 520, 40, 60);//big eyes (right)
fill(0);
noStroke();
ellipse(465, 533, 35, 35);//small eyes(left)
ellipse(530, 533, 35, 35);//small eyes (right)
fill(255, 0, 0);//red nose
ellipse(500, 558, 50, 30);//nose
//body of the tree (main branch)
pushMatrix();
strokeWeight(5);
angle = radians(35);//angle between each branch of the tree
translate(width/100, height);//start tree
stroke(95, 12, 12);//green color of the lines of the tree
line(0, 0, 0, -450);//main branch of tree
translate(0, -450);//translate to the end of the line, the leaves
will grow from there
branch(250);//start of the branching (second, third etc)
popMatrix();
smooth();
noStroke();
for (int i = 1; i < 150; i++) {//making a sun by a for loop in an
ellipse to get a color gradient inside
fill(255, 180, float(i)*2);
ellipse(900, 80, 300-(2*i), 300-(2*i));
}
}
void branch(float len) {
len *= 0.7;//each branch will be 2/3rds of the size of the previous
if (len > 5) { //when the length of the branch is 5 pixels or less,
the condition stops
pushMatrix(); // make a change in just a small piece of
information
rotate(angle); // Rotate by the angle
line(0, 0, 0, -len); // Draw the branch
stroke(0, 255, 0);
translate(0, -len); // Move to the end of the branch
branch(len); //new branch is drawn
popMatrix(); // indicate the end of making the change of
information
// Repeat the same thing, only branch off to the "left" this
time!
pushMatrix();
rotate(-angle);
stroke(36, 198, 61);
line(0, 0, 0, -len);
translate(0, -len);
branch(len);
popMatrix();
}
}
void name (String value) {
println("My name is", value);
}
void keyPressed() {
background(10, 216, 255);//the fishes won't repeat
if (key == CODED) {//indicates which key is coded
if (keyCode == UP) {//move fish up
image(vis, pvisx, pvisy, width/4, height/8);
pvisy-=10;
}
}
if (keyCode == DOWN) {//move fish down
image(vis, pvisx, pvisy, width/4, height/8);
pvisy += 10;
}
if (keyCode == RIGHT) {//move fish to the right
image(vis, pvisx, pvisy, width/4, height/8);
pvisx += 10;
}
if (keyCode == LEFT) {// move fish to the left
image(vis, pvisx, pvisy, width/4, height/8);
pvisx -= 10;
}
}
It sounds like you're looking for collision detection, specifically rectangle-rectangle collision detection.
Google and searching Stack Overflow are your best friends, as this topic has been covered many times.
The best advice I can give you is to break your problem down into smaller steps and take those steps on one at a time. For example, start over with a simple sketch that shows two hard-coded rectangles, and write some code that changes their color if they're intersected. Get that working before trying to integrate it into your larger codebase.
Shameless self-promotion: here is a tutorial on collision detection in Processing.
Related
I am trying to move a car I drew using Processing. For drawing this Car I have used multiple methods like rect, line, circle, and I want to move this car along the x axis, back and forth. But when I try to move it by increasing the X- axis of all the figures, then it makes different figure, I wanted to know how can I move this car as a one object.Picture of the car
float circle1X = 120;
float circle1Y = 250;
float circle2X = 370;
float circle2Y = 250;
void setup(){
size(1200, 600);
background(135,206,235);
}
void draw(){
noFill();
rect(50, 200, 390, 50);
line(150, 200, 200, 140);
line(200, 140, 360, 140);
line(360, 140, 380, 200);
line(165, 200, 205, 150);
line(205, 150, 350, 150);
line(350, 150, 368, 200);
line(165, 200, 165, 250);
circle(circle1X, circle1Y, 70);
circle(circle1X, circle1Y, 55);
circle(circle2X, circle2Y, 70);
circle(circle2X, circle2Y, 55);
}
The idea to grasp here is to love matrix stacks and transformations (like translate).
Remember how your drawing's coordinates origin on the top left corner of the screen? That's your current coordinate system's origin point. When applying transformations, you decide on a transformation and you apply it to the whole coordinate system. As an example, if I write this:
rect(100, 100, 150, 150);
translate(300, 100);
rect(100, 100, 150, 150);
I'll get two different rectangles even though the coordinates I wrote were the same, because I modified where the origin point of my coordinate system is before drawing the second rectangle:
So you already get the idea that a simple translation would move your car around just fine. But that wouldn't work if you have, say, 2 cars to move around in the same sketch: transformations are cumulative. Of course, you can cancel one translate with his exact opposite, but it would feel stupid, wouldn't it? And what if you made some complicated mix of translations, rotations and whatever else?
We're lucky, though! The good people at the Processing Foundation though about it and added the pushMatrix() and the popMatrix() commands. The pushMatrix() method "save" your coordinate system just like it currently is. Then you can do a couple transformation, draw stuff and then "pop" the matrix and go back to your original coordinate system. I'm doing it with your car in this example:
float circle1X = 120;
float circle1Y = 250;
float circle2X = 370;
float circle2Y = 250;
void setup() {
size(1200, 600);
}
void draw() {
// background() goes here or you'll never "clean" the screen (you'll draw every frame over the last one)
background(135, 206, 235);
drawCar(); // car #1 to see where the coordinates are drawing the car
pushMatrix();
translate(500, 0); // I'm moving everything I'll draw next 500 pixels right
drawCar(); // car #2 is 500 pixels right
popMatrix();
rect(100, 100, 200, 200); // this random rectangle will appear exactly where it should (the translation had no effect since it was popped before)
}
// I moved these lines in their own method, it's easier to read and modify this way
void drawCar() {
noFill();
rect(50, 200, 390, 50);
line(150, 200, 200, 140);
line(200, 140, 360, 140);
line(360, 140, 380, 200);
line(165, 200, 205, 150);
line(205, 150, 350, 150);
line(350, 150, 368, 200);
line(165, 200, 165, 250);
circle(circle1X, circle1Y, 70);
circle(circle1X, circle1Y, 55);
circle(circle2X, circle2Y, 70);
circle(circle2X, circle2Y, 55);
}
As you can see, it works flawlessly and it's fairly easy to grasp and use. In fact, it can be waaay easier to draw with matrixes: instead of drawing your car "where you want to see it", you can draw it around the (0, 0) point of your sketch, and use the (0, 0) point as the anchor of your car drawing, making it's coordinates a lot easier to manage (sorry I messed the car's drawing a little bit but you'll get the idea anyway): in this modified sketch, I use a carX integer as the X coordinate of the car, and the car's "anchor point" is the top left corner of the car's drawing (I tried to substract the unneeded X and Y slack from the car and ended up messing it a little bit). Every time you mouse click, the car moves right a little because the translation uses the incremented variable:
float circle1X = 70;
float circle1Y = 200;
float circle2X = 320;
float circle2Y = 200;
int carX = 0;
void setup() {
size(1200, 600);
}
void draw() {
background(135, 206, 235);
pushMatrix();
translate(carX, 0);
drawCar();
popMatrix();
}
void mouseClicked() {
carX += 50;
}
void drawCar() {
noFill();
rect(0, 150, 390, 0);
line(100, 150, 150, 90);
line(150, 90, 310, 90);
line(310, 90, 330, 150);
line(115, 150, 155, 100);
line(155, 100, 300, 100);
line(300, 100, 318, 150);
line(115, 150, 115, 200);
circle(circle1X, circle1Y, 70);
circle(circle1X, circle1Y, 55);
circle(circle2X, circle2Y, 70);
circle(circle2X, circle2Y, 55);
}
The idea here is that the "anchor point" is close to the drawing, and the car's coordinates are use to translate it to where it should be drawn. More elegant, less complicated, easier to use.
I told you we could draw 2 different cars easily, right? Here's a quick and dirty example (modify the draw() loop only):
int carDelta = 0;
void draw() {
background(135, 206, 235);
// car #1 is going right
pushMatrix();
translate(carDelta, 0);
drawCar();
popMatrix();
// car #2 is going down
pushMatrix();
translate(0, carDelta);
drawCar();
popMatrix();
}
Hope this helps. Have fun!
Quick and dirty solution:
You can translate the anchor point from where everything is drawn with.
This way you dont have do change anything from your drawing.
However this doesnt really help you in the long way.
// at the start
in x1 = 0;
// in draw before you draw your car
x1++;
translate(x1, 0);
Nicer solution:
Learn about classes and try recreating the car as such.
Include a variable for its position.
https://processing.org/reference/class.html
And check out the tutorials by Daniel Shiffman
https://www.youtube.com/watch?v=lmgcMPRa1qw
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 creating a collision detection game where:
Every time I hit the wall, the number of my lives go down.
Once I get to 0 lives, the game is over.
But the game is letting me go into negative lives. Also, my click to begin once you win doesn't seem to work either... Does anybody know how to fix this?
PImage startScreen;
int gamestate=1;
int lives = 3;
class Sprite {
float x;
float y;
float dx;
float dy;
}
Sprite rect=new Sprite();
Sprite ball=new Sprite();
void setup(){
size(500,500);
rect.x = 500;
rect.y = 12;
ball.y= mouseY;
background(0);
fill(0,255,0);
text("Click to Begin", 10, 250);
}
void draw(){
if(gamestate ==0){
background(0);
fill(0, 255,0);
noStroke();
rect(0,235, 500,2.5);
rect(0,250, 500,2.5);
fill(0);
rect(0,238,rect.x,rect.y);
fill(0,255,0);
ellipse(mouseX, mouseY, 2,2);
text("lives left:"+lives, 10, 20);
if (mouseY<240 || mouseY>247){
background(0);
lives = lives-1;
if(lives <= 0){
text("Game Over. \nClick to Begin", 225,250);
gamestate=1;
}
}
if (mouseX >= 495){
background(0);
text("You Win! \nClick to Begin Again.", 225,250);
}
}
}
void mousePressed(){
if (gamestate ==1){
gamestate=0;
}
}
Keep in mind that before your mouse enters the sketch for the first time, mouseX and mouseY are both 0. So in your draw() function, when you check if mouseY < 240, that's true. You do that 60 times per second, so you lose all 3 of your lives right away.
To fix this, you might want to have a "starting rectangle" that the player has to click to start the game, that way you know the mouse is in the window.
Then after that, you have to give the player a chance to get back to the starting circle before starting the next round, otherwise you just keep losing lives 60 times per second.
That basics might look something like this:
int gamestate=1; //1 is start screen, 0 is playing, 2 is between lives, 3 wins
int lives = 3;
class Sprite {
float x;
float y;
float dx;
float dy;
}
Sprite rect=new Sprite();
Sprite ball=new Sprite();
void setup() {
size(500, 500);
rect.x = 500;
rect.y = 12;
ball.y= mouseY;
}
void draw() {
background(0);
if (gamestate ==0) {
fill(0, 255, 0);
noStroke();
rect(0, 235, 500, 2.5);
rect(0, 250, 500, 2.5);
fill(0);
rect(0, 238, rect.x, rect.y);
fill(0, 255, 0);
ellipse(mouseX, mouseY, 2, 2);
text("lives left:"+lives, 10, 20);
if (mouseY<240 || mouseY>247) {
lives = lives-1;
gamestate=2;
if (lives <= 0) {
text("Game Over. \nClick to Begin", 225, 250);
gamestate=1;
}
}
if (mouseX >= 495) {
gamestate=3;
}
}
else if(gamestate == 1 || gamestate==2){
fill(0, 255, 0);
text("Click to Begin", 10, 230);
rect(0, 240, width, 7);
}
else if(gamestate == 3){
text("You Win! \nClick to Begin Again.", 225, 250);
}
}
void mousePressed() {
if (gamestate ==1 || gamestate == 2) {
if(mouseY>240 && mouseY<247){
gamestate=0;
}
}
}
Note that I don't really understand what your game is supposed to do: your "safe area" is only 7 pixels tall, which seems pretty small. But assuming this is just an example, my answer should generalize to your real code:
Split your game up into "modes". You started to do this with your gamestate variable, but you're also mixing event code and drawing code. Instead, make every mode a state: the start screen, the playing screen, the "in between lives" screen, the game over screen. Only draw the stuff for that mode, and then change the mode based on input. Basically, instead of checking for "play mode" and then drawing "game over" when you run out of lives, just switch to "game over mode" and let that part of the code draw the "game over" to the screen.
I'm just tinkering around with Processing in order to make some .gif animations procedurally. For some reason, the one I just finished making has a lot of jitter when I run it (and also when I export it using GifAnimation). I'm not entirely sure why this is happening.
Excuse the hack-job that is my code:
long lastTime = 0;
float angle1, angle2, angle3, angle4, angle5, angle6;
int change;
public void setup() {
size(120, 120);
lastTime = millis();
angle1 = -60;
angle2 = 240;
angle3 = -30;
angle4 = 210;
angle5 = -75;
angle6 = 255;
change = 3;
noFill();
stroke(0);
strokeWeight(10);
smooth();
}
public void draw() {
if (millis() - lastTime > 12) {
background(255,255,255);
lastTime = millis();
stroke(#3aa8c3);
arc(60, 60, 70, 70, radians(angle1), radians(angle2));
ellipse(60, 60, 10, 10);
stroke(#e7e7e7);
arc(60, 60, 40, 40, radians(angle3), radians(angle4));
arc(60, 60, 100, 100, radians(angle5), radians(angle6));
angle1-=change*2;
angle2-=change*2;
angle3+=change*3;
angle4+=change*3;
angle5+=change;
angle6+=change;
}
}
The result is the following:
Is it something I'm doing wrong, or is it simply a restriction of the Processing environment?
Edit:
After changing the rendering mode to P3D (size(120, 120, P3D);) things are working a lot more smoothly. It got rid of the rounded edges and I had to add some anti-aliasing (smooth(8)), but it no longer jitters. The transparent background is also a bonus:
You'll have better luck if you post the simplest form of your problem, something like this:
public void setup() {
size(360, 360);
noFill();
stroke(0);
smooth(10);
}
public void draw() {
background(255);
stroke(#3aa8c3);
arc(60, 60, 70, 70, radians(mouseX), radians(mouseY));
}
This allows us to eliminate causes and more easily find the solution.
Also, I googled "processing arc jittery" and "processing arc wobble" and found this answer, which says to try the hint(ENABLE_STROKE_PURE) function. When I add that to the example, it seems to work much better:
public void setup() {
size(360, 360);
noFill();
stroke(0);
smooth(10);
hint(ENABLE_STROKE_PURE);
}
public void draw() {
background(255);
stroke(#3aa8c3);
arc(60, 60, 70, 70, radians(mouseX), radians(mouseY));
}
Adding hint(ENABLE_STROKE_PURE); as the last line in your setup() function also seems to fix your problem.