โหลดภาพในตัวอย่างสแต็กนี้แล้วเลื่อนเมาส์ไปวางเหนือภาพ เส้นโค้งสีดำที่ตามมุมสีเริ่มต้นที่จุดเคอร์เซอร์ของคุณจะถูกวาด:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><style>canvas{border:1px solid black;}</style>Load an image: <input type='file' onchange='load(this)'><br><br>Max length <input id='length' type='text' value='300'><br><br><div id='coords'></div><br><canvas id='c' width='100' height='100'>Your browser doesn't support the HTML5 canvas tag.</canvas><script>function load(t){if(t.files&&t.files[0]){var e=new FileReader;e.onload=setupImage,e.readAsDataURL(t.files[0])}}function setupImage(t){function e(t){t.attr("width",img.width),t.attr("height",img.height);var e=t[0].getContext("2d");return e.drawImage(img,0,0),e}img=$("<img>").attr("src",t.target.result)[0],ctx=e($("#c")),ctxRead=e($("<canvas>"))}function findPos(t){var e=0,a=0;if(t.offsetParent){do e+=t.offsetLeft,a+=t.offsetTop;while(t=t.offsetParent);return{x:e,y:a}}return void 0}$("#c").mousemove(function(t){function e(t,e){var a=ctxRead.getImageData(t,e,1,1).data,i=a[0]/255,r=a[1]/255,o=a[2]/255;return Math.atan2(Math.sqrt(3)*(r-o),2*i-r-o)}if("undefined"!=typeof img){var a=findPos(this),i=t.pageX-a.x,r=t.pageY-a.y;$("#coords").html("x = "+i.toString()+", y = "+r.toString());var o=parseInt($("#length").val());if(isNaN(o))return void alert("Bad max length!");for(var n=[i],f=[r],h=0;n[h]>=0&&n[h]<this.width&&f[h]>=0&&f[h]<this.height&&o>h;)n.push(n[h]+Math.cos(e(n[h],f[h]))),f.push(f[h]-Math.sin(e(n[h],f[h]))),h++;ctx.clearRect(0,0,this.width,this.height),ctx.drawImage(img,0,0);for(var h=0;h<n.length;h++)ctx.fillRect(Math.floor(n[h]),Math.floor(f[h]),1,1)}});</script>
ฉันได้ทดสอบตัวอย่างนี้ใน Google Chrome เท่านั้น
ตัวอย่างเช่นเมื่อเคอร์เซอร์อยู่เหนือสีแดงเส้นโค้งจะมีความลาดเอียง 0 ° แต่เมื่ออยู่เหนือสีเหลืองมันจะมีความชัน 60 ° เส้นโค้งยังคงดำเนินต่อไปตามความยาวที่ระบุเปลี่ยนความชันของมันอย่างต่อเนื่องเพื่อให้เข้ากับสี
โหลดภาพนี้และเมื่อคุณเลื่อนเคอร์เซอร์ไปที่อื่นเส้นที่อยู่รอบเคอร์เซอร์ควรหมุนตามเข็มนาฬิกาจนสุด:
นี้และนี้เป็นภาพระเบียบอื่น ๆ ที่จะลอง (คุณจะต้องบันทึกพวกเขาแล้วโหลดด้วยข้อมูลโค้ดพวกเขาไม่สามารถเชื่อมโยงโดยตรงเนื่องจากข้อ จำกัด ข้ามที่มา)
นี่คือตัวอย่างข้อมูลย่อ:
ท้าทาย
เขียนโปรแกรมที่ทำในส่วนของ snippet แต่ไม่สามารถโต้ตอบได้ ถ่ายภาพและพิกัด (x, y) ในขอบเขตของภาพและความยาวโค้งสูงสุด เอาท์พุทภาพเดียวกันกับเส้นโค้งสีดำที่เพิ่มเข้ามาซึ่งเป็นไปตามมุมสีที่เริ่มต้นที่ (x, y) และสิ้นสุดลงเมื่อถึงความยาวสูงสุดหรือกระทบกับขอบภาพ
โดยเฉพาะเริ่มโค้งที่ (x, y) และวัดมุมสีที่มี ไปหนึ่งหน่วย (กว้างหนึ่งพิกเซล) ในทิศทางที่สังเกตว่าตำแหน่งใหม่ของคุณได้มากที่สุดไม่เป็นจำนวนเต็มประสานงาน ทำเครื่องหมายจุดอื่นบนเส้นโค้งแล้วเคลื่อนที่อีกครั้งโดยใช้เฉดสีจากพิกเซลที่อยู่ใกล้ที่สุด (ใช้บางอย่างเช่นfloor
หรือround
ฉันจะไม่ตรวจสอบสิ่งนี้อย่างแม่นยำ) ทำต่อไปเช่นนี้จนกว่าเส้นโค้งจะโค้งหรือเกินความยาวสูงสุด เมื่อต้องการเสร็จสิ้นให้พล็อตจุดโค้งทั้งหมดเป็นพิกเซลสีดำ (อีกครั้งใช้พิกเซลที่ใกล้ที่สุด) ซ้อนทับบนภาพและส่งภาพใหม่นี้
"มุมสี" เป็นเพียงเฉดสี :
hue = atan2(sqrt(3) * (G - B), 2 * R - G - B)
โปรดทราบว่าสำหรับค่าระดับสีเทาที่ไม่มีเทคนิคสีจะส่งคืนค่า 0 แต่ไม่เป็นไร
(สูตรนี้ใช้atan2
ว่าไลบรารีคณิตศาสตร์ในตัวส่วนใหญ่มี R, G, B มาจาก 0 ถึง 1 ไม่ใช่ 0 ถึง 255)
- คุณสามารถใช้รูปแบบไฟล์ภาพ lossless ทั่วไปเช่นเดียวกับห้องสมุดภาพใด ๆ
- รับอินพุตจาก stdin หรือบรรทัดคำสั่งหรือเขียนฟังก์ชันพร้อมอาร์กิวเมนต์สำหรับชื่อไฟล์รูปภาพ x และ y และความยาวสูงสุด
- ความยาวสูงสุดและ x และ y เป็นจำนวนเต็มที่ไม่ใช่ค่าลบเสมอ คุณสามารถสมมติว่า x และ y อยู่ในช่วง
- บันทึกภาพที่ส่งออกด้วยชื่อที่คุณเลือกหรือเพียงแค่แสดงมัน
- การใช้งานของคุณไม่จำเป็นต้องตรงกับตัวอย่างทั้งหมด พิกเซลบางจุดในสถานที่ที่แตกต่างกันเล็กน้อยเนื่องจากวิธีการปัดเศษ / การคำนวณที่แตกต่างกันเล็กน้อยนั้นใช้ได้ (ในกรณีที่ยุ่งเหยิงสิ่งนี้อาจนำไปสู่ส่วนโค้งที่แตกต่างกันอย่างมาก แต่ตราบใดที่พวกเขามองเห็นถูกต้องมันก็ใช้ได้)
เกณฑ์การให้คะแนน
การส่งที่น้อยที่สุดในหน่วยไบต์ชนะ