Напечатать треугольник

@zubochistka1320 · Регистрация: 28.10.2018

Студворк — интернет-сервис помощи студентам

Название: Снимок.PNG
Просмотров: 41

Размер: 1,015 байт

Как напечатать треугольник?

@Evgen1337 · 30.10.2018, 22:21

PHP/HTML

<pre>
******
 *$$$*
  *$$*
   *$*
    **
     *
</pre>

или monospace шрифты

@amr-now · 30.10.2018, 22:23

PHP/HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body style="font-family: monospace">
    <script>
        for (let i = 0; i < 6; i++) {
            for (let j = 1; j <= i; ++j) {
                document.write("&nbsp;");
            }
 
            let len = 6 - i;
            if (len === 6 || len === 1)
                for (let j = 0; j < len; ++j) {
                    document.write("*");
                }
            else {
                document.write("*");
                for (let j = 0; j < len - 2; ++j) {
                    document.write("$");
                }
                document.write("*");
            }
            document.write("<br />");
        }
    </script>
</body>
</html>

@zubochistka1320 · 30.10.2018, 22:25 **[ТС]**

Шрифт не важен. Нужен вывод этой фигуры в JS

@Evgen1337 · 30.10.2018, 22:29

тогда условия не соблюдены, где он должен быть, какого цвета... и т.д.

@zubochistka1320 · 30.10.2018, 22:31 **[ТС]**

Нужно скомпилировать код, чтобы из символов выводился этот треугольник.

@Evgen1337 · 30.10.2018, 22:38

как видим, без monospace не получилось сделать, копируем вариант от amr-now

@amr-now · 30.10.2018, 22:50

Evgen1337, у меня кстати примитивный вариант. Извращенцы используют функциональное программирование.
Нечем больше заняться. Кубик Рубика, понимаешь, нашли...

@Evgen1337 · 30.10.2018, 22:58

Каждый как хочет...
FP, RFP - нормальная штука - мозг набекрень... ) ну раз массивы и примитивы победил, надо куда-то развиваться...

@8Observer8 · 05.11.2018, 00:18

zubochistka1320, в рисовании больше возможностей для будущего. Я сделал пример, почитав немного начало этой книги: WebGL. Программирование трехмерной графики. Есть, конечно, множество других способов, но в этом есть свои плюсы и возможности.

https://jsfiddle.net/8Observer8/knv9p87s/

PHP/HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Drawing a triangle using gl.TRIANGLES</title>
    <style>
        #renderCanvas {
            border: 1px solid #aaaafa
        }
    </style>
</head>
 
<body>
    <canvas id="renderCanvas" width="250" height="250"></canvas>
 
    <script>
        var vertexShaderSource =
            `attribute vec2 a_Position;
            
            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
            }`;
 
        var fragmentShaderSource =
            `void main()
            {
                gl_FragColor = vec4(0.4, 0.7, 0.4, 1.0);
            }`;
 
        var gl = document.getElementById("renderCanvas").getContext("webgl");
 
        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);
 
        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);
 
        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);
 
        var points = [
            0.0, 0.7,   // First point
            -0.7, -0.7, // Second point
            0.7, -0.7   // Third point
        ];
 
        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points), gl.STATIC_DRAW);
 
        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);
 
        gl.drawArrays(gl.TRIANGLES, 0, points.length / 2);
    </script>
</body>
 
</html>

@j2FunOnly · 07.11.2018, 23:35

8Observer8, к.м.к. вопрос всё-таки не к графике, а какой алгоритм для вывода такого текстового "треугольника" заданной длины.

@8Observer8 · 08.11.2018, 03:18

j2FunOnly, да, скорее всего.

Я решил поупражняться, вместо символов сделал вывод треугольника с помощью квадратиков:

Название: Triangle-Of-Many-Squares.png
Просмотров: 19

Размер: 3.0 Кб

Название: Triangle-Of-Many-Squares.png
Просмотров: 19

Размер: 3.0 Кб

PHP/HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Triangle of Many Squares</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script>
    <style>
        #renderCanvas {
            border: 5px solid #aaaaaa;
        }
    </style>
</head>
 
<body>
    <canvas id="renderCanvas" width="250" height="250"></canvas>
 
    <script>
        var vertexShaderSource =
            `attribute vec2 a_Position;
            uniform mat4 u_ModelMatrix;
 
            void main()
            {
                gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0);
            }`;
 
        var fragmentShaderSource =
            `precision mediump float;
            uniform vec3 u_Color;
 
            void main()
            {
                gl_FragColor = vec4(u_Color, 1.0);
            }`;
 
        var gl = document.getElementById("renderCanvas").getContext("webgl");
 
        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);
 
        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);
 
        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);
 
        var vertices = new Float32Array([
            -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5
        ]);
 
        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
 
        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);
 
        var u_Color = gl.getUniformLocation(program, "u_Color");
        //gl.uniform3f(u_Color, 0.635, 0.450, 0.125);
 
        // Set background color
        gl.clearColor(0.898, 0.984, 0.905, 1.0);
 
        var color1 = new Float32Array([0.831, 0.431, 0.658]); // pink
        var color2 = new Float32Array([0.431, 0.474, 0.831]); // blue
 
        var modelMatrix = mat4.create();
        var x0 = -0.5, y0 = 0.5;
        var pos = { x: x0, y: y0 };
 
        drawAll();
 
        function drawAll()
        {
            // Clear the canvas
            gl.clear(gl.COLOR_BUFFER_BIT);
 
            var j0 = 0;
            var start = 0;
 
            for (var i = 0; i < 6; i++)
            {
                for (var j = j0; j < 6; j++)
                {
                    pos.x += 0.2;
 
                    if (j % 2 == 0)
                    {
                        if (i % 2 == 0)
                        {
                            gl.uniform3fv(u_Color, color1);
                        }
                        else
                        {
                            gl.uniform3fv(u_Color, color2);
                        }
                    }
                    else
                    {
                        if (i % 2 != 0)
                        {
                            gl.uniform3fv(u_Color, color1);
                        }
                        else
                        {
                            gl.uniform3fv(u_Color, color2);
                        }
                    }
                    drawSquare(pos);
                }
 
                start += 0.2;
                pos.x = x0 + start;
                pos.y -= 0.2;
                j0 += 1;
            }
        }
 
        function drawSquare(pos)
        {
            mat4.identity(modelMatrix);
            mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(pos.x, pos.y, 0.0));
            mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(0.2, 0.2, 0.2));
 
            var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix");
            gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix);
 
            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
        }
    </script>
</body>
 
</html>

@zubochistka1320 0 / 0 / 0 Регистрация: 28.10.2018 Сообщений: 4
		1
	Напечатать треугольник 30.10.2018, 21:54. Показов 1882. Ответов 11 Метки нет (Все метки) Как напечатать треугольник? 0

@zubochistka1320 0 / 0 / 0 Регистрация: 28.10.2018 Сообщений: 4
	30.10.2018, 22:25 [ТС]	4
	Шрифт не важен. Нужен вывод этой фигуры в JS 0

@Evgen1337 249 / 162 / 68 Регистрация: 10.12.2017 Сообщений: 558
	30.10.2018, 22:29	5
	тогда условия не соблюдены, где он должен быть, какого цвета... и т.д. 0

@zubochistka1320 0 / 0 / 0 Регистрация: 28.10.2018 Сообщений: 4
	30.10.2018, 22:31 [ТС]	6
	Нужно скомпилировать код, чтобы из символов выводился этот треугольник. 0

@Evgen1337 249 / 162 / 68 Регистрация: 10.12.2017 Сообщений: 558
	30.10.2018, 22:38	7
	как видим, без monospace не получилось сделать, копируем вариант от amr-now 0

@amr-now 6483 / 3894 / 2005 Регистрация: 14.06.2018 Сообщений: 6,781
	30.10.2018, 22:50	8
	Evgen1337, у меня кстати примитивный вариант. Извращенцы используют функциональное программирование. Нечем больше заняться. Кубик Рубика, понимаешь, нашли... 0

@Evgen1337 249 / 162 / 68 Регистрация: 10.12.2017 Сообщений: 558
	30.10.2018, 22:58	9
	Каждый как хочет... FP, RFP - нормальная штука - мозг набекрень... ) ну раз массивы и примитивы победил, надо куда-то развиваться... 0

@j2FunOnly the hardway first 2434 / 1815 / 898 Регистрация: 05.06.2015 Сообщений: 3,584
	07.11.2018, 23:35	11
	8Observer8, к.м.к. вопрос всё-таки не к графике, а какой алгоритм для вывода такого текстового "треугольника" заданной длины. 1

Опции темы