ショートドロープログラム


13

あなたはリベラルアーツ専攻をあなたの家に招待しただけで、彼/彼女に言っています

「ご存知のように、私は素晴らしいプログラマーであり、x、y、zを実行できます...」

S /彼はすぐに退屈し、あなたに尋ねます:

「あなたが本当に素晴らしいプログラマーなら、私に絵を描かせるプログラムを作ってもらえますか。マウスを使って、さまざまな色を選択して、画面に線を描くだけです。」

コードで標準ライブラリをインポートできます。コードでは、キーボードで色を選択する必要がある場合があります。

これはです。最短のコードが勝ちます。

箇条書き

  • 左ボタンを押しながらマウスを動かして線を描きます。

  • BresenhamのLine Algorithmは必要ありません。組み込みアルゴリズムはトリックを行います

  • ユーザーが何らかの方法で線の太さを変更できる場合は、* 0.8のボーナスが得られますが、必須ではありません。

  • 自分で線描画を実装する方が良いと思いますが、必要な場合は、コードの説明でそれを言うだけでライブラリをインポートできます。

  • 最小は5色(赤、緑、青、白、黒)です。ランダムに変更すると、ペナルティが* 1.2になります。必要に応じてそれらを変更できます(ボタンとキーを押すことはどちらもOKです)。

  • ポイント間またはフリーハンドでマウスを押して描くのが最善です(つまり、ペイントで行うように)* 0.7のボーナスが得られますが、他の方法は大丈夫です:(例)2つのポイントをクリックして、それらのポイント間に線を引きます?

  • 描画キャンバスは600x400でなければなりません

  • 色を変更すると、将来描画される線の色のみが変更されます。

  • 「すべてクリア」コマンドの実装は必須ではありませんが、実装すると* 0.9のボーナスが得られます。


2
どのように線を引く必要がありますか?ブレゼンハムの線アルゴリズム?線は太さを変える必要がありますか?線引きを自分で実装する必要がありますか?もっと指定してください。そして通常、私たちのコードは「標準ライブラリをインポートする」ことができると想定されています。何色を選択可能にする必要がありますか?2は大丈夫ですか?または、キーボードのボタンが押されるたびにランダムに色を選択するのはどうですか?
ジャスティン

2
さらにいくつかの明確化が必要:線はどのように描かれますか?2つのポイントをクリックして、それらのポイント間に線を引きますか?描画キャンバスの大きさはどれくらいですか?何色をサポートする必要がありますか?色を変更すると、他のすべての行の色も変更できますか?等この挑戦は現在非常に不十分に指定されています。
ドアノブ

@Quincunx Q&Aを質問に入れましたが、今は大丈夫かどうか教えてください。
カリドール

2
1. Q&Aを要約してください。質問を排除し、回答を独自の箇条書きにしてください。コメントは削除される場合があることに注意してください。Bresenhamのアルゴリズムポイントは、コメントを読まないと意味がありません。あなたが言っていることは、ブレゼンハムのアルゴリズムは必要ではなく、どのアルゴリズムや標準/ライブラリ関数でも実行できると思います。2.最終的に勝利(代わりに、通常の左ボタンで。)どのような言語では、APIとアクセスに右のボタンを取得することは容易であるに依存
レベル川セント

2
1.「2点間でマウスを押して描くのが最適ですが、他の方法でも構いません」ペイントの鉛筆ツールのようなフリーハンドの描画はどうですか?それをより明確にするか、「他の方法は問題ありません」を完全に排除することをお勧めします。2.色を変更する方法をより適切に指定する必要があります。たとえば、キーボードから他のマウスボタンで色を回転させることで実行できますか、または画面上のパレットをクリックする必要がありますか?
レベルリバーセント14年

回答:


9

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

思ったほど短くはありませんが、結果は気に入っています。

特徴:

  • クリックアンドドラッグの描画モード。(0.7
  • 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"/>

CSS-35バイト

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

jQuery-388/446バイト

W3C準拠のブラウザー(Chromeなど)-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()}})

クロスブラウザバージョン(Firefox、Safari、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})

修正:

  • FireFox- event.offset[X|Y]未定義です。
  • Safari- event.whichおよびでevent.buttons有意義に定義されていませんmousemove
  • Internet Explorer-上記の修正プログラムの両方で動作しますが、使用e.buttonsすれば十分です。

1
codegolfの$(document).ready?
edc65 14年

あなたは引用符id=や多分他の人も必要としません(しばらくの間htmlをしていません)
チョイス

10

処理-93・0.9 = 83.7

描画のオーバーヘッドはほとんどありませんが、非常に冗長な構文で、Processingで素晴らしい機能にたった1つのボーナスもなしでおそらく最高のスコアに達します。

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


フリーハンドもボーナスを提供します。
Caridorc

@Caridorc:ああ、素晴らしい。その答えを更新します。
エミール14年

2
それは打ちにくいです。
primo 14年

if(key>0)より短いif(keyPressed)
KritixiのLithos

9

Pythonの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キーを押すと、ブラシサイズが0〜7ピクセルの幅で切り替わります。

私はcode-golfが初めてなので、コードサイズを小さくするいくつかの方法を見逃しているかもしれません。

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
primo 14年

1
スピードとクリーンなGUIをお楽しみください。MS-Paintの意味。私は...私は、特定の大規模なソフトウェア会社で訴えられるしないことを望む
ロジックナイト

5

C#519 x 0.7 x 0.8 x 0.9 = 261.6 DrawLineメソッドを使用。

ゴルフ済み:

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();
    }
}

保持することにより、RG又はBのキーボード上には、対応するインデックスにsbyteアレイをインクリメントして次のラインの色を変化させます。オーバーフローすると、再び0から始まります。だから、これは私たちにたくさんの色を与えます。tを保持することによって増加する線の太さについても同様です。cを押すと、フォームがクリアされます。


5

Mathematica-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)
  }
 ]

ここに画像の説明を入力してください


これは、ポイントからポイントに線を引くことができますか?フリーハンドでの描画のみが許可されているようです。
trichoplax

@githubphagocyteうん、現時点ではフリーハンドのみ。
スウィッシュ

1
@githubphagocyteはストレートラインオプションが追加されました
スウィッシュ

これまでのベストアンサー。
primo

でも私は絵が大好きです。
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}

使用するには:

  • マウスの左ボタンは質問リクエストとして動作します
  • 初期の色は赤です。マウスを右クリックすると、ユーザーが次回使用する色を選択できるダイアログが表示されます。常にOKボタンを押してください。そうしないと、色が未定義になります。これを修正できましたが、バイトを消費します
  • 次回使用する線の太さを調整するには、マウスホイールを回転します。Up= thicker、Down = thinner
  • 画像を消去するには、マウスの中ボタンを押します

簡単なテスト:

ここに画像の説明を入力してください


2

DarkBASIC Pro-318 x 0.7 x 0.9 = 200.34

ここで最も興味深いのは、現在のキーボードスキャンコードでビット単位のロジックを使用して色を変更することです。各チャネルのスキャンコードから2つの異なるビットを使用しているため、ほとんどすべての6ビットカラーが可能です。

  • キーボードの任意のキーを押して色を使用します(アメリカのキーボードでは、白= F5、黒=キーなし、赤= 2、緑=-(マイナス)、青= b)
  • 右クリックしてクリア

コンパイル済みの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

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

Python 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()
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.