So I have this ellipse, and every time the user presses the left or right key, the ellipse will curve to that side. I know I have to use rotate, but I don’t know where I can start. I tried so many ways, but none of them worked.
ellipse(xpos, ypos, 5, 5);
ypos -= 1;
if (right)
rotate(1 degree);
So the plan is to have the circle keep moving no matter what, but the player can steer the circle using the arrow keys. Does anyone know how to do this? Thanks.
Could you draw something to explain the result you want ?
Hello,
There are lots of resources at the Processing website:
Check out the tutorials!
The Coding Train:
Check out the examples that come with the Processing IDE:
Exploring all the resources and examples is a good start.
:)
please show your entire code
here is how I see it
float angle=0;
float x=33, y=200;
float prevPosX=x, prevPosY=y;
/********* SETUP BLOCK *********/
void setup() {
size(1280, 720);
}
/********* DRAW BLOCK *********/
void draw() {
// clear screen:
// background(111);
// how fast does the ellipse fly?
float speed=2;
x=cos(angle)*speed+prevPosX;
y=sin(angle)*speed+prevPosY;
prevPosX=x;
prevPosY=y;
fill(255, 0, 0);
ellipse(x, y,
9, 9);
fill(255);
text("Use a and d to steer", 19, 19);
}
void keyPressed() {
// how strong does the steering react?
float sensitivity = 0.0421;
if (key=='a') {
angle-=sensitivity;
} else if (key=='d') {
angle+=sensitivity;
}
}
//
Thank you so much. And sorry for not showing code. I will do it next time. THanks
I have a question. Where did you find the numbers like 0.0421? Did you just trial and error, or did you use some Math? I also want to learn what those numbers mean.
The angle is measured in radians, not in degrees.
It’s just the change of the angle when you press a key. In radians. When you make it higher the curve is more tight
It’s based on experience and trial and error
Some constants available to you:
TAU and TWO_PI are a full circle in radians; this would be 360 ° in degrees.
My preference is to work with fractions of constants; it is more intuitive.
Example:
// Rotating Line and Constants
// v1.0.0
// GLV 2020-04-05
float theta; //theta, θ in radians
float r; // radius
float x, y; // x and y co-ordinates
public void setup()
{
size(500, 500);
println(TAU, TWO_PI); // The same value
println(TAU/60);
println(TAU/120);
println(TAU/149);
println(TAU/180);
}
public void draw()
{
background(0);
translate(width/2, height/2);
//draw() updates 60 times per second
//if you want one rotation each second; angle = TAU/60 = TWO/PI/60
theta = theta + TAU/60;
// https://processing.org/tutorials/trig/
r = 100;
x = r*cos(theta);
y = r*sin(theta);
// draws a line
stroke(255);
strokeWeight(2);
line(0, 0, x, y);
// draws a point
stroke(255, 0, 0);
strokeWeight(5);
point(x, y);
}
:)
my value for changing the angle (key a or d) “sensitivity” was chosen from experience. -
Here you can see the values for 1 and 2 degrees in radians.
So 0.0421 is probably around 3 degrees.
Degrees means, a circle has 360 degrees, in radians a circle has 2 PI.
See https://www.processing.org/reference/radians_.html
see https://www.processing.org/reference/degrees_.html
Chrisir
float oneDegreeInRadians = radians(1);
println("1: " + oneDegreeInRadians);
float twoDegreeInRadians = radians(2);
println("2: " + twoDegreeInRadians);
/*
// gives you
1 degree:
0.017453292
2 degree:
0.034906585
*/
I made a few changes.
Please note:
Warm regards,
Chrisir
// next steps: record movement of the Turtle / Walker as String, take back moves with Backspace.
// Help screen
float angle=0;
float x=33, y=200;
float prevPosX=x, prevPosY=y;
// how strong does the steering react?
/*
float oneDegreeInRadians = radians(1);
float twoDegreeInRadians = radians(2);
float threeDegreeInRadians = radians(3);
float fourDegreeInRadians = radians(4);
*/
// how strong does the steering react?
float underLyingValueInDegree = .4;
// key w
boolean running=true;
/********* SETUP BLOCK *********/
void setup() {
size(1280, 720);
background(111);
} //func
/********* DRAW BLOCK *********/
void draw() {
// clear screen:
// background(111);
// how fast does the ellipse fly?
float speed=1;
// keep angle between 0 and TWO_PI
angle = angle%TWO_PI;
if (running) {
// calc new pos based on angle
x=cos(angle)*speed+prevPosX;
y=sin(angle)*speed+prevPosY;
// store as prev pos
prevPosX=x;
prevPosY=y;
}
// The Walker itself
fill(255, 0, 0);//RED fill
stroke(0); // BLACK outline
ellipse(x, y,
9, 9);
// show text message upper left corner
textOutput();
// NEW !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
keyPressedThroughout(); // must be used together with keyReleased() !!!!!!!!!!!!!!!!!!!
} //func
// -----------------------------------------------------------------------------
void keyReleased() {
key=0;
}//func
void keyPressedThroughout() {
// keyPressed Throughout
// must be used together with keyReleased() !!!!!!!!!!!!!!!!!!!
if (key=='a') {
angle-= radians(underLyingValueInDegree);
} else if (key=='d') {
angle+= radians(underLyingValueInDegree);
}
}//func
// ---------------------------------------------------------------------------
void keyPressed() {
// executed only once
// 0..9
if (key>='0'&&key<='9') {
underLyingValueInDegree=(key-48)/10.0; // set to 0.0, 0.1, 0.2, 0.3, .... 0.9
}
//----------
// function keys
else if (key=='r') {
//reset
angle=0;
x=33;
y=200;
prevPosX=x;
prevPosY=y;
} else if (key=='c') {
// clear
background(111);
} else if (key=='i') {
// Info
fill(255); // WHITE
text(underLyingValueInDegree,
x+16, y+16);
} else if (key=='w') {
// walk
running =
! running;
}
// ----------
// + and -
else if (key=='+') {
underLyingValueInDegree+=.1; // this could even smaller (more granular)
} else if (key=='-') {
underLyingValueInDegree-=.1;
}
}//func
// --------------------------------------------------------------------------
void textOutput() {
// text message upper left corner
fill(111);
noStroke();
rect(0, 0,
350, 90);
fill(255);
text("Use a and d to steer (0..9 +- rciw). "
+ "Angle is "
+ angle
+ ". \nSteering sensitivity is "
+ underLyingValueInDegree
+ " degree."
+ "\nCursor pos \nx "
+ x
+ "\ny "
+ y,
19, 19);
}
//