(Newbie Processing Q) How do you slow down the the fading of colors? And how do you stop a moving object? - processing

I'm a newbie who working on processing code. I'm using a variable to fade light blue into a darker blue and that's working fine, but I was wondering how I could slow the process of it fading.
Another question(hope people don't mind me asking two on one post), is how do I make a shape stop moving at a certain point? I have a ellipse there labelled the sun. I'd like it to stop when x=700.
Here's my coding:
float x = 0;
float y = 0;
float r = 0;
int gb = 0;
void setup() {
size(800, 600);
background(gb, gb, 255);
imageMode(CENTER);
noStroke();
}
void draw() {
background(0, gb, 255);
gb++;
if (gb>50) {
//the sun
fill(243, 230, 0);
ellipse(x, 60, 75, 75);
fill(243, 230, 0, 80);
ellipse(x, 60, 90, 90);
x++;
}
fill(0, 255, 0);
rect(0, 380, 800, 450);
}

I was wondering how I could slow the process of it fading.
Check out this line:
gb++;
Here you're incrementing (adding 1 to) your gb variable, which you're using to determine the color. To slow down the color changing, just add a smaller value to it. Something like this:
gb = gb + .1;
Which can be shortened to:
gb += .1;
For this to work, you'll have to change your gb variable to be a float so it can hold decimals.
You might also want to check out the lerp() and map() functions in the reference.
Another question(hope people don't mind me asking two on one post), is how do I make a shape stop moving at a certain point? I have a ellipse there labelled the sun. I'd like it to stop when x=700.
In the future, please only ask one question per post. And try to put together a MCVE for each question instead of posting your whole sketch.
But you can do this with an if statement that only increments x when it is less than 700. Like this:
if(x < 700){
x++;
}
Shameless self-promotion: I wrote a tutorial on using if statements to create animations in Processing available here.

Related

How to draw a fading object trail? Without background manipulation

I have a simple ellipse, moving across the screen, is there any simple code I could implement to have this ellipse draw a trail behind it that has its alpha fade over time to a certain extent? I still want the trail visible in the end but less bright than the casting ellipse.
You could also do something like this:
let positions = [];
function draw(){
positions.push(mouseX);
positions.push(mouseY);
for(let i in positions){
let x = positions[i];
let y = positions[i + 1];
fill(255, 255 - i * 10); noStroke();
ellipse(mouseX, mouseY, x, y)
}
if(positions.length > 20){
positions.shift();
positions.shift();
}
}
Assuming the ellipse is the only thing being drawn then there is a simple solution which is to, instead of drawing a fully opaque background on each frame, draw a semi-transparent background:
function setup() {
createCanvas(windowWidth, windowHeight);
}
function draw() {
background(0, 35);
ellipse(mouseX, mouseY, 20, 20);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
However, there are some caveats, namely that for certain colors/transparency levels you will be left with permanent "ghost" of the trails due to some weird alpha blending math anomalies.

PGraphics + noSmooth() + alpha = drawing artifacts

Note: I also asked this question on the Processing forum here.
I have this sample code:
PGraphics pg;
void setup() {
size(400, 500);
pg = createGraphics(width, height);
pg.noSmooth();
pg.beginDraw();
pg.background(0, 0, 255);
pg.endDraw();
}
void draw() {
if (mousePressed) {
pg.beginDraw();
pg.stroke(255, 254);
pg.point(mouseX, mouseY);
pg.endDraw();
}
image(pg, 0, 0, width, height);
}
I would expect this code to show a point wherever the user presses the mouse. Instead, I am only able to see points in a couple rectangular areas:
If I remove the call to pg.noSmooth() or if I remove the alpha value in the pg.stroke() call, then it works fine:
If I replace the pg.point() call with pg.ellipse() or pg.rect() then it also works fine.
It seems like the combination of using a PGraphics, the noSmooth() function, the point() function, and an alpha value results in this buggy behavior. I’ve tried in Processing 3.3 and Processing 3.5.2 and I see the same behavior in both.
Am I missing something obvious?
After a wee bit of digging up turns out the JAVA2D renderer draws a point as a diagonal line(line(x, y, x + EPSILON, y + EPSILON);) with a very very very small spacing (static final float EPSILON = 0.0001f;). My guess is this particular configuration the lack aliasing might mean both points of this diagonal line land on the same pixel and end up not being rendered on the top right area which. Why that area and how come this small distance I don't know, but it sounds a bit like the headaches Jakub Valtar and Andres Colubri had to deal with.
FWIW here's a hacky workaround: using a larger distance that does get rendered with transparency and no aliasing:
PGraphics pg;
void setup() {
size(400, 500);
noSmooth();
pg = createGraphics(width/20, height/20);
pg.beginDraw();
// just for debug purposes: rectangle with edge
pg.fill(0, 0, 255);
pg.rect(0,0,pg.width-1,pg.height-1);
pg.stroke(255,255,255, 128);
pg.endDraw();
}
void pointNoSmooth(PGraphics pg, float x,float y){
pg.beginShape();
pg.vertex(x,y);
pg.vertex(x + 0.75,y);//any less than 0.75 distance between vertices and there's nothing to render with aliasing
pg.endShape();
}
void draw() {
background(255);
if (mousePressed) {
pg.beginDraw();
pointNoSmooth(pg,mouseX,mouseY);
pg.endDraw();
}
// render upscaled
image(pg, 0, 0, width, height);
// render small preview in TL corner
image(pg,0,0);
}
Notice that I've set the PGraphics resolution 20 times smaller, then drawn it upscaled so it's easier to see where the pixels land on the PGraphics. I'm not scaling the mouseX,mouseY coordinates though, so you'll need to draw in the small top left preview when testing. That 0.75 distance does the trick: from what I've tested, anything smaller than 0.7499995 starts acting buggy again.

How can I restrict a for-loop pattern to stay within a shape? Basically, how can I fill a shape with a pattern instead of a color?

I am trying to create concentric circles filled with lines moving in opposite directions (that follow the mouse). I can't figure out how to fill only the circles with the lines -- I used a for-loop to make lines, and want to cut them off outside of the radius of the circles. Basically, I am trying to fill the circles with a pattern of lines.
This is my code:
float r = 0;
float startAngle;
float density;
float radius;
void setup() {
size(500, 500);
background(255);
stroke(150, 0, 150);
}
void draw() {
int[] s = {
500, 325, 200, 100, 50, 25
};
for (int i = 0; i < 500; i = i+5) {
line(0, i, 500, i);
if(i > s[0]) {
noStroke();
}
}
translate(width/2, height/2);
rotate(r);
r = r + .01;
fill(0);
ellipse(0, 0, s[0], s[0]);
fill(50);
ellipse(0, 0, s[1], s[1]);
fill(100);
ellipse(0, 0, s[2], s[2]);
fill(150);
ellipse(0, 0, s[3], s[3]);
fill(200);
ellipse(0, 0, s[4], s[4]);
fill(255);
ellipse(0, 0, s[5], s[5]);
}
Any help would be appreciated!
It's hard to help with general "how do I do this" type questions. Stack Overflow is designed for more specific "I tried X, expected Y, but got Z instead" type questions. But I'll try to help in a general sense.
The best advice I can give you is to start smaller. Break your problem down into smaller pieces and take those pieces on one at a time.
For example, instead of starting with your whole program that shows multiple circles, why not start with a simpler example program that just shows a single circle? Try to get a pattern to display inside of that.
Like everything in programming, there are multiple ways to do that.
Option 1: You could probbaly use basic geometry and trig to figure out where the points should be on the circle, then draw them based on those points. The cos() and sin() functions would probably come in handy with this approach.
Option 2: You could also use image masking techniques. For example, you could create a texture of lines, and then use a circular mask to isolate a cirlce of those lines. The texture() function or the PImage#mask() functions would be your friends here.
Try out those approaches to see which one you like best. The Processing reference is your best friend: for example, here is a reference on the texture() function, and here is a reference on the PImage#mask() function. Then if you get stuck on a specific step, you can post a MCVE of just that step, and we'll go from there. Good luck.

P3D camera orientation

I've got a big sphere. There is a red dot that moves around the sphere. I want to follow that red dot as it moves around to sphere. So my camera has to move with the red dot. But there is a problem. Right now, what I'm experiencing is what is shown in exhibit B. I want my animation to realize the point of view shown in exhibit A.
Here is the code I have so far. I think it's pretty simple. I have 3 variables that control where my eye is, and I have 3 variables that control where the target is. The red dot is also located at the target position. I added 2 planes in x-y which helped me not get too confused as the thing was spinning.
Here is a fiddle:
https://jsfiddle.net/da8nza6y/
float radius = 1000;
float view_elevation = 1500;
float target_elevation = 300;
float x_eye;
float y_eye;
float z_eye;
float x_aim;
float y_aim;
float z_aim;
float h;
float theta;
void setup() {
size(600, 600, P3D);
theta = 0;
h = 30;
}
void draw() {
theta += 0.5;
theta = theta%360;
x_eye = (radius+view_elevation)*cos(theta*PI/180);
y_eye = 0;
z_eye = (radius+view_elevation)*sin(theta*PI/180);
x_aim = (radius+target_elevation)*cos((theta+h)*PI/180);
y_aim = 0;
z_aim = (radius+target_elevation)*sin((theta+h)*PI/180);
camera(x_eye, y_eye, z_eye, x_aim, y_aim, z_aim, 0, 0, -1);
background(255);
// the red dot
pushMatrix();
translate(x_aim, y_aim, z_aim);
fill(255, 0, 0, 120);
noStroke();
sphere(10);
popMatrix();
// the big sphere
noStroke();
fill(205, 230, 255);
lights();
sphere(radius);
// the orange plane
pushMatrix();
translate(0, 0, 10);
fill(255, 180, 0, 120);
rect(-2000, -2000, 4000, 4000);
popMatrix();
// the green plane
pushMatrix();
translate(0, 0, -10);
fill(0, 180, 0, 120);
rect(-2000, -2000, 4000, 4000);
popMatrix();
}
So the pickle is that, it seems like the moment the red dot (whose location in the x-z plane is given by the angle (theta+h) and distance (radius+target_elevation) from the origin) crosses the x-y plane, everything gets flipped upside-down and backwards.
Now, I have tried to control the last 3 variables in the camera() function but I'm getting confused. The documentation for the function is here:
https://processing.org/reference/camera_.html
Can anyone see a solution to this problem?
Also, I'm sure I could just rotate the sphere (which I can do) and not have these problems, but I'm sure where I'm going with this animation and I feel like there will be things to come that will be easier with this method. Though I could be mistaken.
I believe I've solved my own problem.
I've added the following lines in draw, before calling the camera() function:
if ((x_eye- x_aim) < 0) {
z_orientation = 1;
} else {
z_orientation = -1;
}
I noticed that it wasn't (theta+h) that was triggering the flip, but the relative positions of the view and target.
Here is an updated fiddle:
https://jsfiddle.net/da8nza6y/1/

Easiest way to animate a collection of shapes in processing?

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.

Resources