I don't understand how to create a function and have been reading on possible examples on how to put my cat face to repeat in a nested loop format, but I can't seem to figure out how to make it work. I need to repeat the face of my animal on a static row and then randomize it with a for function. Though I really don't understand how to even create a simple addition function. I'm not sure if this is even correct but if anyone can send me some links or hands on examples of how to make it work I would appreciate it. I don't know if this should be an array or some class function to make it repeat.
void cat()
{
strokeWeight(4);
//ears
fill(236,229,206);
triangle(260, 270, 260, 175, 320, 230);
triangle(390, 230, 450, 175, 440, 270);
fill(241,212,175);
triangle(270, 270, 270, 200, 330, 250);
triangle(395, 240, 440, 195, 430, 280);
//whiskers
fill(236,229,206);
ellipse(350, 300, 200, 150);
//nose
fill(10);
triangle(330, 300, 350, 320, 370, 300);
line(310, 340, 350, 320);
line(350, 320, 390, 340);
//eyes
fill(0, 0, 0);
ellipse(310, 270, 10, 10);
ellipse(390, 270,10, 10);
}
void setup()
{
size(800,800);
background (255);
cat();
}
void draw()
{
for (int i = 0; i<10; i++)
{
for (int j = 0; j<8; j++)
{
cat();
}
}
}
Ignore the cat on the bottom. I didn't know how to make it work as a loop function and just wrote it there for placement. Thank you again.
It's hard to answer general "how do I do this" type questions. You'll have better luck if you isolate your problem in a MCVE and try to ask a more specific question. That being said, I'll try to help in a general sense.
The best thing you can do is break your problem down into smaller pieces and take on each step one at a time. Try to get something simple working: create a function that draws a single circle, and then call that function with different arguments to draw multiple circles. Get that working before you try to draw a more complicated shape. Then if you get stuck, you can ask a more specific technical question.
Shameless self-promotion: here is a tutorial on creating functions 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 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.
I'm new to Processing and I'm studying it using the Processing Handbook.
I have this example code :
PImage img;
void setUp() {
size(200, 200);
img = loadImage("selfportrait_small.jpg");
}
void draw() {
background(255);
tint(255, 102);
image(img, 0, 0, 200, 200);
tint(255, 102, 0, 204);
image(img, 40, 40, 200, 200);
}
When I try to run it I get a NullPointerException in the first call to image(). As you can see in the image below, the jpg file is stored in the data folder:
Processing project
Am I missing something? Is there something wrong I'm not able to see?
Thanks for help.
Yes you wrote "setUp" and not "setup" :-)
Since setUp() is never called the image is never loaded.
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.
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.