# How to make object curve?

**URL:** https://discourse.processing.org/t/how-to-make-object-curve/19408
**Category:** Coding Questions
**Created:** [April 4, 2020, 9:40pm UTC](https://discourse.processing.org/t/how-to-make-object-curve/19408 "2020-04-04T21:40:15Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![Cybernet](https://avatars.discourse-cdn.com/v4/letter/c/54ee81/32.png) [@Cybernet](https://discourse.processing.org/u/Cybernet)
#### Post date: [April 4, 2020, 9:40pm UTC](https://discourse.processing.org/t/how-to-make-object-curve/19408/1 "2020-04-04T21:40:15Z")

</div>

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.

```auto
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.

---

<div class="post-metadata">

### Author: ![Helron](https://avatars.discourse-cdn.com/v4/letter/h/cab0a1/32.png) [@Helron](https://discourse.processing.org/u/Helron)
#### Post date: [April 4, 2020, 10:12pm UTC](https://discourse.processing.org/t/how-to-make-object-curve/19408/2 "2020-04-04T22:12:10Z")

</div>

Could you draw something to explain the result you want ?

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [April 4, 2020, 10:23pm UTC](https://discourse.processing.org/t/how-to-make-object-curve/19408/3 "2020-04-04T22:23:29Z")

</div>

Hello,

There are lots of resources at the Processing website:

> **[Welcome to Processing!](https://processing.org/)**
>
> Processing is a flexible software sketchbook and a language for learning how to code. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology…

Check out the tutorials!

The Coding Train:

> **[The Coding Train](https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw)**
>
> All aboard! The Coding Train is on its way with creative coding video tutorials on subjects ranging from the basics of programming languages like JavaScript to algorithmic art, machine learning, simulation, generative poetry, and more. Choo choo!

Check out the examples that come with the Processing IDE:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/fbe7924c90899708ef1bd6a5f0a69ad9e9806e24.png)

Exploring all the resources and examples is a good start.

`:) `

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [April 4, 2020, 10:45pm UTC](https://discourse.processing.org/t/how-to-make-object-curve/19408/4 "2020-04-04T22:45:17Z")

</div>

please show your entire code

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [April 4, 2020, 10:57pm UTC](https://discourse.processing.org/t/how-to-make-object-curve/19408/5 "2020-04-04T22:57:52Z")

</div>

here is how I see it

```auto

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;
  }
}
//

```

---

<div class="post-metadata">

### Author: ![Cybernet](https://avatars.discourse-cdn.com/v4/letter/c/54ee81/32.png) [@Cybernet](https://discourse.processing.org/u/Cybernet)
#### Post date: [April 4, 2020, 11:32pm UTC](https://discourse.processing.org/t/how-to-make-object-curve/19408/6 "2020-04-04T23:32:39Z")

</div>

Thank you so much. And sorry for not showing code. I will do it next time. THanks

---

<div class="post-metadata">

### Author: ![Cybernet](https://avatars.discourse-cdn.com/v4/letter/c/54ee81/32.png) [@Cybernet](https://discourse.processing.org/u/Cybernet)
#### Post date: [April 4, 2020, 11:40pm UTC](https://discourse.processing.org/t/how-to-make-object-curve/19408/7 "2020-04-04T23:40:25Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [April 4, 2020, 11:46pm UTC](https://discourse.processing.org/t/how-to-make-object-curve/19408/8 "2020-04-04T23:46:46Z")

</div>

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

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [April 6, 2020, 12:35pm UTC](https://discourse.processing.org/t/how-to-make-object-curve/19408/9 "2020-04-06T12:35:06Z")

</div>

> [@Cybernet](#):
>
> Where did you find the numbers like 0.0421?

Some constants available to you:

> **[TAU / Reference](https://processing.org/reference/TAU.html)**
>
> TAU is a mathematical constant with the value 6.2831855. It is the circle constant relating the circumference of a circle to its linear dimension, the ratio of the circumference of a circle to …

> **[TWO\_PI / Reference](https://processing.org/reference/TWO_PI.html)**
>
> TWO\_PI is a mathematical constant with the value 6.2831855. It is twice the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions …

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:

```auto
// 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);
  } 

```

`:)`

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [April 6, 2020, 12:52pm UTC](https://discourse.processing.org/t/how-to-make-object-curve/19408/10 "2020-04-06T12:52:27Z")

</div>

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](https://www.processing.org/reference/radians_.html)  
see [https://www.processing.org/reference/degrees\_.html](https://www.processing.org/reference/degrees_.html)

Chrisir

```auto

float oneDegreeInRadians = radians(1);
println("1: " + oneDegreeInRadians);

float twoDegreeInRadians = radians(2);
println("2: " + twoDegreeInRadians);

/* 
 // gives you  
 1 degree:
 0.017453292
 2 degree:
 0.034906585
 */

```

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [April 6, 2020, 2:46pm UTC](https://discourse.processing.org/t/how-to-make-object-curve/19408/11 "2020-04-06T14:46:47Z")

</div>

I made a few changes.

Please note:

1. when you click **and hold** a, you make a circle. But there was a small hick-up in it (due to how keyPressed() works). I changed this using a new function keyPressedThroughout(). Now the circle starts immediately when you hold down a or d. (must be used together with keyReleased())
2. Make circles of different sizes: When you hold down a or d you make a circle. This depends on the angle change (0.4 deegres) and the speed (1). You can now make circles of different sizes: Use 0…9 (for 0.0 to 0.9 degrees, angle change, amount that gets added to the angle [Steering sensitivity]) and + and - to change the amount that gets added to the angle (when you click + and -). The amount changes in 0.1 steps degrees.
3. Click c to clear screen and r to reset the cursor.
4. Click i to text() out the current angle change amount [Steering sensitivity] at the drawing position. As you can see in the image (when holding a or d down) with 0.1 degree change, you have a big circle, with 0.5 degree a much smaller circle and with 0.9 even smaller and so on.
5. Start / Stop Walker with w

 ![Unbenannt](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/af7c7ef04d8be1ed54869a6fcc2292a15c169f2e.png)

Warm regards,

Chrisir

```auto

// 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);
}
//

```
