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.
Related
I am trying to print an image off the internet in processing.
I have tried looking at the processing website and found some code I thought should work:
import spaceInvadersEnemy.pdf.*;
void setup(){
size(800, 600);
}
void draw(){
size(600, 600);
beginRecord(PDF, "spaceInvadersEnemy.pdf"); // Start writing to PDF
background(255);
stroke(0, 20);
strokeWeight(20);
line(200, 0, 400, height); // Draw line to screen and to PDF
endRecord();
}
But I always got an error on the line with:
import spaceInvadersEnemy.pdf.*;
The error says "No library found for spaceInvadersEnemy.pdf"
I know that I need to include the file somewhere but I don't know where.
I am trying to just simply print an image of a space invaders enemy can someone please help me.
I found the solution by going to the processing website and looking at the load image function it is right here: LoadImage() syntax page
If you have this problem you need to create a PImage then load it with the file name like this: spaceInvadersEnemy = loadImage("spaceInvadersEnemy.png"); you render it by using the image function: image(PImage, xPosition, yPosition, width, height); The width and height are not needed though. Your code should look something like this:
void setup() {
size(800, 600);
spaceInvadersEnemy = loadImage("spaceInvadersEnemy.png");
}
void draw() {
background(0);
image(spaceInvadersEnemy, x, y, 50, 50);
}
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.
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 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.
I'm trying to add animation in my code. What I have so far is an object that can be changed by pressing a button. So every time you press the button, the object changes (it is a tree and I'm changing its branches). Is it possible to add some kind of animation like snow? The problem with that is that I have to put it inside the draw method so it will be called automatically and make us think that it is animation. Thus, I also have to add the background / button and everything all the time. But I can't do that with my main object (tree) as I want to change it only when you press the button.
Is there any solution to that?
Thanks in advance
To persist some objects while refreshing others, you either:
Refresh only part of the screen. Like, draw a shape (rect or whatever) with background colour erasing only part of screen
Conditionally draw selected objects. Use flags to selective draw what you need, every draw, and use background() to clear the whole screen every draw cycle.
Use layers. Erase one layer and not other as you need, display all them in draw. This is usually done with PGraphics objects. Search processing + layers to see samples. Here and/or in processing forum.
EDIT:
Here some simple examples of each approach:
1.
/**
* A very simple example of erasing just part of the screen to
* selective persist draws
**/
void setup() {
size(400, 400);
background(0);
noStroke();
}
void draw() {
fill(0);
rect(0, 0, width/2, height);
fill(120);
ellipse(width/4, frameCount%width, 100, 100);
}
void mouseMoved() {
fill(255);
ellipse(mouseX, mouseY, 10, 10);
}
2.
/**
* A very simple example of conditionally draw stuf
* to selective persist draws
**/
ArrayList <PVector> points = new ArrayList <PVector>();
boolean showBalls = true; // any key to toogle
void setup() {
size(400, 400);
background(0);
noStroke();
}
void draw() {
background(0);
fill(30);
rect(frameCount%width, 100, 200, 200);
fill(120);
ellipse(width/2, frameCount%width, 150, 150);
fill(255);
if (showBalls) {
for (PVector p : points) {
ellipse(p.x, p.y, 10, 10);
}
}
if (points.size() > 500) {
points.clear();
}
}
void mouseMoved() {
ellipse(mouseX, mouseY, 10, 10);
points.add(new PVector(mouseX, mouseY));
}
void keyPressed() {
showBalls = !showBalls;
}
3.
/**
* A very simple example of using PGraphics as layers
* to selective persist draws
**/
PGraphics layer;
void setup() {
size(400, 400);
layer = createGraphics(width, height);
layer.beginDraw();
layer.fill(255);
layer.endDraw();
background(0);
noStroke();
}
void draw() {
background(0);
fill(30);
rect(frameCount%width, 100, 200, 200);
fill(120);
ellipse(width/2, frameCount%width, 150, 150);
image(layer, 0, 0);
}
void mouseMoved() {
layer.beginDraw();
layer.ellipse(mouseX, mouseY, 10, 10);
layer.endDraw();
}