ドットの放射列をプログラムで作成する


17

次のようなスピーカーホールパターンを作成します。 ここに画像の説明を入力してください

しかし、どこから始めればいいのかわかりません。これは、Illustratorまたは同様のソフトウェアで面倒な位置決めをせずに達成できますか?


Pythonのようなものを使用して、正しく配置/サイズ設定されたドットでSVGを作成し、IllustratorでSVGを開き、.aiとして保存し、そこから移動するのは簡単です。
スーパーベスト

些細なことは正しい。極座標からデカルト座標への変換、次にネストされたループ、1つのステップ半径、もう1つのステップ角度を記述します。あなたの例では、角度ステップは9度またはPI / 10です。
ピーターウォン

回答:


9

私は自分のメソッドを追加します。これは最も簡単だと思われるからです。基本的に、あなたは:

  1. Pythonで計算的に円を生成する
  2. それらを単純なSVGファイルとしてレンダリングする
  3. Illustratorでファイルを開く

ここではPythonスクリプトは、(必要であるsvgwritemath):

"""
This script has two purposes:

- Simple demonstration of using Python (specifically the svgwrite library) to create an SVG file
- Answer the question http://graphicdesign.stackexchange.com/q/56200/21332
"""

# n[x] should give the number of circles at a distance of (x+1)*d from the center
d = 30
n = [8, 16, 20, 20, 20]

r = 7  # radius of each circle

# Calculate the center points of each circle
circles = [(0, 0)]  # There is always one circle in the middle

import math
for i in range(0, len(n)):
    m = n[i]  # m is the number of circle in this "row", i is the number of the row
    for j in range(0, m):  # for each circle...
        phi = 2*math.pi*j/m  # Calculate the angle at which the circle will be

        # Convert polar coordinates to cartesian
        x = d*(i+1)*math.cos(phi)
        y = d*(i+1)*math.sin(phi)

        circles.append((x, y))

# Write circles to SVG
import svgwrite

# Determine correct size of drawing
width = max([c[0] for c in circles])*2.2
height = max([c[1] for c in circles])*2.2

dwg = svgwrite.Drawing('demo.svg', size = (width, height))  # output will be in the same folder as this script

# offsets for shifting all circles so that the SVG can be easily viewed in browser
x_offset = min([c[0] for c in circles])*1.1
y_offset = min([c[1] for c in circles])*1.1

for c in circles:
    adjusted_x = c[0] - x_offset
    adjusted_y = c[1] - y_offset

    dwg.add(svgwrite.shapes.Circle((adjusted_x, adjusted_y), r))

# Save the file
dwg.save()

# Print SVG source to console
print(dwg.tostring())

それはそれが入っているディレクトリにSVGファイルを作成します。これはブラウザで開くことができます:

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

または、Illustratorで:

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

私よりも大きなIllustratorウィンドウを使用する必要がありますが、私のものは快適に作業するには小さすぎます...

Pythonスクリプトでファイルを作成できない場合(オンラインPythonインタープリターでこれを実行している可能性があります)、単にコメントアウトしdwg.save()ます。最後の行はSVGの内容をコンソールに出力しますmy file.svg。これをメモ帳に貼り付けて、として保存できます。

私は夢中になって、次のようないくつかの「きちんとした」機能を追加しました。

  • ブラウザで表示するときに負の座標を持つ円が切り取られないように、円が適切に中央に配置されていることを確認してください。
  • SVGキャンバスのサイズを変更します。

Illustratorはキャンバスの境界の外側のオブジェクトを非表示にせず、キャンバスのサイズを手動で変更できるため、これらは簡単に除外できます。

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


16

実際に、イメージがTKで自分で生成したものであるかどうか、手元にあるかどうかを指定しないでください。このコードが既にある場合は、TKアプリケーションキャンバスをEPSとしてエクスポートし、イラストレーターで開くことができます。あなたがする必要があるのは電話canvas.postscript()です。

TKを使用する場合

Python 2の簡単なサンプル:

#!/usr/bin/python
# -*- coding: utf-8 -*-

from Tkinter import *
import math

def circle(c, x, y, r=10):
    return c.create_oval(x-r, y-r, x+r, y+r, width=0, fill="black")

def draw_circles(c, num, r):
    step = (2.0*math.pi)/float(num)
    for i in range(num):
        x = 400 + r * math.sin(i*step)
        y = 400 + r * math.cos(i*step)
        circle(c, x, y)


main_window = Tk()
main_window.title('Pattern to EPS')
canvas = Canvas(main_window,
                    width=800, height=800, 
                    bg = 'white')

circle(canvas, 400, 400)
for i in range(1, 6):
    draw_circles(canvas, i*8, i*60)

canvas.pack()

# next line generates a eps file
canvas.postscript(file = "pattern.eps",  width=800, height=800 )

# uncomment next line if you want to see the tk window
# main_window.mainloop()

これにより、という名前のファイルが作成され"patten.eps"ます。

pattern.epsの結果

画像1:生成されたEPSをイラストレーターで開きます。

これは、extendScript、SVGで、または簡単にEPSプログラムを記述して直接行うことができます(いくつかの例については、付録を参照してください)。リソースについては、次の投稿を参照してください。

PS:回転ツールとCtrl+D

Illustratorでのパラメトリックブレンド

  1. 円を描く。
  2. それを複製します。
  3. 円を混ぜる
  4. 背骨を表す別の円を描き、1つの点で切り取ります
  5. ブレンドと円の両方を選択し、オブジェクト→ブレンド→脊椎を置換
  6. オブジェクト→ブレンド→ブレンドオプション...からオブジェクトを1つ引いて、球の数を調整します。
  7. spne circlesのサイズとオプションをコピーして調整します。やった

一つの指輪

画像2:上記の方法で1つのリング


付録1:EPSを手動で作成した場合

%!PS-Adobe-3.0 EPSF-3.0
%%BoundingBox: 0 0 800 800
%%Title: pattern
%%Creator: joojaa
%%CreationDate:  2015-07-08
%%EndComments

/c {newpath 10 0 360 arc closepath fill} def
/cr {
    dup 8 mul 2 dict begin /i exch def /r exch 60 mul def 
    1 1 i {360 i div mul dup sin exch cos r mul exch r mul c} for 
    end
} def

400 400 translate
0 0 c
1 1 6 {cr} for
%%EOF

付録2:ExtendScriptの例

#target illustrator

var doc = app.activeDocument; 

function circle(x,y) {
    doc.pathItems.ellipse(x+5,y-5,10,10);
}

function draw_circles(num, r){
    var step = (2.0*Math.PI)/num;
    for (var i = 0; i < num; i++) {
        var x = -200 + r * Math.sin(i*step);
        var y = 200 + r * Math.cos(i*step);
        circle(x, y);
    }
}

circle(-200,200);
for (var i = 1; i <= 6; i++) {
    draw_circles(i*8, i*30);
}

ありがとう-私はtkウィンドウを持っていません、それは私が見つけたパターンの単なる例でした
トム

1
@Tomそれは私が選択肢をリストした理由です。
-joojaa

1
すごい、PostScriptがチューリング完全であることをどこかで読みましたが、以前に実際にコードを書いた人を見たことはありません。
ピーターウォン

9

あなた並んでいるドットを気にしないなら ...

破線のストロークを使用して、Illustratorのサンプルに似たものをすばやく作成できます。等間隔のリングを簡単に描画するには、Polar Grid Toolを使用します。

Polar Gridツールのオプション Polar Gridツールの結果

次に、リング上のストロークを、お好みに合ったギャップのある破線に設定するだけです。

ストロークパネルオプション ドットの列を放射する

もちろん、必要に応じて各行を微調整してドットを追加し、個々のギャップ値を増減できます。ギャップボックスをアクティブにすると、スクロールホイールを使用して値をすばやく変更できます。Ctrl / Cmdスクロール中にホールドすると、より細かい単位で調整できます

ストロークパネルオプション ドットの列を放射する

この方法の問題は、いくつかのドットでオーバーラップが発生する可能性があることです。

ドットオーバーラップ

完璧に仕上げる必要がある場合は、手動で編集する必要があります。行ごとに最大1つのオーバーラップが必要です。


1
良いもの、ブレンドはタフな調整に適しています
-joojaa

1
それはスピーカーグリルです。彼はそれをいくつかのアルミニウムにシルクスクリーンし、各マークを手動でドリルします。その場合、わずかに幅の広いマークは重要ではありません。広い穴は関係ありません。
ピーターウォン

9

あなたがもしやる並んドット気を...

Illustratorの変形および変形効果は、この種の繰り返しパターンに最適ですが、その正確なパターンを得るには、微調整が必​​要になります。点線で開始します(例では11個の点で)

ストロークオプションペイン 点線

変換効果を追加する Effect > Distort & Transform > Transform...

変換効果オプション ドットの列を放射する

内側の行のドットが多すぎることに気付くでしょう。そこから手動調整が行われますが、これで残りの部分を理解するのに十分なはずです。


8

Inkscapeを使用します。

  1. 同心のガイド線を作成し、線をダブルクリックして同じ量だけ回転します(30度使用しました)。
  2. 幅と高さを手動で設定し、中心に移動する一連の同心の塗りつぶされていない円を作成します。
  3. 塗りつぶされた円を作成し、何度かコピーして貼り付けます。
  4. 「行と列」ツールを使用して、行に沿ってそれらを均等な間隔で広げます
  5. 円をグループ化し、回転させます。最後に、センターとガイドの交差点が一致するように配置します。
  6. もう一度コピーして貼り付けます。

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

そして、結果(OPの画像に一致させるために22.5度を使用):

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

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