# Spirals that get smaller for school project

**URL:** <https://discourse.processing.org/t/spirals-that-get-smaller-for-school-project/4199>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [October 6, 2018, 7:52pm UTC](https://discourse.processing.org/t/spirals-that-get-smaller-for-school-project/4199 "2018-10-06T19:52:23Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![DesperateOak48](https://avatars.discourse-cdn.com/v4/letter/d/bbce88/32.png) [@DesperateOak48](https://discourse.processing.org/u/DesperateOak48)\
**Post date:** [October 6, 2018, 7:52pm UTC](https://discourse.processing.org/t/spirals-that-get-smaller-for-school-project/4199/1 "2018-10-06T19:52:23Z")

</div>

I’m in a class, and the current assignment is to create a complex pattern. I want to make spirals that start in the middle and extend outward, getting smaller as they go out. I’ve looked around the class to no avail. I found something for generating a single spiral using points, but I’m looking for a connected spiral.

I have used Eclipse before to make games, but that was about four years ago. I’m completely new to Processing, and I’m even more lost.

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [October 6, 2018, 8:13pm UTC](https://discourse.processing.org/t/spirals-that-get-smaller-for-school-project/4199/2 "2018-10-06T20:13:06Z")

</div>

🍋

Okay. So you want to make some spirals.  
Do you understand how `setup()` and `draw()` work?  
Can you draw things? Ellipses? Lines? Use colors?  
How do you feel about the functions `scale()`, `translate()`, and `rotate()`?  
What have you got so far? Can we see your code?  
What have you tried? What works? What didn’t?  
What did you want? Can you draw a mock-up image of it?

And please make sure to format your code.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 7, 2018, 12:47am UTC](https://discourse.processing.org/t/spirals-that-get-smaller-for-school-project/4199/3 "2018-10-07T00:47:37Z")

</div>

> [@DesperateOak48](#):
>
> I found something for generating a single spiral using points, but I’m looking for a connected spiral.

why not connect the ?known? points to a shape? [any curve](https://processing.org/reference/curveVertex_.html)

for a shape of a spiral with a changing width try a TRIANGLE shape [spiral1](https://editor.p5js.org/kll/sketches/H1PwR089m)

or test [spiral2 ( i mod your code )](https://editor.p5js.org/kll/sketches/ByfzV5_57)

---

<div class="post-metadata">

**Author:** ![DesperateOak48](https://avatars.discourse-cdn.com/v4/letter/d/bbce88/32.png) [@DesperateOak48](https://discourse.processing.org/u/DesperateOak48)\
**Post date:** [October 7, 2018, 2:52pm UTC](https://discourse.processing.org/t/spirals-that-get-smaller-for-school-project/4199/4 "2018-10-07T14:52:18Z")

</div>

I know how `setup()` and `draw()` work, I am able to draw things including ellipses and lines and use colors. I’m decently comfortable with `scale()`,`translate()`, and `rotate()`. I’ll add in my code below. I’ve tried using a for loop and floats with a `curveVertex()`, and that gets it going.

My code is super messy. I’ll post what I currently have as it is, and then I’ll clean it up and post that.

* * *

```auto
//float z = 0.01;
//float theta = 0.01;

//int centerX = 250;
//int centerY = 250;
//int drawsteps = 250;

void setup() {
size(500, 500);
background(0, 191, 255);
smooth();
}

void draw() {
 beginShape();
 stroke(72, 61, 139);
 for (float t = 0; t < drawsteps *TWO_PI; t += 4) {
  float x = centerX + t * cos(t);
  float y = centerY + t * sin(t);
  float u = centerX + (t + 4) * cos(t + 4);
  float s = centerX + (t + 4) * sin(t + 4);
  curveVertex(x, y);
  line(x, y, u, s);
 }
 endShape();
}

// void draw() {
// for (z = 0; z > 4550; z++) {
// float x = z * cos(theta);
// float y = z * sin(theta);
    
// noStroke();
// fill(0);
// ellipse(x + width/2, y + height/2, 4, 4);
    
// theta += 1;
// z += 1;
// }
// }
  

  
// void draw() {
// translate(width/2, height/2);
// for (int i = 0; i < 4550; i++) {
// float t = radians(i);
// float x = t * cos(t);
// float y = t * sin(t);
// point(x, y);
// }
// for (int j = 0; j > 4550; j++) {
// float t = radians(j);
// float k = t * cos(j);
// float l = t * sin(j);
// point(k, l);
// }
   
// }

```

---

<div class="post-metadata">

**Author:** ![DesperateOak48](https://avatars.discourse-cdn.com/v4/letter/d/bbce88/32.png) [@DesperateOak48](https://discourse.processing.org/u/DesperateOak48)\
**Post date:** [October 7, 2018, 2:55pm UTC](https://discourse.processing.org/t/spirals-that-get-smaller-for-school-project/4199/5 "2018-10-07T14:55:41Z")

</div>

This is what I currently have running.

```auto
int centerX = 250;
int centerY = 250;
int drawsteps = 250;
void setup() {
size(500, 500);
background(0, 191, 255);
smooth();
}

void draw() {
beginShape();
stroke(72, 61, 139);
for (float t = 0; t &lt; drawsteps *TWO_PI; t += 4) {
float x = centerX + t * cos(t);
float y = centerY + t * sin(t);
float u = centerX + (t + 4) * cos(t + 4);
float s = centerX + (t + 4) * sin(t + 4);
curveVertex(x, y);
line(x, y, u, s);
}
endShape();
}

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [October 7, 2018, 3:20pm UTC](https://discourse.processing.org/t/spirals-that-get-smaller-for-school-project/4199/6 "2018-10-07T15:20:46Z")

</div>

Please format your code using `</>` in the message editor and press `Ctrl+T` in the processing code editor.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 7, 2018, 3:21pm UTC](https://discourse.processing.org/t/spirals-that-get-smaller-for-school-project/4199/7 "2018-10-07T15:21:48Z")

</div>

ok, is that what you want?  
you could loose the line

```auto
line(x, y, u, s);

```

and i see a hypnotic effect with

```auto
t += PI/2

```

try

```auto
int drawsteps = 250, cgreen = 0;
float tadd = 0.0;

void setup() {
  size(500, 500);
  println("use [+] and [-]");
}

void draw() {
  background(150,cgreen, 0);
  stroke(0, 0, 150);
  strokeWeight(3);
  noFill();

  translate(width/2,height/2);
  
  beginShape();
  for (float t = 0; t < drawsteps *TWO_PI; t += PI/2+tadd) {
    float x = t * cos(t);
    float y = t * sin(t);
    curveVertex(x, y);
  }
  endShape();
}

void keyPressed(){
  if ( key == '+' ) { tadd = 0.015; cgreen = 150;}
  if ( key == '-' ) { tadd = 0.0; cgreen = 0;}
}

```

---

<div class="post-metadata">

**Author:** ![DesperateOak48](https://avatars.discourse-cdn.com/v4/letter/d/bbce88/32.png) [@DesperateOak48](https://discourse.processing.org/u/DesperateOak48)\
**Post date:** [October 7, 2018, 5:46pm UTC](https://discourse.processing.org/t/spirals-that-get-smaller-for-school-project/4199/8 "2018-10-07T17:46:52Z")

</div>

Will test this out and see how it all works. Been re-watching some online tutorials, and I think I know some stuff that’ll help. Thank you!