アート

芸術の秋、プログラミングでアート!!【実践編】

no41_14
前回はScratchによるアート作品のご紹介をしました。
「糸かけ曼荼羅」「直線の繰り返しで描く模様」「Vortex(渦)」などです。

今回は実践編。
この実践編ではプログラミングだけでなく算数・美術を同時に学べます。
プログラミングを学ぶ一つの重要な目的は、「プログラムを作って何かに役立てる」ということですから、このアート作成はその第一歩としてとても意味のあることではないでしょうか。


入門として比較的簡単なScratch(スクラッチ)による多角形アートの作成方法をご紹介します。
Scratchとは・・・MITメディアラボが開発したプログラミング言語学習環境。子ども向けプログラミング学習によく利用されているおり、無料です。

 

1. Scratchの「ペン」を使う

Scratchはブロックを組み合わせてプログラムを作成し、スプライト(下の画像では猫のこと)を動かすことができるのですが、「ペン」という機能もあります。この機能を使うと、スプライトが動いた「あと」(軌跡)を線で描くことができます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2018-10-17-10-07-58

 

1-1. ペンを下ろす、ペンを上げる

紙にペンで字を書くときのことを思い浮かべてみてください。
ペン先を紙の上に下ろして線を書いたら、またペン先を上げて別の場所まで移動して・・・という動きをしていますよね?
Scratchでもペンを上げたり、下げたりを行います。その動きに対応するブロックが「ペンを下ろす」「ペンを上げる」です。
ペンで線を引きたい動きを「ペンを下ろす」と「ペンを上げる」のブロックで挟みます。

では次のようなプログラムを作ってみます。
  
「ペンを下ろす」と「ペンを上げる」の間に挟まれた赤枠の部分だけに線が引かれるはずです。
緑の旗を押して、プログラムを実行してみましょう。

プログラムを実行すると、このようになりました。
  
青い点線の上も猫は動いていますが、「ペンを上げる」の後なので線は引かれません。

2. Scratchで多角形を描こう

それでは多角形をえがくプログラムを作ってみます。
図形の内角・外角の関係と繰り返しの回数に気をつけましょう。
 

2-1. 絵のないスプライトを作ろう

ペンを使った作品を作るときは、絵のないスプライトを使用することが多いです。
なぜならスプライトがペンで描いた線にかぶると見えづらいからです。
  
下の画像のようにスプライトがペンの線にかぶると、ペンで描いた図形が見えづらい
 
  
 絵のないスプライトの作り方は簡単です。「新しいスプライトを描く」というボタンを押すだけ。
 絵を描かないでおけば、そのまま絵のないスプライトのできあがりです。
 
  
Scratchのネコは今回は使わないので、スプライトのリストからネコを削除しておきます。
  

2-2. Scratchで正方形を描こう

まず、ペンがどこから出発するのか?出発地点をきめましょう。今回は、x座標が0、y座標が0からスタートします。
プログラムは次のように、緑の旗をおしたら、まずスタート地点のx座標が0、y座標が0にスプライトが来るようにします。
 
  
 続けてペンを下ろして正方形を描くプログラムを追加しましょう。
 
  
 すると・・・正方形が描かれました!
 
  

2-3. その他の正多角形の描き方と注意事項

上記のプログラムの「◯回繰り返す」、と「◯度回す」の数値を変えると多角形が作れます。
多角形の繰り返しの回数と、回す角度の一覧表を以下に記載しておきますので、試してみてください。
描く図が画面をはみ出さないようにスタート地点(x座標やy座標)や辺の長さ(◯歩動かす)を調整するのが注意点です。

 

図形 繰り返す回数 回す角度
正三角形 3 120
正方形 4 90
正五角形 5 72
正六角形 6 60
正八角形 8 45

 

3. Scratchで多角形アートを作ろう

それでは多角形をたくさん増やして作るアート作品を作ってみたいと思います。

 

3-1. Scratchで多角形を回転させながら描く

まずは絵のないスプライトを作り正三角形を描くプログラムを作ります。

正三角形が描けました。

今度は、すこし角度を変えながら正三角形を繰り返し描いていきます。下のプログラムの赤枠のところが正三角形のプログラムでした。正三角形を描き終わったあと、角度を30度回して、それを12回繰り返します。

すると、こんな模様ができました。

もう回転する角度を小さくして、繰り返す回数を増やしてみましょう。6度回して60回繰り返すようにします。

綺麗な模様ができましたね。

 

3-2. 多角形の色を変えてみる

アートっぽくするために、色が変わるようにしてみます。
下の図のように「ペンの色を10ずつ変える」というブロックを追加してみました。

色が少しづつ変わって、綺麗な色の模様ができました!

この作品のURLはこちら
https://scratch.mit.edu/projects/217516843/

 

 

3-3. 模様をだんだん大きくする

ここまでは1辺が100歩の正三角形を回転させて模様を描きました。
今度は、この模様の大きさを変えて重ねて描いていきます。

最初に「大きくなる数」という変数を作ります。これは、最初の図形からどれだけ大きくするか?という数を指定するものです。
そして、次のようなプログラムを作ります。
  

先ほどの繰り返しの外側に「大きくなる数」を30づつ変えて3回くりかえします。これを実行すると・・・

このようになります。
模様の中心がちょっと寂しいので、最初の模様の大きさを小さくしてみましょう。

最初は30歩の大きさの正三角形を描いて、そこから6重にしていきます。実行すると次のようになりました。

 

3-4. ペンの太さや色を調整する

ペンの太さや色などを調整するプログラムを追加します。色や濃さを変えるプログラムの場所を変えてみました。

背景も、模様を引き立たせるような暗めのものに変更して実行すると・・・

同色系のグラデーションの模様になりましたね。

このプログラムのURLはこちらです。今回は正三角形を回転させましたが、正方形や正六角形など基本となる形を変えたり、色の変わり方、ペンの太さなどを変えてオリジナルの模様づくりに挑戦してみてくださいね!

このプログラムのURLはこちらです。
https://scratch.mit.edu/projects/217522583/

 

 

 

4. Scratchの「ペン」による多角形アートのまとめ

(1)基本となる図形をペンで描く
(2)横方向にずらす、回転させるなどして基本の図形をずらして、線を重ねる
(3)色を変えてみる
(4)背景を変えて、線を目立たせる

以上をポイントとしてオリジナルアート作品を是非作ってみてください!!

芸術の秋、プログラミングでアート!!

子供向けプログラミングといえば、、

  • ロボットを動かす
  • キャラクターを動かす
  • ゲームを作る

と言ったイメージが強いかと思います。しかし、かなり本格的なアート作品を作ることができるのをご存知でしょうか?

今回は子ども向けプログラミング学習によく利用されているプログラミング言語、Scratchで作成されたアート作品をご紹介をします。(次回はアート作成への入門として比較的簡単なScratchによる多角形アートの作成方法のご紹介する予定です)

Scratchとは・・・MITメディアラボが開発したプログラミング言語学習環境。

 

Scrachによるアート作品のご紹介

(1)糸かけ曼荼羅

「糸かけ曼荼羅」とは板に釘をうって糸をかけていき、曼荼羅という模様を作っていくアート作品です。この「糸かけ曼荼羅」をScratchで再現できます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2018-10-16-8-46-01

出典:https://scratch.mit.edu/projects/124767731/

この作品は糸の色やどのように糸をかけて行くかを自分で決めることもできますし、自動で作ることもできます。実際に板と糸を使って作成する前に、完成版をイメージするシミュレータとしても役立ちます。

実際に板に釘を打って作成した「糸かけ曼荼羅」はこちら。

 

 

(2)直線の繰り返しで描く模様

ただ「線をひく」だけのプログラムも、「角度」「長さ」「色」を変化させ、繰り返すだけでとても綺麗な模様を描くことができます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2018-10-16-9-27-07  %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2018-10-16-9-28-01  

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2018-10-16-9-27-37  %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2018-10-16-9-28-25  

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2018-10-16-9-28-49  %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2018-10-16-9-29-12

出典:https://scratch.mit.edu/projects/238271151/

 

ただ「線を引くこと」がちょっとした工夫でアートに変わる。プログラミングの可能性と面白さを感じることができます。

 

(3)Vortex(渦)

この作品をみるとちょっと感動してしまいます。こちら静止画を掲載しますが、下部のURLからご覧になる場合は目まぐるしく色が変わりますのでご注意を。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2018-10-16-9-44-39

出典:https://scratch.mit.edu/projects/237404445/

 

プログラムを見てみると「sin(サイン)」や「cos(コサイン)」を使っています。やや難易度が高めです。

 

 

いかがだったでしょうか。次回はプログラミングによるアート作成の入門として、比較的簡単なScratchの多角形アートの作成方法のご紹介する予定です。お楽しみに!!