By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,741 Members | 2,004 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,741 IT Pros & Developers. It's quick & easy.

Changing a spiral print out format to straight line?

Thekid
100+
P: 145
Hi, I'm not very good with javascript but I wanted to know if there was a simple way to change this code so instead of printing out the numbers & letters in a spiral on the page, it can be changed to print them out in a straight line or straight lines? Or if there's a simple rewrite for it....
p.s. this needs Firefox
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.  
  4. <script type="text/javascript">
  5. <!--
  6. //----------------------------------------------------------------
  7. var strHTML = "";    
  8.  
  9. function drawIt()
  10. {
  11.   var drawData = new Array(685,342,678,355,466,495,3,-330,225,883,478,884,473,718,320,713,313,465,469,452,474,502,494,4,40,180,426,455,7,-350,180,683,442,696,444,253,369,254,364,671,273,675,276,590,278,590,285,469,494,468,493,583,130,583,124,836,429,836,421,602,313,604,299,481,509,485,513,784,591,4,-310,359,698,620,3,-240,359,407,323,405,327,698,466,711,471,690,237,697,241,690,365,4,-240,180,479,410,465,408,736,422,743,423,257,431,243,425,390,393,391,391,494,351,496,349,632,310,621,317,460,475,457,468,404,577,415,568,756,488,7,-55,255,685,506,682,509,666,350,656,359,703,385,701,380,515,311,508,299,820,555,808,548,729,539,725,544,667,324,663,329,750,231,4,-130,180,487,364,484,370,463,528,7,-175,255,683,544,688,540,664,358,7,220,180,711,353,4,-240,270,718,443,717,447,301,377,307,379,884,473,898,476,477,337,481,333,877,315,864,319,454,451,445,448,582,261,590,250,674,186,669,184,649,235,659,224,344,562,353,561,472,424,472,429,612,300,604,299,309,373,307,379,688,383,675,388,267,541,280,536,479,304,470,294,324,517,326,523,477,465,4,-250,180,618,221,625,223,385,392,386,386,443,405,443,401,718,662,724,659,344,429,358,429,844,468,847,471,694,422,698,425,622,327,4,160,359,703,558,703,571,646,351,643,349,586,328,4,225,230,590,261,582,261,669,184,664,197,435,305,437,302,686,458,693,462,415,124,409,127,710,445,7,-190,180,438,506,442,513,463,528,7,-175,255,829,337,3,-160,225,635,680,627,682,456,408,443,405,481,546,485,549,884,534,882,530,590,549,590,563,650,302,657,290,733,483,736,475,651,346,7,230,180,308,425,4,-45,230,597,332,605,319,764,452,763,459,551,648,545,647,477,465,4,-250,180,331,518,318,522,758,358,761,366,743,239,739,236,667,324,672,328,700,515,697,519,657,604,652,591,678,679,3,-250,225,886,479,4,-190,180,831,626,826,621,250,487,249,481,630,689,637,687,665,517,667,526,360,343,4,-110,359,312,328,318,331,393,355,408,354,488,335,474,331,613,603,621,601,831,383,830,378,453,377,4,-290,180,616,252,4,-10,180,496,584,499,587,698,485,703,490,586,642,586,656,586,134,4,-180,270,558,583,4,-190,180,692,545,683,535,803,387,789,389,582,563,590,563,692,368,698,365,730,473,727,479,723,304,713,313,618,585,616,571,397,431,383,431,700,522,4,-220,180,400,207,398,198,764,318,770,315,378,308,381,303,517,302,512,305,586,532,4,45,230,343,290,338,278,739,236,748,225,455,448,4,-260,359,743,330,747,337,496,274,502,271,648,522,641,509,727,598,722,593,637,737,639,744,364,160,363,161,786,664,4,-140,359,720,503,4,-210,180,670,638,666,640,585,324,586,324,648,592,652,591,491,686,490,671,493,318,495,316,484,145,494,156,693,728,690,722,562,288,4,-170,180,857,578,855,583,260,309,262,303,590,589,590,575,483,725,473,736,640,287,638,294,548,530,549,531,834,466,833,471,834,382,4,-170,180,494,501,497,505,714,500,4,-210,180,474,443,475,449,590,693,583,693,645,524,648,522,652,528,659,540,610,586,618,585,717,262,723,267,610,314,602,313,510,229,515,242,432,297,7,-40,180,586,328,4,225,230,749,560,753,569,682,348,678,344,437,372,430,365,409,636,410,637,838,512,824,507,438,549,439,551,300,592,7,-330,180,456,270,455,271,677,481,680,474,808,554,4,-210,180,677,676,679,676,667,191,671,192,326,523,319,524,537,690,543,691,698,485,694,492,563,577,562,584,657,290,661,292,434,238,429,243,586,278,4,0,180,731,451,4,-100,359,674,283,676,268,461,376,454,373,690,140,686,142,654,229,659,231,709,467,711,471,534,291,532,286,742,163,736,159,543,181,3,-80,359,873,324,870,317,465,429,465,424,670,478,674,471,723,304,729,311,589,74,582,74,405,273,4,-130,180,844,375,845,380,586,616,4,0,359,621,215,618,221,334,640,333,638,481,244,488,256,407,490,4,-70,359,536,144,538,130,676,268,665,278,482,252,480,245,625,533,621,520,388,466,387,461,831,510,829,516,459,379,4,-110,180,390,426,7,0,180,644,736,646,743,743,425,729,425,631,554,632,545,702,492,690,485,460,351,465,359,259,373,247,365,559,302,561,316,727,404,725,396,460,319,4,-85,230,358,421,358,429,362,158,3,-50,225,534,291,537,290,725,591,4,-320,180,893,368,895,375,814,233,4,-230,359,898,476,897,481,428,486,426,479,409,577,404,577,508,639,511,640,670,196,4,-110,180,686,515,691,509,489,314,494,310,692,545,686,551,243,425,257,419,611,549,613,556,586,321,3,270,225,518,226,510,229,678,593,684,590,663,633,7,-250,180,665,491,4,-130,359,663,334,4,-220,270,525,73,523,82,744,691,740,693,357,469,350,469,667,565,665,550,779,196,7,-345,255,736,399,4,-80,180,373,679,4,-40,359,523,542,518,547,401,459,402,463,472,491,4,-15,230,770,462,771,453,892,422,900,426,561,281,4,-350,180,638,694,635,680,458,382,452,380,550,655,552,641,656,359,658,363,615,612,621,601,436,246,427,235,880,323,877,315,515,242,523,239,777,266,4,-140,180,718,662,715,648,521,507,517,503,765,429,765,422,822,515,824,507,448,664,4,-30,359,433,458,420,460,509,645,511,640,781,256,771,265,315,377,301,375,665,330,663,329,774,268,771,265,887,375,887,371,361,236,368,250,309,373,307,379,698,390,709,380,304,426,304,425,478,516,485,502,683,439,682,445,671,526,4,-320,359,675,579,678,593,504,199,4,-160,270,608,334,605,319,516,546,523,534,462,210,473,219,713,267,719,273,433,453,433,458,373,604,4,-230,180,468,450,482,448,622,645,626,645,713,422,718,422,489,151,484,153,397,431,397,426,381,672,372,675,671,346,685,342,334,640,330,643,413,133,406,121,383,601,370,601,826,631,821,627,542,315,549,312,744,287,749,292,563,558,4,-10,359,648,256,643,269,430,403,416,401,700,515,711,524,430,403,430,399,443,177,4,-105,230,751,621,760,632,610,579,617,578,654,499,663,510,479,424,479,429,535,737,533,751,586,539,3,90,225,479,363,491,370,569,537,566,540,582,700,590,700,468,214,463,217,400,493,3,-340,359,590,686,590,700,526,601,523,607,714,209,706,215,308,592,296,599,402,266,408,271,344,429,344,421,582,81,582,67,394,460,7,-350,180,657,298,7,-120,180,648,256,644,258,745,236,4,-130,180,637,286,4,-20,180,459,273,4,-95,230,479,553,492,546,441,547,4,-5,230,532,518,4,-30,359,714,348,715,351,778,353,777,350,361,385,347,383,652,528,648,530,589,642,583,642,667,565,655,555,287,253,3,-30,359,709,380,694,380,669,354,666,350,508,299,516,295,682,386,684,392,343,565,4,-60,359,586,536,587,536,714,494,711,498,622,652,629,651,474,384,4,-110,359,538,294,4,-160,270,645,317,647,319,761,631,758,624,714,209,706,215,653,606,657,604,351,429,351,422,585,227,589,219,790,596,3,-220,359,541,653,550,655,772,423,765,422,611,262,619,263,564,281,565,288,502,271,505,285,551,217,548,226,301,425,3,0,225,629,319,621,317,256,486,255,483,293,256,4,-120,359,460,475,453,476,606,536,4,10,359,853,573,862,584,705,526,4,-220,180,737,333,740,339,454,268,3,-50,225,779,264,776,260,445,503,448,509,895,375,880,373,349,467,363,464,247,365,261,362,442,513,454,506,519,598,517,605,699,463,697,468,557,282,558,289,837,377,838,381,465,408,466,403,714,494,726,501,756,459,757,451,785,351,7,-160,180,583,130,586,130,389,305,374,302,758,624,752,629,551,227,4,-350,359,374,302,383,314,556,254,4,-170,359,772,318,4,-60,180,771,527,775,539,526,84,4,-350,359,677,540,683,535,737,402,725,396,504,277,500,279,632,342,640,337,250,422,250,428,590,67,582,67,469,628,476,616,804,425,4,-270,359,586,739,586,753,424,296,435,305,483,538,479,553,259,483,4,-80,270,708,528,711,524,504,189,498,191,872,526,870,531,637,137,4,-190,359,623,215,621,229,617,336,624,330,744,699,748,697,696,362,4,-60,180,492,590,7,-300,180,777,535,4,-120,180,814,558,4,-210,180,820,555,817,559,484,160,484,145,424,705,4,-345,230,731,173,742,163,685,153,690,140,370,507,361,506,768,389,754,391,426,479,440,478,686,478,682,485,589,746,582,746,309,471,318,474,638,694,629,696,751,703,744,691,360,388,361,383,441,337,447,341,559,577,4,-10,180,728,373,4,-70,180,730,596,4,-140,180,703,444,704,440,491,686,501,675,270,310,4,-110,270,665,625,661,627,586,285,4,-180,180,500,196,498,191,676,373,676,372,493,318,489,314,505,492,508,496,700,522,4,-220,180,747,518,3,-210,359,462,210,464,224,645,322,4,-210,270,395,391,4,-100,270,528,325,4,-105,230,850,421,836,421,654,304,650,302,703,558,696,563,718,443,704,440,508,563,504,561,383,426,383,431,641,736,4,-350,180,445,425,3,0,225,565,315,561,316,850,421,850,429,704,326,693,335,668,491,672,499,347,282,343,290,652,338,643,349,731,337,743,330,525,749,533,751,590,582,585,582,498,320,4,-140,270,830,378,844,375,519,233,513,236,736,422,736,429,619,612,4,-170,180,645,317,648,312,509,526,496,533,557,604,552,603,758,425,772,425,369,348,363,341,684,464,686,458,439,340,4,-300,180,441,173,439,174,609,557,4,-170,180,364,160,363,161,308,592,306,588,441,598,4,-355,230,745,702,4,-240,180,250,422,250,428,336,281,4,-300,180,655,341,652,338,822,339,4,-205,230,587,605,583,614,589,653,586,656,680,584,676,586,638,567,4,-160,359,743,425,729,425,734,166,737,168,407,323,405,327,494,351,489,348,769,397,768,389,640,578,641,568,805,464,790,467,466,94,3,-70,225,682,152,688,154,403,207,4,-320,359,630,182,7,-315,255,381,547,386,544,616,571,608,572,669,199,664,197,502,529,498,526,496,274,502,271,781,256,785,259,645,270,640,268,739,291,750,282,622,652,624,638,873,324,870,317,601,326,606,327,642,743,4,-170,180,793,500,3,-200,359,586,309,4,0,359,658,504,653,508,529,524,3,60,359,802,300,4,-240,359,465,429,479,429,388,539,4,-60,270,547,533,3,70,225,468,424,4,0,180,823,624,4,-310,180,473,404,472,409,534,744,528,743,493,343,489,348,692,406,3,190,359,890,425,4,-90,359,526,322,525,322,459,577,463,576,652,536,7,-240,180,448,426,448,425,826,338,826,336,586,216,4,-180,359,510,516,514,515,545,685,542,698,717,373,720,381,256,486,250,487,497,505,508,496,436,604,3,-310,225,427,367,4,-110,359,418,521,7,-185,255,530,272,530,258,371,503,4,-250,359,413,117,406,121,697,719,699,726,499,352,4,-130,270,739,291,744,298,688,310,675,318,399,360,401,355,684,428,684,422,603,306,610,307,793,424,802,428,690,253,683,249,808,297,3,-150,359,465,564,470,568,424,398,7,-10,180,771,453,757,451,510,557,499,567,608,550,4,-350,180,530,258,523,260,745,363,758,358,499,587,492,599,421,711,3,-300,225,531,131,538,130,365,243,368,239,413,327,7,-30,180,429,243,425,237,478,365,484,370,488,465,475,461,402,463,388,466,419,425,4,-90,359,475,624,470,629,559,302,563,301,350,386,347,383,590,575,585,575,465,429,465,424,485,457,488,465,841,381,4,-170,180,499,352,4,-130,270,538,284,532,286,468,566,459,577,585,578,4,-270,180,509,645,503,643,393,355,405,365,468,101,4,-115,230,523,542,517,538,787,498,4,-290,359,491,679,496,681,699,292,7,-345,255,679,312,682,315,726,501,723,505,838,512,835,520,514,341,512,332,455,315,3,-40,225,756,568,4,-310,359,626,526,627,533,679,371,3,210,225,663,510,656,515,585,585,4,-270,180,747,706,751,703,313,326,326,330,641,518,7,120,180,582,173,582,187,474,331,481,344,653,315,648,312,417,570,413,566,659,224,660,239,590,124,583,124,555,583,556,576,321,325,318,331,666,557,661,560,631,291,633,285,385,541,386,544,708,425,4,-270,270,454,506,450,499,747,234,744,231,538,550,544,543,754,367,751,360,478,516,492,511,741,514,4,-300,359,582,180,588,180,833,469,847,471,693,728,690,722,820,229,3,-140,359,803,385,796,384,722,257,728,262,479,296,475,299,566,540,568,526,748,371,745,363,667,324,672,328,688,383,691,391,357,469,355,462,271,543,267,541,489,151,484,153,405,327,417,334,559,255,556,264,629,544,4,-160,359,412,633,4,-355,230,407,638,3,-310,225,565,526,571,527,443,347,437,343,893,480,4,-190,180,247,365,261,362,611,262,620,253,695,614,4,-330,359,400,269,4,-310,180,534,697,542,698,552,617,555,614,718,429,718,422,500,518,496,533,768,324,774,321,469,404,4,-10,180,476,293,4,-50,180,612,283,7,-315,255,716,655,719,653,782,262,4,-140,180,702,492,690,485,489,597,492,599,867,327,864,319,586,250,4,0,180,416,401,417,397,686,515,679,502,712,206,4,-210,359,862,584,847,582,722,351,718,345,584,556,590,556,426,455,7,-350,180,472,729,478,731,694,721,4,-340,180,690,237,683,249,566,548,560,555,673,375,4,165,230,583,278,583,285,279,534,281,539,447,661,454,656,531,577,3,-290,359,326,207,4,-310,359,682,306,688,310,265,311,266,308,520,606,4,-200,180,439,171,3,-60,225,796,384,797,391,522,600,4,-20,180,605,550,606,557,685,407,4,100,359,639,334,4,150,359,679,459,692,464,456,408,457,404,481,299,4,-50,180,552,617,554,604,761,390,762,396,722,314,718,309,717,373,730,377,385,392,390,393,439,340,4,-300,180,319,199,323,208,686,478,682,485,419,456,420,460,509,635,4,-20,270,427,293,424,296,634,292,4,-200,180,742,696,4,-240,180,674,471,686,478,543,307,548,320,696,444,693,441,829,629,4,-130,180,771,527,766,534,398,272,403,276,260,309,265,311,602,534,605,525,497,499,4,40,180,469,620,475,624,848,274,7,-5,255,381,547,378,541,438,601,439,602,585,589,590,589,890,479,891,474,587,298,583,307,549,526,4,25,230,720,497,717,502,728,589,732,594,696,727,4,-160,180,790,345,792,349,705,404,4,-80,359,638,512,641,509,469,357,4,-300,359,330,643,326,639,843,421,843,428,445,344,4,-120,180,336,635,4,-50,270,452,425,4,-45,230,752,228,748,225,527,266,531,265,713,422,718,422,638,131,3,-100,359,805,552,808,548,729,550,734,544,659,224,660,239,466,442,468,450,590,686,582,686,588,753,589,746,626,526,620,528,477,382,484,389,696,328,702,325,718,345,714,348,890,479,891,474,659,540,655,542,544,188,4,-170,359,792,673,790,663,436,551,3,-320,225,499,567,505,570,811,556,814,552,534,137,538,137,792,456,805,464,651,599,7,-250,180,417,334,419,330,713,422,713,425,503,500,500,497,500,196,502,195,798,465,799,460,455,315,3,-40,225,722,257,713,267,723,470,736,475,777,350,790,345,465,97,467,97,376,241,361,236,590,173,582,173,673,189,4,-110,180,378,594,383,601,723,535,734,544,366,163,4,-95,230,433,478,434,482,476,405,4,-10,180,462,210,464,224,750,282,755,289,628,308,4,-20,180,741,454,733,448,421,422,429,426,474,291,470,294,423,709,422,709,436,551,3,-320,225,479,410,480,406,688,362,694,359,871,529,884,534,564,308,7,-80,180,707,401,716,404,676,672,4,-295,230,540,553,4,-20,359,766,321,4,-240,180,296,599,294,595,456,318,457,317,693,246,686,243,450,402,7,-10,180,525,319,3,-60,225,701,333,696,328,483,301,479,304,619,612,4,-170,180,473,736,472,721,533,571,4,-20,359,706,520,703,524,590,81,582,81,488,248,482,252,698,425,684,425,307,474,4,-80,359,510,516,519,505,508,332,4,-140,359,475,424,4,0,180,706,568,4,-140,180,542,315,541,308,488,481,7,-185,255,744,699,748,697,665,625,670,638);
  12.   var arrSize=drawData.length, i, step=25;
  13.   alert("Starting the drawing now,\nthis may take some seconds ...");
  14.   for (i=0; i<arrSize;)
  15.   {
  16.     if (i*100/arrSize>=step) 
  17.       { alert(step + "% done"); step+=25; }
  18.     if (drawData[i+2]>=10)
  19.       drawLine(drawData[i++],drawData[i++],drawData[i++],drawData[i++]);
  20.     else
  21.       drawArc(drawData[i++],drawData[i++],drawData[i++],drawData[i++],drawData[i++]);
  22.   }
  23.   document.getElementById("drawHere").innerHTML = strHTML;
  24.   alert("   Finished   \nNow hurry up\nand enter the text. ;-)");
  25. }//---------------------------------------------------------------
  26.  
  27.  
  28. //----------------------------------------------------------------
  29. function newDiv(x,y,w,h)
  30. {
  31.   strHTML +=
  32.   '<div style="position:absolute;'+
  33.   'left:'+x+'px;'+
  34.   'top:'+y+'px;'+
  35.   'width:'+w+'px;'+
  36.   'height:'+h+'px;'+
  37.   'background-color:green;"></div>';
  38. }//---------------------------------------------------------------
  39.  
  40.  
  41. //----------------------------------------------------------------
  42. function drawLine(x1,y1,x2,y2)
  43. {
  44.   if (x1>x2)
  45.   {
  46.     var  x2_=x2;
  47.     var  y2_=y2;
  48.     x2=x1; y2=y1; x1=x2_; y1=y2_;
  49.   }
  50.   var dx = x2-x1, dy = Math.abs(y2-y1),
  51.   x=x1, y=y1, y_inc=(y1>y2)?-1:1;
  52.   if (dx>=dy)
  53.   {
  54.     var x_old=x, pr=dy<<1, pru=pr-(dx<<1), p=pr-dx;
  55.     while ((dx--)>0)
  56.     {
  57.       x++;
  58.       if (p>0)
  59.       {
  60.         newDiv(x_old,y,x-x_old,1);
  61.         x_old=x; y+=y_inc; p+=pru;
  62.       }
  63.       else
  64.         p+=pr;
  65.     }
  66.     newDiv(x_old,y,x2-x_old+1,1);
  67.   }
  68.   else
  69.   {
  70.     var pr=dx<<1, y_old=y, pru=pr-(dy<<1), p=pr-dy;
  71.     if (y2<=y1)
  72.     {
  73.       while ((dy--)>0)
  74.       {
  75.         if (p>0)
  76.         {
  77.           newDiv(x++, y, 1, y_old-y+1);
  78.            y_old=y; y+=y_inc; p+=pru;
  79.         }
  80.         else
  81.         {
  82.           y+=y_inc; p+=pr;
  83.         }
  84.       }
  85.       newDiv(x2,y2,1,y_old-y2+1);
  86.     }
  87.     else
  88.     {
  89.       while ((dy--)>0)
  90.       {
  91.         y+=y_inc;
  92.         if (p>0)
  93.         {
  94.           newDiv(x++,y_old,1,y-y_old);
  95.           y_old=y; p += pru;
  96.         }
  97.         else
  98.           p+=pr;
  99.       }
  100.       newDiv(x2,y_old,1,y2-y_old+1);
  101.     }
  102.   }
  103. }//---------------------------------------------------------------
  104.  
  105.  
  106. //----------------------------------------------------------------
  107. function drawArc(x,y,r,s,e)
  108. {
  109.   var torad=Math.PI/180;
  110.   var ss;
  111.   var xx_last=-1, yy_last=-1;
  112.   for (ss=s; ss<=s+e; ss+=8)
  113.   {
  114.     var xx = Math.round(x+r*Math.cos(ss*torad));
  115.     var yy = Math.round(y-r*Math.sin(ss*torad));
  116.     if (xx!=xx_last || yy!=yy_last)
  117.     {
  118.       newDiv(xx,yy,1,1);
  119.       xx_last=xx; yy_last=yy;
  120.     }
  121.   }
  122. }//--------------------------------------------------------------
  123.  
  124. //-->
  125. </script>
  126.  
  127. </head>
  128. <body style="background-color:#000000;" onload="drawIt()">
  129.   <span id="drawHere"></span>
  130. </body>
  131. </html>
  132.  
  133.  
Oct 27 '08 #1
Share this Question
Share on Google+
4 Replies


acoder
Expert Mod 15k+
P: 16,027
The code is far too complicated for what you want to achieve. Do you just want to print it out in one go, or in timed intervals?
Oct 28 '08 #2

Thekid
100+
P: 145
Thank you for the reply, I can change the intervals and have it print out all at once, but I didn't know if there was a way to get the output to print without being in a spiral. Is a certain section of the code dedicated just to the characters where I could take that portion and change the way it's printed? It doesn't have to be html either, it could print to notepad or whatever but just so all of the characters are readable in a line, or is the whole thing just too involved?
Oct 28 '08 #3

acoder
Expert Mod 15k+
P: 16,027
I think it is, though I haven't studied the code in detail.

Run the page and then inspect it in Firebug. You'll see that each div is a pixel of a character. It might be a bit difficult to spot, but it should begin with parts of an "A" towards the right.
Oct 29 '08 #4

Thekid
100+
P: 145
Ugh....I see what you're saying. Oh well....back to the drawing board.
Oct 29 '08 #5

Post your reply

Sign in to post your reply or Sign up for a free account.