लघु ड्राइंग कार्यक्रम


13

आपने अभी-अभी अपने घर में एक उदार कला को आमंत्रित किया है और आप उसे बता रहे हैं

"आप जानते हैं, मैं एक शानदार प्रोग्रामर हूं और मैं x और y और z कर सकता हूं ..."

एस / वह जल्दी ऊब जाता है और आपसे पूछता है:

"यदि आप वास्तव में एक महान प्रोग्रामर हैं, तो क्या आप मुझे आकर्षित करने के लिए एक कार्यक्रम बना सकते हैं, मुझे बस माउस का उपयोग करके और किसी भी तरीके से अलग-अलग रंगों का चयन करके स्क्रीन पर लाइनें खींचने की आवश्यकता है"।

आपका कोड मानक लाइब्रेरी आयात कर सकता है। आपके कोड को कीबोर्ड के माध्यम से रंगों का चयन करने की आवश्यकता हो सकती है।

यह ; सबसे छोटा कोड जीतता है।

सर्वाधिक महत्वपूर्ण बिंदु

  • बाईं बटन दबाते समय माउस को इधर-उधर घुमाकर रेखाएं खींची जाती हैं।

  • Bresenham की रेखा एल्गोरिथ्म आवश्यक नहीं है कोई अंतर्निहित एल्गोरिथ्म चाल करेगा

  • यदि उपयोगकर्ता किसी भी तरह से लाइन मोटाई बदल सकता है तो आपको * 0.8 बोनस मिलेगा लेकिन यह अनिवार्य नहीं है।

  • मुझे लगता है कि लाइन-ड्राइंग को लागू करने के लिए यह अच्छा होना चाहिए, लेकिन यदि आप चाहते हैं कि आप इसके लिए एक पुस्तकालय आयात कर सकते हैं तो इसे कोड विवरण में कहें।

  • न्यूनतम 5 अलग-अलग रंग (लाल, हरा, नीला, सफेद, काला) है। यदि आप उन्हें बेतरतीब ढंग से बदलते हैं तो आपको * 1.2 का जुर्माना मिलता है। आप उन्हें किसी भी तरह से बदल सकते हैं जो आप चाहते हैं (दोनों बटन और कुंजी प्रेस ठीक हैं)।

  • अंक या फ़्रीहैंड के बीच माउस दबाने पर उन्हें आकर्षित करना सबसे अच्छा होगा (जैसा कि आप पेंट में करते हैं) और आपको * 0.7 का बोनस देता है, लेकिन कोई अन्य विधि ठीक है: (उदाहरण) दो बिंदुओं पर क्लिक करें और उन बिंदुओं के बीच एक रेखा खींचें ?

  • ड्राइंग कैनवास 600x400 होना चाहिए

  • रंग बदलने से केवल भविष्य में खींची जाने वाली लाइनों का रंग बदलना चाहिए।

  • "क्लियर ऑल" कमांड को लागू करना अनिवार्य नहीं है लेकिन यदि आप इसे लागू करते हैं तो आपको * 0.9 बोनस मिलता है ।


2
रेखाएँ कैसे खींची जानी आवश्यक हैं? ब्रेसेनहैम की रेखा एल्गोरिथम ? क्या लाइनों को चर मोटाई की आवश्यकता है? क्या हमें खुद लाइन-ड्राइंग को लागू करने की आवश्यकता है? कृपया अधिक बताएं। और यह आमतौर पर माना जाता है कि हमारा कोड "मानक पुस्तकालयों का आयात" कर सकता है। कितने रंगों का चयन करना चाहिए? 2 ठीक है? या हर बार कीबोर्ड के बटन दबाने पर बेतरतीब ढंग से रंग चुनने के बारे में कैसे?
जस्टिन

2
कुछ और स्पष्टीकरण की आवश्यकता है: रेखाएँ कैसे खींची जाती हैं? क्या आप दो बिंदुओं पर क्लिक करते हैं और उन बिंदुओं के बीच एक रेखा खींचते हैं? ड्राइंग कैनवास कितना बड़ा होना चाहिए? कितने रंगों का समर्थन किया जाना चाहिए? क्या रंग बदलने से हर दूसरी रेखा का रंग भी बदल सकता है? आदि यह चुनौती वर्तमान में बहुत ही कम है।
दरवाज़े

@ प्रश्न में मैंने प्रश्नोत्तर में प्रश्नोत्तर किया है कि मुझे बताएं कि क्या यह अब ठीक है।
Caridorc

2
1. कृपया प्रश्नोत्तर करें। प्रश्नों को हटा दें और उत्तर को बुलेट बिंदु के रूप में अपने दम पर खड़ा करें। ध्यान दें कि टिप्पणियां कभी-कभी हटा दी जा सकती हैं। Bresenham का एल्गोरिथ्म बिंदु टिप्पणी को पढ़े बिना कोई मतलब नहीं है। मुझे लगता है कि आप जो कह रहे हैं, वह यह है कि ब्रेसेनहैम के एल्गोरिथ्म की आवश्यकता नहीं है और कोई भी एल्गोरिथ्म या मानक / लाइब्रेरी फ़ंक्शन करेगा। 2. अंत में जीतना इस बात पर निर्भर करता है कि किस भाषा में एपीआई में प्रवेश करना और राइट बटन (सामान्य बाएं बटन के बजाय) तक पहुंचना आसान है।
लेवल रिवर सेंट

2
1. "उन्हें 2 बिंदुओं के बीच माउस दबाने पर सबसे अच्छा है, लेकिन किसी भी अन्य विधि ठीक है" पेंट में पेंसिल टूल के साथ फ्रीहैंड ड्राइंग के बारे में क्या? मेरा सुझाव है कि आप इसे स्पष्ट कर दें, या "किसी भी अन्य विधि ठीक है" को पूरी तरह से समाप्त कर दें। 2. रंग बदलने की विधि बेहतर निर्दिष्ट होनी चाहिए। उदाहरण के लिए, क्या यह कीबोर्ड से किया जा सकता है, अन्य माउस बटन के साथ रंगों के माध्यम से घुमाकर या इसे ऑन-स्क्रीन पैलेट पर क्लिक करके होना चाहिए?
लेवल रिवर सेंट

जवाबों:


9

HTML + jQuery + CSS - 507 x (0.7 x 0.8 x 0.9) = 255.528

उतना छोटा नहीं जितना मैंने सोचा था कि यह होगा, लेकिन मुझे इसका परिणाम पसंद है।

विशेषताएं:

  • क्लिक-एंड-ड्रैग ड्राइंग मोड। ( 0.7 )
  • सात रंग (काला + इंद्रधनुष)।
  • चर ब्रश चौड़ाई (स्लाइडर नियंत्रण)। ( 0.8 )
  • सभी फ़ंक्शन को साफ़ करें। ( 0.9 )

लाइव डेमो: http://jsfiddle.net/onsLkh8y/9/


HTML - 84 बाइट्स

<input id="r" type="range" min="1" max="9"><canvas id="c" width="600" height="400"/>

सीएसएस - 35 बाइट्स

#c{border:1px solid;cursor:pointer}

jQuery - 388/446 बाइट्स

W3C अनुरूप ब्राउज़र (जैसे क्रोम) - 388 बाइट्स

var t=c.getContext('2d');$.each('black0red0orange0yellow0green0blue0purple0clear'.split(0),function(k,v){
$(r).before($('<button>'+v+'</button>').click(function(){k>6?t.clearRect(0,0,600,400):t.strokeStyle=v}))})
$(c).mousedown(function(e){t.lineWidth=$(r).val();t.beginPath();t.moveTo(e.offsetX,e.offsetY)})
.mousemove(function(e){if(e.which==1){t.lineTo(e.offsetX,e.offsetY);t.stroke()}})

क्रॉस-ब्राउज़र संस्करण (फ़ायरफ़ॉक्स, सफारी, IE के लिए फ़िक्सेस) - 446 बाइट्स

var t=c.getContext('2d');$.each('black0red0orange0yellow0green0blue0purple0clear'.split(0),function(k,v){
$(r).before($('<button>'+v+'</button>').click(function(){k>6?t.clearRect(0,0,600,400):t.strokeStyle=v}))})
var d,p=$(c).offset();$(c).mousedown(function(e){d=t.lineWidth=$(r).val();t.beginPath()t.moveTo(e.pageX-p.left,
e.pageY-p.top)}).mousemove(function(e){if(d){t.lineTo(e.pageX-p.left,e.pageY-p.top);t.stroke()}}).mouseup(function(){d=0})

ठीक करता है:

  • फ़ायरफ़ॉक्स - event.offset[X|Y]अपरिभाषित हैं।
  • सफारी - event.whichऔर event.buttonsसार्थक रूप से परिभाषित नहीं हैं mousemove
  • इंटरनेट एक्सप्लोरर - उपरोक्त दोनों सुधारों के साथ काम करता है, हालांकि उपयोग e.buttonsकरना पर्याप्त होगा।

1
$ (दस्तावेज़)। पहले से ही कोडगॉल्फ में?
edc65

आपको उद्धरण चिह्नों की आवश्यकता नहीं है id=और शायद दूसरों को भी (थोड़ी देर में html नहीं किया है)
Cycece

10

प्रसंस्करण - 93 · 0.9 = 83.7

ड्राइंग के लिए ओवरहेड के बगल में, लेकिन एक बहुत ही क्रिया सिंटैक्स, प्रसंस्करण में सर्वश्रेष्ठ स्कोर शायद बिना किसी अच्छी सुविधाओं और केवल एक बोनस के बिना पहुंच गया है:

void setup(){
size(600,400);
}
void draw(){
if(mousePressed)line(mouseX,mouseY,pmouseX,pmouseY);
}

स्कोर: 93 · 0.9 = 83.7 (न्यूलाइन केवल पठनीयता के लिए हैं और स्कोर में नहीं गिने जाते हैं।)

हालांकि, यह जगह में सभी बोनस के साथ बहुत अधिक मजेदार है:

void setup(){
size(600,400);
}
int i,x,y;
void draw(){
stroke(7*i%256,5*i%256,i%256);
strokeWeight(i%9);
if(keyPressed)i++;
if(!mousePressed){x=mouseX;y=mouseY;if(x<0)background(0);}
}
void mouseReleased(){
line(x,y,mouseX,mouseY);
}

स्कोर: 221 · 0.8 · 0.7 · 0.9 = 111.4

यह इस तरह प्रयोग किया जाता है:

  • एक सीधी रेखा खींचने के लिए माउस को क्लिक करें और खींचें।

  • क्लिक करते समय, विंडो के बाईं ओर माउस को खींचें और स्क्रीन साफ़ करने के लिए माउस बटन छोड़ें।

  • किसी भी कुंजी को दबाए रखने से ड्राइंग के रंग के लाल, हरे और नीले मूल्यों और विभिन्न स्ट्रोक मोटाई के माध्यम से चक्र होगा। चूंकि साइकिलिंग की अवधि अलग-अलग होती है, व्यावहारिक रूप से सभी संयोजनों तक पहुंचा जा सकता है (थोड़ी कोशिश के साथ)।

रंगीन आउटपुट 1

संपादित करें:

चूंकि फ्रीहैंड ड्राइंग 0.7 बोनस देता है, इसलिए यहां एक और समाधान है:

void setup(){
size(600,400);
}
int i;
void draw(){
stroke(7*i%256,5*i%256,i%256);
strokeWeight(i%9);
if(keyPressed)i++;
if(key>9)background(0);
if(mousePressed)line(mouseX,mouseY,pmouseX,pmouseY);
}

स्कोर: 188 · 0.8 · 0.7 · 0.9 = 94.8

यह इस तरह प्रयोग किया जाता है:

  • मुक्तहस्त रेखाएँ खींचने के लिए क्लिक करें और खींचें।

  • रंग और स्ट्रोक की मोटाई बदलने के लिए टैब कुंजी दबाए रखें। यह ड्राइंग (चित्र देखें) करते समय भी किया जा सकता है।

  • स्क्रीन को खाली करने के लिए किसी भी कुंजी लेकिन टैब और फिर टैब को हिट करें।

रंगीन आउटपुट 2


फ्रीहैंड आपको बोनस भी देता है।
कारिडोरक

@ कारिडोरक: आह, महान। मैं अपना उत्तर तब अपडेट करूंगा।
एमिल

2
जिसे हराना मुश्किल हो रहा है।
प्रिमो

if(key>0)से कम हैif(keyPressed)
user41805

9

पायथन 2.7 - 339 197 324 * (0.7 * 0.8 * 0.9) = 163

संपादित करें: मुझे पता चला कि pygame चर चौड़ाई के साथ रेखाएँ खींच सकता है इसलिए यहाँ एक अद्यतन है।

PyGame मॉड्यूल का उपयोग करने में एक प्रयोग।

एक साधारण पेंट प्रोग्राम जो MOUSEDOWN इवेंट (मान 5) से MOUSEUP इवेंट (मान 6) के लिए लाइनें खींचता है। यह pygame.gfxdraw.line () फ़ंक्शन का उपयोग करता है। TAB कुंजी दबाने से 8 रंगों का चक्र होगा। BACKSPACE कुंजी को दबाने से ध्यान से तैयार किए गए कागज़ के सफ़ेद रंग का प्रदर्शन साफ़ हो जाएगा। ENTER कुंजी ब्रेज़ल के आकार को चौड़ाई में 4-7 पिक्सेल के माध्यम से चक्रित करेगी।

मैं कोड-गोल्फ में नया हूँ इसलिए मैंने कोड आकार को कम करने के कुछ तरीकों को याद किया होगा।

import pygame as A,pygame.draw as G
P=A.display
D=P.set_mode((600,400))
C=(0,255)
S=[(r,g,b) for r in C for g in C for b in C]
w=n=1
while n:
 e=A.event.wait()
 t=e.type
 if t==12:n=0
 if t==2:
  if e.key==9:n+=1
  if e.key==13:w+=1
  if e.key==8:D.fill(S[7])
 if t==5:p=e.pos
 if t==6:G.line(D,S[n%8],p,e.pos,w%8)
 P.flip()

नमूना चित्र 1:

एक विमान की भयानक तस्वीर

नमूना चित्र 2:

परिदृश्य


9
मेरे पास अब मेरे कंप्यूटर पर एक फ़ाइल है जिसका नाम है ms-paint.py
प्रिमो

1
गति और स्वच्छ जीयूआई का आनंद लें। एमएस-पेंट कैसे होना था। मुझे आशा है कि मुझे एक बड़ी सॉफ्टवेयर कंपनी द्वारा मुकदमा नहीं किया जाएगा ...
लॉजिक नाइट

5

C # 519 x 0.7 x 0.8 x 0.9 = 261.6 ड्रालाइन विधि का उपयोग करना।

golfed:

using System;using System.Drawing;using System.Windows.Forms;class f:Form{[STAThread]static void Main(){f F=new f{Width=600,Height=400};Point s=default(Point);sbyte[]c={0,0,0,1};F.MouseDown+=(_,e)=>{s=new Point(e.X,e.Y);};F.MouseUp+=(_,e)=>{F.CreateGraphics().DrawLine(new Pen(Color.FromArgb(255,c[0],c[1],c[2]),c[3]),s.X,s.Y,e.X,e.Y);};F.KeyPress+=(a,e)=>{unchecked{switch(e.KeyChar){case'r':c[0]++;break;case'g':c[1]++;break;case'b':c[2]++;break;case't':c[3]++;break;case'c':F.Invalidate();break;}}};F.ShowDialog();}}

पठनीय:

using System;
using System.Drawing;
using System.Windows.Forms;

class f : Form
{
    [STAThread]
    static void Main()
    {
        f F = new f { Width = 600, Height = 400 };
        Point s = default(Point);
        sbyte[] c = { 0, 0, 0, 1 };
        F.MouseDown += (_, e) => { s = new Point(e.X, e.Y); };
        F.MouseUp += (_, e) => { F.CreateGraphics().DrawLine(new Pen(Color.FromArgb(255, c[0], c[1], c[2]), c[3]), s.X, s.Y, e.X, e.Y); };
        F.KeyPress += (a, e) =>
        {
            unchecked
            {
                switch (e.KeyChar)
                {
                    case 'r': c[0]++; break;
                    case 'g': c[1]++; break;
                    case 'b': c[2]++; break;
                    case 't': c[3]++; break;
                    case 'c': F.Invalidate();break;
                }

            }
        };
        F.ShowDialog();
    }
}

अपने कीबोर्ड पर r , g या b धारण करने से यह संबंधित सूचकांक पर एक sbyte-array बढ़ाकर अगली पंक्ति का रंग बदलता है। अतिप्रवाह होने पर यह फिर से 0 पर शुरू होगा। तो इससे हमें काफी रंग मिलते हैं। उसी रेखा की मोटाई के लिए जाता है जिसे टी पकड़कर बढ़ाया जाता है । दबाने प्रपत्र साफ करता है।


5

गणितज्ञ - 333 x 0.7 x 0.8 x 0.9 = 168

l = {}; c = Black; s = .01;
ColorSetter@Dynamic@c
Dynamic@s~Slider~{0, .02}
Button["Clear", l = {}]
"/" Checkbox@Dynamic@b
EventHandler[
 Dynamic@Graphics@{White, Rectangle@{600, 400}, l},
 {"MouseDown" :> 
   AppendTo[l, p = {}; {c, Thickness@s, Line@Dynamic@p}], 
  "MouseDragged" :> (p = 
     Append[p, MousePosition@"Graphics"][[If[b, {1, -1}, All]]]),
  "MouseUp" :> (l[[-1, 3]] = Line@p)
  }
 ]

यहाँ छवि विवरण दर्ज करें


क्या यह बिंदु से बिंदु तक रेखा खींच सकता है? यह केवल फ्री हैंड ड्राइंग की अनुमति देता है।
ट्राइकोप्लाक्स

@githubphagocyte हाँ, इस समय केवल मुफ्त हाथ।
बेंत की मार

1
@githubphagocyte एक सीधी रेखा विकल्प जोड़ा गया
बेंत की मार

इस प्रकार सबसे अच्छा जवाब।
प्राइमो

मैं ड्राइंग हालांकि प्यार करता हूँ।
tomsmeding

4

Tcl / Tk, 252

x 0,8 x 0,7 x 0,9

= 127,008

253 x 0,8 x 0,7 x 0,9 = 127,512

254 x 0,8 x 0,7 x 0,9 = 128,016

255 x 0,8 x 0,7 x 0,9 = 128,52

grid [canvas .c -w 600 -he 400]
set c red
incr t
lmap k {1
B1-Motion
3
MouseWheel
2} s {{set L [.c cr l %x %y %x %y -f $c -w $t]}
{.c coo $L "[.c coo $L] %x %y"}
{set c [tk_chooseColor]}
{if $t|%D>0 {incr t [expr %D/120]}}
{.c de all}} {bind . <$k> $s}

Tcl / Tk, 267

x 0,8 x 0,7 x 0,9

= 134,568

grid [canvas .c -w 600 -he 400]
set c red
set t 0
bind .c <1> {set L [.c cr l %x %y %x %y -f $c -w $t]}
bind .c <B1-Motion> {.c coo $L "[.c coo $L] %x %y"}
bind .c <3> {set c [tk_chooseColor]}
bind .c <MouseWheel> {if $t||%D>0 {incr t [expr %D/120]}}
bind .c <2> {.c de all}

इसके प्रयेाग के लिए:

  • बाईं माउस बटन प्रश्न अनुरोध के रूप में व्यवहार करता है
  • प्रारंभिक रंग लाल है। राइट माउस एक संवाद दिखाता है जो उपयोगकर्ता को अगली बार उपयोग किए जाने वाले रंग का चयन करने की अनुमति देता है। हमेशा ओके बटन दबाएं, अन्यथा रंग अपरिभाषित हो जाएगा। मैं इसे ठीक कर सकता था, लेकिन यह बाइट्स का उपभोग करेगा
  • अगली बार उपयोग की जाने वाली रेखा की मोटाई को समायोजित करने के लिए, आप माउस व्हील को घुमा सकते हैं: ऊपर = मोटा, नीचे = पतला
  • छवि को साफ करने के लिए मध्य माउस बटन दबाएं

एक साधारण परीक्षण:

यहाँ छवि विवरण दर्ज करें


2

डार्कबैसिक प्रो - 318 x 0.7 x 0.9 = 200.34

यहां सबसे दिलचस्प बात रंग बदलने के लिए वर्तमान कीबोर्ड स्कैंकोड पर कुछ बिटवाइज़ लॉजिक का उपयोग करना है। मैं प्रत्येक चैनल के लिए स्कैकोड से दो अलग-अलग बिट्स का उपयोग करता हूं - इसलिए लगभग किसी भी 6-बिट रंग संभव है।

  • एक रंग का उपयोग करने के लिए अपने कीबोर्ड पर किसी भी कुंजी को दबाए रखें (मेरे अमेरिकी कीबोर्ड पर: व्हाइट = F5, ब्लैक = कोई कुंजी नहीं, लाल = 2, हरा = - (माइनस), ब्लू = बी)
  • साफ़ करने के लिए राइट-क्लिक करें

यहाँ एक संकलित EXE: डाउनलोड है

#constant a set current bitmap
set display mode 800,400,32
create bitmap 1,800,400
do
s=scancode()
ink rgb((s&&3)*85,((s/4)&&3)*85,((s>>4)&&3)*85),0
m=mousex()
n=mousey()
o=mouseclick()
if o*(d=0) then d=1:x=m:y=n
a 1
if (o=0)*d then d=0:line x,y,m,n
if o=2 then cls
a 0
cls
copy bitmap 1,0
if d then line x,y,m,n
loop

1

बीबीसी बेसिक - 141 कोई बोनस नहीं

मेरी पहली प्रोग्रामिंग भाषा और आम तौर पर मेरे द्वारा कभी उपयोग नहीं की गई :)

SYS "SetWindowPos",@hwnd%,0,0,0,600,400,6:VDU 26
1 MOUSE X,Y,b
IF b=4 THEN GOTO 4
GOTO 1
4 MOUSE x,y,b
IF b=0 THEN LINE X,Y,x,y:GOTO 1
GOTO 4

1

पायथन 2.7 - 384 * .8 * .7 = 215.04

from Tkinter import*;o=1
a='0f';C=['#'+r+g+b for r in a for g in a for b in a]
def i(a):global o;o+=1
def d(a):global o;o-=1
def I(a):global u;u+=1
def D(a):global u;u-=1
m=Tk();u=0;c=Canvas(width=600,height=400);c.bind("<B1-Motion>",lambda x:c.create_rectangle((x.x,x.y,x.x+o,x.y+o),fill=C[u],outline=C[u]));m.bind("q",i);m.bind("w",d);m.bind("x",D);m.bind("z",I);c.pack();mainloop()

सभी बोनस के साथ: 462 * .9 * .8 * .7 = 232.848

from Tkinter import*;o=1
a='0f';C=['#'+r+g+b for r in a for g in a for b in a]
def i(a):global o;o+=1
def d(a):global o;o-=1
def I(a):global u;u+=1
def D(a):global u;u-=1
m=Tk();u=0;c=Canvas(width=600,height=400);c.bind("<B1-Motion>",lambda x:c.create_rectangle((x.x,x.y,x.x+o,x.y+o),fill=C[u],outline=C[u]));m.bind("q",i);m.bind("w",d);m.bind("x",D);m.bind("z",I);m.bind("m",lambda _:c.create_rectangle((0,0,602,402),fill=C[7],outline=C[5]));c.pack();mainloop()
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.