SHARE
TWEET

Untitled

a guest Nov 20th, 2019 79 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2. <!--
  3. This page draws random art using different shapes.
  4. The art is drawn using HTML Canvas2D.
  5. An HTML form is used to tell the canvas what shapes to draw.
  6. -->
  7.  
  8. <html>
  9.  
  10. <head>
  11.     <title>Lab 8 Random Art Generator</title>
  12. </head>
  13.  
  14. <body bgcolor="white">
  15.  
  16.     <h1 align="center">Random Art Generator</h1>
  17.     <hr>
  18.  
  19.     <script type="text/javascript">
  20.         var numPics = 0;
  21.         var shapeToDraw = 4;            // Global variable accessible to all methods.  Stores the type of shape drawn.
  22.  
  23.         function draw() {   // Tell the canvas to draw a new picture and puts a comment in the text area under the picture.
  24.             numPics++;
  25.  
  26.             var message = "Picture: " + numPics + "\n";
  27.            
  28.             switch(shapeToDraw)
  29.             {
  30.                 case 1: message += "Lazy Lines"; break;
  31.                 case 2: message += "Crazy Circles"; break;
  32.                 case 3: message += "Random Rectangles"; break;
  33.                 case 4: message += "Random Surprise"; break;
  34.             }
  35.  
  36.             // This line adds whatever is in the hidden text box to the message.
  37.             // Note the "\n" to put a line break in the message.
  38.             message = message + "\nBy: " + myForm.hiddenSignature.value + "\n";
  39.            
  40.             message += myForm.comment.value;
  41.  
  42.  
  43.             // This line changes the comment under the picture to the message you generated.
  44.             commentForm.commentText.value = message;
  45.  
  46.             // These two lines tell the canvas to draw the picture.  DO NOT CHANGE!
  47.             changeHiddenText();
  48.             randomArtCanvas.repaint();  // Call to canvas
  49.         }
  50.  
  51.         function changeTimer() {    // Turns the timer on and off and sets the timer delay.
  52.             var timeDelay;
  53.  
  54.             if (myForm.timer.checked == 1 && myForm.timer.value != "") {
  55.                 try { timeDelay = parseInt(myForm.delay.value); }
  56.                 catch (ex) { timeDelay = -1 }
  57.             } else {
  58.                 timeDelay = -1;
  59.             }
  60.  
  61.             // This line sets the delay in the applet.  DO NOT CHANGE!
  62.             randomArtCanvas.setTimerDelay(timeDelay);   // Call to canvas
  63.         }
  64.  
  65.  
  66.         function changeHiddenText() {   // Sets the hidden message on the picture using the hidden text box.
  67.             var message = myForm.hiddenSignature.value;
  68.  
  69.  
  70.             // This line sets the message in the applet.  DO NOT CHANGE!
  71.             randomArtCanvas.setText(message);       // Call to canvas
  72.         }
  73.  
  74.         // DO NOT CHANGE THIS METHOD
  75.         function changeColor(bgcolor) { // Changes the background color
  76.             randomArtCanvas.setBackgroundColor(bgcolor); // Call to canvas
  77.         }
  78.  
  79.         // DO NOT CHANGE THIS METHOD
  80.         function changeShape(shape) {   // Changes the shape drawn
  81.             shapeToDraw = shape;    // This line sets the global variable that remembers what shape we are drawing.
  82.             randomArtCanvas.setShapeType(shape);    // Call to canvas
  83.         }
  84.     </script>
  85.  
  86.     <table align="center">
  87.         <tr>
  88.             <th>Picture Features</th>
  89.             <th>Your Masterpiece!</th>
  90.         </tr>
  91.  
  92.         <tr>
  93.             <td valign="top" width="350">
  94.  
  95.                 <form action="javascript:void(0);" name="myForm">
  96.  
  97.                     <b>Shape type:</b><br />
  98.                     <input type="radio" name="shapeType" value="1" checked onclick="changeShape(1)">Lines
  99.                     <input type="radio" name="shapeType" value="2" checked onclick="changeShape(2)">Circles
  100.                     <input type="radio" name="shapeType" value="3" checked onclick="changeShape(3)">Rectangles
  101.                     <input type="radio" name="shapeType" value="4" checked onclick="changeShape(4)">Random
  102.                     <br />
  103.                     <br />
  104.  
  105.                     <input type="checkbox" name="timer" onclick="changeTimer()">Use timer
  106.  
  107.  
  108.                     <i>Delay</i><input name="delay">
  109.  
  110.  
  111.                     <br />
  112.                     <br />
  113.  
  114.                     Background Color:
  115.                     <select name="bgcolor" onchange="changeColor(myForm.bgcolor.value)">
  116.                         <option value="#000000">Black</option>
  117.                         <option value="White">White</option>
  118.                         <option value="Grey">Grey</option>
  119.                         <option value="Yellow">Yellow</option>
  120.                     </select>
  121.                     <br /><br />
  122.  
  123.                     Hidden signature: <input type="password" name="hiddenSignature" length="10"> <br />
  124.  
  125.                     <br />
  126.                    
  127.                     Artist Comment:<br />
  128.                     <textarea rows="5" cols="30" name="comment"></textarea>
  129.  
  130.                     <br /><br />
  131.                    
  132.                     <button onclick="draw()">Draw!</button>
  133.                     <button type="reset">Reset</button>
  134.  
  135.                 </form>
  136.             </td>
  137.  
  138.             <!-- The rest of this code you can ignore.  It finishes the table and loads the canvas. -->
  139.             <td width="550">
  140.                 <table>
  141.                     <tr>
  142.                         <td>
  143.                             <!-- This is a Canvas element that can be drawn to. You do not need to edit this. -->
  144.                             <canvas id="randomArtCanvas" height="400" width="500"></canvas>
  145.                         </td>
  146.                     </tr>
  147.                     <tr>
  148.                         <td>
  149.                             <form name="commentForm">
  150.                                 <textarea rows="5" cols="60" name="commentText"></textarea>
  151.                             </form>
  152.                         </td>
  153.                     </tr>
  154.                 </table>
  155.             </td>
  156.         </tr>
  157.     </table>
  158.  
  159.     <!-- This is the script that handles drawing to the canvas. You do not need to edit anything here! -->
  160.     <!-- This is the script that handles drawing to the canvas. You do not need to edit anything here! -->
  161.     <script>
  162.         var randomArtCanvas;
  163.         window.onload = function () {
  164.             randomArtCanvas = new RandomArtCanvas();
  165.         }
  166.  
  167.         function RandomArtCanvas() {
  168.             this.text = "";
  169.             this.backgroundColor = "#000000";
  170.             this.shapeType = 4; //4 for random shape
  171.             this.delay = -1;
  172.             this.canvas = document.getElementById("randomArtCanvas");
  173.             this.ctx = this.canvas.getContext("2d");
  174.             this.width = this.canvas.width;
  175.             this.height = this.canvas.height;
  176.             this.drawIterations = 25;
  177.  
  178.             this.repaint = function () {
  179.                 //Draw Background
  180.                 this.ctx.fillStyle = this.backgroundColor;
  181.                 this.ctx.fillRect(0, 0, this.width, this.height);
  182.  
  183.                 //Check if random is set
  184.                 var shape;
  185.                 if (this.shapeType == 4) {
  186.                     shape = 1 + Math.floor(Math.random() * 3);
  187.                 } else {
  188.                     shape = this.shapeType;
  189.                 }
  190.  
  191.                 //Draw Shapes
  192.                 if (this.delay == -1) {
  193.                     for (let i = 0; i < this.drawIterations; i++) {
  194.                         this.drawShape(shape, 0, 1);
  195.                     }
  196.                     this.drawText();
  197.                 } else {
  198.                     this.drawShape(shape, 0, this.drawIterations);
  199.                 }
  200.             }
  201.  
  202.             this.drawText = function () {
  203.                 //Draw Text Shadow
  204.                 this.ctx.font = "20px Arial";
  205.                 this.ctx.fillStyle = "#000000";
  206.                 this.ctx.fillText(this.text, 25, 25);
  207.  
  208.                 //Draw Text
  209.                 this.ctx.font = "20px Arial";
  210.                 this.ctx.fillStyle = "#FFFFFF";
  211.                 this.ctx.fillText(this.text, 26, 26);
  212.             }
  213.  
  214.             this.drawShape = function (shape, i, max) {
  215.                 if (i < max) {
  216.                     switch (shape) {
  217.                         case 1:
  218.                             // Draw random line
  219.                             this.ctx.strokeStyle = "hsl(" + Math.floor(Math.random() * 255) + ", 100%, 50%)";
  220.                             this.ctx.lineWidth = 5;
  221.                             var x1 = Math.floor(Math.random() * this.width);
  222.                             var y1 = Math.floor(Math.random() * this.height);
  223.                             var x2 = Math.floor(Math.random() * this.width);
  224.                             var y2 = Math.floor(Math.random() * this.height);
  225.                             this.ctx.beginPath();
  226.                             this.ctx.moveTo(x1, y1);
  227.                             this.ctx.lineTo(x2, y2);
  228.                             this.ctx.stroke();
  229.                             break;
  230.                         case 2:
  231.                             //Draw random circle
  232.                             this.ctx.fillStyle = "hsl(" + Math.floor(Math.random() * 255) + ", 100%, 50%)";
  233.                             this.ctx.strokeStyle = "";
  234.                             var x = Math.floor(Math.random() * this.width);
  235.                             var y = Math.floor(Math.random() * this.height);
  236.                             var rx = Math.floor(Math.random() * (this.width - x) / 2);
  237.                             var ry = Math.floor(Math.random() * (this.height - y) / 2);
  238.                             this.ctx.beginPath();
  239.                             this.ctx.moveTo(x, y);
  240.                             this.ctx.ellipse(x, y, rx, ry, 0, 0, 2 * Math.PI);
  241.                             this.ctx.fill();
  242.                             break;
  243.                         case 3:
  244.                             // Draw random rectangle
  245.                             this.ctx.fillStyle = "hsl(" + Math.floor(Math.random() * 255) + ", 100%, 50%)";
  246.                             this.ctx.strokeStyle = "";
  247.                             var x = Math.floor(Math.random() * this.width);
  248.                             var y = Math.floor(Math.random() * this.height);
  249.                             var w = Math.floor(Math.random() * (this.width - x));
  250.                             var h = Math.floor(Math.random() * (this.height - y));
  251.                             this.ctx.fillRect(x, y, w, h);
  252.                             break;
  253.                     }
  254.                     // Delay each frame if set
  255.                     setTimeout(
  256.                         function () {
  257.                             randomArtCanvas.drawShape(shape, i + 1, max);
  258.                         },
  259.                         randomArtCanvas.delay
  260.                     );
  261.                 } else if (max > 1) {
  262.                     this.drawText();
  263.                 }
  264.             }
  265.  
  266.             this.setTimerDelay = function (delay) {
  267.                 if (!delay) {
  268.                     delay = -1;
  269.                 }
  270.                 this.delay = parseInt(delay);
  271.             }
  272.  
  273.             this.setShapeType = function (shape) {
  274.                 if (!shape) {
  275.                     console.error("No shape specified.");
  276.                     return;
  277.                 }
  278.                 if (shape < 1 || shape > 4) {
  279.                     console.error("Shape type does not exist.");
  280.                     return;
  281.                 }
  282.                 this.shapeType = shape;
  283.             }
  284.  
  285.             this.setBackgroundColor = function (color) {
  286.                 if (!color) color = "#FFFFFF";
  287.                 this.backgroundColor = color;
  288.             }
  289.  
  290.             this.setText = function (text) {
  291.                 if (!text) {
  292.                     text = "";
  293.                 } else if (typeof text !== "string") {
  294.                     text = "" + text;
  295.                 }
  296.                 this.text = text;
  297.             }
  298.         }
  299.     </script>
  300.  
  301. </body>
  302.  
  303. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top