はじめに PNG や GIF 画像で identify を実行すると、よく分からない座標が表示される件です。JPEG では問題になりません。 なお、このエントリは実質 +repage の紹介記事となります。 % identify crop.png crop.png PNG 200x200 640x480+100+100 8-bit sRGB 183c 4344B 0.000u 0:00.000 ImageMagick はこの 640x480 を (Layer) Canvas サイズ、200x200 は (Image) Page サイズと呼びます。 (canvas は書き込み作業途中の image データを表す事もあって多義的なので注意) Canvas / Page のイメージ図 ImageMagick で crop を繰り返すと意図しない動きをしたり、GIF アニメーションの resize
1. はじめに ついに ChatGPT-4V が使えるようになりました！ これまでGUIを作成するときには、ChatGPT に 「まず左上にテキストボックスがあって、その右にボタンがあって...」 とちまちま指示する必要があったのですが、GPT-4V により画像を渡せるようになります。 この記事では、ChatGPT-4V を使うと GUI 作成がどのくらい楽になるのかを検証してみたいと思います！ 作成するGUIはこちらのものです。 2. GPT-4V の読み取り精度の確認 2.1. 日本語のポンチ絵 まず、元の記事で使用した日本語のポンチ絵を渡して、どのように読み取れるのかを確認します。 GUIの各要素の位置はなんとなく読み取れている感じがしますが、日本語の読み取り精度はあまり高くないようです。 2.2. 英語のポンチ絵 先ほどのポンチ絵を英語に変換してみます（左下だけ詳しく書き直しました
NVIDIA Canvas: AI のパワーを活用する
AI により、筆で簡単に描いた線や形がリアリティのある風景画に変わります。背景をすばやく作成したり、コンセプトの探究を加速したりすることによりアイディアの視覚化にさらに多くの時間を使えるようになります。
はじめに 完全に釣りタイトルです。Three.js などを使わずに生の WebGL で ▲ を描くというだけの話です。いわゆる WebGL の「Hello World」です。Vercel や Next.js とは一切関係ありません。 WebGL を詳細に解説しているサイトはいくつかあって、内容に関してはどれもすばらしいものです。ただ、何年も前のものなのでソースコードにまだ var が使われているものも多く、また独自関数で処理をまとめていることで、個人的には全体の流れが少しわかりにくくなっている気がします。さらに TypeScript を使っている日本語記事は見当たりませんでしたので、それらを補う形でまとめてみたいと思います。 なお、本記事では全体的な流れに焦点を当てているので、詳細な解説は下記サイトなどをご参考ください。 WebGLの基本 (日本語) wgld.org | WebGL (日
制作事例：Lottieのアニメーションを手描き風に動かしたい！ SVGとWebGLを使った2つのアプローチ ICSでは2022年に株式会社ニコン様の中長期ビジョンを紹介する特設サイト『2030年のありたい姿』の実装を行いました。この記事ではサイトのメインビジュアルとして使用している手描き感のあるアニメーションを実現するために検証・実装したSVGとWebGLの技術ご紹介します。SVGやWebGLを活用したビジュアル表現に興味のあるエンジニアはもちろん、ウェブ技術を使ってどのような表現ができるのか知っておきたいディレクター・デザイナーの方も是非ご覧ください。 ▼ 特設サイト『2030年のありたい姿』 「人と機械の共創」を魅力的なアニメーションで描きたい 『2030年のありたい姿』の重要なキーワードが「人と機械が共創する社会」でした。特設サイトではこのビジョンを広く一般の方向けに伝えるため、株式
背景を透過する Web カメラをデスクトップ最前面に出す mac アプリを作った | Basicinc Enjoy Hacking!
オンラインミーティングや勉強会が盛んになってきた昨今、自分が映っているカメラ映像の背景を透過させて、他のアプリケーションと良い感じに一緒に配信したいな〜と思ったので mewcam ( ミュウカム ) という mac アプリを作ってみました。 こんな感じです。 良いですね（表情が固い）。 ダウンロード GitHub にソースコードとアプリを公開しています。是非ダウンロードして使ってみてください。 https://github.com/zaru/mewcam Download : mewcam v1.1.0 for mac 今は mac のみの対応ですが、Windows 版もリリースする予定です。もしフィードバックがあれば @zaru までお願いします。 Windows 版もリリースしました！ 最新版のダウンロードは GitHub からお願いします。 どうやって作るのか ここからは作り方です。
パーティクルとは粒子のこと。パーティクルを表現に取り入れると、印象的な演出に役立ちます。JavaScriptやWebGLを使うことで、ウェブの技術でもパーティクル表現の制作が可能です。本記事では題材にパーティクル表現の制作に役立つアイデアや着眼点を紹介します。 作例の紹介 本記事のチュートリアルの完成形はこちらになります。 別タブで再生する ソースコードを確認する この記事で学べること 2Dテキストを粒子化して動かす表現 パーリンノイズによる空気感の再現 GSAPによる大量のトゥイーン制御 WebGLの高速化（PixiJSの応用） 制作の技術 本作例を制作するにあたり、利用しているウェブの技術の概要を紹介します。 WebGL 画面表示はWebGLを利用します。ウェブのレンダリング技術において、もっとも高速な描画性能を得られるのがWebGLであるためです。WebGLは3D表現のための技術と思
Flutter 2で使えるWebAssemblyレンダラー CanvasKit は本当に高速なのか？ - GMOインターネットグループ グループ研究開発本部
（補足） デスクトップブラウザにおいては、スクリーンサイズに統一性を持たせるために開発ツールで下記端末のスクリーンをエミュレートして検証します。 iPhone 6/7/8 Plus相当（414×736、DPR 3） 4.検証結果 検証時点でのFlutterのバージョンは 2.0.2 です。 CanvasKitは 0.24.0 （https://unpkg.com/[email protected]/bin/canvaskit.wasm）が利用されていました。 それでは各ブラウザにおける結果を見ていきたいと思います。 1.MacBook Pro (13-inch, 2020) , macOS 10.15.7 , Chrome (89.0.4389.82) , Blink パーティクル数4,000あたりから差が出始め、CanvasKitの方が30〜40%程度高いパフォーマンスを出しているように
色、ムズ〜〜〜〜 - マルシテイア
本記事は、先日開催されたKyoto.js 19のために用意したLT資料に加筆したものです。 kyotojs.connpass.com こんにちは、天城です。 最近はWebGLで動画編集アプリを開発しており、Webでの色の扱いについて日々苦しんでおります。 この記事では、僕が最近知った色関連の小ネタを共有します。 目次 話題1: mix-blend-modeにaddがない そもそもBlendingって何？ Webでは基本的にsource-over compositingしか使われない Canvasではsource-over以外のCompositingが使える PDF Reference 一方その頃WebGLは…… 話題2: Display P3 CSS Color 4でDisplay P3が使えるようになった Display P3 CSS Color 4 CSS Color 4 で導入された
こんにちは、年末年始に新しくWindows10の自作PCを組んだ虎の穴ラボのおっくんです。 昨年から、Web audioを取り扱うライブラリとしてTone.jsを使って、 ブラウザで音を鳴らしたりということをしていたのですが、一歩進んで再生する音を可視化したいと思いました。 可視化の方法としては、発生させる音を文字で表示するということもできるのですが、 今回は音楽再生ソフトの視覚エフェクトをイメージして作成することにしました。 Web audioを扱うTone.jsとCanvasを扱うp5.jsの2つライブラリを使用して、円環状に配置した音程に対応したバーが伸び縮みするアニメーションをCanvasに表示させます。 完成したページは以下のようになります。 音楽再生アプリの画面 完成品はこちらアップロードしておりますので、ぜひ見てみてください。 開発環境 OS MacOS Mojave バージ
CSSの底力を見せてやる 「いいか…デザイナー…」 「これはCSSと私一人の問題だ…」 「CSSなんかに凝ったってSEOが捗るわけではないと知ったフウな事をいう者もいるだろう」 「SVGでいいじゃんという者もいる」 「だが」 「自分のCSSをドブに捨てられて その事を無理矢理忘れてSVGをただ貼るなんて人生は あたしはまっぴらごめんだし、 あたしはその覚悟をしてきた！！！」 …というわけではありませんが、なるべくリアルな眼球をHTMLとCSSでマークアップしていきます。 svgやcanvasは使わないしjsなんかもちろん使いません。 でも素で書くのは大変なのでpugとstylusでやっていこうと思います。 結果だけ知りたい人はこちら > eye2 pure css, without svg&canvas ベースとなる眼球を作成しよう
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
canvas上で群れを表現 - Qiita
前置き プログラミング初心者のため、見苦しいコードが多いです。プログラムを組んで何か作るの好きです！ ※ 2020/10/30追記 Pythonでボイドを利用したゲームを作ってみたので良かったら見てください。 【Tkinter実践】Pythonでオリジナルゲームを作る 生き物に関するプログラミングがしたい！ 小さいころから生き物が好きだった。プログラミングで生物の行動シュミレーションなど出来たら面白そうだ。 調べたらボイドというアルゴリズムを見つけた。 ボイドって？ ボイド(Boids)は、アメリカのアニメーション・プログラマ、クレイグ・レイノルズが考案・作製した人工生命シミュレーションプログラムである。名称は「鳥もどき(bird-oid)」から取られている。 wikipediaからの引用。コンピュータ上に鳥オブジェクトを作成し、それに対して以下の3つのルールを作用させるだけで、鳥の群れを
Forking Chrome to turn HTML into SVG November 11, 2022 I've been working on a program called html2svg, it converts web pages to SVG. It's based on a fork of Chromium to support modern web standards. This post explains most patches. Take a picture SkiaBlinkPDF<div style="width: 50px; height: 50px; background: red" />canvas->drawRect(0, 0, 50, 50, SkPaint { .fill = SkColor::Red })(GPU)GaneshRaster(C
すみません、もうObsidian使ってません…テキストエディタを乗り換えた5つの理由 2022年1月13日投稿 2022年1月16日更新 カテゴリ：Zettelkasten 著者: jMatsuzaki 私の愛しいアップルパイへ ナレッジノートZettelkastenの構築にあたって利用を始めたノートアプリケーション「Obsidian」でしたが、半年ほどで使うのをやめて現在はNeovimへ乗り換えました。 愛すべき読者の方からしばしば「今はObsidianを使っていないのですか？」と聞かれることがあるので、今日はその理由を整理しようと思った次第です。 我が記事を読んでツールを使い始めてくれた方もいるので、Obsidianこそ最強であると謳った責任もあろうと筆を取りました。後日談として使わなくなった理由を明確にしておきます。 Obsidianは優れたツールですし、特別大きな問題があったわけで
iDraw.js | iDraw.js
iDraw.jsDrawing easier on the web. A simple JavaScript framework for Drawing on the web.
3DのWebサービス開発で宣言的なWebGLライブラリを導入して感じた保守運用上のメリット - spacelyのブログ
1 はじめに スペースリーでエンジニアをしている長谷川です。 最近は3DのWebアプリの開発を担当していて、弊社でリリースしている「パノラマ変換3Dプレイヤー」のコンテンツ作成機能などを開発しています。 3DのWebアプリを開発する際には「React/Vue × WebGL系ライブラリ」という構成が代表的なケースの1つであり、弊社でもその構成を選択しました。 ところが、3D Webアプリはサービスの数としては多くないので保守運用まで考慮した設計ノウハウはまだまだ十分に共有されてはおらず、開発を進めるにあたって以下のような懸念点がありました。（詳細は次章） 「宣言的なReact/VueのWebアプリ」と「命令的なWebGL系ライブラリ」というスタイルの違うコードが混ざることでそれぞれの責任分担が曖昧になりやすい 「WebGL系ライブラリを用いた3Dアプリ」の保守運用を考慮した設計に関するノウ
Google Docs will now use canvas based rendering: this may impact some Chrome extensions
Join the official community for Google Workspace administrators In the Google Cloud Community, connect with Googlers and other Google Workspace admins like yourself. Participate in product discussions, check out the Community Articles, and learn tips and tricks that will make your work and life easier. Be the first to know what's happening with Google Workspace. ______________ Learn about more Goo
The Hero's Journey (For movie fans, Lego fans, and presenters!)
Are you using ztext and happy with it? Your kind support keeps open-source JS libraries like this free for others. InitializationThere are multiple ways to use ztext. Pick whichever method is easiest for you. HTML attributesVanilla JavaScriptReact JS NewVue JS New How it worksZtext gives the illusion of volume by creating layers from an HTML element. There's no need to spend hours fiddling with <c
JSKIDPIX v1.0.2021
JS KidPix for the web ✨
m5stack.jsを出したので色々遊んでみました。 やっぱりちっちゃいディスプレイがあるので、そこで遊びたいですよね。 画像表示させたいですよね。TVとかyoutubeを流したいですよね。サブディスプレイにしたいですよね というわけでやってみました。 つくったもの #m5stack をサブディスプレイとして採用しました #obnizOS pic.twitter.com/T9NbuqUAUI — kido@IoTエンジニア (@9wick) 2019年8月23日 だいたい60行ぐらいのプログラムです。 お手軽感満載です かわりにソースコード外で色々頑張ってるところがあります。 しくみ サブディスプレイのキャプチャを撮ってm5stackで表示しています。 色々小ネタはありますが、基本的にはそれだけです。 これを実現するのに、chrome(HTML)とobnizOSを使っています。 サブディス
●●WebGL(PIXI.js + glsl)と物理演算(matter.js)で可愛い絵本風タピオカ作ったので解説●● - Qiita
こんにちは。WebGLのお勉強1週間目くらいの絵描き系エンジニア「ゆき」です。最近Qiita界隈でもタピオカが流行っているらしいので、今日は勉強中の技術をフルに活用してタピオカを作ってみました。 ここで試せます（スマホ未対応）： https://tapioca-pixi.firebaseapp.com この記事の内容と想定読者 この記事ではJavaScriptの描画エンジンの定番の一つであるPIXI.jsと、物理演算ライブラリのmatter.jsを使って、タピオカを可愛くふわふわさせる表現のアプローチとポイントを解説します。 物理エンジンと描画エンジンの連携方法 シェーダーによるオリジナルの表現 物理演算で表現したいものを作るためのチップスいくつか シェーダー(glsl)周りは結構独特なので別途もうちょっとちゃんとした解説記事を書く予定です。この記事はどちらかというと駆け足のネタ記事になっ
Please log in (or register) to post a dweet (copy-paste the code somewhere safe to save it meanwhile) u(t) is called 60 times per second. t: Elapsed time in seconds. S: Shorthand for Math.sin. C: Shorthand for Math.cos. T: Shorthand for Math.tan. R: Function that generates rgba-strings, usage ex.: R(255, 255, 255, 0.5) c: A 1920x1080 canvas. x: A 2D context for that canvas.
スマートフォンの普及によって、カメラやマイク、位置情報などを用いたコンテンツに誰もがアクセスできるようになりました。さらに近頃では、ビデオ会議が盛んに行われるようになったり、カメラと同期して動くバーチャルアバターで遊ぶ人も増え、デバイスを介した面白いコンテンツがどんどん増えています。 フロントエンドの開発者としても、時流に乗っておもしろコンテンツを作りたい、そんな思いでいっぱいです。そこで、今回の記事ではカメラを用いたウェブコンテンツを作成してみます。今回作成するのは、次のようなブラウザで動くクリエイティブカメラです。 サンプルを別ウインドウで開く コードを確認する 本記事を読むことで、以下の知識が身につきます。 ブラウザからウェブカメラにアクセスする方法 デバイスから取得したデータをブラウザに表示する方法 映像とCanvasを組み合わせたクリエイティブ表現の作り方 ブラウザはもはや、ブラ
Intro ブラウザの持つ Video/Audio コーデック実装へアクセスする API として WebCodecs の仕様策定と実装が進んでいる。 これにより、映像や音声の変換などといったユースケースへの応用も可能だ。 本来なら WebCodecs 単体の API について解説するところだが、筆者がこの API を待っていた理由であるところの「WebRTC の代替」としての WebCodecs/WebTransport の応用に注目し、背景も踏まえて解説する。 WebRTC WebRTC は UDP 上に DTLS で交換した鍵を用いて、 RTP を SRTP で流し、そのシグナリングに SDP を、ホールパンチに ICE(STUN/TURN) を用いることで、 P2P ビデオチャットといったユースケースを可能にした API だ。 しかし、最初から「P2P ビデオチャット」というユースケ
How to Create Flowcharts in Microsoft Word (The Easy Way)
Flowcharts are easy with the right technique. Learn how to make a flowchart in Microsoft Word! When you use Microsoft Word every day, it makes sense to know its powers. When you don't have a dedicated diagramming tool, Word can be one of the easiest ways to make a flowchart. This article will go through the different elements needed to turn Microsoft Word into a flowchart creator. How to Make a Fl
AndroidのCanvasを使ってバーコード読取のファインダーを作り直した話 - リサーチ・アンド・イノベーション 開発者ブログ
リサーチ・アンド・イノベーションの高田(tfandkusu)です。こだわりを持ってAndroidアプリ作りができる環境を求めて、今年１月に入社し、CODEのAndroidアプリ開発を担当しています。このたびサードパーティーから買っているバーコードデコードライブラリを別のものに差し替えることとなりましたが、そのライブラリには特徴的な仕様があり、それに合わせてバーコードスキャン範囲を示す表示(以下、ファインダー)にも改修を加えることにしました。この記事ではその部分をCanvasを使って再実装したことを紹介します。 バーコード読取画面 ファインダーをよく見る ファインダーは下の図で示すとおりです。 外側は白い半透明 中心に穴が開いている 4角に不透明の線がある 線には外側だけ陰がある 全体 外側だけに影がある バーコードデコードライブラリの仕様 バーコードデコードライブラリの仕様ですが、サイズが
アマゾンが2025年春にもふるさと納税に参入するとの報道を受け、大手ポータルサイト｢ふるさとチョイス｣を運営するトラストバンクを傘下に持つチェンジホールディングス（HD）は3月12日、株主・投資家向けの適時開示としてコメントを発表した。 声明ではアマゾンの参入について、｢法の趣旨に即して、健全に制度が運用される限り、多様な事業者が参画することは寄付者・自治体にとって選択肢が広がることから、市場全体に有利に働く｣との認識を示した。 ふるさと納税制度については｢特産品や日用品をインターネット上で売買するECと混同されがちですが、本来の制度趣旨とは異なります｣とも指摘し、さらに｢『国の制度は国の意向に沿って運営すべし』というのが当社グループの考え方です｣と改めて自社サービスの姿勢を強調した。 ふるさとチョイスは、日本初のふるさと納税仲介サイトとして2012年にサービスを開始。2023年12月には
1.4.0Mini map for web pages. You can find an example on this web site in the top right corner. And there are two more demo pages: boxes and text. Example usageadd a canvas tag to your HTML page: <canvas id='map'></canvas> fix it's position on the screen: #map { position: fixed; top: 0; right: 0; width: 200px; height: 100%; z-index: 100; } init and style the mini map: pagemap(document.querySelector
GitHub - leeoniya/uPlot: 📈 A small, fast chart for time series, lines, areas, ohlc & bars
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
はじめに Hello world, I give you Zdog 🐶 https://t.co/yL9FsIN6C7 Round, flat, designer-friendly pseudo-3D engine for canvas & SVG pic.twitter.com/JXhYlCd8Sb — Dave DeSandro (@desandro) 2019年5月28日 先日、CodePenを眺めていたところ、Zdogというものを見つけて、とてもよかったので一通りドキュメントをみていろいろ作ってみました。 いつもならそれで終わりなのですが、6月4日にリリースされたばかり1で日が浅く、まだ日本語の情報が少なかったため、自分のための備忘録も兼ねて簡単にご紹介します。 Zdogとは Round, flat, designer-friendly pseudo-3D engine for
NVIDIA Canvas Use AI to turn simple brushstrokes into realistic landscape images. Create backgrounds quickly, or speed up your concept exploration so you can spend more time visualizing ideas.
JavaScript Blob, TypedArray, 文字列, Canvas, Imageとか周りの変換まとめ
Blob (≒ File)ArrayBufferBufferTypedArray (Uint8Array, Uint16Array, Uint32Array)Canvas (HTMLCanvasElement)Image (HTMLImageElement)文字列 (普通の文字列, Base64文字列, バイナリ文字列) JavaScriptの、ここらへん同士の変換方法をむやみやたらにまとめてます。 [2022-02-27 追記] 全体の見直しを行いました。また、コメントを参考に一部の関数 (uint8ArrayToUint16Array, uint8ArrayToUint32Array) を修正しました。ご指摘くださりありがとうございました。 TypedArray → BlobBlob → ArrayBufferArrayBuffer → TypedArrayTypedArray → A
Hands-on WebAssembly: Try the basics—Martian Chronicles, Evil Martians’ team blog
Get started with WebAssembly through our simple hands-on tutorial that assumes only general knowledge in web development. The only tools you’ll need to get a taste of Wasm through runnable code examples are a code editor, any modern browser, and a Docker container with toolchains for C and Rust that comes with the article. WebAssembly has been around for three years. It works in all modern browser
Google Docs will now use canvas based rendering: this may impact some Chrome extensions
Google Docs will now use canvas based rendering: this may impact some Chrome extensions [May 26, 2021]: We’ve updated the “Additional details” section of this post with more information on Google Docs accessibility features and support. Please see below for more information. We’re updating the way Google Docs renders documents. Over the course of the next several months, we’ll be migrating the und
1,000,000件どんとこい！大量のデータ表示に適したチャートライブラリ3選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
1,000,000件の散布図を表示できたライブラリ データ数1,000,000件の散布図表示に耐え、最終候補として残ったライブラリは以下の3点でした。 Plotly D3FC Apache ECharts Apache ECharts 出典：https://echarts.apache.org/ Apache ECharts GitHub 散布図（1,000,000件） 実現できるチャートの種類が圧倒的に多く、GitHubのスター数も47.3kと群を抜いています。サンプルも豊富で、ドキュメントは詳細です。中国のBaidu社から提供されています。 Plotly 出典：https://plotly.com/javascript/ Plotly JavaScript Graphing Library GitHub 散布図（1,000,000件） Apache EChartsに次いで多機能なライブ
a タグの download 属性でダウンロード 従来は Content-Disposition で「ファイルに保存」としていた これまで、サーバーからのデータを「ダウンロードしてファイルに保存」するには、サーバーからクライアントへの HTTP レスポンスを送信するときに次のような HTTP ヘッダーを送る必要がありました。 Content-Disposition: attachment; filename="foo.png" ブラウザ側では、Content-Disposition というヘッダーをみることで、そのコンテンツをそのままインラインで表示するのではないということを知ることができます。 言い換えると、Content-Disposition というヘッダーがある場合に、ブラウザはそのページにナビゲートするのではなく、これからサーバーから送られてくるデータは今のページのアタッチメント
Flowyはブラウザでフローチャートを作成出来るスクリプトです。シンプルで軽量なコードですがjQueryに依存します 上図のように左ペインからブロックをD&Dで追加、右ペインで各ブロックを編集するUIとなっていますので直感的な操作でフローチャートを作成する事が出来ます 基本的な機能のみの提供で、完成されているようなものでは無いようで、あくまでフローチャートを作成出来る機能を提供するもののようです examplevar spacing_x = 40; var spacing_y = 100; // 初期化 flowy($("#canvas"), drag, release, snapping, spacing_x, spacing_y);初期化します。例ではブロックサイズを定義していますがデフォルトで設定されています function snapping(drag) { //例：ドラッグするブ
この記事は、JavaScript で Flash Player の実現を頑張った（もしくは現在進行系で頑張っている）人たちの集う Flash Advent Calendar 2020 に参加しております。 HTML5 の Canvas はかなりの機能を有しております。Flash Player の実装にあたってこれらの豊富な Canvas の機能は大変有用なのですが、そんな中でも globalCompositeOperation というマイナー機能の活用方法は、今の時代でも十分に応用が効く知識です。Flash 終了への手向けとして、ここにその機能の素晴らしさと有効利用の方法を改めて紹介致します。 HTML5 (canvas) の globalCompositeOperation とは 一言で言うと、globalCompositeOperation は Composite すなわち合成方法の指
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ImageMagick の Canvas / Page について - Qiita
画像入力で楽々！ChatGPT-4V と Python GUI 開発 - Qiita
生 WebGL と TypeScript で Vercel のロゴを作る
制作事例：Lottieのアニメーションを手描き風に動かしたい！SVGとWebGLを使った2つのアプローチ - ICS MEDIA
JSでクリエイティブコーディング - テキストを分解しパーティクルにする演出 - ICS MEDIA
Tone.jsとp5.jsで音の発生を可視化する - 虎の穴開発室ブログ
リアルな眼球を描く。HTMLとCSSだけで。 - Qiita
GitHub - tldraw/tldraw: a very good whiteboard
Forking Chrome to turn HTML into SVG - Fathy Boundjadj
すみません、もうObsidian使ってません…テキストエディタを乗り換えた5つの理由 | jMatsuzaki
node-canvasでアニメーションGifをつくって遊ぶぞ！
ztext.js | 3D Typography for the Web
obnizOSを使ってm5stackをサブディスプレイ化してみた - Qiita
Top dweets by u/KilledByAPixel | Dwitter
PixiJSで加工する！リアルタイム・クリエイティブカメラ - ICS MEDIA
WebCodecs と WebTransport でビデオチャット | blog.jxck.io
ふるさと納税大手、アマゾン参入に“異例”対応。専門家｢既存サービスの存在意義が問われる｣
pagemap · mini map for web pages · larsjung.de
かわいい3Dエンジン「Zdog」の紹介 - Qiita
NVIDIA Canvas App: AI-Powered Painting
ファイルをダウンロード保存する方法 - JavaScript 入門
ブラウザでフローチャートを作れるシンプルなスクリプト・「Flowy」
知られざる globalCompositeOperation テクニック