Line inside for() wont go behind image

p5.js Coding Questions
1

Hello everyone,can someone help me with this codepen? I can’t get the lines to go behind the big central circle, even putting the center image before the for().

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] ); 
    }  
    
  }
1 Like
2

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

In other words, move this line:

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.

3 Likes
3

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

4

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.

3 Likes
5

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

1 Like
6

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

1 Like