Day2 目标

• 画标准直角坐标系（X 轴、Y 轴）
• 画网格（方便看函数图像）
• 画出第一条数学曲线：y = sin(x)
• 理解「数学坐标 → 屏幕坐标」的转换

目标预览

直接给你完整可编译代码：
文件名：day2_graph.cpp

#include <SFML/Graphics.hpp>
#include <cmath>

using namespace std;

int main()
{
    // 窗口：800×600，中文标题
    sf::RenderWindow window(sf::VideoMode(800, 600), L"SFML Day2 · 函数图像");

    // 坐标系中心放在屏幕中心
    const float cx = 400;
    const float cy = 300;

    // 坐标轴颜色
    sf::Color axis_color(120, 220, 255);
    // 网格颜色
    sf::Color grid_color(60, 60, 80);
    // 曲线颜色
    sf::Color sin_color(255, 80, 80);

    while (window.isOpen())
    {
        sf::Event event;
        while (window.pollEvent(event))
        {
            if (event.type == sf::Event::Closed)
                window.close();
        }

        // 背景
        window.clear(sf::Color(20, 20, 30));

        // ====================== 画网格 ======================
        for (int x = 0; x < 800; x += 40)
        {
            sf::Vertex line[] = {
                {{(float)x, 0}, grid_color},
                {{(float)x, 600}, grid_color}
            };
            window.draw(line, 2, sf::Lines);
        }
        for (int y = 0; y < 600; y += 40)
        {
            sf::Vertex line[] = {
                {{0, (float)y}, grid_color},
                {{800, (float)y}, grid_color}
            };
            window.draw(line, 2, sf::Lines);
        }

        // ====================== 画坐标轴 ======================
        sf::Vertex x_axis[] = {
            {{0, cy}, axis_color},
            {{800, cy}, axis_color}
        };
        sf::Vertex y_axis[] = {
            {{cx, 0}, axis_color},
            {{cx, 600}, axis_color}
        };
        window.draw(x_axis, 2, sf::Lines);
        window.draw(y_axis, 2, sf::Lines);

        // ====================== 画 y = sin(x) ======================
        for (int sx = -350; sx < 350; ++sx)
        {
            // 数学 x
            float x = sx / 50.0f;
            // 数学 y = sin(x)
            float y = sin(x);

            // 放大 100 倍方便观察
            y *= 100;

            // 转换到屏幕坐标
            float px = cx + sx;
            float py = cy - y;

            // 画点
            sf::CircleShape dot(1.5f);
            dot.setPosition(px, py);
            dot.setFillColor(sin_color);
            window.draw(dot);
        }

        window.display();
    }

    return 0;
}

Makefile 对应加一条

day2: day2_graph.o
    $(CXX) $(CXXFLAGS) -o day2 day2_graph.o $(LIBS)

编译运行：

make day2
./day2

你今天要理解的 3 个关键点

1. SFML 原点在左上角，数学原点在中心，所以要 cx=400, cy=300
2. 屏幕 y 向下，数学 y 向上 → 所以用 cy - y
3. 函数图像就是：循环算点 → 画点 → 连成曲线

运行成功后回复我：
Day2 正弦函数画出来了
我就带你继续 Day3：

• 支持多个函数（sin、cos、抛物线）
• 键盘控制缩放、平移
• 鼠标显示坐标