今朝は冷え込んだのでシートヒーターつけようとしたら$300ドル払わないと起動できない仕組みになってる。セコいアップセルしかけてくるな。 https://t.co/CRe4p5HsUz
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
ページの背景で動くダイナミックなパーティクルやラインアニメーション、あるいはちょっとした遊びごころの溢れるキャラクターアニメーションなど、webページにクリエイティブな表現を組み込めるようになりたいと考える方はエンジニアにも多いでしょう。 この記事では、基本的なJavaScriptの知識があれば誰でも始められるp5.jsというライブラリを使用して、クリエイティブな作品作りの入門を解説します。 環境面では、フロントエンド開発のデファクト・スタンダードとも言えるVisual Studio Code(以下VS Code)とTypeScriptを使用して、モダンで快適な開発環境を作ります。 環境構築といっても、とくに難しい作業はありません。記事を読みながらぜひ、オリジナルの作品作りにチャレンジしてみてください。 ▼ VS Codeでp5.jsを使って制作している環境の例 クリエイティブ・コーディン
去年の年末くらいから、会社のメンバーで「WeeklyCodingしてみよう & p5jsさわってみよう」という、ゆるい取り組みがはじまりました。 それがきっかけで個人的にデイリーコーディングをし始めたので、備忘も兼ねてソースを載せていきたいと思います! (デイリーコーディング続けられたよ、という記事も書いたのでぜひ・・・) この1ヶ月は、1日1つを目標に「和柄」をかいてみました。 パターン(繰り返す)ときのアイデアメモ✏️ 作ってる途中で気づいたのですが、私はこう作ってたようです。 というのを先にメモしておきます。 「1」とする単位(柄)を決めて作る この柄を1として、それが繰り返してるな〜をさがします。 それを1つのfunctionにまとめて書きます。 さらにその柄の中でも繰り返してる部分があれば、細分化をしていきます。 パターン以外でも、絵を分解する意識するとコードに落とし込むのが捗る
インストール不要!Rubyでゲーム、ビジュアルアート開発ができる新環境「rbCanvas/p5」の紹介Rubyゲーム制作初心者向けp5.jsrbCanvas rbCanvas/p5 https://rbcanvas.net/p5/ (rbCanvas/p5公式ページ より) 1. はじめに Rubyでゲームプログラミングというと、DXRubyライブラリが多く使われてきました。また、DXRubyと互換性のある統合開発環境として、rbCanvasや DXOpalなどもあります。 今回紹介する「rbCanvas/p5」は、上記のrbCanvasと姉妹関係にありますが、グラフィックの表現力がより強力で多彩になり、3D表現もできるようになりました。 これは、ビジュアルアートの分野で使われているProcessingや p5.js の力をRubyから使うことにより実現しています。そのため、これまで以上に
この記事は、以下のツイートで動画・画像をのせていた、ブラウザ上でのリアルタイム物体検出の話です。 上記の内容は、以下の OpenProcessing のスケッチにアクセスすると、実際に試していただくことができます。 ●ml5.js で物体検出(COCO-SSD を利用) - OpenProcessing https://openprocessing.org/sketch/1795350 実装した内容の話 今回の内容は、p5.js と ml5.js の 2つを組み合わせて作っています。その実装内容や、実装に関する補足を、この後に書いていきます。 実装の際に参照した情報 実装時には、以下の ml5.js公式のドキュメントを見て実装しました。 ●ObjectDetector https://learn.ml5js.org/#/reference/object-detector ml5.js によ
ruby.wasm + p5.js の組み合わせです。ほとんどの API は移植したので大体同じことができると思います。 https://p5rb.ongaeshi.me/ https://p5rb.ongaeshi.me/examples に色々サンプル。 https://p5rb.ongaeshi.me/editor にオンラインエディタがあります。 使い方 p5.rb を HTML に読みこめばすぐに使えます。 <html> <head> <script src="https://cdn.jsdelivr.net/npm/ruby-3_2-wasm-wasi@next/dist/browser.script.iife.js"></script> <script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script
これは大変エキサイティングかつ創造性を要する仕事でいいものなのですが、この先の心身のすこやかさとしてプログラミングの身体性も改めて実感したいなあと思いまして家族に相談したところ、クリエイティブコーディングはいいぞということで動かし始めました。 p5.rbでわかったことsetupは1回呼ばれる drawはフレームごとに呼ばれる https://p5js.org/reference/ のAPIやp5.jsのシステム変数をRubyからコールさせてくれる 仕組みはべつのものですが、Win32OLEを経由してRubyからCOM経由でExcelを操作してたあの頃を思い出しました DevToolsでエラーのスタックトレースがでる 今日やったことhttps://p5rb.ongaeshi.me/ のデフォルトのコードを書き換えて動かしてみました。 def setup createCanvas(710,
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.
この記事は GMOアドマーケティング Advent Calendar 2021 24日目の記事です。 はじめに こんにちは、GMOアドマーケティングのR.Yです。 今回はp5.jsを使用して読み込みの長い画面でも退屈しないようなゲーム風読み込み画面を作成しましたのでその紹介です。 p5.jsとは p5.jsとはJavaをベースに作られた「Processing」と言う電子アートのプログラミング言語をJavaScriptで使用できるようにしたライブラリになります。p5.jsを使うことでブラウザ上で表示できるアニメーションを作成することができます。 サンプル 文字だけではわかりづらいと思うのでp5.jsによるアニメーションのサンプルを用意しました。以下が実際の表示とプログラムになります。※以降の動画は全て当社が作成したものになります。 sample.html <script src="https
ブログを始めて5か月、「収益やアクセス、心理状態などをまとめた記事」を書いてみることにしました。 当ブログは完全ビギナーレベルでお恥ずかしい限りですが、ひとつの事例として参考にしていただけたら幸いです。 なぜ、この手の記事をこのタイミングで公開してみたかといいますと・・・ つい最近、 コソコソ続けていたブログを、「友達の夏ちゃん(仮名)が見つけてくれた」からです。笑 気分的には、 「必死でかくれんぼしていて、なかなか見つけてもらえなくて、寂しい感じになっていたところ・・・結局は見つかって、実は、かなり恥ずかしい。だけど、多くのサイトの中から発見してもらえたということは、かなり嬉しい。」 そんな心境です。 次に会った時、なんて話しかかければ良いのか、おっさんは勝手に悩んでいたりしますが。(笑) 日本のブロガーは、一説によると600万人くらいいらっしゃるようなので、その中から知り合いがヒットし
この記事はProcessing Advent Calendar 2020 6日目の記事です。 0. はじめに 0. 1 シェーダーって何? シェーダー(shader)とは、動詞"shade"「陰をつける,明暗(濃淡)をつける」に"-er"「~するもの」がついた名前の通り、「3DCGで陰影処理を行うプログラム」のことです。 p5.jsのWEBGLモードにおいては、loadshader()で外部ファイルとして読み込む、またはcreateshader()でString型として記述したものを読み込むことによって、自分で書いたシェーダーを使うことができます。 自作のシェーダーを使わない場合には、p5.jsライブラリ標準のシェーダーが使われます。シェーダーを自分で書く際には、はじめのうちは標準シェーダーを書き換えるような形で行うことがおすすめです。 0. 2 トゥーンシェーダーって何? 「トゥーンシェ
米電気自動車(EV)大手テスラが21日、S&P総合500種指数に組み入れられた。カリフォルニア州サンディエゴで19日撮影(2020年 ロイター/MIKE BLAKE) [21日 ロイター] - 米電気自動車(EV)大手テスラが21日、S&P総合500種指数に組み入れられた。先週末18日は大商い下で過去最高値を更新していたが、きょうは6.5%安で取引を終了した。 米アップルとの競合の可能性を伝える報道を背景に、1日の下落率としては約1週間ぶりの大きさとなった。ロイターは、複数の関係筋の話として、アップルが自動運転車の開発を推し進め、2024年の乗用車製造開始を目指していると報じた。自社開発の最先端の電池が搭載される見通しという。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く