• 締切済み

IllustratorでJavascriptを使ってフリーハンド描画をしたい

Illustratorで鉛筆ツールを使うとフリーハンドで絵が描けますよね、ある程度の補完がかかって。 あれをJavascriptで機械的に動作させることってできませんか? Illustrator用のJavascriptはどう書くのか分からないので適当に書きますが(すみません)、以下のようなスクリプトを実行したいのです。 for (i=0; i<100; i++) { var x = i; var y = Math.sin(i)*50; penTool(x, y); } ペンツールで次々に座標を設定していき、補完を利用して滑らかな曲線を描きたいのです。上のコードはサイン波の形状を想定しています。単純にその形を作るだけならスクリプトを使わなくてもできますが、スクリプトで自動処理させることで時に面白い形状が偶発的に生成されるのを試してみたいのです。Flashで似たようなことは出来ますが、それを素材として利用するのには問題があります(ベクターデータとして再利用はできませんから)。良い方法をご存知の方、どうか情報提供よろしくお願い致します。

みんなの回答

  • shut0325
  • ベストアンサー率40% (490/1207)
回答No.1

お使いのIllustratorのバージョンとOSは何でしょうか? CS2/CS3にはアプリケーションがあるフォルダの中に[Scripting]というフォルダがあり、その中の[マニュアル]フォルダに資料PDFが入っていますので、それを一読されると良いかと思います。アドビのHPからも入手可能ですのでそれを利用してもよいかと思います。ただし、CS3はすべて英文、CS2はなぜかダウンロード入手版はすべて英文です。 ただ気になるのですが、書かれているコードと、下に書かれているされたいこととは意味合いが異なるように感じます。 ペンツールでポイントを書いていき、補完したように滑らかにしたいのなら、わざわざスクリプトを書く必要はありませんし、コードの方はペンツールを使う必要性はありません。 後者の場合は下記の方法で実現可能かと思いますがいかかでしょう? 1.ペンツールで適当にプロットする。 2.[フィルタ]→[パスの変形]→[ジグザグ]を選択 3.ダイアログボックスで「大きさ:0」「折り返し:0」「ポイント:滑らかに」でOK 4.スムーズペンでさっと全体をなぞる。 どちらかというと3で「ポイント:直線的に」としてアンカーポイントのハンドルをなくす時に使っていましたが、、、、 前者の場合(サインカーブのようなもの)はJavaScriptやVBでやるのは造作ないことです。私はインターフェイス部(値の設定等を行う)をVB.Netで作っていますが、JavaScriptはCS3の方に詳細なマニュアル「JavaScripting Tools guide」があるのでそれを参考にすればよいかと思います。 ちなみに補完のアルゴリズムはご自身で考えることになりますので、そこら辺の数学(代数・幾何あたり??)を復習されると良いかと思います。

関連するQ&A

  • 教えてください。javascriptで困っています

    javascript初心者です。たくさんある変数をfor文を使って計算させたいと思っています。計算はfor分の中でしたいのですが、うまくいきません。以下のようなことをしたいのですが。evalなどを使うのでしょうか。調べるキーワードがわからなかったので、投稿させていただきました。教えてください。よろしくお願いします。 var x1=1; var x2=2; var x3=3; var x4=4; var x5=5; var y1=1; var y2=2; var y3=3; var y4=4; var y5=5; var z1; var z2; var z3; var z4; var z5; for(var i=0 i<5 i++){ "z"+i = "x"+i + "y"+i; } alert(z1); alert(z2); alert(z3); alert(z4); alert(z5);

  • javascriptのタイプミス

    javascript初心者です。以下のコードでどこにミスがあるのか 解りません。どこにあるのでしょうか? このソースをエディタに 貼ると見やすくなると思います。 <!DOCTYPE html> <html> <head> <title>SnakeBite</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script type="text/javascript"> var W, H, S = 20; var snake = [ ], foods = [ ]; var keyCode = 0; var point = 0; var timer = NaN; var ctx; // pointオブジェクト function Point(x,y) { this.x = x; this.y = y; } //初期関数 function init() { var canvas = document.getElementById('field'); W = canvas.width / S; H = canvas.height / S; ctx = canvas.getContext('2d'); ctx.font = "20px sans-serif"; //蚊の初期化 snake.push(new Point(W / 2, H / 2)); //餌の初期化 for (var i = 0 ; i < 10 ; i++) { addFood(); } timer = setInterval("tick()", 200); window.onkeydown = keydown; } //餌の追加 function addFood() { while (true) { var x = Math.floor(Math.random() * W); var y = Math.floor(Math.random() * H); if (isHit(foods, x, y) || isHit(snake, x, y)) { continue; } foods.push(new Point(x, y)); break; } } //衝突判定 function isHit(data, x, y) { for (var i = 0 ; i < data.length ; i++) { if (data[i].x==x && data[i].y==Y) { return true; } } return false; } function moveFood(x, y) { foods =foods. filter(function (p){return (p.x !=x || p.y !=y);}); addFood(); } function tick() { var x = snake[0].x; var y = snake[0].y; switch (keyCode) { case 37: x--; break; //左 case 38: y--; break; //上 case 39: x++; break; //右 case 40: y++; break; //下 default: paint(); return; } //自分or壁に衝突 if(isHit(snake,x,y) || x<0 || x>=W || y<0 || y>=H ) clearInterval(timer); paint(); return; } //頭を先頭に追加 snake.unshift(new Point(x,y)); if(isHit(foods, x, y)) { point +=10; //餌を食べた moveFood(x,y); }else{ snake.pop(); //食べていない→しっぽを解除 } paint(); } function paint() { ctx.clearRect(0,0,W * S, H * S); ctx.fillStyle = "rgb(256,0,0)"; ctx.fillText(point, S, S * 2); ctx.fillStyle = "rgb(0,0,255)"; foods.forEach(function (p) { ctx.fillText("+", p.x * S, (p.y + 1) * S);}); snake.forEach(function (p) { ctx.fillText("*", p.x * S, (p.y + 1) * S); }); } function keydown(event) { keyCode = event.keyCode; } </script> </head> <body onload="init()"> <canvas id="field" width="400" height="400" style="background:#cccccc"> </canvas> </body> </html>

  • お願いしますjavascriptです

    javascript 初心者なのですが、どうしてもわからないため、 ご教授お願いたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>おみくじ</title> </head> <body> <script type="text/javascript"> <!-- //0~4の乱数を作る //0:大吉, 1:中吉, 2:小吉 ,3:吉, 4:凶 var rnd = Math.floor(Math.random() * 5) //おみくじの判定 switch (rnd){ case 0: var fortune = "大吉"; break; case 1: var fortune = "中吉"; break; case 2: var fortune = "小吉"; break; case 3: var fortune = "吉"; break; default: var fortune = "凶"; break; } //おみくじの表示 document.write("今日の運勢: " + fortune + "<br />"); //金運の表示 document.write("金運: "); var money = Math.floor(Math.random() * 5) + 1; for (var i = 0; i < money; i++) { document.write("(ダイヤ)"); } document.write("<br>"); //恋愛運の表示 document.write("恋愛運: "); var love = Math.floor(Math.random() * 5) + 1; for (var i = 0; i < love; i++) { document.write("&hearts;"); } document.write("<br>"); //健康運の表示 document.write("健康運: "); var health = Math.floor(Math.random() * 5) + 1; var i = 0; while (i < health){ document.write("(クラブ)"); i++; } document.write("<br>"); //--> </script> </body> </html> このソースに、分岐だと考えますが、 大吉が出た時は、金運、恋愛運、などのマークが3つ以上に設定、逆に 今日ならば各マークが3つ以下に設定するには Javascriptでどういう風に記述すればよいでしょうか。

  • JavaScriptでのアニメーション

    JavaScriptで書いたアニメーションをHTML5上で動かそうとしているのですが、うまくいきません。いろいろなサイトで調べましたが原因がわからなかったのでどなたか解決法を教えてください。 任意の値X,Yを入力、これを始点の座標としてそこからランダムな色の円が動くというアニメーションを作りたいです。しかし、X,Yの値を任意に入力させようとするとアニメーションそのものが動かなくなってしまいます。座標をあらかじめ指定しておくとうまく動くのですが……。 任意の値を入れてもきちんと動くように直したいのですが、方法がわかりません。どなたかご教授願います。 以下コード。これより上と下は省略してあります。 <script type="text/javascript"> var speedX = 3.0;   var speedY = 4.0; var locX = parseInt(document.getElementById("x").value); var locY = parseInt(document.getElementById("y").value);  //locX,locYを予め指定しておくとその位置からきちんとアニメーションが動くが、上のようにすると動かなくなる var ctx; function anim(){ var canvas = document.getElementById('mycanvas'); if (canvas.getContext){ ctx = canvas.getContext('2d'); setInterval(draw, 60); } } function draw(){ ctx.globalCompositeOperation = "source-over"; var r = parseInt(Math.random() * 255); var g = parseInt(Math.random() * 255); var b = parseInt(Math.random() * 255); var alpha = Math.random(); var rgba = "rgba("+r+", "+g+", "+b+", "+alpha+")"; ctx.fillStyle = rgba; ctx.fill(); ctx.globalCompositeOperation = "lighter"; locX += speedX; locY += speedY; if(locX < 0 || locX > 800){ speedX *= -1; } if(locY < 0 || locY > 600){ speedY *= -1; } ctx.beginPath(); ctx.fillStyle = rgba; ctx.arc(locX, locY, 5, 0, Math.PI*2.0, true); ctx.fill(); } </script> </head> <body> <p><label>X </label><input id="x"> <label>Y </label><input id="y"> <button type=button onclick="anim();">start</button></p>

  • javascriptの打ちミスしてる所を知りたい。

    参考書の通り打ちました。参考書では、蛇を上下左右キーで操作し、餌を食べさせるゲームと書いておりましたが、灰色のイメージが出るだけで、蛇っぽいのは出ません。 たぶんどっかでタイプミスしてると思うのですが、どこだかわかりません。 教えてください。 <!DOCTYPE html> <html> <head> <title>SnakeBite</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script type="text/javascript"> var W,H,S=20; var snake=[],foods=[]; var keyCode=0; var point=0; var timer=NaN; var ctx; function Point(x,y){ this.x=x; this.y=y; } function init(){ var canvas = document.getElementById('field'); W=canvas.width/S; H=canvas.height/S; ctx =canvas.getContext('2d'); ctx.font ="20px sans-serif"; snake.push(new Point(W/2,H/2)); for(var i=0; i<10;i++){ addFood(); } timer=setInterval("tick()",200); window.onkeydown =keydown; } function addFood(){ while(true){ var x =Math.floor(Math.random()*W); var y =Math.floor(Math.random()*H); if(isHit(foods,x,y)|| isHit(snake.x,y)){ continue; } foods.push(new point(x,y)); break; } function isHit(data,x,y){ for(var i=0;i<data.lenght;i++){ if(data[i].x==x && data[i].y==y){ return true; } } return false; } function moveFood(x,y){ foods =foods.filter(function(p){ return(p.x !=x || p.y !=y); }); addFood(); } function tick(){ var x=snake[0].x; var y=snake[0].y; switch(keyCode){ case 37:x--;break; case 38:y--;break; case 39:x++;break; case 40:y++;break; defaule:paint(); return; } if(isHit(snake,x,y) || x<0 ||x>=W || y<0||y>=H) { clearInterval(timer); paint(); return; } snake.unshift(new Point(x,y)); if(isHit(foods,x,y)){ point+=10; moveFood(x,y); }else{ snake.pop(); } paint(); } function paint(){ ctx.clearRect(0,0,W*S,H*S); ctx.fillStyle="rgb(256,0,0)"; ctx.fillText(point,S,S*2); ctx.fillStyle="rgb(0,0,255)"; foods.forEach(function(p){ ctx.fillText("+",p.x*S,(p.y+1)*S); }); snake.forEach(function(p){ ctx.fillText("*",p.x*S,(p.y+1)*S); }); } function keydown(event){ keyCode=event.keyCode; } </script> </head> <body onload="init()"> <canvas id="field" width="400" height="400" style="background:#cccccc"> </canvas> </body> </html>

  • flashで円の描画。

    長文失礼します。 FLASH,CS3でActionScript2.0で作業しています。 FLASHで複数の円を重ねて円グラフの様な描画をしたくて、ネット上にあったソースを自分で少しいじりました。 しかし複数の円を描画しようとすると他の円が消えてしまいます。 外部に円を描画するスクリプト(DrawArc.as)がおいてあります。 //DrawArc.as class DrawArc { var mc:MovieClip; function DrawArc(target:MovieClip) { mc = target; } function drawLine(x:Number, y:Number, radius:Number, arc:Number, startAngle:Number, thickness:Number, color:Number, alpha:Number, yRadius:Number) { mc.clear(); mc.lineStyle(thickness,color,alpha,false,"none","none"); mc.moveTo(x,y); if (arguments.length<8) { return; } if (yRadius == undefined) { yRadius = radius; } if (Math.abs(arc)>360) { arc = 360; } var segs = Math.ceil(Math.abs(arc)/45); var segAngle = arc/segs; var theta = -(segAngle/180)*Math.PI; var angle = -(startAngle/180)*Math.PI; var ax = x-Math.cos(angle)*radius; var ay = y-Math.sin(angle)*yRadius; if (segs>0) { for (var i = 0; i<segs; i++) { angle += theta; var angleMid = angle-(theta/2); var bx = ax+Math.cos(angle)*radius; var by = ay+Math.sin(angle)*yRadius; var cx = ax+Math.cos(angleMid)*(radius/Math.cos(theta/2)); var cy = ay+Math.sin(angleMid)*(yRadius/Math.cos(theta/2)); mc.curveTo(cx,cy,bx,by); } } } } そしてFLASHのフレーム内に import DrawArc; mc = new DrawArc(this); targetNum = 0; onEnterFrame = function () { if (targetNum<=220) { targetNum += 2; change(); } else { delete this.onEnterFrame; } }; function change() { mc.drawLine(Stage.width/2,65,40,-targetNum,90,30,0x69f203,100); } とかいてあります。 これで円を描画してくれるんですが、 さらにもう一つの円を重ねて表示させたいので FLASHのフレーム内に import DrawArc; mc = new DrawArc(this); mc2 = new DrawArc(this);//新しい用 targetNum = 0; targetNum2 = 0;//新しい用 onEnterFrame = function () { if (targetNum<=220) { targetNum += 2; change(); } if (targetNum2<=210) { targetNum2 += 2; change2(); } }; function change() { mc.drawLine(Stage.width/2,65,40,-targetNum,90,30,0x002503,100); mc.mc.swapDepths(10); trace(mc.mc.getDepth()); } function change2() { mc2.drawLine(Stage.width/2,65,40,-targetNum2,90,30,0x69f203,100); mc2.mc.swapDepths(11); trace(mc2.mc.getDepth()); } と書いたのですがDepthが両方とも10になってしまいます。このDepthが別々になれば両方ちゃんと表示されると思うのですが、手詰まりになってしまいました。 どなたか解決策が分かる方教えてください。

    • ベストアンサー
    • Flash
  • JavaScriptを使ってXMLにタグを打ち込みたいんですが。。

    プログラミング初心者で申し訳ありません。 JavaScriptを使っているのですが、ボタンを押して、<math>~</math>の中に数式のタグを入力しようとしています。 現状のソースですが、 ファイル名:sample.xhtml ~ <math id="math" xmlns="http://www.w3.org/1998/Math/MathML"> #数式のタグの入力位置 </math> <script type="text/javascript"> function mul1(){ var info = document.getElementById("math"); var txt1 = document.createTextNode("<mi>"); var txt2 = document.createTextNode("x"); var txt3 = document.createTextNode("</mi>"); info.appendChild(txt1); info.appendChild(txt2); info.appendChild(txt3); } </script> <form> <input type = "button" value="x" onclick ="mul1()" /> </form> ~ となっています。 理想は <math id="math" xmlns="http://www.w3.org/1998/Math/MathML">  <mi>x</mi> </math> ボタンクリック後こういう感じでタグを挿入したいと考えています。 function mul1(){ var info = document.getElementById("math"); var element1 = document.createElement("mi"); var element2 = document.createElement("/mi"); var txt = document.createTextNode("x"); info.appendChild(element1); info.appendChild(txt); info.appendChild(element2); } 要素追加と思いcreateElement()で検証してみたんですが、結果はなにも表示されませんでした。 言葉不十分で申し訳ありませんが、解決法教えていただけませんか? よろしくお願いいたします。

  • javascriptで困ってます

    下記のスクリプトでcanvas上で四角を動かすアニメーションをさせたのですが、andoroidに標準のブラウザで見ると、最初の位置に四角が残ってしまいます。この残ってしまう四角を消したたいのですが、どのようにしたらよいのでしょうか、教えてください。よろしくお願いします。 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>canvasアニメーション</title> <script type="text/javascript"> // <![CDATA[ window.onload = function(){ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#ffffff"; var point = {x:0,y:0}; var par = {x:3,y:3}; var timer; var delay = 100; function draw(x,y){ ctx.clearRect(0,0,600,600); ctx.fillRect(x,y,50,50); } var loop = function(){ point.x = point.x + par.x; point.y = point.y + par.y; draw(point.x,point.y); clearTimeout(timer); timer = setTimeout(loop,delay); } loop(); } // ]]> </script> <style type="text/css" media="screen"> /* <![CDATA[ */ body{ background-color:#000000; } /* ]]> */ </style> </head> <body> <canvas id="canvas" width="600" height="600"></canvas> </body> </html>

  • jqueryのscrollfollowが動かない

    jqueryのscrollfollowが他のスクリプトと衝突しているようで動きません。解決方法はありますか? スライドショー用のスクリプトを記述すると、動かなくなります。 スライドショー用の記述を削除すると、scrollfollowはちゃんと機能してくれます。 おそらく、このスライドショーのスクリプトと衝突して動かなくなってるのだと 思いますが、解決方法はあるのでしょうか? どたなか、よろしければお助けください。 以下が、現在のソースです。 (「※」マークのところがそのスクリプトの記述部分です) ----------------------------------------------------------- <!-- JS -->(※ここからがscrollfollowのスクリプトです。) <script type="text/javascript" src="jquery-1.5.1.min.js"></script> <script type="text/javascript" src="jquery.ui.core.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript" src="jquery.scrollfollow.js"></script> <script type="text/javascript"> $( document ).ready( function (){ $('#sidebar1').scrollFollow({ speed: 500, killSwitch: 'sidebar12' }); }); </script> (※ここまでがscrollfollowのスクリプトです。) <script type="text/javascript" src="smoothscroll.js"></script> <script type="text/javascript" language="JavaScript"> <!-- function backToTop() { var x1 = x2 = x3 = 0; var y1 = y2 = y3 = 0; if (document.documentElement) { x1 = document.documentElement.scrollLeft || 0; y1 = document.documentElement.scrollTop || 0; } if (document.body) { x2 = document.body.scrollLeft || 0; y2 = document.body.scrollTop || 0; } x3 = window.scrollX || 0; y3 = window.scrollY || 0; var x = Math.max(x1, Math.max(x2, x3)); var y = Math.max(y1, Math.max(y2, y3)); window.scrollTo(Math.floor(x / 2), Math.floor(y / 2)); if (x > 0 || y > 0) { window.setTimeout("backToTop()", 25); } } //--> </script> (※画面一番上メインにスライドショーを設置していて、ここからがそのスクリプトです。 下記のスクリプトを削除するとscrollfollowは正常に機能してくれます。記述すると動きません。) <!--スライド--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.panelgallery-2.0.0.js"></script> <script type="text/javascript"> $(function(){ $('.slideshow').panelGallery(); }); </script> (※画面一番上メインにスライドショーを設置していて、ここまでがそのスクリプトです。) ------------------------------------------ 以上です。 よろしくお願いいたします!

  • JAVASCRIPTについて教えてほしいのですが

    <script language="JavaScript"> var imglist = new Array( "top_pic.jpg", "top_pic2.jpg", "top_pic3.jpg", "top_pic4.jpg" ); var selectnum = Math.floor((Math.random() * 100)) % imglist.length; var output = "<img src=" + imglist[selectnum] + ">"; document.write(output); </script> ・・・・という画像をランダムに表示するスクリプトなんですが、 この画像を表示する際のオプション?みたいなのは何処に記入すればよいのでしょうか? align="right"や、width="50%" みたいなやつです。 よろしくお願いします