【ARKit】立体文字を配置してみる

前回は、立方体を表示したので、今度は立体のテキスト文字を表示してみました。 let str = "本日は晴天なり" let depth:CGFloat = 0.05 let text = SCNText(string: str, extrusionDepth: depth) text.font = UIFont(name: "HiraKakuProN-W6", size: 0.5); l…

【ARKit,swift3】青い立方体を配置してみる

今回は、swift3で書いて、立方体に青色を付けてみる。 コード override func viewDidLoad() { super.viewDidLoad() sceneView.delegate = self sceneView.showsStatistics = true let scene = SCNScene() let cubeNode = SCNNode(geometry: SCNBox(width: 0.…

【ARKit,Objective-C】白い立方体を配置してみる

ARKitを使ってプロジェクトを作ります。 // Container to hold all of the 3D geometry SCNScene *scene = [SCNScene new]; // The 3D cube geometry we want to draw SCNBox *boxGeometry = [SCNBox boxWithWidth:0.1 height:0.1 length:0.1 chamferRadius:…

【swift3】電子コンパスを使って方角を取得してみる

電子コンパスを使って方角を取得する方法は、座標を取得するのとほぼ同じです。 コード import UIKit import CoreLocation class ViewController: UIViewController, CLLocationManagerDelegate{ var myLocationManager:CLLocationManager? var myHedingLabe…

【swift3】GPSから現在地を取得してみる

「CoreLocation.framework」を追加。 ↓↓↓ Info.plist の 「NSLocationAlwaysAndWhenInUseUsageDescription」 と「NSLocationWhenInUseUsageDescription」 に 位置情報を使用する目的 を記載する。 この内容はユーザに位置情報の使用を許可する際に表示される…

【Xcode】iPhoneで ワイヤレスデバッグをしてみる

デバイスのWifiをONに(同一LAN内) Macとデバイスをまずはケーブルで接続 メニューの[Window->Devices and Simulators] Connect via networkにチェック qiita.com

VoiceText Web API を使ってテキストを自動音声で読み上げる

テキストを自動音声で読み上げてくれるものはないかなーっと探していたら、 ↓こちらのようなサービスを見つけました。 「VoiceText Web API 」というもの。 完全なロボット調ではなくて、ある程度の抑揚をつけて読み上げてくれます。 無料会員登録して手に入…

「FREE ONLINE OCR SERVICE」を使って画像の文字を解析してみる。

画像に表示されている「文字」をテキストに変換してくれるサービスはないかと探していたら、 ↓こちらのようなサービスを発見しました。 FREE ONLINE OCR SERVICE Free Online OCR - convert scanned PDF and images to Word, JPEG to Word 文字の入っている…

THREE で遊んでみる

THREE のライブラリを入れてWebGLで遊んでみました。 ↓以下のライブラリをインクルードして、 <script src="tree/build/three.js"></script> <script src="tree/examples/js/libs/ammo.js"></script> <script src="tree/examples/js/controls/OrbitControls.js"></script> <script src="tree/examples/js/Detector.js"></script>

ChromeでのWebGLを有効にする方法

WegGLを使ったサイトをChromeで見ようと思ったらレンダリングされませんでした。 Safari や Firefox では見れるのになーっと思って↓こちらのサイトを見てみると、 どうやらPC版のChromeでは、「設定(chrome://settings)」の 「ハードウェアアクセラレーシ…

Google API OAuth2.0 でアクセストークンを取得してみる

PHPを使って、Google API OAuth2.0 でアクセストークンを取得してみる。 サイトを構築する際、認証機能を最初から作るよりも、安全でスピーディーだということで。 ↓こちらのサイトを参考にしました。 ↓トークンを取得するクラスを作ってみました。 class Go…

花火を描く【解説】

子供が簡単に花火を描くことができるものを作ってみた。 色の画像の上に、黒色のキャンパスを配置して、黒い部分を消して色を表示しています。 ポイントは、 context.globalCompositeOperation = 'destination-out'; //削除して描く context.globalComposite…

JSを使って2点の座標を結ぶ線の方程式を求めてみる

2点の座標の直線の方程式を求める場合の公式は、 y=ax+b これをjavascript を使って求めてみると、 var a = (endPt.y - startPt.y) / (endPt.x - startPt.x); var b = startPt.y - (startPt.x * a); この方程式を元に、キャンバスの端で交わる座標を…

回るキャンバスに絵が描けるものを作ってみた【解説】

マウスの座標はstage から取得して、それを shapeのgraphicsに描いて反映させます。 その時にポイントなるのが2点。 1つ目は、stage上で、shapeを回転させるための基準点を真ん中に変更。 stage.setTransform(canvas.width / 2, canvas.height / 2); 2つ…

Adobe Animation CC を使って、JSでウゴツールのようなものを作りました。【解説】

JSでウゴツールのようなものを作りました。 描いた絵が揺れます。 絵を描く時は、Shapeをいくつも使って、絵を揺らす時は、Shapeを1つ、中のGraphicsを1つだけ使う方式にすると、動きが軽くなりました。 g.beginStroke(“#000”).setStrokeStyle(5, “round”,…

Adobe Animate CC で、アニメーションを作ってみる

Adobe Animate CC で HTML5 用にJSでアニメーションのスクリプトを書いてみました。 EaselJS v0.8.2 API Documentation : EventDispatcher ほとんどJSの書き方と同じですが、ムービークリップのフレーム遷移に、gotoAndPlayなどが使えるところに Flashの名残…

デザイナーにもWEBプログラミングがわかるように買物や料理に例えてみた

プログラムをしたことがない、またはあまりわからないという人に対して、どういったものなのかを伝えるにはどうしたら良いか。 それを考えてみた。 今回は、WEBプログラミングの話、ホームページを表示したり、その中でアニメーションさせたりするのが主…

Scratch で遊んでみる

小学校6年生のプログラミングでも使われている「Scratch」というサイトで遊んでみました。 前回遊んだ「VISCUIT」のアプリに比べると、かなり本格的なアニメーションプログラミングです。 ↓画面はこんな感じ。 アニメーションに必要な、「動き」「イベント…

VISCUIT で遊んでみる

小学校のプログラミング授業でも使用されているアプリ「VISCUIT」を使ってみました。 viscuityasunori harada教育無料 最初は何をどうしていいかさっぱりわかりませんでした。 ↓こちらのように、虫眼鏡が2つくっついたようなオブジェクトがポイントになりま…

【Unity】Google VRのデモサンプルを動かしてみる

前回に引き続きVRの映像を作っていきます。 Unityで作ったものを動かそうとすると、コンソールにエラーが表示されてうまくいかない! Unity6.5を使っているとかバージョンの違い、スクリプトの違いで動かないのかもしれない。 うーむ、さっぱりわからない…

Unity を使って3DCGオブジェクトを配置してみる

最近話題の「VR」。 VR(バーチャルリアリティー)とは? → CGなどで作られた仮想の世界を体験できる。 VRを体験するためには、通常「ヘッドマウントディスプレイ」が必要になりますが、これがけっこうなお値段がします。 PlayStation VR出版社/メーカ…

【Shade3D】アロマキャンドルを作ってみる

アロマキャンドルを作ってみます。 まずは、ポットの断面図の形を作って、 「回転体」で立体にします。「ポット」の完成。 その器を「複製」して今度は「中身」を作ります。 ブラウザの中の選択した6つのパーツを削除します。 すると、↓こちらのような器の…

【Shade3D】色を付けてみる

個別に色を付ける 立体に色を付ける時は、 「統合パレット」→「材質」の「拡散反射」で、色を選択する。 すると、色がつきます。 色を消したい時は、「削除」で消す。 複数まとめて色を付ける まとめて複数の立体に色をつけたい場合は「マスターサーフェス」…

【Shade3D】コップに取っ手を付けてみる

↓半円のような取っ手の形を作ります。 ↓その取っ手を横からみて、上の方に円を作ります。 ↓この円を「線形状」にしておきます。 ↓↓↓↓ 取っ手を選択し、「記憶」を選択し、「掃引体」を選択すると、 立体感のある取っ手のできあがり。 その取っ手を前回作った…

【Shade3D】コップを作ってみる

コップを作ってみます。 ↓「開いた線形状」を選びます。 ↓コップを横から見て、輪切りにしたような形を作ります。 ↓ツールボックスの立体化で「回転体」を選んでコップの形にします。 ↓「自由曲面に変換」を選び、「角の丸め」をします。 ↓フチの滑らかなコ…

【Shade3D】立方体を角丸にする

ブラウザから天井と底面を選んで、「角の丸め」を選択すると、角丸になります。 ↓こちらの設定で丸みの度合いを設定します。

【Shade3D】一点収束で立方体を作る

「掃引体」を使って立方体を作ります。 ブラウザを見てみると↓こんな感じで、レイヤーは1つだけ。 これを「自由曲面」に変換します。 すると、↓こんな感じになります。 ↓下の2つだけ表示してみると、 天井と底面です。 この2つを削除します。すると、レイ…

【Shade3D】砂時計みたいな形を作ってみる

変形型の立方体を作ってみます。 まずは、3枚の正方形の板を作ります。 すると、↓こちらのようなレイヤー構造になります。 次に、「パート」の「自由曲面」を作ります。 そして、先ほどの3つのレイヤーを入れます。 すると、それぞれが自動的に繋がり、不…

【Shade3D】とんがり帽子を作ってみる

「回転体」の機能を使って、 ↓こちらの三角形で、赤い矢印の方向にドラッグをします。 すると、円錐状のとんがり帽子ができます。

【Shade3D】螺旋階段を作ってみる

前回は、普通の階段を作りましたが、 今回は、螺旋階段を作ります。 まずは、適当に円を作ります。 この円の角度を30度にして扇形を作ります。 「掃引体」を使って、平面を立体にします。 次に、数値を指定して、複製をします。 中心部分を選択し、角度を…