How to draw a diagonal sine wave line renderer

Question

I'm trying to use a LineRenderer component to draw a sine wave from point A to B and I'm using mouse position. However what I did so far is not working as expected, it just draws a sine wave along the x-axis and it's not diagonal.

private void Update()
{
    if (Input.GetMouseButtonDown(0))
    {
        Vector3 newPos = Camera.main.ScreenToWorldPoint(Input.mousePosition);
        newPos.z = 0;
        CreatePointMarker(newPos);
        GenerateNewLine();
    }
}

private void CreatePointMarker(Vector3 pointPosition)
{
    Instantiate(linePointPrefab, pointPosition, Quaternion.identity);
} 

private void GenerateNewLine()
{
    GameObject[] allPoints = GameObject.FindGameObjectsWithTag("PointMarker");
    Vector3[] allPointPositions = new Vector3[allPoints.Length];
    var pointList = new List<Vector3>();
    for (int i = 0; i < 50; i ++)
    {
        var dir = allPoints[0].transform.position - allPoints[1].transform.position;
        float x = dir.x * i;
        float y = Mathf.Sin(x * Time.time);
        var sine = new Vector3(x, y, 0f);
        var tangentLine = allPoints[0].transform.position + sine;
        pointList.Add(tangentLine);
    }
    SpawnLineGenerator(pointList.ToArray());
}
private void SpawnLineGenerator(Vector3[] linePoints)
{
    GameObject newLineGen = Instantiate(lineGeneratorPrefab);
    LineRenderer lRend = newLineGen.GetComponent<LineRenderer>();

    lRend.positionCount = linePoints.Length;
    lRend.SetPositions(linePoints);
}

Answer 1

I simplified your code but the math is the same, hope it helps you:

using System.Collections.Generic;
using UnityEngine;
public class SineWaveGenerator : MonoBehaviour
{
    public Transform A;
    public Transform B;
    public int Resolution = 50;
    public Material material;
    public float WaveScale = 1f;

    Camera cam;
    private void Start() {
        cam = Camera.main;
    }

    private void Update()
    {
        if (Input.GetMouseButtonDown(0))
        {
            Vector3 newPos = cam.ScreenToWorldPoint(Input.mousePosition + cam.transform.forward * 10);
            newPos.z = 0;
            B.position = newPos;
        }
        GenerateLine(); //Moved it out to see the effect of WaveScale and Resolution
    }
    private void GenerateLine()
    {
        // Create or select a line renderer on the current game object
        LineRenderer thisLineRenderer = GetComponent<LineRenderer>();
        if(!thisLineRenderer)
            thisLineRenderer = gameObject.AddComponent<LineRenderer>();

        // set visuals of the line renderer
        thisLineRenderer.material = material;
        thisLineRenderer.startWidth = thisLineRenderer.endWidth = 0.1f;
        thisLineRenderer.startColor = thisLineRenderer.endColor = Color.white;

        // set resolution of the line renderer
        thisLineRenderer.positionCount = Resolution;

        for(int i=0; i<Resolution; i++){
            float Sin, Cos, rotatedX, rotatedY;
            Vector3 dir = i*(B.position - A.position)/ Resolution;

            float X = dir.magnitude;
            float Y = Mathf.Sin(X * WaveScale);

            float angle = Vector3.Angle(dir, Vector3.right) * Mathf.Deg2Rad;
            Sin = Mathf.Sin(angle);
            Cos = Mathf.Cos(angle);

            if(dir.y > Vector3.right.y){
                rotatedX = X * Cos - Y * Sin;
                rotatedY = X * Sin + Y * Cos;
            }else{
                rotatedX = X * Cos + Y * Sin;
                rotatedY = - X * Sin + Y * Cos;
            }

            thisLineRenderer.SetPosition(i, new Vector3(rotatedX, rotatedY, 0f));
        }
    }
}

Attach the code to a game object in an empty scene and add 2 more game objects called A and B and put them in the inspector, select default sprite material as your material and you can play with resolution and wave scale in the inspector to see the result.

I rotated the sin function with the Rotation Matrix:

https://en.wikipedia.org/wiki/Rotation_matrix