parallel line shape

asimes

Re: Spline shape

8 months ago

All of those are lines in the link because they are straight, splines are for doing curves.

scarecr0w..

Re: Re: Spline shape

8 months ago

ok thankyou i updated my post

asimes

Re: parallel line shape

8 months ago

Here's an example of how to do the second image. It would help to look at the Trig tutorials if you are not familiar with radians, sin(), and cos(): http://processing.org/learning/trig/

int dia1 = 100;
int dia2 = 200;
int rad1, rad2, w2, h2;
void setup() {
size(600, 600);
noFill();
rad1 = dia1/2;
rad2 = dia2/2;
w2 = width/2;
h2 = height/2;
}
void draw() {
background(255);
stroke(0, 64);
// (Put here for reference)
ellipse(w2, h2, dia1, dia1);
ellipse(w2, h2, dia2, dia2);
stroke(0);
// First line is easy
line(w2+rad2, h2, w2+rad1, h2);
// Calculate the next point on the inner circle
float x = cos(PI/8)*rad1;
float y = sin(PI/8)*rad1;
line(w2+rad1, h2, w2+x, h2+y);
// Third point is on the outer circle
float x2 = cos(PI/8)*rad2;
float y2 = sin(PI/8)*rad2;
line(w2+x, h2+y, w2+x2, h2+y2);
// Fourth point is on the outer circle
x = cos(PI/4)*rad2;
y = sin(PI/4)*rad2;
line(w2+x2, h2+y2, w2+x, h2+y);
// Continue the process...
x2 = cos(PI/4)*rad1;
y2 = sin(PI/4)*rad1;
line(w2+x, h2+y, w2+x2, h2+y2);
}

scarecr0w..

Re: Re: parallel line shape

8 months ago

What i was thinking of was something like creating an actual shape

shape = new shape

shape.vertex(0,0)

shape.vertex(0,1)

shape.vertex(1,1)

shape.vertex(1,0)

shape.vertex(2,0)

asimes

Re: parallel line shape

8 months ago

Then replace the lines with vertices and use the calculated positions inside of arguments for vertex().

scarecr0w..

Re: parallel line shape

8 months ago

Same thing implemented with beginShape() and a loop:

int rad1, rad2, w2, h2;
int numVerts = 64;
float[] x = new float[numVerts];
float[] y = new float[numVerts];
void setup() {
size(600, 600);
fill(255, 0, 0);
rad1 = 100;
rad2 = 200;
w2 = width/2;
h2 = height/2;
assignVertices();
}
void draw() {
background(255);
beginShape();
for (int i = 0; i < numVerts; i++) vertex(x[i], y[i]);
endShape(CLOSE);
}
void assignVertices() {
float theta = 0;
int currRad = rad2;
// For the number of vertices...
for (int i = 0; i < numVerts; i++) {
// When to step the angle
if (i%2 == 0) theta += TWO_PI/numVerts*2;
// When to switch the radius
if (i%4 == 1) currRad = rad1;
if (i%4 == 3) currRad = rad2;
// Where to place a point
x[i] = w2+cos(theta)*currRad;
y[i] = h2+sin(theta)*currRad;
}
}

Edit: To manipulate the shape, modify the appropriate element of x[] or y[]

scarecr0w..

Re: Re: parallel line shape

8 months ago

I dont think you understand what i mean

asimes

That is not at all obvious from your image then. Why would you want the left side one to be a shape? It doesn't close on itself. A part of being able to fill a shape is that it closes, the left side image has two ends that don't connect.

Making the one on the left still uses almost the same loop, just ignore the Trig part of it:

int h1, h2, jump;
int numVerts = 56;
int[] x = new int[numVerts];
int[] y = new int[numVerts];
void setup() {
size(600, 400);
h1 = 300;
h2 = 100;
jump = 20;
assignVertices();
}
void draw() {
background(255);
for (int i = 0; i < numVerts-1; i++) line(x[i], y[i], x[i+1], y[i+1]);
}
void assignVertices() {
int currWidth = 0;
int currHeight = h1;
for (int i = 0; i < numVerts; i++) {
if (i%2 == 0) currWidth += jump;
if (i%4 == 1) currHeight = h2;
if (i%4 == 3) currHeight = h1;
x[i] = currWidth;
y[i] = currHeight;
}
}

scarecr0w..

Re: Re: parallel line shape

8 months ago

that is perfect, is their a way of accessing it? like myLines.something();

asimes

Re: parallel line shape

8 months ago

Try sticking something like this in the draw() loop to see what it does:

int someIndex = 24;
x[someIndex] = (int)random(width);
y[someIndex] = (int)random(height);

scarecr0w..

Re: Re: parallel line shape

8 months ago

interesting but say if i want to do

myline.getvertexcount();

is the only way of doing that to put

getvertexcount(); in draw?

can i access it in another method?

asimes

Re: parallel line shape

8 months ago

The number of vertices = numVerts.

Accessing any particular vertex (I'll call it v):

x[v] = ???; // Whatever value

y[v] = ???; // Whatever value

Edit: numVerts, x[], and y[] are all global. You can access them anywhere in the sketch.

Edit (again): Keep in mind that this is not a closed shape. That means the number of lines is numVerts-1

scarecr0w..

Re: Re: parallel line shape

8 months ago

oh i wasn't meaning getvertexcount in particular, i was meaning any features that you can use in a shape like scale ,rotate ,colour ect..

asimes

Re: parallel line shape

8 months ago

Play with h1, h2, and jump. Make sense of them. Those are what control where vertices are placed.

If you don't mind there being a line across the bottom you could force it to be a shape just like the second code I posted. Then you could fill it with a color because it would be closed. As it is now, the shape is not closed so I drew it with lines.

scarecr0w..

Re: Re: parallel line shape

8 months ago

ok thankyou for all your help :) i appreciate it

just one last thing unless its a shape i probably wont be able to project it around another object?

asimes

Re: parallel line shape

8 months ago

To be honest I don't use shape() so I don't know what process you mean (I'm guessing it is something built into shape()). When I kept talking about the drawings being shapes or not I didn't mean shape().

You could do it manually, but that is fairly math intensive. If the object you are projecting onto isn't too difficult to project on like a plane or sphere then learning how to do it wouldn't be too bad. The main problem is becoming familiar with equations of a plane or sphere to be able to do this. YouTube is a good place to learn how / why the equations work.

Sphere:

sq(x) + sq(y) + sq(z) - sq(r) = 0

Plane:

a*x + b*y + c*z + d = 0

In both cases plugging in some point in space into the equation is on the surface of the sphere or plane if the result is equal to 0. If your drawing is somewhere in 3D land you would fire a ray from the source of projection through each vertex of the drawing and see which ones hit the object to be projected onto. Say a ray from the projection source through vertex 1 hits the object, you would have to do a ray to object intersection to find where on the object the projected vertex belongs. This would be repeated for all the other vertices and the ones that don't hit the object would be ignored.

scarecr0w..

Re: Re: parallel line shape

8 months ago

thats very helpful, what i was meaning by a shape was PShape, how did you learn about this stuff? can you recommend any youtube channels?

PShape star;

public void draw() {

background(51);

star = createShape();

star.vertex(0, 0, 0);

star.vertex(200, 0);

star.vertex(200, 0, 50);

star.vertex(0, 0, 50);

star.vertex(0, 0, 100);

star.vertex(200, 0, 100);

star.vertex(200, 0, 150);

star.vertex(0, 0, 150);

star.vertex(0, 0, 200);

star.vertex(200, 0, 200);

star.vertex(200, 0, 250);

star.vertex(0, 0, 250);

star.end();

star.noFill();

star.translate(mouseX, mouseY);

shape(star);

}

Thanks

asimes

Re: parallel line shape

8 months ago

I learned by writing a RayTracer which does the same thing basically (firing rays from a source and seeing what it hits).

I learned the parametric line equation from a book, but I think Processing's wiki page has something on it. That equation is how you should represent lines in 3D space (avoids problems with infinity that slope-intercept line representation has problems with). You'll need that to fire rays (what is more typically called line when looking at parametric line tutorials).

I actually don't follow any channels on YouTube, I just did searches a while ago, I can't remember where I found them. I can post a ray to plane intersection code I made a while ago. It moves the ray around, for you to use it you'd have to make the ray fire in the direction of a vertex instead of moving around:

float theta = 0;
float x1, y1, z1, x2, y2, z2;
float[] px = new float[4];
float[] py = new float[4];
float[] pz = new float[4];
void setup() {
size(600, 600, P3D);
noFill();
x1 = 0;
y1 = 0;
z1 = 0;
x2 = 0;
y2 = 0;
z2 = -100;
px[0] = 200;
py[0] = 200;
px[1] = 200;
py[1] = -200;
px[2] = -200;
py[2] = -200;
px[3] = -200;
py[3] = 200;
for (int i = 0; i < 4; i++) pz[i] = -100;
}
void draw() {
background(16);
scale(1, -1);
translate(0, -height);
translate(width/2, height/2);
rotateX(PI/8);
rotateY(-theta);
// Visible reference to finite plane
stroke(255, 0, 0);
for (int i = 0; i < 4; i++) {
int i2 = (i+1)%4;
line(px[i], py[i], pz[i], px[i2], py[i2], pz[i2]);
}
// Ray
stroke(255);
box(10);
x2 = cos(theta/2)*300;
line(x1, y1, z1, x2, y2, z2);
// Get a vector on the infinite plane
float p1_0x = px[1]-px[0];
float p1_0y = py[1]-py[0];
float p1_0z = pz[1]-pz[0];
// Get another vector on the infinite plane
float p2_0x = px[2]-px[0];
float p2_0y = py[2]-py[0];
float p2_0z = pz[2]-pz[0];
// Vector product to find surface normal
float a = p2_0y*p1_0z-p2_0z*p1_0y;
float b = p2_0z*p1_0x-p2_0x*p1_0z;
float c = p2_0x*p1_0y-p2_0y*p1_0x;
// Normalize surface normal
float pMag = sqrt(a*a+b*b+c*c);
a /= pMag;
b /= pMag;
c /= pMag;
// D of the Plane Equation
float d = -a*px[0]-b*py[0]-c*pz[0];
// Delta x, y, and z
float dx = x2-x1;
float dy = y2-y1;
float dz = z2-z1;
// If the ray hits the infinite plane
float tDiv = a*dx+b*dy+c*dz;
if (tDiv != 0) {
float t = -(a*x1+b*y1+c*z1+d)/tDiv;
// Point of intersection
float tx = x1+t*dx;
float ty = y1+t*dy;
float tz = z1+t*dz;
if (a > b && a > c) {
// Project to yz-plane
println("No projection programmed");
}
else if (b > a && b > c) {
// Project to xz-plane
println("No projection programmed");
}
else {
// Project to xy-plane and perform (very lazy) point in polygon test
if (tx < px[0] && tx > px[3] && ty < py[0] && ty > py[1]) {
pushMatrix();
translate(tx, ty, tz);
box(5);
popMatrix();
}
}
}
theta += TWO_PI/360;
}

Edit: The book is "Computer Graphics Principles and Practice". It is an awesome book, a teacher of mine refers to it as the bible of computer graphics.

scarecr0w..

Re: Re: parallel line shape

8 months ago

ok thanks ill use your code as a base:) you have been very helpful

Replies(20)

Re: Spline shape

Re: Re: Spline shape

Re: parallel line shape

Re: Re: parallel line shape

Re: parallel line shape

Re: Re: parallel line shape

Re: parallel line shape

Re: Re: parallel line shape

Re: parallel line shape

Re: Re: parallel line shape

Re: parallel line shape

Re: Re: parallel line shape

Re: parallel line shape

Re: Re: parallel line shape

Re: parallel line shape

Re: Re: parallel line shape

Re: parallel line shape

Re: Re: parallel line shape

Re: parallel line shape

Re: Re: parallel line shape

Statistics

Tags

Actions

Related Posts