একটি চিত্রের বর্ণমালা অনুসরণ করা

Question

এই স্ট্যাক স্নিপেটে একটি চিত্র লোড করুন এবং এটির উপরে আপনার মাউসটি সরান। আপনার কর্সার পয়েন্ট থেকে শুরু করে হিউ কোণ অনুসরণকারী একটি কালো বক্ররেখা অঙ্কিত হবে:

<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>

^{আমি কেবল গুগল ক্রোমে এই স্নিপেট পরীক্ষা করেছি।}

উদাহরণস্বরূপ, যখন কার্সারটি লালের উপরে থাকে, তখন বক্ররেখার 0 ° opeাল থাকে তবে এটি হলুদের ওপরে হলে এটিতে 60। .াল থাকে। বক্ররেখা নির্দিষ্ট দৈর্ঘ্যের জন্য অবিরত অব্যাহত থাকে, অবিচ্ছিন্নভাবে তার changingাল পরিবর্তন করে রঙের সাথে মেলে।

এই চিত্রটি লোড করুন এবং আপনি যখন কার্সারটি জুড়ে প্যান করেন, তখন কার্সারের চারপাশের লাইনটি পুরো ঘড়ির কাঁটার বিপরীতে ঘুরতে হবে:

এটি এবং এটি চেষ্টা করার জন্য অন্যান্য ঝরঝরে ছবি। (আপনাকে সেগুলি সংরক্ষণ করতে হবে এবং তারপরে এগুলি স্নিপেট দিয়ে লোড করতে হবে cross ক্রস-উত্স সীমাবদ্ধতার কারণে এগুলিকে সরাসরি সংযুক্ত করা যাবে না))

এখানে স্নিপেটের একটি নন-মিনিফাইড সংস্করণ:

function load(i) { //thanks http://jsfiddle.net/vacidesign/ja0tyj0f/
    if (i.files && i.files[0]) {
        var r = new FileReader()
        r.onload = setupImage
        r.readAsDataURL(i.files[0])
    }
}

function setupImage(e) {
    img = $('<img>').attr('src', e.target.result)[0]
    function setup(c) {
        c.attr('width', img.width)
        c.attr('height', img.height)
        var ctx = c[0].getContext('2d')
        ctx.drawImage(img, 0, 0)
        return ctx
    }
    ctx = setup($('#c'))
    ctxRead = setup($('<canvas>'))
}

function findPos(obj) {
    var curleft = 0, curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }
    return undefined;
}

$('#c').mousemove(function(e) { //thanks http://stackoverflow.com/a/6736135/3823976
    if (typeof img === 'undefined') return
    var pos = findPos(this)
    var x = e.pageX - pos.x
    var y = e.pageY - pos.y
    $('#coords').html('x = ' + x.toString() + ', y = ' + y.toString())
    var maxLength = parseInt($('#length').val())
    if (isNaN(maxLength)) {
        alert('Bad max length!')
        return
    }
    
    function hue(x, y) {
        var rgb = ctxRead.getImageData(x, y, 1, 1).data
        var r = rgb[0] / 255, g = rgb[1] / 255, b = rgb[2] / 255
        return Math.atan2(Math.sqrt(3) * (g - b), 2 * r - g - b)
    }
    
    //gather points
    var xs = [x], ys = [y]
    var i = 0
    while (xs[i] >= 0 && xs[i] < this.width && ys[i] >= 0 && ys[i] < this.height && i < maxLength) {
        xs.push(xs[i] + Math.cos(hue(xs[i], ys[i])))
        ys.push(ys[i] - Math.sin(hue(xs[i], ys[i])))
        i++
    }   
    
    //draw stuff
    ctx.clearRect(0, 0, this.width, this.height)
    ctx.drawImage(img, 0, 0)
    for (var i = 0; i < xs.length; i++)
        ctx.fillRect(Math.floor(xs[i]), Math.floor(ys[i]), 1, 1) //not using strokes because they may be anti-aliased
})

canvas {
  border:1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
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>

চ্যালেঞ্জ

একটি প্রোগ্রাম লিখুন যা স্নিপেট কী করছে তা কেবল ইন্টারেক্টিভভাবে নয় Write একটি চিত্র এবং একটি (x, y) চিত্রের সীমানায় স্থানাঙ্ক এবং একটি সর্বাধিক বক্ররেখা নিন। যুক্ত বর্ণের বক্ররেখার সাথে একই চিত্রটি আউটপুট করুন যা হিউ কোণগুলি (x, y) থেকে শুরু করে এবং সর্বাধিক দৈর্ঘ্যে পৌঁছলে বা চিত্রের সীমানায় আঘাত হ্রাসের পরে শেষ হয়।

বিশেষত, (x, y) এ বক্ররেখা শুরু করুন এবং সেখানে হিউ কোণটি পরিমাপ করুন। একটি নতুন ইউনিট (এক পিক্সেলের প্রস্থ) সেই দিকে যান, উল্লেখ করে যে আপনার নতুন অবস্থানটি সম্ভবত কোনও পূর্ণসংখ্যা সমন্বয় নয় । কাছের পিক্সেল থেকে হিউ ব্যবহার করে আবার বক্ররেখার উপর অন্য বিন্দু চিহ্নিত করুন এবং আবার সরান (যেমন floorবা কিছু ব্যবহার করে round, আমি এটি সঠিকভাবে পরীক্ষা করব না)। বক্র সীমা ছাড়িয়ে না যাওয়া বা এটি সর্বোচ্চ দৈর্ঘ্য অতিক্রম না করা অবধি এভাবে চালিয়ে যান। সমাপ্তির জন্য, সমস্ত বক্ররেখার চিত্রকে একক কালো পিক্সেল হিসাবে চিহ্নিত করুন (আবার নিকটস্থ পিক্সেল ব্যবহার করুন) এবং এই নতুন চিত্রটিকে আউটপুট করুন।

"হিউ এঙ্গেল" কেবল হিউ :

hue = atan2(sqrt(3) * (G - B), 2 * R - G - B)

নোট করুন যে গ্রেস্কেল মানগুলির জন্য প্রযুক্তিগতভাবে হিউ নেই, এটি 0 দেয়, তবে এটি ঠিক।

(এই সূত্রটি ব্যবহার করে atan2যা বেশিরভাগ অন্তর্নির্মিত গণিত লাইব্রেরিগুলিতে রয়েছে। আর, জি, বি 0 থেকে 1 অবধি 0 থেকে 255 টি নয়))

• আপনি যে কোনও সাধারণ লসলেস ইমেজ ফাইল ফর্ম্যাট পাশাপাশি কোনও চিত্র লাইব্রেরি ব্যবহার করতে পারেন।
• স্টিডিন বা কমান্ড লাইন থেকে ইনপুট নিন বা চিত্র ফাইলের নাম, x এবং y এবং সর্বাধিক দৈর্ঘ্যের জন্য যুক্তি সহ একটি ফাংশন লিখুন।
• সর্বাধিক দৈর্ঘ্য এবং x এবং y সর্বদা nonnegative পূর্ণসংখ্যা হয়। আপনি ধরে নিতে পারেন x এবং y এর মধ্যে রয়েছে।
• আপনার পছন্দের নামের সাথে আউটপুট চিত্রটি সংরক্ষণ করুন বা কেবল এটি প্রদর্শিত করুন।
• আপনার বাস্তবায়নের স্নিপেটের সাথে ঠিক মেলে না। কিছুটা পৃথক স্থানে কয়েকটি পিক্সেল কিছুটা আলাদা বৃত্তাকার / গণনার পদ্ধতির কারণে ভাল। (বিশৃঙ্খলাবদ্ধ ক্ষেত্রে এটিগুলি বক্ররেখার দিকে নিয়ে যেতে পারে যা শেষ পর্যন্ত মূলত আলাদা হয়, তবে যতক্ষণ তারা দৃশ্যত সঠিকভাবে দেখায়, ঠিক আছে))

স্কোরিং

বাইটস মধ্যে ক্ষুদ্রতম জমা জয়।

Comments

স্নিপেট ফায়ারফক্সে সম্পূর্ণ ভেঙে গেছে।

— Ypnypn

স্নিপেটও সাফারিতে কাজ করে না। (যদিও দুর্দান্ত চ্যালেঞ্জ, +1)

— অ্যালেক্স এ।

@ ক্যালভিনের শখ আমরা কি চ্যাট করতে পারি? chat.stackexchange.com/rooms/22029/...

— ব্রেইনস্টিল

Answer 1

ম্যাটল্যাব, 136

function t(g,x,y,l)
m=imread(g);imshow(m); h=2*pi*rgb2hsv(m);h=h(:,:,1);s=streamline(cos(h),-sin(h),x,y,[1,l]);set(s,'LineW',1,'Co','k');

বেশিরভাগ সেটআপ এবং যেমন @ সানচিইজগুলি থেকে অনুলিপি করা হয়েছে, তবে আমি পরিবর্তে streamlineপথটি গণনা এবং আঁকতে ব্যবহার করি । এটি যদিও রেখাটি অ্যান্টিয়ালিয়াস করে, এবং নির্দিষ্ট হিসাবে নিকটবর্তী-প্রতিবেশী না হয়ে বিলিনিয়ার অন্তরঙ্গ ব্যবহার করে।

Answer 2

এসডিএল সহ সি, 549 516 বাইট

আমি এই পার্টি শুরু করব! কোনও কারণে, আমি আজ রাতে গল্ফটিতে হাত দেওয়ার চেষ্টা করেছি। আপনি ছেলেরা যা করেন তা কঠিন ... যদি এখানে একটি জিনিস থাকে তবে আমি এই সাইটে কোনওটিই দেখতে পাচ্ছি না, এটি এসডিএল। আমি হয়তো স্রেফ খুঁজে পেয়েছি কেন। এই নির্দিষ্ট স্নিপেটটি এসডিএল 2 এবং এসডিএল 1.2 উভয়ই মেনে চলে তবে নৃশংস। বলা হয়f("imagename.bmp", xcoord, ycoord, max_length); । এটি যুক্তি হিসাবে দেওয়া একই নাম সহ একটি ফাইল সংরক্ষণ করে। আউটপুটটি ওপি-র কোড স্নিপেটের সাথে খুব মিল বলে মনে হচ্ছে, তবে "ফজিয়ার"। আমি এটি কিছুক্ষণ পরে ঠিক করার চেষ্টা করতে পারি।

#include"SDL.h"
f(char*C,x,y,m){SDL_Surface*P=SDL_LoadBMP(C);int p=P->pitch,i=P->format->BytesPerPixel,q=0;double X=x,Y=y,f=255,R,G,B,h;Uint8*Q,d=1,r,g,b,k;while(d){Q=P->pixels+y*p+i*x;SDL_GetRGB(i==4?*(Uint32*)Q:i==3?SDL_BYTEORDER==4321?*Q<<16|Q[1]<<8|Q[2]:*Q|Q[1]<<8|Q[2]<<16:i==2?*(Uint16*)Q:*Q,P->format,&r,&g,&b);R=r/f;G=g/f;B=b/f;h=atan2(sqrt(3)*(G-B),2*R-G-B);for(k=0;k<i;k++)Q[k]=0;X+=cos(h);Y-=sin(h);if((int)X-x|(int)Y-y)q++;x=X;y=Y;d=x<0|x>=P->w|y<0|y>=P->h|q>=m?0:1;}SDL_SaveBMP(P,C);SDL_FreeSurface(P);}

এখানে এটি সমস্ত অবরুদ্ধ করা হয়েছে:

#include"SDL.h"
f(char*C,x,y,m){
    SDL_Surface*P=SDL_LoadBMP(C);
    int p=P->pitch,i=P->format->BytesPerPixel,q=0;
    double X=x,Y=y,f=255,R,G,B,h;
    Uint8*Q,d=1,r,g,b,k;
    while(d){
        Q=P->pixels+y*p+i*x;
        SDL_GetRGB(i==4?*(Uint32*)Q:i==3?SDL_BYTEORDER==4321?*Q<<16|Q[1]<<8|Q[2]:*Q|Q[1]<<8|Q[2]<<16:i==2?*(Uint16*)Q:*Q,P->format,&r,&g,&b);
        R=r/f;
        G=g/f;
        B=b/f;
        h=atan2(sqrt(3)*(G-B),2*R-G-B);
        for(k=0;k<i;k++)Q[k]=0;
        X+=cos(h);
        Y-=sin(h);
        if((int)X-x|(int)Y-y)q++;
        x=X;y=Y;
        d=x<0|x>=P->w|y<0|y>=P->h|q>=m?0:1;
    }
    SDL_SaveBMP(P,C);
    SDL_FreeSurface(P);
}

আমার লক্ষ্য করা উচিত যে এটিকে ক্রস প্ল্যাটফর্ম তৈরি করার জন্য যত্ন নেওয়া হয়েছিল - সততার স্বার্থে, এটি আমার মেশিনের জন্য হার্ডকোড করা ভাল লাগেনি, এমনকি যদি এটি প্রচুর পরিমাণে বাইট কেটে দেয়। তবুও, আমার মনে হয় এখানে দুটি জিনিস অতিরিক্ত অতিরিক্ত হয় এবং আমি এটি পরে আবার দেখব।

সম্পাদনা -------

এটি হ'ল গ্রাফিকাল আউটপুট, সর্বোপরি ... আমি মাঝে মাঝে আকর্ষণীয় মনে হয় এমন চিত্রগুলি দিয়ে আপডেট করব।

f("HueTest1.bmp", 270, 40, 200);

f("HueTest2.bmp", 50, 50, 200);

f("HueTest3.bmp", 400, 400, 300);

Answer 3

পাইথন, 203 172

from scipy.misc import*
def f(i,x,y,l):
 a=imread(i);Y,X,_=a.shape;o=a.copy()
 while(X>x>0<y<Y<[]>l>0):r,g,b=a[y,x]/255.;o[y,x]=0;l-=1;x+=2*r-g-b;y-=3**.5*(g-b);imsave(i,o)

নমুনা আউটপুট:

সাথে কল f("image.jpg", 400, 400, 300)

আমদানির জন্য আমি প্রচুর অক্ষর নষ্ট করেছি, যদি কারও কাছে এটির উন্নতি করার পরামর্শ থাকে। 3.0 এ কাজ করতে পারে না

Comments

এক ঝলকে থেকে: sqrt(3) -> 3**.5? আমি যদিও আমদানির জন্য কিছু ভাবতে পারি না।

— Sp3000

সুন্দর! ভবিষ্যতে এটি কার্যকর হবে।

— গ্রোভসএনএল

Answer 4

ম্যাটল্যাব, 186 172

খেলা উপর ! t('YourImage.ext',123,456,100')(X, y) = (123,456) এবং সর্বাধিক দৈর্ঘ্যের 100 থেকে শুরু করে কোনও প্রকারের ম্যাটল্যাব সমর্থন করে এমন একটি চিত্রের জন্য কল করুন Call প্রাথমিক অবস্থানগুলি হুবহু হতে পারে না ডান এবং নীচের প্রান্ত এ (যে আমাকে দুই বাইট খরচ হবে), তাই প্রান্ত, ভালো কিছু ব্যবহারের উপর শুরু x=799.99শুরু করতে x=800। সূচকটি 0 থেকে নয় 1 থেকে শুরু হয়।

কোড:

function t(g,x,y,l)
m=imread(g);[Y,X,~]=size(m);h=2*pi*rgb2hsv(m);while(x>0&x<X&y>0&y<Y&l)
p=ceil(x);q=ceil(y);m(q,p,:)=0;a=h(q,p);x=x+cos(a);y=y-sin(a);l=l-1;end
imshow(m)

পুনর্বিবেচনা:

• পূর্ববর্তী পিক্সেল থেকে লাইনটি পরিবর্তন করে কেবল একটি পিক্সেলটিতে ডট লাগানো হয়েছে, যেহেতু লাইনটি কখনও পিক্সেলের চেয়ে বেশি হবে না! এখনও lineযেহেতু এটি ব্যবহার করছি এটি পিক্সেল উত্পাদন করতে আমি জানি সবচেয়ে সংক্ষিপ্ত কোড।
• ব্যবহার করে, কালো থেকে নীল রঙ পরিবর্তন করা হয়েছে Co হয়েছে, প্রসারিত করতে করে Color(যা MATLAB স্বয়ংক্রিয়ভাবে করে)
• পরবর্তী অবস্থানের গণনা এবং বিন্দু অঙ্কনের ক্রম পরিবর্তন হয়েছে, যেহেতু আমি @ গ্রোভসএনএলকে ধন্যবাদ উপলব্ধি করেছি যে আমি অবস্থানটি পরিবর্তনের পরে সীমানা যাচাই করছিলাম বলেই আমি আসলে সীমা ছাড়িয়ে চলেছি ।
• লাইনগুলি অঙ্কন থেকে আরজিবি ম্যাট্রিক্সকে 0 এ সেট করা এবং পরে প্রদর্শন করা পরিবর্তন করা হয়েছে।

Comments

নয় x=0বা y=0সম্ভাব্য বৈধ অবস্থানের?

— গ্রোভসএনএল

এছাড়াও, এই 166 বাইট কেমন?

— গ্রোভসএনএল

@ গ্রোভসএনএল দুঃখিত, ঘটনাক্রমে functionশিরোনাম ছাড়াই আমার পরীক্ষার সংস্করণ গণনা করা হয়েছে । স্পিকে শূন্য-ভিত্তিক বা এক-ভিত্তিক সূচকের প্রয়োজন হয় না, তাই আমি ম্যাটল্যাবের এক ভিত্তিক ব্যবহার করছি, তাই না, x=0বা y=0এই প্রোগ্রামে বৈধ নয়।

— সানচিইস

আহ, আমি ভুলে গিয়েছিলাম যে ম্যাটল্যাব এক-ভিত্তিক ছিল (এটি কিছুক্ষণ হয়ে গেছে)। তবে আমি অনুমান করি যে এটি পরিবর্তে বৈধ x=Xএবং y=Yকার্যকর হতে পারে ?

— গ্রোভসএনএল

Hah! আপনাকে আপনার নিজের খেলায় পরাজিত করুন, আমার ম্যাটল্যাব সমাধানটি কেবল ১৩৫ টি চর!

— এজেম্যানসফিল্ড

Answer 5

প্রসেসিং, 323 টি অক্ষর

void h(String f,float x,float y,float m){PImage i=loadImage(f);PImage i2=loadImage(f);while(m>0){color c=i.get((int)x,(int)y);float r=red(c)/255;float g=green(c)/255;float b=blue(c)/255;float h=atan2(sqrt(3)*(g-b),2*r-g-b);float dx=cos(h);float dy=-sin(h);m-=1;x+=dx;y+=dy;i2.set((int)x,(int)y,color(0));}i2.save("o.png");}

সাদা স্থান সহ:

void h(String f, float x, float y, float m) {
  PImage i = loadImage(f);
  PImage i2 = loadImage(f);

  while (m > 0) {

    color c = i.get((int)x, (int)y);
    float r = red(c)/255;
    float g = green(c)/255;
    float b = blue(c)/255;
    float h = atan2(sqrt(3) * (g - b), 2 * r - g - b);

    float dx = cos(h);
    float dy = -sin(h);

    m-= 1;
    x += dx;
    y += dy;

    i2.set((int)x, (int)y, color(0));
  }

  i2.save("o.png");
}

আমি নিশ্চিত যে আমি এটি আরও ছোট করতে পারি, তবে এটি এখনের জন্য কার্যকর।

Answer 6

জাভাস্ক্রিপ্ট 414

function P(G,x,y,l){
I=new Image()
I.onload=function(){d=document,M=Math,C=d.createElement('canvas')
d.body.appendChild(C)
w=C.width=I.width,h=C.height=I.height,X=C.getContext('2d')
X.drawImage(I,0,0)
D=X.getImageData(0,0,w,h),d=D.data,m=255,i=0
for(;l--;i=(w*~~y+~~x)*4,r=d[i]/m,g=d[i+1]/m,b=d[i+2]/m,H=M.atan2(M.sqrt(3)*(g-b),2*r-g-b),d[i]=d[i+1]=d[i+2]=0,x+=M.cos(H),y-=M.sin(H))
X.putImageData(D,0,0)}
I.src=G}