How to rotate object using a range slider with js?-CodePudding

sorry if this is a dumb question but I just started learning coding and am lost. \I want each end of the line to follow the blue and red circles, and I want the blue circle to move in the opposite direction of the red circle. I already have figured out how to make the red follow the slider.

html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="ass3_part1.js" defer></script>
    <title>CPSC 1045 Assignment 3 Part 1</title>
</head>

<body>
    <h1>CPSC 1045 Assignment 3 Part 1</h1>
    <svg width="350" height="350" style="border:solid 1px black">
        <circle id="top" cx="10" cy="100" r="10" fill="red" />
        <circle id="bottom" cx="340" cy="240" r="10" fill="blue" />
        <line id="connector" x1="10" y1="100" x2="340" y2="240" stroke="black" stroke-width="5px" />
    </svg>
    <br>
    <input class="slider" type="range" id="rangeX" min="10" max="340" value="0" style="width:350px" oninput="move()" >
    
</body>

</html>

js:

console.log("ass3_part1.js executing")

function move(event){
    let slider = document.querySelector("#rangeX");
    let circle = document.querySelector("#top");
    circle.setAttribute("cx", slider.value);
    console.log(circle);
}

CodePudding user response：

Not a dumb question -- good work so far!

From what I understand, this is what you were trying to accomplish:

function move(event){
    let slider = document.querySelector("#rangeX");
    let topCircle = document.querySelector("#top");
    let bottomCircle = document.querySelector("#bottom");
    let line = document.querySelector('#connector');
    topCircle.setAttribute("cx", slider.value);

    //set x on left end-point to the same value as top circle:
    line.setAttribute('x1', slider.value);
    //set x on bottom circle to 350 (which is the width of the input component & the svg) minus the slider value
    //alternatively you could have it variable (tied to something like the width of the svg):
    //let inverseSliderValue = parseInt(document.querySelector.(#svgId).getAttribute(width))-slider.value;
    //bottomCircle.setAttribute('cx', inverseSliderValue);
    bottomCircle.setAttribute('cx', 350-slider.value);

    //set x on right end-point to the same value as the bottom circle:
    line.setAttribute('x2', 350-slider.value);

}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="ass3_part1.js" defer></script>
    <title>CPSC 1045 Assignment 3 Part 1</title>
</head>

<body>
    <h1>CPSC 1045 Assignment 3 Part 1</h1>
    <svg width="350" height="350" style="border:solid 1px black">
        <circle id="top" cx="10" cy="100" r="10" fill="red" />
        <circle id="bottom" cx="340" cy="240" r="10" fill="blue" />
        <line id="connector" x1="10" y1="100" x2="340" y2="240" stroke="black" stroke-width="5px" />
    </svg>
    <br>
    <input class="slider" type="range" id="rangeX" min="10" max="340" value="0" style="width:350px" oninput="move()">

</body>

</html>

I tried to follow the same pattern you had started with (and modify your code as little as possible). I added some comments to the code too, but heres a little explanation:

Pretty much, you want to move the blue circle to the left horizontally the inverse amount that the red circle moves to the right. So, as the slider moves, you'd want to update the x value of blue circle to its initial x value minus the slider value. For the line, since you're only moving the circles along the x axis, you just need to update the x values of the endpoints equal to the value that you assigned its associated circle.