Difference between revisions of "DynamicImages3"

From WeBWorK_wiki
Jump to navigation Jump to search
(added historical tag and gave updated problem link)
 
(14 intermediate revisions by 2 users not shown)
Line 1: Line 1:
  +
{{historical}}
  +
  +
<p style="font-size: 120%;font-weight:bold">This problem has been replaced with [https://openwebwork.github.io/pg-docs/sample-problems/Misc/DynamicGraphPolygon.html a newer version of this problem]</p>
 
<h2>Dynamic Graphic Images, with Filled Regions</h2>
  
<h2>Dynamic Graphic Images, with Filled Regions</h2>
   
Line 36: Line 39:
 
<p>
  
<p>
 
<b>Initialization:</b>
  
<b>Initialization:</b>
−
To do ..(what you are doing)........., we don't have to change the
 
  +
We need to include the macro file <code>PGgraphmacros.pl</code>.
−
tagging and documentation section of the problem file.
 
−
In the initialization section, we need to include the macros file <code>-------.pl</code>.
  
 
</p>
  
</p>
 
</td>
  
</td>
Line 48: Line 49:
 
<td style="background-color:#ffffdd;border:black 1px dashed;">
  
<td style="background-color:#ffffdd;border:black 1px dashed;">
 
<pre>
  
<pre>
  +
foreach my $i (0..2) {
  +
$gr[$i] = init_graph(-5,-5,5,5,grid=>[10,10],axes=>[0,0],pixels=>[400,400]);
  +
$gr[$i]->lb('reset');
  +
foreach my $j (1..4) {
  +
$gr[$i]->lb( new Label(-4.7, $j, $j,'black','center','middle'));
  +
$gr[$i]->lb( new Label(-4.7, -$j,-$j,'black','center','middle'));
  +
$gr[$i]->lb( new Label( $j,-4.7, $j,'black','center','middle'));
  +
$gr[$i]->lb( new Label( -$j,-4.7,-$j,'black','center','middle'));
  +
}
  +
$gr[$i]->lb( new Label(4.7,0.2,'x','black','center','middle'));
  +
$gr[$i]->lb( new Label(0.2,4.7,'y','black','center','middle'));
  +
$gr[$i]->new_color("lightblue", 214,230,244); # RGB
  +
$gr[$i]->new_color("darkblue", 100,100,255);
  +
$gr[$i]->new_color("lightgreen",156,215,151);
  +
$gr[$i]->new_color("darkgreen", 0, 86, 34);
  +
$gr[$i]->new_color("lightred", 245,234,229); # light red-purple
  +
$gr[$i]->new_color("darkred", 159, 64, 16); # red-brown
  +
$gr[$i]->new_color("nicegreen", 0,110, 0);
  +
}
   
  +
  +
  +
#
  +
# Filled triangle with dark border
  +
#
  +
# Note: we could fill in any polygon by adding more sides
  +
#
 
$xmin = random(-3,-1,1);
  
$xmin = random(-3,-1,1);
 
$xmax = random(1,3,1);
  
$xmax = random(1,3,1);
−  
 
$ymin = random(-3,-1,1);
  
$ymin = random(-3,-1,1);
 
$ymax = random(1,3,1);
  
$ymax = random(1,3,1);
  +
$gr[0]->moveTo($xmin,$ymin);
  +
$gr[0]->lineTo($xmax,$ymin,"darkgreen",2); # bottom edge
  +
$gr[0]->lineTo($xmin,$ymax,"darkgreen",2); # hypotenuse
  +
$gr[0]->lineTo($xmin,$ymin,"darkgreen",2); # left edge
  +
$gr[0]->fillRegion([$xmin+0.1,$ymin+0.1,"lightgreen"]);
   
−
# filled triangle with dark border
  
−
$gr1 = init_graph(-4,-4,4,4,grid=>[8,8],axes=>[0,0],pixels=>[300,300]);
  
−
$gr1->new_color("lightgreen",156,215,151); # RGB
  
−
$gr1->new_color("darkgreen", 0, 86, 34);
  
−
$gr1->moveTo($xmin,$ymin);
  
−
$gr1->lineTo($xmax,$ymin,"darkgreen",2); # bottom edge
  
−
$gr1->lineTo($xmin,$ymax,"darkgreen",2); # hypotenuse
  
−
$gr1->lineTo($xmin,$ymin,"darkgreen",2); # left edge
  
−
$gr1->fillRegion([$xmin+0.1,$ymin+0.1,"lightgreen"]);
  
   
−
# filled rectangle with dark border
  
  +
#
−
$gr2 = init_graph(-4,-4,4,4,grid=>[8,8],axes=>[0,0],pixels=>[300,300]);
  
  +
# Integral as area under the curve example
−
$gr2->new_color("lightblue",148,201,255);
  
  +
#
−
$gr2->new_color("darkblue", 100,100,255);
  
  +
add_functions($gr[1],
−
$gr2->im->filledRectangle($xmin,$ymin,$xmax,$ymax,"lightblue");
  
  +
"sqrt(x)+1 for x in <0,5> using color:darkblue and weight:2");
−
$gr2->im->rectangle($xmin,$ymin,$xmax,$ymax,"darkblue");
  
  +
$gr[1]->moveTo(1,2);
  +
$gr[1]->lineTo(1,0,"darkblue",2);
  +
$gr[1]->lineTo(4,0,"darkblue",2);
  +
$gr[1]->lineTo(4,3,"darkblue",2);
  +
$gr[1]->fillRegion([1.1,0.1,"lightblue"]);
  +
  +
  +
  +
#
  +
# A filled in circle
  +
#
  +
add_functions($gr[2],
  +
" sqrt(4-x^2) for x in <-2,2> using color:darkred and weight:2",
  +
"-sqrt(4-x^2) for x in <-2,2> using color:darkred and weight:2"
  +
);
  +
$gr[2]->fillRegion([0.1,0.1,"lightred"]);
 
</pre>
  
</pre>
 
</td>
  
</td>
Line 76: Line 113:
 
<p>
  
<p>
 
<b>Setup:</b>
 
<b>Setup:</b>
−
We specify that the Context should be <code>......</code>, and define the answer to be a formula.
 
  +
To use the <code>fillRegion</code> feature, we must first create a region enclosed by one particular color (like darkgreen or darkblue in the examples), then choose a point inside that closed region and a color to fill with (like lightgreen or lightblue in the examples). The fill feature will expand from the chosen point until it comes to the color that bounds the region (like darkgreen or darkblue), and it will cross solid lines of other colors, such as black coordinate axes, to do so.
 
</p>
  
</p>
 
<p>
  
<p>
−
Notes: on using this and related Contexts.
  
  +
The examples to the left use the features provided by <code>WWPlot.pm</code>, which is part of the base code of WeBWorK. The perl code used to create these graphs, <code>GD.pm</code>, is the engine used by <code>WWPlot.pm</code>. The features provided by <code>WWPlot.pm</code> are very accessible and easy to use (for example, you specify everything in terms of coordinates on the graph, and WWPlot.pm translates all of your commands into pixel coordinates on the image file that is generated). Sometimes, though, you may want to access features provided by <code>GD.pm</code> directly or need a feature not currently provided by <code>WWPlot.pm</code>. Below, we give a few examples of how to access features of <code>GD.pm</code> directly via the <code>-&gt;im-&gt;</code> command, and how to convert from graph coordinates to pixel coordinates on the image file via the x-coordinate to pixel converter <code>ii()</code> and the y-coordinate to pixel converter <code>jj()</code>.
  +
</p>
  +
<p>
  +
<pre>
  +
# filled rectangle with dark border
  +
# uses some macros directly from GD.pm
  +
#
  +
$gr2 = init_graph(-4,-4,4,4,grid=>[8,8],axes=>[0,0],pixels=>[300,300]);
  +
$lightblue = $gr2->im->colorAllocate(148,201,255);
  +
$darkblue = $gr2->im->colorAllocate(100,100,255);
  +
#
  +
# translate from graph coordinates to pixel coordinates
  +
#
  +
$xminpixel = $gr2->ii($xmin);
  +
$xmaxpixel = $gr2->ii($xmax);
  +
$yminpixel = $gr2->jj($ymin);
  +
$ymaxpixel = $gr2->jj($ymax);
  +
#
  +
# use filledRectangle and rectangle from GD.pm, accessed via ->im->
  +
#
  +
$gr2->im->filledRectangle($xminpixel,$yminpixel,$xmaxpixel,$ymaxpixel,$lightblue);
  +
$gr2->im->rectangle($xminpixel,$yminpixel,$xmaxpixel,$ymaxpixel,$darkblue);
  +
  +
  +
  +
################
  +
# Graph
  +
#
  +
# filled circle with dark border
  +
# uses some macros directly from GD.pm
  +
#
  +
$r = random(1,4,1); # radius
  +
  +
$gr3 = init_graph(-5,-5,5,5,grid=>[10,10],axes=>[0,0],pixels=>[400,400]);
  +
$gr3->lb('reset');
  +
foreach my $i (1..4) {
  +
$gr3->lb( new Label(-4.7,$i,$i,'black','center','middle'));
  +
$gr3->lb( new Label(-4.7,-$i,-$i,'black','center','middle'));
  +
$gr3->lb( new Label($i,-4.7,$i,'black','center','middle'));
  +
$gr3->lb( new Label(-$i,-4.7,-$i,'black','center','middle'));
  +
}
  +
$gr3->lb( new Label(4.7,0.2,'x','black','center','middle'));
  +
$gr3->lb( new Label(0.2,4.7,'y','black','center','middle'));
  +
  +
$lightblue = $gr3->im->colorAllocate(148,201,255);
  +
$darkblue = $gr3->im->colorAllocate(100,100,255);
  +
#
  +
# use arc() and fillToBorder() from GD.pm, accessed via ->im->
  +
#
  +
$cxpixel = $gr3->ii(0); # x-coordinate of center
  +
$cypixel = $gr3->jj(0); # x-coordinate of center
  +
$dxpixel = $gr3->ii($r) - $gr3->ii(-$r); # diameter of ellipse, x-direction
  +
$dypixel = $gr3->jj($r) - $gr3->jj(-$r); # diameter of ellipse, y-direction
  +
#
  +
# 0 to 360 are degrees
  +
$gr3->im->arc($cxpixel,$cypixel,$dxpixel,$dypixel,0,360,$darkblue);
  +
$gr3->im->fillToBorder($cxpixel,$cypixel,$darkblue,$lightblue);
  +
</pre>
 
</p>
  
</p>
   
Line 92: Line 186:
 
BEGIN_TEXT
  
BEGIN_TEXT
 
$BCENTER
  
$BCENTER
−
\{ image( insertGraph($gr1), height=>300, width=>300, tex_size=>800 ) \}
 +
\{ image( insertGraph($gr[0]), height=>400, width=>400, tex_size=>800 ) \}
−
$ECENTER
  
 
$PAR
  
$PAR
−
$BCENTER
  
  +
\{ image( insertGraph($gr[1]), height=>400, width=>400, tex_size=>800 ) \}
−
\{ image( insertGraph($gr2), height=>300, width=>300, tex_size=>800 ) \}
  
  +
$PAR
  +
\{ image( insertGraph($gr[2]), height=>400, width=>400, tex_size=>800 ) \}
 
$ECENTER
  
$ECENTER
 
END_TEXT
  
END_TEXT
Line 129: Line 224:
 
[[IndexOfProblemTechniques|Problem Techniques Index]]
  
[[IndexOfProblemTechniques|Problem Techniques Index]]
 
</p>
  
</p>
  +
  +
  +
  +
<ul>
  +
<li>POD documentation: [http://webwork.maa.org/pod/pg/macros/PGgraphmacros.html PGgraphmacros.pl]</li>
  +
<li>PG macro: [http://webwork.maa.org/viewvc/system/trunk/pg/macros/PGgraphmacros.pl?view=log PGgraphmacros.pl]</li>
  +
</ul>
  +
  +
  +
<ul>
  +
<li>POD documentation: [http://webwork.maa.org/pod/pg/lib/WWPlot.html WWPlot.pm]</li>
  +
<li>PG library file: [http://webwork.maa.org/viewvc/system/trunk/pg/lib/WWPlot.pm?view=log WWPlot.pm]</li>
  +
</ul>
   
 
[[Category:Problem Techniques]]
  
[[Category:Problem Techniques]]

Latest revision as of 09:44, 29 June 2023

This article has been retained as a historical document. It is not up-to-date and the formatting may be lacking. Use the information herein with caution.

This problem has been replaced with a newer version of this problem

Dynamic Graphic Images, with Filled Regions


This code snippet shows the essential PG code to check student answers that are equations. Note that these are insertions, not a complete PG file. This code will have to be incorporated into the problem file on which you are working.

Problem Techniques Index

PG problem file Explanation 
DOCUMENT();
loadMacros(
"PGstandard.pl",
"PGgraphmacros.pl",
# "PGnumericalmacros.pl", # might be useful
);

TEXT(beginproblem());

Initialization: We need to include the macro file PGgraphmacros.pl. 

foreach my $i (0..2) {
  $gr[$i] = init_graph(-5,-5,5,5,grid=>[10,10],axes=>[0,0],pixels=>[400,400]);
  $gr[$i]->lb('reset');
  foreach my $j (1..4) {
    $gr[$i]->lb( new Label(-4.7,  $j, $j,'black','center','middle'));
    $gr[$i]->lb( new Label(-4.7, -$j,-$j,'black','center','middle'));
    $gr[$i]->lb( new Label(  $j,-4.7, $j,'black','center','middle'));
    $gr[$i]->lb( new Label( -$j,-4.7,-$j,'black','center','middle'));
  }
  $gr[$i]->lb( new Label(4.7,0.2,'x','black','center','middle'));
  $gr[$i]->lb( new Label(0.2,4.7,'y','black','center','middle'));
  $gr[$i]->new_color("lightblue", 214,230,244); # RGB
  $gr[$i]->new_color("darkblue",  100,100,255);
  $gr[$i]->new_color("lightgreen",156,215,151); 
  $gr[$i]->new_color("darkgreen",   0, 86, 34);
  $gr[$i]->new_color("lightred",  245,234,229); # light red-purple
  $gr[$i]->new_color("darkred",   159, 64, 16); # red-brown
  $gr[$i]->new_color("nicegreen",   0,110,  0);
}



#
#  Filled triangle with dark border
#  
#  Note: we could fill in any polygon by adding more sides
#
$xmin = random(-3,-1,1);
$xmax = random(1,3,1);
$ymin = random(-3,-1,1);
$ymax = random(1,3,1);
$gr[0]->moveTo($xmin,$ymin);
$gr[0]->lineTo($xmax,$ymin,"darkgreen",2); # bottom edge
$gr[0]->lineTo($xmin,$ymax,"darkgreen",2); # hypotenuse
$gr[0]->lineTo($xmin,$ymin,"darkgreen",2); # left edge
$gr[0]->fillRegion([$xmin+0.1,$ymin+0.1,"lightgreen"]);


#
#  Integral as area under the curve example
#
add_functions($gr[1],
"sqrt(x)+1  for x in <0,5> using color:darkblue and weight:2");
$gr[1]->moveTo(1,2);
$gr[1]->lineTo(1,0,"darkblue",2);
$gr[1]->lineTo(4,0,"darkblue",2);
$gr[1]->lineTo(4,3,"darkblue",2);
$gr[1]->fillRegion([1.1,0.1,"lightblue"]);



#
#  A filled in circle
#  
add_functions($gr[2],
" sqrt(4-x^2) for x in <-2,2> using color:darkred and weight:2",
"-sqrt(4-x^2) for x in <-2,2> using color:darkred and weight:2"
);
$gr[2]->fillRegion([0.1,0.1,"lightred"]);

Setup: To use the fillRegion feature, we must first create a region enclosed by one particular color (like darkgreen or darkblue in the examples), then choose a point inside that closed region and a color to fill with (like lightgreen or lightblue in the examples). The fill feature will expand from the chosen point until it comes to the color that bounds the region (like darkgreen or darkblue), and it will cross solid lines of other colors, such as black coordinate axes, to do so.

The examples to the left use the features provided by WWPlot.pm, which is part of the base code of WeBWorK. The perl code used to create these graphs, GD.pm, is the engine used by WWPlot.pm. The features provided by WWPlot.pm are very accessible and easy to use (for example, you specify everything in terms of coordinates on the graph, and WWPlot.pm translates all of your commands into pixel coordinates on the image file that is generated). Sometimes, though, you may want to access features provided by GD.pm directly or need a feature not currently provided by WWPlot.pm. Below, we give a few examples of how to access features of GD.pm directly via the ->im-> command, and how to convert from graph coordinates to pixel coordinates on the image file via the x-coordinate to pixel converter ii() and the y-coordinate to pixel converter jj(). 

#  filled rectangle with dark border
#  uses some macros directly from GD.pm
#
$gr2 = init_graph(-4,-4,4,4,grid=>[8,8],axes=>[0,0],pixels=>[300,300]);
$lightblue = $gr2->im->colorAllocate(148,201,255);
$darkblue  = $gr2->im->colorAllocate(100,100,255);
#
#  translate from graph coordinates to pixel coordinates
#
$xminpixel = $gr2->ii($xmin);
$xmaxpixel = $gr2->ii($xmax);
$yminpixel = $gr2->jj($ymin);
$ymaxpixel = $gr2->jj($ymax);
# 
#  use filledRectangle and rectangle from GD.pm, accessed via ->im-> 
#
$gr2->im->filledRectangle($xminpixel,$yminpixel,$xmaxpixel,$ymaxpixel,$lightblue);
$gr2->im->rectangle($xminpixel,$yminpixel,$xmaxpixel,$ymaxpixel,$darkblue);



################
#  Graph
#
#  filled circle with dark border
#  uses some macros directly from GD.pm
#
$r = random(1,4,1); # radius

$gr3 = init_graph(-5,-5,5,5,grid=>[10,10],axes=>[0,0],pixels=>[400,400]);
$gr3->lb('reset');
foreach my $i (1..4) {
  $gr3->lb( new Label(-4.7,$i,$i,'black','center','middle'));
  $gr3->lb( new Label(-4.7,-$i,-$i,'black','center','middle'));
  $gr3->lb( new Label($i,-4.7,$i,'black','center','middle'));
  $gr3->lb( new Label(-$i,-4.7,-$i,'black','center','middle'));
}
$gr3->lb( new Label(4.7,0.2,'x','black','center','middle'));
$gr3->lb( new Label(0.2,4.7,'y','black','center','middle'));

$lightblue = $gr3->im->colorAllocate(148,201,255);
$darkblue  = $gr3->im->colorAllocate(100,100,255);
# 
#  use arc() and fillToBorder() from GD.pm, accessed via ->im-> 
#
$cxpixel = $gr3->ii(0); # x-coordinate of center
$cypixel = $gr3->jj(0); # x-coordinate of center
$dxpixel = $gr3->ii($r) - $gr3->ii(-$r); # diameter of ellipse, x-direction
$dypixel = $gr3->jj($r) - $gr3->jj(-$r); # diameter of ellipse, y-direction
#
# 0 to 360 are degrees
$gr3->im->arc($cxpixel,$cypixel,$dxpixel,$dypixel,0,360,$darkblue);
$gr3->im->fillToBorder($cxpixel,$cypixel,$darkblue,$lightblue);


BEGIN_TEXT
$BCENTER
\{ image( insertGraph($gr[0]), height=>400, width=>400, tex_size=>800 ) \}
$PAR
\{ image( insertGraph($gr[1]), height=>400, width=>400, tex_size=>800 ) \}
$PAR
\{ image( insertGraph($gr[2]), height=>400, width=>400, tex_size=>800 ) \}
$ECENTER
END_TEXT

Main Text: The problem text section of the file is as we'd expect. 


$showPartialCorrectAnswers = 1;

ENDDOCUMENT();

Answer Evaluation: As is the answer.

Problem Techniques Index



Retrieved from "https://webwork.maa.org/mediawiki_new/index.php?title=DynamicImages3&oldid=23681"