# Drawing Fibonacci Spiral with SVG that Changes Angles

**URL:** https://discourse.processing.org/t/drawing-fibonacci-spiral-with-svg-that-changes-angles/40038
**Category:** Coding Questions
**Created:** [December 6, 2022, 3:21am UTC](https://discourse.processing.org/t/drawing-fibonacci-spiral-with-svg-that-changes-angles/40038 "2022-12-06T03:21:08Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![DDe](https://avatars.discourse-cdn.com/v4/letter/d/bb73d2/32.png) [@DDe](https://discourse.processing.org/u/DDe)
#### Post date: [December 6, 2022, 3:21am UTC](https://discourse.processing.org/t/drawing-fibonacci-spiral-with-svg-that-changes-angles/40038/1 "2022-12-06T03:21:08Z")

</div>

Hey hey, obviously I’m new to proccessing but long story short, I am trying to replace the line/points drawn out for a Fibonnaci Spiral with an svg file of my design, but I’m struggling to make that work. I have some code that I know would be a good start which is drawing an svg based on my mouse’s movement and a fibonnaci drawing code but I’m trying to combine the two so the spiral is drawn with my svg file.

I’d love to add more so the svg changes angle and grows in size along the spiral, but one thing at a time, which mine is "draw the spiral haha.

Any insight would be deeply appreciated.

> PShape heart;  
> import processing.pdf.\*;  
> void setup() {  
> size(800, 800);  
> background(255);  
> heart = loadShape(“CZS.svg”);  
> }  
> void draw() {  
> variableEllipse(mouseX, mouseY, pmouseX, pmouseY);  
> }  
> void variableEllipse(int x, int y, int px, int py) {  
> float speed = abs(x-px) + abs(y-py);  
> stroke(speed);  
> shape(heart,x, y, speed, speed);  
> }  
> void keyPressed() {  
> if (key == ‘s’) {  
> endRecord();  
> exit();  
> }  
> }

---

<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: [December 6, 2022, 6:07am UTC](https://discourse.processing.org/t/drawing-fibonacci-spiral-with-svg-that-changes-angles/40038/2 "2022-12-06T06:07:47Z")

</div>

Hello @DDe ,

There are resources (tutorials, references and examples) here:

> **[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…

Take a look at the tutorial for _Interactivity_.

Consider using `mouseMoved()`.

This will rotate the shape:

`heart.rotate(angle);`

Your PDF code is incomplete… see the library reference for examples.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/4/2/42f3482531e08d3026df8791cc71f9fa3e1cbe7b.png)

`:)`

---

<div class="post-metadata">

### Author: ![DDe](https://avatars.discourse-cdn.com/v4/letter/d/bb73d2/32.png) [@DDe](https://discourse.processing.org/u/DDe)
#### Post date: [December 6, 2022, 6:24am UTC](https://discourse.processing.org/t/drawing-fibonacci-spiral-with-svg-that-changes-angles/40038/3 "2022-12-06T06:24:33Z")

</div>

I appreciate the help, and I will definitely use the rotate with a function to math the spiral, but I do believe using mouseMoved misunderstands my struggle. My design isn’t meant to be interactive/change based on where I “draw” with my mouse, I’m tying to get my “shape” from a SVG file to match the fibonacci spiral exactly so there isn’t any scattered shapes.

I can print the spiral, I can print an SVG (with a mouse) but I want to print the spiral using the SVG.

---

<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: [December 6, 2022, 11:21am UTC](https://discourse.processing.org/t/drawing-fibonacci-spiral-with-svg-that-changes-angles/40038/4 "2022-12-06T11:21:50Z")

</div>

Something like this with your spiral?

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/8/a8a1f22533ee35ce27d3c019ed76f8d87d58c379.png)

I placed a rotated SVG at a point x, y with my spiral code.

`:)`

---

<div class="post-metadata">

### Author: ![DDe](https://avatars.discourse-cdn.com/v4/letter/d/bb73d2/32.png) [@DDe](https://discourse.processing.org/u/DDe)
#### Post date: [December 6, 2022, 4:09pm UTC](https://discourse.processing.org/t/drawing-fibonacci-spiral-with-svg-that-changes-angles/40038/5 "2022-12-06T16:09:57Z")

</div>

Well, not exactly cause the Fibonnaci spiral is a specific type of spiral (math involved) but in the mean time, what did you write for this code? it has some parts I was looking for
