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 here ... I need help with an issue Bezier Point in Processing, I apologize in advance for the English, I'm from Brazil, I write with the help of Google Translator ...
I tried to draw the "silhouette" of the human body, ie not need to have defined the face traits, etc. (I know this is complicated), only need the face outlines, body, finally simpler ...
The problem is that I would do it in 3D, so you can rotate, zoom effects, etc ...
Below we have two programs, one in 2D, which would be near what I need to do.
In the second program as a sketch do it in 3D, but could not develop the idea of how to make the mesh of body contours, that's what I need help.
Could someone give some hint of any algorithm that can be translated into Processing, to draw this fabric of the human body (silhouette)?
I thank the attention, I apologize if the text was a little long, but I thought I should try to explain the best.
int neckThick, headShape, shoulderSize, armSize, hipSize, lowerSize, upperSize, thighSize, handSize, legSize, footSize;
void setup() {
size(displayWidth, displayHeight, P3D);
smooth();
strokeWeight(2);
noFill();
stroke(10,50,255,80);
atualizaPontos();
}
void draw() {
background(255);
desenhaCorpo();;
}
void atualizaPontos(){
neckThick = 3;
headShape = 0;
shoulderSize = 5;
armSize = -1;
hipSize = -3;
lowerSize = -5;
upperSize = 2;
thighSize = -5;
handSize = 15;
legSize = 0;
footSize = 14;
}
void desenhaCorpo() {
head(headShape);
neck(neckThick);
shoulders(shoulderSize);
upperArms(armSize);
hips(hipSize);
lowerBody(lowerSize);
upperBody(upperSize);
thighs(thighSize);
kneecaps();
hands(handSize);
legs(legSize);
feet(footSize);
}
void head(int headSize) {
bezier(300, 70, 308, 30, 372, 30, 385, 70); //scalp
bezier(300, 70, 300-headSize, 120, 315-headSize, 135, 320, 140); //side
bezier(385, 70, 385+headSize, 120, 370+headSize, 135, 365, 140); //side
bezier(320, 140, 340, 155, 345, 155, 365, 140); //chin
}
void neck(int neckWidth) {
bezier(320, 140, 325-neckWidth, 170, 320-neckWidth, 180, 315, 180); //left neck
bezier(365, 140, 355+neckWidth, 170, 365+neckWidth, 180, 365, 180); //right neck
}
void shoulders(int shoulderWidth) {
bezier(210, 200, 305, 190-shoulderWidth, 310, 185-shoulderWidth, 315, 180); //left trapezius
bezier(365, 180, 370, 190-shoulderWidth, 380, 195-shoulderWidth, 480, 200); //right trapezius
bezier(210, 200, 205, 205, 205, 205, 200, 220); // left shoulder
bezier(480, 200, 485, 205, 485, 205, 490, 220); // right shoulder
}
void upperBody(int upperWidth) {
bezier(240, 250, 245-upperWidth, 300+upperWidth, 250-upperWidth, 325+upperWidth, 275, 325); //left pectoral
bezier(450, 250, 450+upperWidth, 300+upperWidth, 430+upperWidth, 325+upperWidth, 415, 325); //right pectoral
bezier(330, 300, 325, 320, 320, 320, 300, 325); //inner boob
bezier(360, 300, 370, 320, 375, 320, 390, 325); //inner boob
}
void lowerBody(int lowerWidth) {
bezier (260, 320, 260-lowerWidth, 350+lowerWidth/2, 270-lowerWidth, 380+lowerWidth/2, 265, 415); // left side
bezier (430, 320, 430+lowerWidth, 350+lowerWidth/2, 420+lowerWidth, 380+lowerWidth/2, 425, 415); // right side
}
void hips(int hipWidth) {
bezier(265, 410, 265-hipWidth, 430, 255-hipWidth, 435, 260, 450); //left hip
bezier(425, 410, 425+hipWidth, 430, 435+hipWidth, 435, 430, 450); //left hip
}
void thighs(int thighWidth) {
bezier(260, 450, 240-thighWidth, 500, 250-thighWidth, 525, 270, 650); //left thigh side
bezier(335, 480, 340+thighWidth, 500, 330+thighWidth, 525, 320, 650); //right thigh side
bezier(430, 450, 445+thighWidth, 500, 440+thighWidth, 525, 420, 650); //left thigh side
bezier(360, 480, 355-thighWidth, 500, 355-thighWidth, 525, 370, 650); //right thigh side
bezier(335, 480, 340, 483, 340, 483, 360, 480);
}
void kneecaps() {
bezier(270, 650, 270, 655, 265, 655, 270, 690); // left kneecap side
bezier(320, 650, 320, 655, 325, 655, 320, 690); // right kneecap side
bezier(420, 650, 420, 655, 425, 655, 420, 690); // left kneecap side
bezier(370, 650, 370, 655, 365, 655, 370, 690); // right kneecap side
}
void upperArms(int armWidth) {
bezier(200, 220, 190-armWidth, 300, 200-armWidth, 310, 200, 350); // left forearm side
bezier(200, 350, 180-armWidth, 425, 200-armWidth, 500, 200, 500); // left arm side
bezier(240, 250, 240+armWidth, 300, 235+armWidth, 310, 235, 350); // left forearm inside
bezier(235, 350, 240+armWidth, 425, 230+armWidth, 450, 225, 500); // left arm inside
bezier(490, 220, 500+armWidth, 300, 490+armWidth, 310, 490, 350); // right forearm
bezier(490, 350, 510+armWidth, 425, 490+armWidth, 500, 490, 500); // right arm
bezier(450, 250, 450-armWidth, 300, 455-armWidth, 310, 455, 350); // right forearm inside
bezier(455, 350, 460-armWidth, 425, 455-armWidth, 450, 465, 500); // right arm inside
}
void hands(int handWidth) {
bezier(200, 500, 210-handWidth, 530, 175-handWidth, 560, 220, 575); // left hand
bezier(220, 575, 225+handWidth, 575, 220+handWidth, 560, 225, 500); // left hand
bezier(490, 500, 480+handWidth, 530, 500+handWidth, 560, 490, 575); // right hand
bezier(465, 500, 460-handWidth, 575, 455-handWidth, 560, 490, 575); // right hand
}
void legs(int legWidth) {
bezier(270, 690, 255-legWidth, 775, 265-legWidth, 800, 275, 850); //left calf
bezier(320, 690, 320+legWidth, 775, 300+legWidth, 800, 300, 850); //left calf
bezier(420, 690, 435+legWidth, 775, 415+legWidth, 800, 405, 850); //right calf
bezier(370, 690, 370-legWidth, 775, 380-legWidth, 800, 380, 850); //left calf
}
void feet(int footWidth) {
bezier(275, 850, 250-footWidth, 900+footWidth, 280-footWidth, 900+footWidth, 300, 850); // left foot
bezier(405, 850, 430+footWidth, 900+footWidth, 400+footWidth, 900+footWidth, 380, 850); // left foot
}
Second program - got in the Forum Processing - Requires proscenium Library
import remixlab.proscene.*;
Scene scene;
float px[], py[], mesh[][][];
void setup() {
size(displayWidth, displayHeight, P3D);
smooth(); //Suavição de Contorno
lights(); //Inicia Luzes no ambiente
//Inicia ambiente para Cena
scene = new Scene(this);
scene.setAxesVisualHint(false);
scene.setGridVisualHint(false);
scene.showAll();
//Cria Matriz para a malha
px = new float[40];
py = new float[40];
float t = 0;
for(int i = 0; i < px.length; i++) {
px[i] = bezierPoint(50, 130, 130, 50, t);
py[i] = bezierPoint(450, 350, 150, 50, t);
//px[i] = bezierPoint(300, 308, 370, 300, t);
//py[i] = bezierPoint(70, 30, 30, 70, t);
t += (1.0/(float)(px.length-1));
ellipse(px[i], py[i], 5, 5);
println(t);
}
//Cria Malha
mesh = createMesh(px,py,20, -60,60);
//mesh = createMesh(px,py,170, -360,360);
scene.startAnimation();
}
void draw() {
background(0);
ambientLight(128, 128, 128);
directionalLight(255, 255, 255, 0, 1, -100);
//head(-3);
stroke(255);
//noStroke();
//fill(255,120,0);
drawMesh(mesh);
}
void head(int headSize) {
fill(255);
bezier(300, 70, 30, 308, 30, 30, 372, 30, 30, 385, 70, 30); //scalp
bezier(300, 70, 30, 300-headSize, 120, 30, 315-headSize, 135, 30, 320, 140, 30); //side
bezier(385, 70, 30, 385+headSize, 120, 30, 370+headSize, 135, 30, 365, 140, 30); //side
bezier(320, 140, 30, 340, 155, 30, 345, 155, 30, 365, 140, 30); //chin
}
//Desenha Malha
void drawMesh(float mesh[][][]) {
//println(mesh.length+" "+mesh[0].length+" "+mesh[0][0].length);
for(int i = 0; i < mesh.length-1; i++) {
beginShape(QUAD_STRIP);
for(int j = 0; j < mesh[0].length; j++) {
vertex(mesh[i][j][0], mesh[i][j][1], mesh[i][j][2]);
vertex(mesh[i+1][j][0], mesh[i+1][j][1], mesh[i+1][j][2]);
}
endShape();
}
}
//Cria malha
float [][][] createMesh(float px[],float py[],int numrot, float startDeg,float endDeg) {
float deg, x, z;
double cosval, sinval, tmp1, tmp2;
float [][][] mesh = new float[numrot][px.length][3];
endDeg -= startDeg;
for(int i = 0; i < numrot; i++) {
deg = radians(startDeg + (endDeg/(float)(numrot-1)) * (float)i);
for(int j = 0; j < px.length; j++) {
x = px[j];
z = 0;
cosval = Math.cos(deg);
sinval = Math.sin(deg);
tmp1 = x * cosval - z * sinval;
tmp2 = x * sinval + z * cosval;
mesh[i][j][0] = (float) tmp1;
mesh[i][j][1] = py[j];
mesh[i][j][2] = (float) tmp2;
}
}
return mesh;
}
Thank you so much
Instead of trying to hammer code you found on the internet into submission, I highly recommend you start a little smaller and try to focus on one small thing at a time.
Instead of trying to get your whole figure working, focus only on the head, or only on one line of the head.
The bezier() function can either take 2D coordinates like you're currently using, or it can take 3D coordinates by simply providing a Z value for each coordinate. More info can be found in the reference.
Think about it this way: right now you're using 3D coordinates, but the Z value for every point is 0. Go through each line and think about what the Z value should be for each coordinate.
This is going to be a pretty manual process, but it's going to save you a ton of headaches over trying to get random code to work. Good luck.
I've actually tried to make simpler, but it seems that more complex shapes in 3D do not seem to give the effect you would like to get with Bezier Curve.
Another possibility would be to work with Bezier Point, (but then changes everything in the form of fill) the reference did not see anything that could direct me to a more complicated task like this ...
But thanks for the tips, I will keep searching about, to see how best to do ...
Below is a snippet of code that was trying to adapt, but to see the result, I used the proscene library for easy viewing, the way I have to do too manual, because in this example below, must return the mouse scrool to see the face, but without the effect of 3d ...
import remixlab.proscene.*;
Scene scene;
void setup() {
size(800, 600, P3D);
noFill();
stroke(255);
background(0);
head(-3);
scene = new Scene(this);
scene.setAxesVisualHint(false);
scene.setGridVisualHint(false);
//scene.showAll();
}
void draw() {
//background(0);
//head(-3);
}
void mousePressed(){
background(0);
head(-3);
}
void head(int headSize) {
//fill(255);
bezier(300, 70, 30, 308, 30, 30, 372, 30, 30, 385, 70, 30); //scalp
bezier(300, 70, 30, 300-headSize, 120, 30, 315-headSize, 135, 30, 320, 140, 30); //side
bezier(385, 70, 30, 385+headSize, 120, 30, 370+headSize, 135, 30, 365, 140, 30); //side
bezier(320, 140, 30, 340, 155, 30, 345, 155, 30, 365, 140, 30); //chin
}
I'm leaving the solution I found here, because it can be helpful to others ...
I was "another way" to "build" the human being, I used MakeHuman Application http://www.makehuman.org/
The model can export to .stl Using toxilibs library, you can download and view the image from the .stl file
To zoom and rotation, used the peaseCam library ...
Below is the code to run must have a file in the folder .stl type of course ...
Note: It can be enhanced with 3D software like Blender for example, but this is another story ... well, what to do from the this, will the goals you want ...
Thank you,
Code:
import toxi.geom.*;
import toxi.geom.mesh.*;
import toxi.processing.*;
import peasy.*;
TriangleMesh mesh;
ToxiclibsSupport gfx;
PeasyCam cam;
int zoom = 30;
void setup() {
size(displayWidth, displayHeight, P3D);
mesh = (TriangleMesh)new STLReader().loadBinary(sketchPath("Exemplo.stl"),STLReader.TRIANGLEMESH);
gfx = new ToxiclibsSupport(this);
cam = new PeasyCam(this, 800);
cam.setMinimumDistance(10);
cam.setMaximumDistance(800);
noStroke();
}
void draw() {
background(0);
rotateX(-.2);
rotateY(-.2);
pushMatrix();
translate(0,0,20);
directionalLight(192, 168, 128,0, -1000, -0.5);
directionalLight(255, 64, 0, 0.5f, -0.5f, -0.1f);
scale(zoom);
gfx.mesh(mesh,false);
popMatrix();
}
void keyPressed(){
if (key==CODED) {
if (keyCode == UP) zoom++;
else if(keyCode == DOWN) zoom--;
}
}
Image
I am having trouble sending a sketch through Syphon to Madmapper.
The regular "send frames" sketch works, but when I try to incorporate the parameters to my sketch, the visualization doesn't show.
Please take a look at my code and let me know what am I doing wrong:
//Final Project
import codeanticode.syphon.*;
float rotation=0.1;
int num = 100, frms = 320;
float theta, time;
long rs;
PGraphics canvas;
SyphonServer server;
//long: Use this datatype when you need a number to have a greater magnitude than can be
//stored within an int.
void setup () {
size(800, 800, P2D);
canvas = createGraphics(800, 800, P2D);
loop();
server = new SyphonServer(this, "sublime");
};
void draw() {
background(0);
canvas.beginDraw();
canvas.smooth();
noStroke();
fill(255, 255, 255, 20);
rect(mouseX, mouseY, 50, 50);
time = (frameCount % frms)/float(frms);
paintQuads();
theta += 2/TWO_PI/frms;
}
void paintQuads() {
for (int i=0; i<num; i++) {
fill(0);
stroke(255);
float r = random(-.5, .5);
float sz = random(5, 15);
resetMatrix(); // Replaces the current matrix with the identity matrix.
// This effectively clears all transformation functions set before it.
//multiply the quads
//Translate
//Specifies an amount to displace objects within the display window.
//The x parameter specifies left/right translation, the y parameter specifies up/down
//translation, and the z parameter specifies translations toward/away from the screen.
//Using this function with the z parameter requires using P3D as a parameter in
//combination with size as shown in the above example.
translate(random(width), random(height));
rotate(r);
rotate(rotation);
//images
noStroke();
fill(255, 0, 0, 70);
quad(38, 31, 86, 20, 69, 63, 30, 76);
fill(255, 210, 0, 10);
quad(width-9, height-9, 86, 20, 69, 63, 30, 76);
fill(255, 0, 0, 30);
ellipse(36, 36, 16, 16);
fill(50, 46, 100, 20 );
quad(46, 20, 14, 14, 46, 20, 14, 14);
fill(50, 46, 100, 75);
quad(50, 0, 12, 12, 50, 0, 12, 12);
rotation=rotation+0.5;
}
canvas.endDraw();
image(canvas, 0, 0);
//send canvas to Syphon
server.sendImage(canvas);
}
Thank you!
-k
It seems you are not using the PGraphics instance properly: some calls use it, some draw into the main sketch, but not the canvas PGraphics which is what you send to Syphon.
One quick fix is to call server.sendScreen(); instead of server.sendImage();
This way what is see in Processing is what you see in MadMapper via Syphon:
Alternatively you can fix your PGraphics calls:
//Final Project
import codeanticode.syphon.*;
float rotation=0.1;
int num = 100, frms = 320;
float theta, time;
long rs;
PGraphics canvas;
SyphonServer server;
//long: Use this datatype when you need a number to have a greater magnitude than can be
//stored within an int.
void setup () {
size(800, 800, P2D);
canvas = createGraphics(800, 800, P2D);
loop();
server = new SyphonServer(this, "sublime");
};
void draw() {
background(0);
canvas.beginDraw();
canvas.smooth();
canvas.background(0);
noStroke();
fill(255, 255, 255, 20);
rect(mouseX, mouseY, 50, 50);
time = (frameCount % frms)/float(frms);
paintQuads(canvas);
theta += 2/TWO_PI/frms;
canvas.endDraw();
image(canvas,0,0);
server.sendImage(canvas);
}
void paintQuads(PGraphics g) {
for (int i=0; i<num; i++) {
g.fill(0);
g.stroke(255);
float r = random(-.5, .5);
float sz = random(5, 15);
g.resetMatrix(); // Replaces the current matrix with the identity matrix.
// This effectively clears all transformation functions set before it.
//multiply the quads
//Translate
//Specifies an amount to displace objects within the display window.
//The x parameter specifies left/right translation, the y parameter specifies up/down
//translation, and the z parameter specifies translations toward/away from the screen.
//Using this function with the z parameter requires using P3D as a parameter in
//combination with size as shown in the above example.
g.translate(random(width), random(height));
g.rotate(r);
g.rotate(rotation);
//images
g.noStroke();
g.fill(255, 0, 0, 70);
g.quad(38, 31, 86, 20, 69, 63, 30, 76);
g.fill(255, 210, 0, 10);
g.quad(width-9, height-9, 86, 20, 69, 63, 30, 76);
g.fill(255, 0, 0, 30);
g.ellipse(36, 36, 16, 16);
g.fill(50, 46, 100, 20 );
g.quad(46, 20, 14, 14, 46, 20, 14, 14);
g.fill(50, 46, 100, 75);
g.quad(50, 0, 12, 12, 50, 0, 12, 12);
rotation=rotation+0.5;
}
// image(canvas, 0, 0);
//send canvas to Syphon
// server.sendScreen();
}
Or if PGraphics is confusing to use for now, skip it altogether and send the screen:
//Final Project
import codeanticode.syphon.*;
float rotation=0.1;
int num = 100, frms = 320;
float theta, time;
long rs;
SyphonServer server;
//long: Use this datatype when you need a number to have a greater magnitude than can be
//stored within an int.
void setup () {
size(800, 800, P2D);
smooth();
server = new SyphonServer(this, "sublime");
};
void draw() {
background(0);
noStroke();
fill(255, 255, 255, 20);
rect(mouseX, mouseY, 50, 50);
time = (frameCount % frms)/float(frms);
paintQuads();
theta += 2/TWO_PI/frms;
server.sendScreen();
}
void paintQuads() {
for (int i=0; i<num; i++) {
fill(0);
stroke(255);
float r = random(-.5, .5);
float sz = random(5, 15);
resetMatrix(); // Replaces the current matrix with the identity matrix.
// This effectively clears all transformation functions set before it.
//multiply the quads
//Translate
//Specifies an amount to displace objects within the display window.
//The x parameter specifies left/right translation, the y parameter specifies up/down
//translation, and the z parameter specifies translations toward/away from the screen.
//Using this function with the z parameter requires using P3D as a parameter in
//combination with size as shown in the above example.
translate(random(width), random(height));
rotate(r);
rotate(rotation);
//images
noStroke();
fill(255, 0, 0, 70);
quad(38, 31, 86, 20, 69, 63, 30, 76);
fill(255, 210, 0, 10);
quad(width-9, height-9, 86, 20, 69, 63, 30, 76);
fill(255, 0, 0, 30);
ellipse(36, 36, 16, 16);
fill(50, 46, 100, 20 );
quad(46, 20, 14, 14, 46, 20, 14, 14);
fill(50, 46, 100, 75);
quad(50, 0, 12, 12, 50, 0, 12, 12);
rotation=rotation+0.5;
}
}