I want to create a picture that has some closed areas using function curve(...), but I do not know how to fill the color inside.
Is there any way to fill inside the head and body?
void setup(){
size(800,800);
}
void draw(){
background(170,243,255);
fish();
}
void fish(){
translate(width/2, height/2);//mouseX, mouseY
//eye
fill(231,255,188);
stroke(0);
ellipse(-100,-100,50,45);
fill(0);
ellipse(-100,-100,30,28);
//head
noFill();
strokeWeight(2);
stroke(157,88,255);
curve(-400,-100,-200,-200,50,-150,150,50);
curve(-100,-400,-200,-200,-150,50,0,100);
curve(-300,50,-150,50,50,-150,50,-300);
//body
curve(-200,-350,50,-150,250,250,600,300);
curve(-200,-200,-150,50,250,250,500,250);
}
You could use the curveVertex() function.
This doesn't do exactly what you want, but you can play around with it until it does:
//body
fill(255, 0, 0);
beginShape();
curveVertex(-200, -350);
curveVertex(50, -150);
curveVertex(250, 250);
curveVertex(-150, 50);
curveVertex(-200, -200);
endShape();
Note that you can have multiple blocks like this to fill in different pieces with the same color.
Related
I tried to make a simple 3d spinning cube in processing.
int size = 100;
float angle = 0;
void setup() {
size(500, 500, P3D);
}
void draw() {
lights();
translate(width/2, height/2, 0);
rotateY(angle);
rotateX(angle);
background(0);
box(size);
angle+=0.05;
}
When i run it, i got a nice spinning cube but there is some problem in rendering.
Found a similar thread with no answer:-
Processing P3D Animation leaving artifacts behind
Image Depicting the problem
Although I could not found the reason for this weird effect. But here is a quick hack which worked out for me.
Instead of using the background function to fill the background, simply draw a filled rectangle every frame.
int size = 100;
float angle = 0;
void setup() {
size(500, 500, P3D);
}
void draw() {
//black
fill(0);
//rectangle to fill the canvas
rect(0,0,width,height);
lights();
fill(255);
translate(width/2, height/2, 0);
rotateY(angle);
rotateX(angle);
box(size);
angle+=0.05;
}
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 am trying to create from a custom shape a mask for an image.
In processing I came up with this:
Image img;
PImage img2;
PGraphics mGraphic;
void setup(){
img = loadImage("mask.jpg");
img2 = loadImage("test.jpg");
mGraphic = createGraphics(1024,1024, JAVA2D);
size(img.width, img.height);
}
void draw(){
background(255);
mGraphic.beginDraw();
mGraphic.background(0);
mGraphic.ellipse(mouseX, mouseY, 400, 400);
mGraphic.endDraw();
img2.mask(mGraphic);
image(img2,0,0);
}
Above code will create a ellipse that will be the mask of the image.
I would like to achieve the same with a custom shape generated by Polygons:
import java.awt.Polygon;
PImage img;
PImage img2;
PGraphics mGraphic;
CustomShape myShape = new CustomShape();
void setup(){
img = loadImage("mask.jpg");
img2 = loadImage("test.jpg");
mGraphic = createGraphics(1024,1024, JAVA2D);
myShape.addPoint(25, 25);
myShape.addPoint(275, 25);
myShape.addPoint(275, 75);
myShape.addPoint(175, 75);
myShape.addPoint(175, 275);
myShape.addPoint(125, 275);
myShape.addPoint(125, 75);
myShape.addPoint(25, 75);
smooth();
// img2.filter(INVERT);
size(img.width, img.height);
}
void draw(){
background(255);
stroke(0);
myShape.display();
img2.mask(myShape);
image(img2,0,0);
}
class CustomShape extends Polygon {
void display() {
stroke(0);
fill(0);
beginShape();
for (int i=0; i<npoints; i++) {
vertex(xpoints[i], ypoints[i]);
}
endShape(CLOSE);
}
}
Unfortunately, this code will give me an error: The method mask(int[]) in the type PImage is not applicable for the arguments (Masking_image_1.CustomShape)
Is this even possible to get the same result as my first code, but then with the use of a custom shape? And how can I solve that?
If there are any questions left, please let me know. Above code will work inside Processing.
Well, your error says it all: the mask() function does not know what to do with a CustomShape parameter. The parameter needs to be a PImage or a mask array. More info can be found in the reference.
To use your custom shape, what you want to do is draw that custom shape to a PGraphics (which is a subclass of PImage), and then use that PGraphics as the mask. You'd do that using the createGraphics() function. Again, more info can be found in the reference.
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();
}
I'm trying to create a multi-player game with Processing, but can't figure out how to split screen into two to display different situation of the players?
like in c#,we have
Viewport leftViewport,rightViewport;
to solve the problem.
Thanks a lot
In processing all drawing operations like rect, eclipse etc. are done on a PGraphics element. You could create two new PGraphic objects with the renderer of your choice, draw on them and add them to your main view:
int w = 500;
int h = 300;
void setup() {
size(w, h);
leftViewport = createGraphics(w/2, h, P3D);
rightViewport = createGraphics(w/2, h, P3D);
}
void draw(){
//draw something fancy on every viewports
leftViewport.beginDraw();
leftViewport.background(102);
leftViewport.stroke(255);
leftViewport.line(40, 40, mouseX, mouseY);
leftViewport.endDraw();
rightViewport.beginDraw();
rightViewport.background(102);
rightViewport.stroke(255);
rightViewport.line(40, 40, mouseX, mouseY);
rightViewport.endDraw();
//add the two viewports to your main panel
image(leftViewport, 0, 0);
image(rightViewport, w/2, 0);
}