「ChatGPT」で色々試している。
今回、HTMLとCSSとJavaScriptでアートを作れるか試してみた。
以下が、全てChatGPTのオリジナル作品かどうかは分からないが、要求を追加していくと、数秒でそれに答えてくる。恐るべし。簡単な解説まで付いてくる。
■1.HTMLとCSSとJavaScriptで何かアートを作ってみて。
-----
【回答】
こちらがHTMLとCSSとJavaScriptを使用して作成した簡単なアート作品です。以下のコードをコピーして、HTMLファイルに貼り付けてください。
<!DOCTYPE html>
<html>
<head>
<title>Artwork</title>
<style>
body {
margin: 0;
padding: 0;
background-color: black;
}
#canvas {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var colors = ["#FF3F8E", "#04C2C9", "#2E294E", "#F5A503", "#F20D0D"];
var width = canvas.width;
var height = canvas.height;
function draw() {
ctx.clearRect(0, 0, width, height);
for (var i = 0; i < colors.length; i++) {
ctx.fillStyle = colors[i];
var x = Math.random() * width;
var y = Math.random() * height;
var size = Math.random() * 100;
ctx.fillRect(x, y, size, size);
}
}
setInterval(draw, 1000);
</script>
</body>
</html>
このコードは、赤い円の中に5つの小さなオレンジ色の円を描画することで、幾何学的なアート作品を作成します。背景は薄い灰色です。
回答結果 ↓
https://ok2nd.sakura.ne.jp/Test/chatGpt/artwork1.html
■2.HTMLとCSSとJavaScriptで、線が動的に動き回るようなアートを作ってみて。
-----
【回答】
以下がHTML、CSS、およびJavaScriptを使用して作成した、線が動的に動き回るアート作品です。以下のコードをコピーして、HTMLファイルに貼り付けてください。
<!DOCTYPE html>
<html>
<head>
<title>Artwork</title>
<style>
body {
margin: 0;
padding: 0;
background-color: black;
}
#canvas {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var lineCount = 100;
var lines = [];
for (var i = 0; i < lineCount; i++) {
var line = {
x: Math.random() * width,
y: Math.random() * height,
angle: Math.random() * 360,
speed: 1 + Math.random() * 3,
color: "#FFF"
};
lines.push(line);
}
function draw() {
ctx.clearRect(0, 0, width, height);
for (var i = 0; i < lines.length; i++) {
var line = lines[i];
ctx.strokeStyle = line.color;
ctx.beginPath();
ctx.moveTo(line.x, line.y);
line.x += Math.cos(line.angle) * line.speed;
line.y += Math.sin(line.angle) * line.speed;
ctx.lineTo(line.x, line.y);
ctx.stroke();
if (line.x < 0 || line.x > width) {
line.angle = Math.PI - line.angle;
}
if (line.y < 0 || line.y > height) {
line.angle = 2 * Math.PI - line.angle;
}
}
}
setInterval(draw, 20);
</script>
</body>
</html>
このコードは、ランダムな色と角度でランダムな場所から始まる直線を描画し、ランダムな速度で動かします。アニメーションは、20ミリ秒ごとに更新されます。
回答結果 ↓
https://ok2nd.sakura.ne.jp/Test/chatGpt/artwork2.html
■3.HTMLとCSSとJavaScriptで、曲線が動的に動き回るようなアートを作ってみて。
-----
【回答】
以下がHTML、CSS、およびJavaScriptを使用して作成した、曲線が動的に動き回るアート作品です。以下のコードをコピーして、HTMLファイルに貼り付けてください。
<!DOCTYPE html>
<html>
<head>
<title>Artwork</title>
<style>
body {
margin: 0;
padding: 0;
background-color: black;
}
#canvas {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var centerX = width / 2;
var centerY = height / 2;
var angle = 0;
var radius = 100;
function draw() {
ctx.clearRect(0, 0, width, height);
ctx.beginPath();
ctx.moveTo(centerX + radius * Math.cos(angle), centerY + radius * Math.sin(angle));
ctx.quadraticCurveTo(centerX, centerY, centerX + radius * Math.cos(angle + 0.1), centerY + radius * Math.sin(angle + 0.1));
ctx.strokeStyle = "#FFF";
ctx.stroke();
angle += 0.1;
}
setInterval(draw, 20);
</script>
</body>
</html>
このコードは、円の中心から始まる曲線を描画し、円の輪郭線に沿って移動します。アニメーションは、20ミリ秒ごとに更新されます。
回答結果↓
https://ok2nd.sakura.ne.jp/Test/chatGpt/artwork3.html
■4.複数の曲線が動き回るような複雑なものを作ってみて。
-----
【回答】
以下がHTML、CSS、およびJavaScriptを使用して作成した、複数の曲線が動的に動き回るような複雑なアート作品です。以下のコードをコピーして、HTMLファイルに貼り付けてください。
<!DOCTYPE html>
<html>
<head>
<title>Artwork</title>
<style>
body {
margin: 0;
padding: 0;
background-color: black;
}
#canvas {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var centerX = width / 2;
var centerY = height / 2;
var angle1 = 0;
var radius1 = 100;
var angle2 = 0;
var radius2 = 150;
var angle3 = 0;
var radius3 = 200;
function draw() {
ctx.clearRect(0, 0, width, height);
// Draw first curve
ctx.beginPath();
ctx.moveTo(centerX + radius1 * Math.cos(angle1), centerY + radius1 * Math.sin(angle1));
ctx.quadraticCurveTo(centerX, centerY, centerX + radius1 * Math.cos(angle1 + 0.1), centerY + radius1 * Math.sin(angle1 + 0.1));
ctx.strokeStyle = "#FFF";
ctx.stroke();
angle1 += 0.1;
// Draw second curve
ctx.beginPath();
ctx.moveTo(centerX + radius2 * Math.cos(angle2), centerY + radius2 * Math.sin(angle2));
ctx.quadraticCurveTo(centerX, centerY, centerX + radius2 * Math.cos(angle2 + 0.15), centerY + radius2 * Math.sin(angle2 + 0.15));
ctx.strokeStyle = "#0FF";
ctx.stroke();
angle2 += 0.15;
// Draw third curve
ctx.beginPath();
ctx.moveTo(centerX + radius3 * Math.cos(angle3), centerY + radius3 * Math.sin(angle3));
ctx.quadraticCurveTo(centerX, centerY, centerX + radius3 * Math.cos(angle3 + 0.2), centerY + radius3 * Math.sin(angle3 + 0.2));
ctx.strokeStyle = "#F0F";
ctx.stroke();
angle3 += 0.2;
}
setInterval(draw, 20);
</script>
</body>
</html>
このコードは、円の中心から始まる3つの曲線を描画し、それぞれの曲線が円の輪郭線に沿って移動します。アニメーションは、20ミリ秒ごとに更新されます。
回答結果 ↓
https://ok2nd.sakura.ne.jp/Test/chatGpt/artwork4.html
■5.もっと、もっと、複雑な動きをするカラーのアートを作ってみて。
-----
【回答】
以下がHTML、CSS、およびJavaScriptを使用して作成した、複雑な動きをするカラーのアート作品です。以下のコードをコピーして、HTMLファイルに貼り付けてください。
<!DOCTYPE html>
<html>
<head>
<title>Artwork</title>
<style>
body {
margin: 0;
padding: 0;
background-color: black;
}
#canvas {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var centerX = width / 2;
var centerY = height / 2;
var colors = ["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#00ffff", "#ff00ff"];
var colorIndex = 0;
function draw() {
var x = Math.random() * width;
var y = Math.random() * height;
ctx.fillStyle = colors[colorIndex];
ctx.fillRect(x, y, 5, 5);
colorIndex++;
if (colorIndex >= colors.length) {
colorIndex = 0;
}
}
setInterval(draw, 10);
</script>
</body>
</html>
このコードは、ランダムな位置に短いラインを描画し、色をランダムに変更します。これにより、非常に複雑なカラフルなアート作品が生成されます。
回答結果 ↓
https://ok2nd.sakura.ne.jp/Test/chatGpt/artwork5.html
■6.HTMLとCSSとJavaScriptで立体のボールが飛び跳ねるようなプログラムを作ってみて。
-----
【回答】
以下は、HTML、CSS、およびJavaScriptを使用して立体のボールが飛び跳ねるアニメーションを作成する例です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bouncing Ball</title>
<style>
/* ボールのスタイル */
#ball {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="ball"></div>
<script>
// ボールの初期位置と速度
let x = 50; // x座標
let y = 50; // y座標
let vx = 5; // x方向の速度
let vy = 2; // y方向の速度
// キャンバスのサイズ
const canvasWidth = document.documentElement.clientWidth;
const canvasHeight = document.documentElement.clientHeight;
// ボールを移動する関数
function moveBall() {
// ボールの位置を更新
x += vx;
y += vy;
// 壁に当たった場合の処理
if (x + 50 > canvasWidth || x < 0) {
vx = -vx;
}
if (y + 50 > canvasHeight || y < 0) {
vy = -vy;
}
// ボールの位置を反映
const ball = document.getElementById('ball');
ball.style.left = x + 'px';
ball.style.top = y + 'px';
}
// アニメーションを開始する関数
function startAnimation() {
setInterval(moveBall, 10); // 10ミリ秒ごとにmoveBall関数を呼び出す
}
// ページが読み込まれたらアニメーションを開始する
window.onload = startAnimation;
</script>
</body>
</html>
このプログラムでは、div要素にid="ball"を指定して、CSSでボールのスタイルを設定しています。JavaScriptで、ボールの初期位置と速度を設定し、moveBall関数でボールを移動させます。setInterval関数を使用して、moveBall関数を一定間隔で呼び出すことで、アニメーションを実現しています。また、ウィンドウのサイズを取得して、画面の端にボールが当たった場合に反転するようにしています。
回答結果 ↓
https://ok2nd.sakura.ne.jp/Test/chatGpt/artwork6.html
----------