# Line inside for() wont go behind image

**URL:** <https://discourse.processing.org/t/line-inside-for-wont-go-behind-image/2736>\
**Category:** Coding Questions\
**Created:** [August 17, 2018, 9:35pm UTC](https://discourse.processing.org/t/line-inside-for-wont-go-behind-image/2736 "2018-08-17T21:35:58Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![leo](https://avatars.discourse-cdn.com/v4/letter/l/c2a13f/32.png) [@leo](https://discourse.processing.org/u/leo)\
**Post date:** [August 17, 2018, 9:35pm UTC](https://discourse.processing.org/t/line-inside-for-wont-go-behind-image/2736/1 "2018-08-17T21:35:58Z")

</div>

Hello everyone,can someone help me with [this codepen](https://codepen.io/leonardo-cunha/pen/WKVgqp)? I can’t get the lines to go behind the big central circle, even putting the center image before the **for()**.

```auto
var canvas;
var width = window.innerWidth;
var height = window.innerHeight;
let angle = 0;
var unitSize = [125,125,125,125,125,125,125,125,125];
var xoff = [0,1,2,3,4,5,6,7,8];
var x = [0,1,2,3,4,5,6,7,8];
var circles = [0,1,2,3,4,5,6,7,8];
var images = [0,1,2,3,4,5,6,7,8,9];

  function preload(){

  	images[0] = loadImage("http://farm2.staticflickr.com/1778/29160206027_abd087c675_b.jpg"); 
  	images[1] = loadImage("http://farm2.staticflickr.com/1794/44049465922_18ef9aa351_b.jpg");
  	images[2] = loadImage("http://farm2.staticflickr.com/1815/44098593551_87a10cbe19_b.jpg");
  	 images[3] = loadImage("http://farm2.staticflickr.com/1815/44049466172_fbb2a0a562_b.jpg");
  	 images[4] = loadImage("http://farm2.staticflickr.com/1817/44049466432_62baf96a12_b.jpg");
  	 images[5] = loadImage("http://farm2.staticflickr.com/1840/44049466632_cc4b91e6a8_b.jpg");
  	 images[6] = loadImage("http://farm2.staticflickr.com/1771/42289015110_4221bd5b28_b.jpg");
  	 images[7] = loadImage("http://farm2.staticflickr.com/1791/44049466792_e34aa61a0d_b.jpg");
  	 images[8] = loadImage("http://farm2.staticflickr.com/1798/42289015190_0d2e038807_b.jpg");
  	 images[9] = loadImage("http://farm2.staticflickr.com/1775/43191315345_ef6d8c82ed_b.jpg");
 }

  function setup() {
    canvas = createCanvas(window.innerWidth, window.innerHeight); //use WEBGL when using texture()
    canvas.parent("canvas"); 
    
  }

  function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
  }
    
  //if you don't want to spin it when scroll delete this
  function mouseWheel(event) {
    angle += (event.delta)*0.001;
  }

  function draw() {
    
    //delete this line when using WEBGL
    noStroke();
    background( 255 );
    translate(width/2,height/2)
    //big central image
    imageMode(CENTER);
    image(images[9],0,0,260,260); 
    //rotate the black ellipses
    rotate(angle);
    //rotation speed
    angle = angle + 0.0007;
    //using noise() to get smooth random x values and using xoff to get different random values for each black ellipse
    
    for (var i = x.length - 1; i >= 0; i--) {
      x[i] = map(noise(xoff[i]), 0 , 1 , 200 , 230);
      xoff[i] += 0.01;
    }
    //draw the black ellipses
    for( var i = 0; i < circles.length; i++) {
    rotate( TWO_PI/9.0 );
    //texture(images[i]);
    stroke(0);
    line( 0, 0,x[i],0);
    imageMode(CENTER);
    image(images[i], x[i],0, 125,125);       
    
    // fill(0);
    //draw each ellipse with different x value
    noStroke();
    //ellipse( x[i], 0, unitSize[i], unitSize[i] ); 
    }  
    
  }

	

```

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [August 17, 2018, 9:43pm UTC](https://discourse.processing.org/t/line-inside-for-wont-go-behind-image/2736/2 "2018-08-17T21:43:45Z")

</div>

If you want the lines to go behind the image, then draw the image **after** the lines.

In other words, move this line:

```auto
image(images[9],0,0,260,260); 

```

So it’s the last line in the `draw()` function.

Think about it this way: drawing in P5.js is a bit like painting on a canvas. If you want to draw lines behind a circle, you’ll draw the lines first, and then draw the circle on top of the lines.

---

<div class="post-metadata">

**Author:** ![leo](https://avatars.discourse-cdn.com/v4/letter/l/c2a13f/32.png) [@leo](https://discourse.processing.org/u/leo)\
**Post date:** [August 17, 2018, 10:05pm UTC](https://discourse.processing.org/t/line-inside-for-wont-go-behind-image/2736/3 "2018-08-17T22:05:13Z")

</div>

When i try to put it in the last line it rotates with the other little circles, and it cant rotate

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [August 17, 2018, 10:07pm UTC](https://discourse.processing.org/t/line-inside-for-wont-go-behind-image/2736/4 "2018-08-17T22:07:22Z")

</div>

Sounds like you’re going to have to rearrange your code to fix the rotation. Maybe take a look at the `push()` and `pop()` functions in [the reference](https://p5js.org/reference/).

---

<div class="post-metadata">

**Author:** ![leo](https://avatars.discourse-cdn.com/v4/letter/l/c2a13f/32.png) [@leo](https://discourse.processing.org/u/leo)\
**Post date:** [August 17, 2018, 10:11pm UTC](https://discourse.processing.org/t/line-inside-for-wont-go-behind-image/2736/5 "2018-08-17T22:11:51Z")

</div>

Wow that was easier than i thought it would be, i put a push and pop around the **rotate()** and the **for()** and it worked! Thanks Kevin

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [August 17, 2018, 10:29pm UTC](https://discourse.processing.org/t/line-inside-for-wont-go-behind-image/2736/6 "2018-08-17T22:29:17Z")

</div>

You’re welcome, glad I could help! Thanks for posting the CodePen, that makes our job much easier!