p5js - Animating lines with 3 different positions

Question

In my project i have 2 lines. Each line changes position when you click on the screen. The position of each line always falls randomly in thirds of the screen width. I accomplished the clicks and the random position in thirds.

Now i would like the lines to animate to the new position on mousePress but i don’t know how to go about it. i’m wondering if a have to rebuild in another way.

can someone guide me? :slight_smile:

https://editor.p5js.org/antoniofrom1984/sketches/8n9le2Wvh

function setup(){
  createCanvas(windowWidth, windowHeight);
}

function draw(){
  noLoop();
  background(backcolor);
}

function mousePressed(){
  loop();
  var h = height;
  var w = width;
  var thirdsH = [h/3, h/2, h/1.5 ];
  var thirdsV = [w/3, w/2, w/1.5];

  var randomthirdsH = random(thirdsH);
  var randomthirdsV = random(thirdsV);
  strokeWeight(2);
  stroke(linecolor);
  line(0, randomthirdsH, w, randomthirdsH);
  line(randomthirdsV, 0 ,randomthirdsV, h);

  print(randomthirdsH);
}

Answer 1

To do what you want you, you've to remove tha noLoop() instruction and to implement the animation in draw().

Define a current_pos variable for the current position of the line, a target_pos variable for the target position of the line and a speed for the animation. Let current_pos and target_pos undefined:

let current_pos, target_pos;
let speed = 2;

Set the target position target_pos, when the mouse is pressed:

function mousePressed(){
    var h = height;
    var w = width;
    var thirdsH = [h/3, h/2, h/1.5 ];
    var thirdsV = [w/3, w/2, w/1.5];
    target_pos = [random(thirdsV), random(thirdsH)];
}

As soon as target_pos is define, start to draw the line in draw. If current_pos is not defined, then initialize current_pos by target_pos. This happens when the line is drawn the first time:

if (target_pos) {
    if (!current_pos) {
        current_pos = [target_pos[0], target_pos[1]];
    } else {
        // [...]
    }

    // [...]
}

When the target_pos is changed the change the current_pos by speed and slightly move it in the direction of target_pos:

for (let i = 0; i < 2; ++i) {
  if (current_pos[i] < target_pos[i])
      current_pos[i] = Math.min(target_pos[i], current_pos[i]+speed)
  else if (current_pos[i] > target_pos[i])
      current_pos[i] = Math.max(target_pos[i], current_pos[i]-speed)
}

Always draw the line at current_pos:

line(0, current_pos[1], width, current_pos[1]);
line(current_pos[0], 0, current_pos[0], height);

See the example, where I applied the suggestions to your original code:

let backcolor = (0, 0, 0);
let linecolor = (255, 255, 255);
let current_pos, target_pos;
let speed = 2;

function setup(){
    createCanvas(windowWidth, windowHeight);
  
    // this is just to see somthing at start
    target_pos = [10, 10]
}

function draw(){
    background(backcolor);

    if (target_pos) {
        if (!current_pos) {
            current_pos = [target_pos[0], target_pos[1]];
        } else {
            for (let i = 0; i < 2; ++i) {
               if (current_pos[i] < target_pos[i])
                   current_pos[i] = Math.min(target_pos[i], current_pos[i]+speed)
               else if (current_pos[i] > target_pos[i])
                   current_pos[i] = Math.max(target_pos[i], current_pos[i]-speed)
           }
        }

        // draw lines
        strokeWeight(2);
        stroke(linecolor);
        line(0, current_pos[1], width, current_pos[1]);
        line(current_pos[0], 0, current_pos[0], height);

        // draw target marker
        strokeWeight(3);
        stroke(255, 0, 0);
        line(target_pos[0]-10, target_pos[1], target_pos[0]+10, target_pos[1]);
        line(target_pos[0], target_pos[1]-10, target_pos[0], target_pos[1]+10);
    }
}

function mousePressed(){
    var h = height;
    var w = width;
    var thirdsH = [h/3, h/2, h/1.5 ];
    var thirdsV = [w/3, w/2, w/1.5];
    target_pos = [random(thirdsV), random(thirdsH)];
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>

Answer 2

I assume you mean that the splitting of the canvas happens at the point where you click, something like this:

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

var backcolor = "rgb(194, 24, 91)";
var linecolor = "rgb(240, 98, 146)";
var h;
var w;
var thirdsH;
var thirdsV;
var randomthirdsH;
var randomthirdsV;

function setup(){
  createCanvas(windowWidth, windowHeight);
}

function draw(){
  noLoop();
  background(backcolor);
}

function mousePressed(){
  loop();
  var h = height;
  var w = width;
  var thirdsH = [h/3, h/2, h/1.5 ];
  var thirdsV = [w/3, w/2, w/1.5];

  var randomthirdsH = mouseY;
  var randomthirdsV = mouseX;
  strokeWeight(2);
  stroke(linecolor);
  line(0, randomthirdsH, w, randomthirdsH);
  line(randomthirdsV, 0 ,randomthirdsV, h);

  print(randomthirdsH);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>

The key thing here being:

 var randomthirdsH = mouseY;
 var randomthirdsV = mouseX;

In the mousePressed() handler.