Making a diamond with number of stars that user inputs

digitalballoon · 10-26-2011, 01:25 AM

Hi,

I'm new here, and I'm a programming newb but am very interested in learning and possibly pursuing programming in the future.
As such, I'm taking an intro to Javascript class at my university, and our homework is to make a function that when called upon makes a diamond out of *'s. It is supposed to do so by prompting a user for an int and then makes a diamond shaped object with the inputted number of stars in the middle of the diamond.
an example of what this would look like (if a user entered in "5" to the prompt):
    * 
  *** 
***** 
  *** 
    * 

I am not sure how to set up this for loop, and have been trying so many different codes and have come nowhere close.

Any help or insight would be so much appreciated.

Old Pedant · 10-26-2011, 03:05 AM

you mean this?

Code:

  *
 ***
*****
 ***
  *

??

First of all read this:
http://www.codingforums.com/rules.htm
especially rule 1.5

If you make an honest effort--if you write some code, for example, that almost works but not quite--*THEN* we can help you. But no, we can't do your homework for you.

I will give you one hint:

Start your page with something like this:

Code:

<html>
<head>
<style type="text/css">
* { font-family: courier; }
</style>

If you use a proportional font (such as arial, used in these forums) you'll never get the spacing right. Even if you do (correctly!) use  

ueskim · 04-05-2012, 02:10 AM

I have to make a diamond in Javascript.. I have the odd case no problem But i am having a little trouble with the even case.. I am only going to post the top half of code cause the bottom is just a repeat.. I got it all but I can not figure how to get the one * on the very top middle

var input=10;

for (var topheight = input+1; topheight >= 1; topheight -= 2)
{
for (var space = 1; space <= topheight; space++)
{
document.write("&nbsp");
}
if (topheight % 2 != 0)
{
for (var asterisk = input; asterisk >= topheight; asterisk--)
{
document.write(" * ");
}
}
document.write (" ");
}

this will be with user input later but now i just hard coded a var input
thank you for any help

Philip M · 04-05-2012, 08:48 AM

I think you have made an effort, but you need to use <pre> tags for the spacing. Note the number of rows of asterisks in the diamond must be odd!
Here you are:-

Code:

<html> 
<head> 
<title>Diamond Pattern</title> 
</head> 
<body> 

<script type = "text/javascript">

function diamond(n) {
n = parseInt(n,10);
if (n% 2 == 0 )   {
alert( "Odd numbers only!" );
return false;
}

document.write("<pre>");

// top
for(i=1; i<=n; i+=2) {
for (s=0; s<(n-i/2-n/2); s++) { // -n/2 positions diamond pattern at left hand edge of page
document.write(" ");
}
for (j=1; j<=i; j++) {
document.write("*");
}
document.write("<br>")
}

// bottom
for (i=n-2; i>=0; i=i-2) {
for (s=0; s<(n-i/2-n/2); s++) {
document.write(" ");
}
for (j=1; j<=i; j++) {
document.write("*");
}
document.write("<br>")
}

document.write("</pre>");
}

diamond(7);

</script>

</body> 
</html>

"In the beginner's mind there are many possibilities, but in the expert's mind there are few” - Shunryu Suzuki (Japanese Zen priest, ?-1971)

ueskim · 04-05-2012, 12:40 PM

Thank you.. I have the odd case.. we have to write an even case so it would look like this

*
* *
* * * *
* * * * * *
* * * * * * * *
* * * * * *
* * * *
* *
*

i am doing the input check in another function so that I have an even case function and an odd case function I can call later

sorry I am not sure how to maintain the shape of the diamond on the post it keeps taking away my spaces..

Philip M · 04-05-2012, 03:50 PM

I don't see how you can have a true diamond which you describe as even case. It requires the single asterisk at the top to be output to a position between the two below it.

ueskim · 04-05-2012, 06:17 PM

Yes not sure they call it true diamond but that is what they want. I am just having trouble finding a way to get the single one on top and bottom but once i figure out the top the bottom will be no problem..

thank you for all your help

Philip M · 04-05-2012, 06:40 PM

I would check your assignment, as I think it is impossible. The number of rows of asterisks making up the diamond must be odd!

What you could do is repeat the middle line of the diamond thus making the number of rows even (but it is then not truly a diamond). In the above code

Code:

// bottom
for (i=n; i>=0; i=i-2) {

Old Pedant · 04-06-2012, 02:50 AM

HUH?

Easy:

Code:

     *
    * *
   * * *
  * * * *
 * * * * *
* * * * * *
 * * * * *
  * * * *
   * * *
    * *
     *

The "trick" is to just use spaces to make it look right. And then it looks essentially the same with odd number as even number.

Code:

    *
   * *
  * * *
 * * * *
* * * * *
 * * * *
  * * *
   * *
    *

Excepting for distortion, it looks the same sideways. If we used square images, we could make it look the same sideways.

NOW see if you can figure it out.

Old Pedant · 04-06-2012, 03:06 AM

Oh, w.t.h.

Code:

<script type = "text/javascript">
function diamond( n ) 
{
    n = parseInt(n,10);

    var i, s;

    // top: 1 to n
    document.write("<pre>");
    for(i = 1; i <= n; ++i )
    {
        // write n-i spaces:
        for ( s = 1; s <= n-i; ++s )
        {
            document.write(" ");
        }
        // then write i asterisk+space sets:
        for ( s = 1; s <= i; ++s )
        {
            document.write("* ");
        }
        document.write("\n");
    }
    // bottom: n-1 down to 1
    for(i = n-1; i >= 1; --i )
    {
        // write n-i spaces:
        for ( s = 1; s <= n-i; ++s )
        {
            document.write(" ");
        }
        // then write i asterisk+space sets:
        for ( s = 1; s <= i; ++s )
        {
            document.write("* ");
        }
        document.write("\n");
    }
    document.write("</pre>");
}
diamond(7);
document.write("<hr>\n");
diamond(10);

</script>

</body> 
</html>

Mishu · 04-06-2012, 03:10 AM

Quote:

Originally Posted by Philip M

I think it is impossible.

No it's not

In addition to old pedant's hint, you could use 2 spaces as a unit space so that the first star can be placed at 3.5 stars in his 6 star diamond.

Old Pedant · 04-06-2012, 03:12 AM

Or a more efficient way:

Code:

<script type = "text/javascript">
var spaces = " ";
var rows = "* ";
while( rows.length < 200 )
{
    spaces += spaces; // doubles length each time
    rows += rows; // ditto
}

function diamond( n ) 
{
    n = parseInt(n,10);

    var i, s;

    // top: 1 to n
    document.write("<pre>");
    for(i = 1; i <= n; ++i )
    {
        // write n-i spaces:
        document.write( spaces.substring(0,n-i) );

        // then write i asterisk+space sets:
        document.write( rows.substring(0,i+i) + "\n" );
    }
    // bottom: n-1 down to 1
    for(i = n-1; i >= 1; --i )
    {
        // write n-i spaces:
        document.write( spaces.substring(0,n-i) );

        // then write i asterisk+space sets:
        document.write( rows.substring(0,i+i) + "\n" );
    }
    document.write("</pre>");
}
diamond(9);
document.write("<hr>\n");
diamond(6);

</script>

</body> 
</html>

Mishu · 04-06-2012, 03:15 AM

Quote:

Originally Posted by ueskim

Yes not sure they call it true diamond but that is what they want. I am just having trouble finding a way to get the single one on top and bottom but once i figure out the top the bottom will be no problem..

There's a few examples on google as well. This is a common homework exercise.