3votos

Triángulo de Pascal en Java _ Consola en JavaScript

por josejuan hace 5 años

Javascript y SVG, animando el cotarro con jQuery.

Presentar por consola en triángulo de pascal hasta cierta fila.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html> 
<html> 
    <head> 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
        <script type="text/javascript"> 
         
            var MAX_ROWS = 10; 
            var ANIMATION_TIME_SECS = 1000; 
         
            var aList = [], // [1,3,3,1] 
                bList = [], // [] --> [1] --> ... -> [1,4,6] --> ... -> [1,4,6,4,1] --> aList 
                row   = 0, 
                col   = 0; 
             
            function getCell(r, c) { return document.getElementById('Cell' + '_' + r + '_' + c) } 
             
            function nextCell() { 
                var newNumber, upCells = null; 
                if(bList.length == 0 || aList.length == bList.length) 
                    newNumber = 1; 
                else { 
                    upCells = $([getCell(row - 1, col - 1), getCell(row - 1, col)]); 
                    upCells.attr('fill', 'orange'); 
                    newNumber = aList[col - 1] + aList[col]; 
                bList.push(newNumber); 
                var cell, text, both; 
                $(cell = document.createElementNS('http://www.w3.org/2000/svg', 'polygon')). 
                     attr({ id: 'Cell_' + row + '_' + col 
                          , fill: 'lime' 
                          , stroke: 'blue' 
                          , 'stroke-width': '0.2' 
                          , points: '0.87,0.5 0.0,1.0 -0.87,0.5 -0.87,-0.5 0.0,-1.0 0.87,-0.5' 
                          , transform: 'scale(0, 0)' 
                          }); 
                $(text = document.createElementNS('http://www.w3.org/2000/svg', 'text')). 
                     attr({ id: 'Text_' + row + '_' + col 
                          , x: '0' 
                          , y: '0.15' 
                          , style: 'font-size: 0.35pt' 
                          , 'text-anchor': 'middle' 
                          , transform: 'scale(0, 0)' 
                          }).text(newNumber); 
                var both = $([cell, text]); 
                $('#L').append(both).animate({_: 1}, { 
                    duration: ANIMATION_TIME_SECS, 
                    step: function (_, fx) { 
                        var size = fx.pos; 
                        var px = 1.732 * (col - 0.5 * row); 
                        var py = 1.5 * row; 
                        both.attr('transform', 'translate(' + px + ', ' + py + '), scale(' + size + ', ' + size + ')') 
                    }, 
                    complete: function () { 
                        if(upCells != null) 
                            upCells.attr('fill', 'lime'); 
                        if(bList.length > aList.length) { 
                            aList = bList; 
                            bList = []; 
                            col = 0; 
                            row += 1; 
                        } else { 
                            col += 1; 
                        if(row < MAX_ROWS) 
                            nextCell(); 
                }); 
             
            $(function () { 
               nextCell(); 
            }); 
         </script> 
    </head> 
<body> 
    <svg id="L" xmlns="http://www.w3.org/2000/svg" version="1.1" width="24cm" height="24cm" viewBox="-12 -1.5 24 24" style="background-color: lightgray"> 
    </svg> 
</body> 
</html> 
3 comentarios
0votos

Escrito por josejuan hace 5 años

Por eso de que se vea una imagen

Comenta la solución

Tienes que identificarte para poder publicar tu comentario.