読者です 読者をやめる 読者になる 読者になる

落書きノート

ふと自分が気になった事を書いてます

CSS

HTML CSS JavaScriptでCG作成

まあ、パターンが決まりつつありますが、乱数の使い方によっては少し作品の印象が変わるなと思いました。2枚目の写真はfor文のパラメータをいじった結果です。 <html> <head> <title>Canvas tutorial template</title> <script type="text/javascript"> function draw() { var canvas = document.getElementById('tutori</head></html>…

HTML CSS JavaScriptでCG作成

これで最後ですかね。この次から「ジェネラティブアート」を少しずつ不定期に読んでいこうかと思ってます。 <html lang="ja"> <head> <meta charset="utf-8" /> <title>Canvas Tutorial Template</title> <script type="text/javascript"> var PI_2 = Math.PI * 2; var canvasW = 640; var canvasH = 480; var numMovers = 600; var friction = .96; var m</meta></head></html>…

HTML CSS JavaScriptでCG作成

面白かったので講座の続きを。ここで少し疲れたかな。 <html lang="ja"> <head> <meta charset="utf-8" /> <title>Canvas Tutorial Template</title> <script type="text/javascript"> const NUM = 500; const WIDTH = 640; const HEIGHT = 480; var speedX = new Array(NUM); var speedY = new Array(NUM); var locX = new Array(NU…</meta></head></html>

HTML CSS JavaScriptでCG作成

講座を見て自分でやってみました。乱数便利! <html> <head> <title>Canvas tutorial template</title> <script type="text/javascript"> function draw() { var canvas = document.getElementById('tutorial'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.globalAlpha = 0.3; for (i = 0; i < 1</head></html>…

HTML CSS JavaScriptでCG作成

VSCode,汎用的に使えるのは良いですが、インデントの挙動がおかしいとかがあって、まだところどころバグがあるんじゃないのかと思うのですが…。試しにAdobe提供のBracketsを使ってみると便利に使えたのでこちらを使ってみてます。Google Chromeでないとライ…

HTML CSS JavaScriptでCG作成

前回の続きです。 <html> <head> <title>canvas tutorial</title> <script type="text/javascript"> function draw() { var canvas = document.getElementById('tutorial'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillRect(50,50,300,200); ctx.clearRect(120,80,200,140); ctx.strokeRect(</head></html>…

HTML CSS JavaScriptを使ってCG作品を作る

今日は山中まで親と一緒に車で喫茶店に行ってきました。丸太で作られたような店で、そこでコーヒーを。森林浴をしながらコーヒーを飲むかのような。ハンモックもあってゆったり出来るスペースもありましたね。まあ、色々見て疲れたので、今日はOpenGLとクリ…

Bing Search APIを使って画像をかき集める

表題の通り。今回、ウェブ検索機能は省略しました。あらかじめBing Search APIでアカウント登録しないといけません。Microsoftのアカウントを取得して無料プランで登録すれば利用できます。 <html> <head> <title>イメージコレクション</title> <script src="./jquery-1.11.3.min.js"></script> <script src="./image_collection.js"></script> </head></html>