Muat gambar ke potongan tumpukan ini dan gerakkan mouse Anda ke atasnya. Kurva hitam yang mengikuti sudut rona , mulai dari titik kursor Anda, akan ditarik:
<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>
Saya hanya menguji cuplikan ini di Google Chrome.
Misalnya, ketika kursor di atas merah, kurva memiliki kemiringan 0 °, tetapi ketika itu di atas kuning, ia memiliki kemiringan 60 °. Kurva berlanjut untuk panjang yang ditentukan, terus menerus mengubah kemiringannya agar sesuai dengan rona.
Memuat gambar ini dan ketika Anda menggeser kursor di atasnya, garis tepat di sekitar kursor harus melakukan putaran berlawanan arah jarum jam:
Ini dan ini adalah gambar rapi lainnya untuk dicoba. (Anda harus menyimpannya dan memuatnya dengan snippet. Mereka tidak dapat dihubungkan secara langsung karena kendala lintas-asal.)
Ini adalah versi cuplikan yang tidak diperkecil:
Tantangan
Tulis sebuah program yang melakukan apa yang snippet lakukan, hanya saja tidak secara interaktif. Ambil gambar dan koordinat (x, y) dalam batas gambar, dan panjang kurva maksimum. Keluarkan gambar yang sama dengan kurva hitam yang ditambahkan yang mengikuti sudut rona mulai dari (x, y) dan berakhir ketika mencapai panjang maksimum atau menyentuh batas gambar.
Secara khusus, mulailah kurva di (x, y) dan ukur sudut rona di sana. Pergi satu unit (lebar satu piksel) ke arah itu, perhatikan bahwa posisi baru Anda kemungkinan besar bukan koordinat bilangan bulat . Tandai titik lain pada kurva dan bergerak lagi, menggunakan rona dari piksel terdekat (menggunakan sesuatu seperti floor
atau round
, saya tidak akan memeriksa ini dengan tepat). Lanjutkan seperti ini sampai kurva melampaui batas atau melebihi panjang maksimum. Untuk menyelesaikan, plot semua titik kurva sebagai piksel hitam tunggal (sekali lagi, gunakan piksel terdekat) yang dilapis pada gambar, dan hasilkan gambar baru ini.
"Rona sudut" hanyalah rona :
hue = atan2(sqrt(3) * (G - B), 2 * R - G - B)
Perhatikan bahwa untuk nilai skala abu-abu yang secara teknis tidak memiliki rona, ini mengembalikan 0, tapi tidak masalah.
(Rumus ini menggunakan atan2
yang dimiliki sebagian besar perpustakaan matematika bawaan. R, G, B adalah dari 0 hingga 1, bukan 0 hingga 255.)
- Anda dapat menggunakan format file gambar lossless yang umum serta pustaka gambar apa pun.
- Ambil input dari stdin atau baris perintah, atau tulis fungsi dengan argumen untuk nama file gambar, x dan y, dan panjang maks.
- Panjang maks dan x dan y selalu bilangan bulat tidak negatif. Anda dapat menganggap x dan y berada dalam kisaran.
- Simpan gambar keluaran dengan nama pilihan Anda atau cukup tampilkan.
- Implementasi Anda tidak harus sama persis dengan cuplikan. Beberapa piksel di tempat yang sedikit berbeda karena metode pembulatan / perhitungan yang sedikit berbeda baik-baik saja. (Dalam kasus kacau ini dapat menyebabkan kurva yang berakhir sangat berbeda, tetapi selama mereka terlihat benar secara visual, itu baik-baik saja.)
Mencetak gol
Pengajuan terkecil dalam byte akan menang.
sumber
Jawaban:
MATLAB, 136
Menyalin sebagian besar pengaturan dan semacamnya dari @sanchises, tapi saya malah menggunakan
streamline
untuk menghitung dan menggambar path. Ini memang antialias garis, dan menggunakan interpolasi bilinear, bukan tetangga terdekat seperti yang ditentukan.sumber
C dengan SDL,
549516 byteSaya akan memulai pesta ini! Untuk beberapa alasan, saya ingin mencoba bermain golf malam ini. Apa yang kalian lakukan sulit ... Jika ada satu hal yang tidak saya lihat di situs ini, itu SDL. Saya mungkin baru tahu mengapa. Cuplikan khusus ini sesuai dengan SDL2 dan SDL1.2, tetapi mengerikan. Disebut seperti
f("imagename.bmp", xcoord, ycoord, max_length);
. Ini menyimpan file dengan nama yang sama seperti yang diberikan dalam argumen. Output tampaknya sangat mirip dengan potongan kode OP, tetapi "lebih fuzzier." Saya mungkin mencoba memperbaikinya sedikit kemudian.Di sini semuanya terurai:
Saya harus mencatat bahwa kehati-hatian diambil untuk membuatnya lintas platform - demi kepentingan kejujuran, rasanya tidak enak untuk meng-hardcode-nya untuk mesin saya, bahkan jika itu memotong sejumlah besar byte. Namun, saya merasa ada beberapa hal yang berlebihan di sini, dan saya akan melihatnya lagi nanti.
Sunting -------
Ini IS Keluaran Grafis, setelah semua ... Saya akan memperbarui dengan gambar yang menurut saya menarik secara berkala.
f("HueTest1.bmp", 270, 40, 200);
f("HueTest2.bmp", 50, 50, 200);
f("HueTest3.bmp", 400, 400, 300);
sumber
Python,
203172Output sampel:
Telepon dengan
f("image.jpg", 400, 400, 300)
Saya sudah membuang banyak karakter untuk impor, jika ada yang punya saran untuk memperbaikinya. Mungkin tidak berfungsi di 3.0
sumber
sqrt(3) -> 3**.5
? Saya tidak bisa memikirkan apa pun untuk impor.MATLAB,
186172Game ini aktif ! Sebutlah sebagai
t('YourImage.ext',123,456,100')
, untuk gambar jenis apa pun yang didukung MATLAB, mulai dari (x, y) = (123.456) dan panjang maksimum 100. Posisi awal tidak dapat persis di tepi kanan dan bawah (yang akan memakan biaya dua byte), jadi untuk mulai dari tepi, gunakan sesuatux=799.99
untuk memulaix=800
. Pengindeksan dimulai pada 1, bukan 0.Kode:
Revisi:
Masih menggunakanline
karena itu adalah kode terpendek yang saya tahu menghasilkan piksel.Mengubah warna dari hitam menjadi biru, gunakanCo
untuk memperluas keColor
(yang MATLAB tidak secara otomatis)sumber
x=0
atauy=0
berpotensi posisi yang valid?function
header. Spec tidak memerlukan pengindeksan berbasis nol atau satu, jadi saya menggunakan MATLAB berbasis satu, jadi tidak,x=0
atauy=0
tidak valid dalam program ini.x=X
dany=Y
valid saja?Memproses, 323 karakter
Dengan spasi putih:
Saya yakin saya bisa mempersingkat ini lebih jauh, tetapi itu bekerja untuk saat ini.
sumber
JavaScript 414
sumber