I'm trying to create a particle system within a basic-shape drawing. The particles should emit from the top of the leftmost structure (commented "Heading") and flow downwards, similar to a fountain. I have a majority of the Particle class figured out, but error messages related to the variables arise when I run the sketch.
Applied some edits based on answers, but cannot get the particle system to display. Amended code listed below.
var particles = [ ];
function Particle() {
initialization()
this.x = 135;
this.y = 75;
this.vx = random(-1, 1);
this.vx = random(-5, -1);
this.alpha = 255;
update()
this.x += this.vx;
this.y += this.vy;
this.alpha -= 5;
show()
noStroke();
fill ('#1E740C');
ellipse (this.x, this.y, 8, 8);
}
function setup() {
createCanvas(600, 400);
//Particle Array
for(var i = 0; i < particles.length; i++) {
particles[i] = new Particle();
}
}
function draw() {
background('#87D9E8');
stroke(0);
strokeWeight(1);
//Loop array and alter each element
for(var i=0; i < particles.length; i++) {
particles[i].show();
particles[i].update();
}
//SLIME GEYSER
///Center Pipe
fill ('#1FA600');
rect(340, 75, 20, 290);
rect(340, 75, 130, 20);
////Body
fill ('#1FA600');
ellipse (305, 495, 450, 400);
///Heading (Spout)
//rect(100, 140, 80, 140, 15); //Top segment
//triangle (100, 150, 180, 150, 140, 100); //"Neck" segment
// rect(120, 75, 40, 40); //SPOUT TIP
// ellipse(140, 115, 100, 45); //Spout "bulb"
rect(120, 350, 40, 30); //Bottom pipe
rect(100, 290, 80, 60, 20); //Bottom segment
rect(100, 277, 80, 15); //Midway segment
//////Pressure Condenser Unit Grille
fill('#989E9B');
rect(390, 135, 140, 130);
line (410, 305, 410, 100);
line (430, 305, 430, 100);
line (450, 305, 450, 100);
line (470, 305, 470, 100);
line (490, 305, 490, 100);
line (510, 305, 510, 100);
////Pressure Condenser Unit
fill ('#1FA600');
arc(460, 265, 140, 140, 0, HALF_PI+HALF_PI);
arc(460, 135, 140, 140, PI, 0);
////Tube
noFill();
stroke('#1FA250');
strokeWeight(10);
beginShape();
vertex(110, 270);
quadraticVertex(10, 200, 110, 150);
endShape();
}
First of all you don't have to declare a global Particle variable, the class would do it.
You aren't calling the show function on the particles array so it won't display the particles.
Instead you can do something like this,
function Particle() {
this.x = 120;
this.y = 200;
this.vx = random(-1,1);
this.vy = random(-5,1);
this.alpha = 255;
this.show = function() {
noStroke();
fill("#1E740C");
ellipse(this.x, this.y, 8, 8);
}
this.update = function() {
this.x += this.vx;
this.y += this.vy;
//console.log("run")
}
}
var p = [];
function setup() {
createCanvas(345,400);
for(var i = 0; i < 10; i++) {
p[i] = new Particle();
}
}
function draw() {
background(0);
for(var i = 0; i < p.length; i++) {
p[i].show();
p[i].update()
}
}
That's probably the easiest way to create the particles system. If this answer wasn't helpful then checkout these links:
CodingTrain: https://thecodingtrain.com/CodingChallenges/078-simple-particle-system.html
Or check out p5's own example:
https://p5js.org/examples/simulate-multiple-particle-systems.html
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;
}
}