Related
I'm trying to draw a series of lines and shapes that connect to each-other. Because of some calculations that I'm doing the coordinates for the lines/shapes end up being non-integer numbers and in this case there's a gap between lines that end and start at the same non-integer coordinate.
For example for this code:
void setup() {
noLoop();
size(500, 500);
}
void draw() {
stroke(1);
strokeWeight(100);
strokeCap(SQUARE);
line(0, 0, 0, 200.5);
line(0, 200.5, 0, 401);
}
I get this result (note the gap between the two lines):
Tried this also in p5.js with the same result. How is this working? Should I just always round to integers after doing my math?
After adding a background() call to the draw() the problem now appears to be with the SQUARE strokeCap as I initially thought and not the noLoop(). REM out strokeCap(SQUARE) and it runs ok. UN-REM it and the lines come back with or without noLoop(); PROJECT caps and no caps are still without lines, with or without noLoop(). I don't think the float values make a difference. Note that I removed the decimal values for strokeCap(SQUARE) to rule this out as a possibility. I'm unable to tell you why the lines occur with strokeCap(SQUARE), but the only way that I see to get rid of the lines is to use the PROJECT option, no caps at all, or keep them, but overlap the ends by 1 point. For whatever it's worth, Processing Reference states that all parameters for line() are floats.
void setup() {
size(500, 500);
noLoop();
}
void draw() {
background(209); // Added and it makes a difference
stroke(0);
strokeWeight(50);
// NO cap
line(60, 80, 180.3, 80);
line(180.3, 80, 280.8, 80);
line(280.8, 80, 380.5, 80);
// (SQUARE) cap
strokeCap(SQUARE); // REM this out to get rid of lines
line(60, 160, 160, 160);
line(160, 160, 260, 160);
line(260, 160, 360, 160);
// (PROJECT) cap
strokeCap(PROJECT);
line(60, 260, 160.5, 260);
line(160.5, 260, 260.5, 260);
line(260.5, 260, 360.5, 260);
// (SQUARE) cap with 1 point of overlap
strokeCap(SQUARE); // No lines with overlap
line(60, 360, 160.8, 360);
line(159.8, 360, 260.3, 360);
line(259.3, 360, 360.5, 360);
}
I want to draw shapes which invert the color of the pixels underneath them.
I know similar effects can be achieved in black and white using by setting the blendMode() to DIFFERENCE. However this does not work for colours.
I have also tried to use filter(INVERT) but this affects the whole canvas rather than specific areas.
Is there any way to efficiently achieve these aims in Processing, hopefully with built-in functionality?
I'm not seeing why blendMode does not work for this:
function setup() {
createCanvas(windowWidth, windowHeight);
rectMode(CENTER);
noStroke();
noLoop();
}
function draw() {
background(0);
translate(width / 2, height / 2);
push();
fill(0, 255, 0);
rect(0, 0, width * 0.6, height * 0.6);
pop();
push();
blendMode(DIFFERENCE);
fill(255);
ellipse(width * 0.3, height * 0.3, 100, 100);
pop();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
Well you could probably do:
color col = get(x, y);
color colInv = color(255 - col.r, 255 - col.g, 255 - col.b, 255 - col.a);
Not sure if you can do 255 - col all at once. Also I'm not sure if this would actually work, but it should...
Also get(x, y) takes a while, so you can also do it with the pixel array The coding train has a nice video on the pixel array.
I have two lines as given below:
line (0,200, width,250);
line (0, 250, width, 300);
How can fill the area in between them?
I tried:
fill (250,250,25);
beginShape ();
line (0,200, width,250);
line (0, 250, width, 300);
endShape();
But it does not seem to work.
You can't use line() with beginShape() like that. Instead, use the vertex() function to fill your area. Something like this:
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape(CLOSE);
More info can be found in the reference.
I have been working on learning processing and now feel fairly comfortable drawing shapes and editing color etc. I have tried to take the step towards animating one of my prior works, but I just seem to keep running into dead ends or I can't get the unit to move cohesively. Essentially I am trying to move this entire guitar around the screen in any manner whatsoever as long as it stays intact. If you have a recommendation I would greatly appreciate it!
Current code is as follows:
void setup() {
size(600,600);
smooth();
noLoop();
}
void draw() {
//pegs
strokeJoin(SQUARE);
fill(255,255,255);
rect(530,105,20,20);
rect(565,70,20,20);
rect(473,50,20,20);
rect(505,18,20,20);
//neck and head
strokeWeight(60);
strokeCap(SQUARE);
strokeJoin(ROUND);
stroke(165,42,42);
line(490,110,560,40);
fill(255,255,255);
strokeWeight(45);
strokeCap(SQUARE);
strokeJoin(ROUND);
line(300,295,500,105);
//guitar body
noStroke();
fill(222,184,135);
ellipse(200,400,200,200);
ellipse(280,310,150,150);
//Sound Hole
fill(255,140,0);
ellipse(235,360,110,110);
fill(0,0,0);
ellipse(235,360,100,100);
//strings
stroke(255,255,255);
strokeWeight(3);
line(170,390,540,40);
line(180,400,550,45);
line(195,410,560,50);
line(207,420,570,55);
//string attatchment bottom
strokeWeight(6);
strokeCap(SQUARE);
stroke(165,42,42);
line(210,425,170,385);
}
The following code will animate your guitar so that it will move along the positive x-axis. This is just an example to give you an idea how "animation" really works:
// this will be used to move the guitar along x
int alongX = 0;
void setup() {
background(128);
size(600, 600);
smooth();
//noLoop();
}
void draw() {
background(128);
//pegs
strokeJoin(SQUARE);
fill(255, 255, 255);
rect(530+alongX, 105, 20, 20);
rect(565+alongX, 70, 20, 20);
rect(473+alongX, 50, 20, 20);
rect(505+alongX, 18, 20, 20);
//neck and head
strokeWeight(60);
strokeCap(SQUARE);
strokeJoin(ROUND);
stroke(165, 42, 42);
line(490+alongX, 110, 560+alongX, 40);
fill(255, 255, 255);
strokeWeight(45);
strokeCap(SQUARE);
strokeJoin(ROUND);
line(300+alongX, 295, 500+alongX, 105);
//guitar body
noStroke();
fill(222, 184, 135);
ellipse(200+alongX, 400, 200, 200);
ellipse(280+alongX, 310, 150, 150);
//Sound Hole
fill(255, 140, 0);
ellipse(235+alongX, 360, 110, 110);
fill(0, 0, 0);
ellipse(235+alongX, 360, 100, 100);
//strings
stroke(255, 255, 255);
strokeWeight(3);
line(170+alongX, 390, 540+alongX, 40);
line(180+alongX, 400, 550+alongX, 45);
line(195+alongX, 410, 560+alongX, 50);
line(207+alongX, 420, 570+alongX, 55);
//string attatchment bottom
strokeWeight(6);
strokeCap(SQUARE);
stroke(165, 42, 42);
line(210+alongX, 425, 170+alongX, 385);
// incrementing alongX to move it along +x, decrement it to move it along -x
alongX++;
}
The idea is very simple. Animation is basically an illusion of movement. Objects appear such that they're moving but the effect is achieved very simply by drawing and redrawing (at a certain speed: frameRate) the objects on the screen in different locations in such a way that they appear to the viewer as though they're moving when in reality they're not.
For this effect to be effective, you have to have certain things in your sketch (or any other animation package):
You need to have variables that control the position of the object so
when you want to move the object, you can easily change the values
of the variables controlling the position in such a way that it would
give the illusion of movement.
You also, in this case, need to keep redrawing the background. That
is why I added the background(128); line in your draw() method.
If you comment that line out, you will see that the effect is
different and the guitar leaves a trail (maybe that's what you
want...a trail that later fades away? Its up to you!).
Another thing you need to consider in your sketch is that while
rects and ellipses only need to have one variable changed in
order for them to move from left to right (in the case of this
sketch), lines need to have both x values manipulated by your
variable.
noLoop() in setup() is specifically designed so you can stop
draw() from its infinite loop or game loop but stopping
draw() means no animation effects. You can have noLoop(), for
example, to stop the animation upon pressing a key but then you'd
also want to provide loop() to get the animation going upon
pressing a key. These are some things and decisions for you to think
about and play with.
Finally, I just changed your sketch a little to show you how
animation may work. You can add a ton of things to it to make it
awesome.
PS: Cool guitar!
UPDATE
After getting comfortable with the idea of moving objects around, I would look at vectors and how they can be used to set the direction, and velocity of objects. Take a look at PVector in Processing. This tutorial would be sufficient to get you going with PVectors. But I would do this on objects. For example, a full Guitar object. Not on individual lines and rects.
As a small homework to get into Processing, I had to write some code to get the following:
Using
public void setup() {
size(300,200);
noFill();
rect(100, 20, 40, 80);
ellipseMode(CENTER);
fill(#000000);
ellipse(width/2, height/2, 5,5);
noFill();
translate(width/2, height/2);
rotate(radians(65));
rect(-20, -40, 40, 80);
}
public void draw() {
}
this worked very good, so far. But I don’t like that I had to change the coordinates inside of the bottom rect instruction in order to get the rotation right. I know that by rotating you don’t rotate single elements but in fact the whole coordinate system.
What I don’t know is which values to put into the translate instruction to have the output be like in the picture above while also still using the same coordinates within the rect command.
The task is already done with the code I used, I just don’t like it too much. So this isn’t mere asking for somebody else doing my homework but pure interest.
EDIT: More generalised attempt of a question: How do I know which values to pit into translate before rotate to get whatever result I want? Is there a way to calculate them? For sure, it’s not just trying out, is it?
A lot of the confusion in processing is the coordinate system. In Processing the origin (0,0) is at the top left of the screen and only positive coordinates display on the screen. The very common workaround for this is to call:
translate(width/2, height/2);
at the beginning of your void draw() method. That way 0,0 is now at the center of the sketch, and any subsequent methods called such as rotate(radians(65)) will take action from the center of the sketch.
This is also good because sketches that use the P3D or OPENGL renderer often call translate to change the coordinate system into something that is easier to use. For example an object at 0,0 or 0,0,0 is at the center and it makes it easier to orbit the camera around the object or have the object rotate around its center.
another popular way of drawing objects would be to set the origin as above and instead of giving the coordinates of each object, i.e. rect(-100, -50, 50, 50) is to use popMatrix() and pushMatrix before a translate before drawing each object at 0,0 as illustrated below:
translate(width/2, height/2);
pushMatrix();
translate(-100, -50);
rect(0,0,50,50);
popMatrix();
This is a good approach to use in a 2d renderer if you think you might move to 3d renderer eventually, because you can easily replace rect() with box() or sphere() or create your own method or object that draws geometry assuming the origin is at 0,0.
If you replace the x and y coordinates with variables or iterate through an array in a for loop it becomes very easy to draw hundreds or thousands of shapes in either 2d or 3d with minimal effort and minimal rewriting of the code.
update: added clarification for the original poster, per their comment.
I have changed the problem slightly to show you how I would approach this. I am showing the translate / rotate method I described above using push and pop matrix. I am just guessing at the values, but if you want something pixel accurate you can take measurements in an image editing program like photoshop or preview.
translate(180, 150);
rect(0, 0, 180, 80);
translate(185, 170);
rotate(radians(65));
rect(0, 0, 180, 80);
translate(180, 250);
ellipse(0, 0, 8, 8);
Putting it all together with pushMatrix() and popMatrix().
void setup(){
size(400,400);
}
void draw(){
// rect1
noFill();
pushMatrix();
translate(180, 150);
rect(0, 0, 180, 80);
popMatrix();
// rect2
pushMatrix();
translate(185, 170);
rotate(radians(65));
rect(0, 0, 180, 80);
popMatrix();
// ellipse
fill(0);
pushMatrix();
translate(180, 250);
ellipse(0, 0, 8, 8);
popMatrix();
}
in my particular example, know how to translate and rotate to get the
result in the picture without changing the rectangle coordinates?
Well, you need to draw at origin to use rotate properly, so you are just dealing with the origin of the rect... As it is in your code, the default, the origin is the upper left corner, so you made an off set (from (0,0)) to draw it's centre, not the corner, at coordinate(0,0), then rotate by the middle. Well done. It is not coincidence that the values you found was minus half rect width(-20) and minus half rect height(-40). If you change to rectMode(CENTER) than you can just draw at (0,0). The same applies to translate, you can just translate to the desired point, the center of the screen, where there is the ellipse. What is done using half width and half height...
look:
public void setup() {
size(300, 200);
smooth();
ellipseMode(CENTER);
rectMode(CENTER);
noFill();
// here converting the coordinates to work with CENTER mode
//could have changed the rect mode just after this
// but i kept as an illustration
int rwidth = 40;
int rheight = 80;
int xpos = 100 + rwidth/2;
int ypos = height/2 - rheight/2 ;
rect(xpos, ypos, rwidth, rheight);
fill(#000000);
ellipse(width/2, height/2, 5, 5);
noFill();
pushMatrix();
translate(width/2, height/2);
//draw at origin gray
stroke(150);
rect(0, 0, 40, 80);
// then rotate
rotate(radians(65));
// draw again black
stroke(0);
rect(0, 0, 40, 80);
popMatrix();
// here using the cordinates calculated before as a translate value
// we draw at origin, but it appears at same place
stroke(230,230,100);
// a bit to the left...
translate(xpos-2, ypos-2);
rect(0, 0, 40, 80);
}
Rotation is aways applied to origin point (0,0), so you want to draw your axis for rotating at origin. Or move the coordinate system origin, to your axis. It is indeed confusing. When using transformations I tend to draw at origin always. Try this to see if it makes things more clear... or less :)
Also there is push/popMatrix() to control the scope of transformations...
public void setup() {
size(300, 380);
smooth();
}
public void draw() {
background(0);
stroke(255);
//use push/pop Matrix to control scope of translate and rotate
pushMatrix();
//move coordinates system origin to center of screen
translate(width/2, height/2);
// rotate with origin as axis
rotate(radians(mouseY));
//draw at origin (now temp moved to center of screen)
// white line
line(0, 0, 150, 0);
// here all coordinate system is back to normal
popMatrix();
//draw with normal system red line at origin
stroke(255, 0, 0);
line(0, 0, 150, 0);
//draw with normal system blue line at centre
stroke(0, 0, 255);
line(width/2, height/2, width/2 + 150, height/2);
}