Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	DoDraw 0.0.0
ID	5346446967914496
Created	4 years ago, 1596564251979
Updated	4 years ago, 1597881845443
Code	<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DoDraw 0.0.0</title> <style> nav { background-color:green; } nav:hover { background-color:green; } nav button { text-decoration: none; font: normal 13px monospace; color: blue; background-color:lightblue; padding: 6px; border-radius: 3px; border: ridge white 3px; margin: 2px; } nav button:hover { border-style: outset; } nav button:active { border-style: inset; } #tools { padding: 1px; border-radius: 6px; border: ridge white 2px; position: fixed; top: 5px; left: 5px; z-index: 2; } #canvas-container { z-index: 1; position: absolute; top: 0px; left: -1px; padding: 0px; margin: 0px; width: 100%; height: 100%; overflow: hidden; } #tool-size { background-color: green; width: 36px; border: ridge white 2px; } .dropbtn { background-color: #4CAF50; color: white; padding: 2px; font-size: 16px; border: none; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: grey; z-index: 1; border: ridge white 4px; padding: 0.05in; } .dropdown-content a { color: black; padding: 3px 5px; text-decoration: none; opacity: .0; } .dropdown:hover .dropdown-content {display: block;} .dropdown:hover .dropbtn {background-color: #3e8e41;} .dropdown-content button { min-width: 3em; margin: 0; min-height: 1.8em; } </style> </head> <body> <script> // creates the tool variable so the buttons can use it var tool = 'pencil'; function Tool (newTool) { tool = newTool; } var toolSize = 20; function tool_size (size) { if (size === "reset") { if (toolSize === markerSize) { document.getElementById('tool-size').value = 2; } } else { document.getElementById('tool-size').value = size; } } var markerSize = toolSize/2; var toolColor = [0,0,0]; </script> <!--the tool bar--> <nav id="tools"> <button onclick="Tool('pencil'); tool_size('reset');">Pencil</button> <button onclick="Tool('brush'); tool_size('reset');">Brush</button> <button onclick="Tool('marker'); tool_size(markerSize);">Marker</button> <span style="padding: 5px; background-color: #e00; border-radius: 3px; border-width: 2px; border-style: ridge; font-size: 10px;">Tool Size:</span> <input type='number' id='tool-size' value="20" max="999" /> <span class="dropdown"> <button class="dropbtn">Color</button> <span class="dropdown-content"> <pre><button onclick="toolColor = [0,0,0];" style="background-color:black;"></button><button onclick="toolColor = [255,255,255];" style="background-color:white;"></button> <button onclick="toolColor = [0,100,0];" style="background-color:green;"></button><button onclick="toolColor = [0,0,255];" style="background-color:blue;"></button> <button onclick="toolColor = [250,250,0];" style="background-color:yellow;"></button><button onclick="toolColor = [250,160,0];" style="background-color:rgb(250 160 0);"></button> <button onclick="toolColor = [250,0,0];" style="background-color:red;"></button><button onclick="toolColor = [150,0,160];" style="background-color:purple;"></button> </pre> </span> </span> </nav> <!--canvas container--> <p align="center" id="canvas-container"> <!--This draws the Canvas on the webpage --> <canvas id="mycanvas"></canvas> </p> </body> <!--Pjs--> <script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script> <script> var sketchProc = function(processingInstance) { with (processingInstance) { size(innerWidth, innerHeight); //creates a smilie face in the upper right corner function drawSmile () { // yellow ellipse fill(255, 255, 0); strokeWeight(1); ellipse(width0.94, height0.07, height0.10, height0.10); // mouth noFill(); stroke(0, 0, 0); strokeWeight(2); arc(width0.94, height0.08, height0.06, height0.04, 0, PI); var eyeSize = 0.005; //eyes fill(0, 0, 0); ellipse(width0.928, height0.075, heighteyeSize, heighteyeSize); ellipse(width0.952, height0.075, heighteyeSize, heighteyeSize); //nose ellipse(width0.94, height0.077, heighteyeSize3, heighteyeSize3); } function draw () { cursor(CROSS); toolSize = document.getElementById('tool-size').value; fill(150,50,0); strokeWeight(2); rect(width0.90,height0.009,height0.12,height*0.12,-4) if (tool === "marker") { markerSize = toolSize; } drawSmile(); } mouseDragged = function() { if (tool === "pencil") { strokeWeight(toolSize/10); stroke(toolColor[0],toolColor[1],toolColor[2]); line(mouseX,mouseY,pmouseX,pmouseY); }else if (tool === "brush") { strokeWeight(1); noStroke(); fill(toolColor[0],toolColor[1],toolColor[2]); ellipse(mouseX,mouseY,toolSize,toolSize); }else if (tool === "marker") { strokeWeight(1); noStroke(); fill(toolColor[0],toolColor[1],toolColor[2],25); rect(mouseX-toolSize/2,mouseY-toolSize/2,toolSize,toolSize); rect(pmouseX-toolSize/2,pmouseY-toolSize/2,toolSize,toolSize); } } setInterval(function () {draw();},50); }}; // Get the canvas that Processing-js will use var canvas = document.getElementById("mycanvas"); // Pass the function sketchProc (defined in myCode.js) to Processing's constructor. var processingInstance = new Processing(canvas, sketchProc); </script> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNWCi9K_CQw
Votes	10
Spin-Offs	1
Type	WEBPAGE
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	true
By Child	false
Author Nick	Shipment22
Author Name	shipment22
Author ID	kaid_129428899791640004323186
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1708469920489
Updated	10 months ago, 1708469920489
Source Deleted	unknown