はじめに こんにちは、つきやま です。 ブラウザで動くシンプルでミニマムなドット絵作成サービスを個人開発で作ったので記事にまとめたいと思います！ どんなサービス？ この記事のタイトルの通りブラウザで動くシンプルでミニマムなドット絵作成サービスです。 コンセプトとして気軽にドット絵を描けるサービスにしたいと思い、１ページで完結するサービスにしました。 描いたドット絵を画像保存できます。 保存した画像は SNS のアイコンとしてつかったり、Slack や Discord で絵文字としてもつかえます。 なぜ作ったのか？ 結論から答えると自分がつかいたかったからです。 ブラウザで動くドット絵作成サービスは既にいくつかあります。 ドット絵に興味を持ち使ってみたのですがドット絵初心者には機能が多くて分かりづらかったので、自分が思う「こうだったらもっと良いんじゃないか」を盛り込んだサービスを作ってみまし
最近になって React + TypeScript に入門したので、自分へのメモがてら、基本的なことをまとめてみました。 前提 TypeScript 初心者です。間違いや違和感等々ありましたらコメントで教えていただけると助かります。 JavaScript・React はある程度理解していることが前提です。 TypeScript・React の環境構築やtsconfig.jsonの設定には触れません。 TypeScipt の基礎 「明示的な型定義」と「型推論」 TypeScript の型定義には明示的な型定義と型推論があります。 明示的な型定義は人間が型を指定するのに対し、型推論は TypeScript がいい感じに型を推論してくれます。 実際のコーディングでは型推論を使いつつ、必要な時だけ明示的な型定義をすればいいと思いますが、この記事では型の理解を手助けするために明示的な型定義を使用して
Preis Soma. Sicherste Möglichkeit, Soma online zu bestellen - Honda - Auto Forum - autokult.de
Preis Soma Europäische Apotheke == http://url-qr.tk/Soma - Unsere Preise sind 70% günstiger als in der örtlichen Apotheke - Sie sparen Zeit und Geld in unserem Shop! - Erschwingliche Preise, schnelle Lieferung, schneller Service! - 100% legale Produkte. - Verschiedene Zahlungsmethoden: MasterCard / Visa / AMEX / PayPal / BitCoin - Qualität und pharmazeutische Dosierung. - Schnelle Lieferung garant
See the Pen 9-2 PNGアニメーション（APNG） by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」内の表示を確かめてね！ 動きを実現する仕組み 仕組み ⇒ 1枚の動く画像 長所 ⇒ 透過が利用可能。GIFに比べて画質がきれい。オンラインジェネレーターなどの制作ツールで比較的簡単に制作できる。 短所 ⇒ IE,Edgeには非対応。※apng-canvas.jsで疑似的な対応は可能 オンラインサービス「Ezgif.com（https://ezgif.com）」を利用して制作。 パラパラ漫画のようにコマ送りで複数の画像を組み合わせてPNG形式のアニメーション画像をつくる。 作り方 ① 動かすコマを、画像制作ソフトを使ってコマ数分作る。 カンバスサイズは全てのコマで同じサイズにし、画像を少しずつ動かしてコマ数分を制作。 サンプル
最近のChromeにはCSSの新機能が次々と搭載されています。2017年にはCSS Grid Layoutなどインパクトの大きい新機能が話題になりましたが、他にも有用な新機能があることをご存じでしょうか？ この記事では、CSS Paint APIを紹介します。 CSS Paint APIはグラフィックを描く機能 CSS Paint APIは自由にグラフィックを描ける仕様です。HTML Canvasのようなものを要素の背景画像（background-imageやborder-image）として設定できます。JavaScriptを使って自由にグラフィックを描けるため、従来のCSSで再現の難しかった表現が実現可能になります。 たとえば、次のようなビジュアルを考えてみましょう。四隅の形状が欠けたような表現となっています。従来のCSSではdivタグを複雑に組む必要がありました。 サンプルを別ウインド
[書評] "ゲーム&モダンJavaScript文法で2倍楽しい" グラフィックスプログラミング入門 - Qiita
著者のdoxas様より御恵贈頂きました。内容のご紹介と感想を記したいと思います。 結論を先に書いておきますが、JavaScriptの初心者の方から、これまでゲームの開発をされたことが無い方、ブラウザ上でのCanvasを用いたプログラミングによる画像生成に興味のある方等にとてもお勧めです 技術評論社: https://gihyo.jp/book/2020/978-4-297-11085-7/ ソースコード: https://github.com/doxas/graphics-programming-book 本書指定推奨開発環境: - Chrome - Visual Studio Code 著者doxasさんについて 私とdoxasさんとは直で会ったことは2、3度しかないのですが、初めてお会いしたのは2014年6月のことでした。当時、既に私はdoxasさんのWebGL開発支援サイトに1読者と
![[書評] "ゲーム&モダンJavaScript文法で2倍楽しい" グラフィックスプログラミング入門 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/cc29efb0ad17fd7d87eb24529266f80a8557d3de/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU2JTlCJUI4JUU4JUE5JTk1JTVEJTIwJTIyJUUzJTgyJUIyJUUzJTgzJUJDJUUzJTgzJUEwJTI2JUUzJTgzJUEyJUUzJTgzJTgwJUUzJTgzJUIzSmF2YVNjcmlwdCVFNiU5NiU4NyVFNiVCMyU5NSVFMyU4MSVBNzIlRTUlODAlOEQlRTYlQTUlQkQlRTMlODElOTclRTMlODElODQlMjIlMjAlRTMlODIlQjAlRTMlODMlQTklRTMlODMlOTUlRTMlODIlQTMlRTMlODMlODMlRTMlODIlQUYlRTMlODIlQjklRTMlODMlOTclRTMlODMlQUQlRTMlODIlQjAlRTMlODMlQTklRTMlODMlOUYlRTMlODMlQjMlRTMlODIlQjAlRTUlODUlQTUlRTklOTYlODAmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWY4ZWQwOGNmNTY0MzdlMTAwNjBhZWM1NGIyOGZkZDQ3%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtaW5naGFpJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hNTMyNWI3YjE3YTBlYjM5MzY3MzMwYTkwMTQyYjBlOA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D11e0248380fa0802859e920c36f5c324)
GitHub - jagenjo/litegraph.js: A graph node engine and editor written in Javascript similar to PD or UDK Blueprints, comes with its own editor in HTML5 Canvas2D. The engine can run client side or server side using Node. It allows to export graphs as JSONs
Renders on Canvas2D (zoom in/out and panning, easy to render complex interfaces, can be used inside a WebGLTexture) Easy to use editor (searchbox, keyboard shortcuts, multiple selection, context menu, ...) Optimized to support hundreds of nodes per graph (on editor but also on execution) Customizable theme (colors, shapes, background) Callbacks to personalize every action/drawing/event of nodes Su
チャートの表示を極めておくと、自分で作るwebシステムのクオリティがめちゃくちゃアップすることに気がついた、ユゲタです。 今回も、仕事で使ったChart.jsの、よく使いガチだけど、ネットであまり情報がなかった備忘録を書いておきます。 グラフ表示をした時に、その表示している数が多い場合に、自分の居場所がわかりづらくなる場合があります。 そんな時に、居場所のガイド線を表示してあげることで、グラフのユーザーインターフェイスが一気に向上します。 そんな時のテクニックですね。 【お断り】 このブログ記事は、Chart.jsの標準的な使い方ができる人が対象です。 Char.jsの基本設定などは、本家サイトのサンプルなどで使える人を対象にしていますので、下記リンクから環境を作ってから本ページを参照ください。 Chart.js グラフ内のX軸にカーソルラインを表示させる方法（失敗パターン） 今回の機能の
![[Chart.js] カーソル移動に合わせて、縦軸にラインを引く方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/32e059ba843b7a6cd7b2ccc64ef617fec9384504/height=288;version=1;width=512/https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEi9EvjAF-2UX8Du8Xq9Zdubvzr77T_yn2rxkXwgQM--8VDaCOen5bz1pN2jqTna75Bkf5MzOcT4KZhJGHOs-KkkXvkLk3zYRCNQSfsChsL2mw0g-S8kB4mK3rX7uAHgoStTE1dXSALv0aCwg4kYKwQQ-HhzCY5cgOPnTQNNM-wn8m86gc34JC7DUzCI%2Fw1200-h630-p-k-no-nu%2F1624834860_0.png)
PhobosLab
Like last year with Underrun, I participated in this year's js13kGames – a JavaScript game development competition with a file size limit of 13kb, including code, assets and everything else. My entry was Voidcall, a Real-time Strategy game. Play Voidcall – A WebGL Real-time Strategy game in 13kb of JavaScript Recently, I played the original Command & Conquer (later dubbed "Tiberian Dawn") again. I
動画から目や鼻の位置を取得して顔がどの方向を向いているかを調べる顔向き推定を、ブラウザ上でリアルタイムに行ってみます。 顔向き推定までの流れは大きく 4 つのステップに分けられます。 web カメラから映像を取得する映像から顔のランドマークの座標を取得するランドマーク座標からカメラの回転・移動ベクトルを計算する回転・移動ベクトルから顔の向いている角度を計算する注意：以下のサンプルコードはエラー処理などを省略しています。また OpenCV.js の変数は手動で削除する必要があります。 const imagePoints = cv.Mat.zeros(rows, 2, cv.CV_64FC1); ... imagePoints.delete(); webカメラからvideo取得MediaDevices.getUserMedia() を使うとブラウザ上で web カメラの映像を扱うことができます
米Mozillaは、2月14日（現地時間）にFirefoxの新バージョンとなるWebブラウザ「Firefox 110」をリリースした。Firefox 109から4週間でのバージョンアップとなった。Firefox 109では、2023年1月31日にマイナーバージョンアップの109.0.1がリリースされている。109.0.1では、以下の修正が行われた。 Windows版：一部の環境でレンダリングの低下を引き起こしたフォントスムージングの変更を元に戻した 多数の絵文字を含むページを読み込む際の不具合を修正 一部のエンタープライズ環境で、ページをロードするときに認証プロンプトが表示されない問題の修正 開発者ツールのインスペクターのイベントリスナーチェックボックスのサイズが一定でない問題の修正 このマイナーバージョンアップでは、セキュリティアップデートは行われなかった。したがって、今回は、109.0
Firefox 110 Released With Better WebGL Performance, GPU-Accelerated 2D Canvas - Phoronix
Show Your Support: Did you know that the hundreds of articles written on Phoronix each month are mostly authored by one individual? Phoronix.com doesn't have a whole news room with unlimited resources and relies upon people reading our content without blocking ads and alternatively by people subscribing to Phoronix Premium for our ad-free service with other extra features. Firefox 110 Released Wit
It's always been you, Canvas2D | Blog | Chrome for Developers
In a world of shaders, meshes, and filters, Canvas2D might not get you excited. But it should! 30–40% of web pages have a <canvas> element and 98% of all canvases use a Canvas2D rendering context. There are Canvas2Ds in cars, on fridges, and in space (really). Admittedly, the API is a bit behind the times when it comes to state-of-the-art 2D drawing. Fortunately we've been hard at work implementin
Serverless + AWS Lambda + TypeScriptをデプロイ【まもりあいJapanのコード研究：3】 | moya tech blog〜もやテックブログ〜
前回はローカル環境を動かしました。 今回はServerlessFrameworkを使って、AWS Lambdaにデプロイしてみます。 TypeScript + Lambdaの組み合わせは情報が少ないのでうまくいくかどうか・・（うまく行きました） ※実際の確認手順で書いていますので、情報としてはまとまっていません。逆に、知らないアーキテクチャにどうやって立ち向かってくか、みたいな観点で見ていただけると、参考になるかと思います。 コマンド確認 mamori-i-japan/mamori-i-japan-apiREST API Server for Japanese Exposure Notification App to fight against COVID-19 a.k.a. "まもりあいJAPAN". - mamori-i-japan/mamori-i-japan-apigithub.c
How To Bypass CSP By Hiding JavaScript In A PNG Image Hide a malicious JavaScript library in a PNG image and tweet it, then include it in a vulnerable website by exploiting a XSS bypassing its Content-Security-Policy (CSP). Hide a malicious JavaScript library into a PNG image and tweet it, then include it in a vulnerable website by exploiting a XSS bypassing its Content-Security-Policy (CSP). It's
[JavaScript]canvasのdrawImage()とputImageData()を比べてみました。
[JavaScript]canvasのdrawImage()とputImageData()を比べてみました。 PixelArtsという個人的なプロジェクトでcanvasをガンガン使っているんですが、canvasとその周辺技術についてTipsをまとめたいと思います。canvasを使って、複雑な描画をしようとすると、canvasが1枚では足りない状況に陥ります。その場合はゲームなどでよく使われるように別に一時描画用のcanvasを用意して予め画面を作って一気にコピーすると色々捗ります。その際に利用するメソッドは、drawImage()か、はたまたputImageData()なのか。どっちでも良いわけじゃなかった、2つの違いを比べてみました。 drawImage()とputImageData()の違いdrawImage()とputImageData()の違いは、昔はコピーによる画像の劣化が指摘さ
JavaScriptで頭の体操をしよう！『JS体操』
JavaScriptで頭の体操をしよう！『JS体操』 『JS体操』とは、面白法人カヤックが主催するJavaScriptのコードゴルフです！JavaScriptの問題をゲーム感覚で解きながら言語仕様の理解とプログラミング能力を深める、まさに頭の体操です。 出題される問題は、JavaScriptの言語仕様を駆使するものから数学や様々なアルゴリズムを使う問題まで様々。 上級者の方からJavaScriptを使い始めたという方まで、たくさんの挑戦お待ちしています！ ※コードゴルフとは、与えられたアルゴリズムを可能な限り短いソースコードで記述することを競うプログラミング競技です。ソースコードの文字数が、その人のスコアとなります。 問題 No.2『どちらの画像が横長かを比較する』 Canvas2DやWebGLなどで特定の領域に任意サイズの画像をピッタリ収めたい時などに必要なロジックです（CSSではbac
概要 社会人2年目が終わるので、この1年間で読んだ本150冊のうち技術寄りの本から45冊をざっくり紹介します。 1年目はこちら。 ※2024年3月追記 本記事で読んだ書籍は2022年4月から2023年3月までに読んだものです。 最新のトレンドや2023年4月以降に出た書籍は反映されていません。 説明 オススメ度は10段階です。昨年は1年目としての主観難易度も付けていましたが、2年目になるとキャリアプランの方向性によって積み上げがバラバラだと思うので、やめました。 ジャンル内の順序は、「この順で紹介文を見せたい」でフワッとソートしていて、具体的にはオススメ度降順や難度昇順ですが、明確な比較関数はありません。 雑誌や、読了したけど紹介する必要がないと感じた書籍は割愛しがちです。特に良かった特集は時々紹介します。 プログラミング言語 Rust 『手を動かして考えればよくわかる 高効率言語 Rus
Antibot
Intoli.com tests + additions Test Name Result User Agent (Old) WebDriver (New) present (failed) WebDriver Advanced failed Chrome (New) missing (failed) Permissions (New) Plugins Length (Old) Plugins is of type PluginArray Languages (Old) WebGL Vendor WebGL Renderer Broken Image Dimensions Fingerprint Scanner tests Some details navigator.cookieEnabled navigator.doNotTrack navigator.msDoNotTrack nav
スクスタ20章と糞シナリオへの対処法
https://anond.hatelabo.jp/20201105120324 あ、増田にまで話題が出てきた。便乗して愚痴らせてくれ。 ちなみに救いようのないゴミと思ってるから、あれを好きな人はスルーで。 これは彼女が薄情というわけではなく、彼女自身がそこまで”スクールアイドル”という存在に本気になっているからだ。 そうかー。完全に個人的なキャラ観なんだけど、果林がそこまで『スクールアイドルという競技自体』に思い入れがあるとは思わなかったな。 せつ菜とか絵里とか、『人』に対してライバル心を燃やすだけで、スクールアイドルはその手段かなって。 少なくともライバルが練習もできないのに、一人で己を高めるような人物とは見えなかった。 まあキズナエピの記憶も曖昧なので、そうでない描写があったのかもしれん。 ランジュがムカつくから、今は臥薪嘗胆でも絶対倒したるわ！って理由で行ったならまだ納得できたんだ
pack は親ウィジェット上にウィジェットを詰め込むメソッドです。 pack 使用例 pack を使用してウィジェットを配置するサンプルスクリプトは下記のようになります。pack を最後にまとめて実行していますが、これは今後の説明をしやすくするためです。 各ウィジェットのインスタンス作成後〜メインループ実行前であればどこで実行しても良いです。 pack使用例 # -*- coding:utf-8 -*- import tkinter # メインウィンドウ作成 app = tkinter.Tk() app.geometry("600x400") # 青色のキャンバス作成 canvas1 = tkinter.Canvas( app, width=100, height=50, bg="blue" ) # 緑色のキャンバス作成 canvas2 = tkinter.Canvas( app, wid
<!DOCTYPE html> <html> <head> <title>CANVAS TEST</title> <!--[if lt IE 9]> // Explorer Canvasを読み込む <script src="js/excanvas.js"></script> <![endif]--> <script> window.addEventListener('load', function() { var cv = document.getElementById('cv1'); // 要素を得る if (!cv) { return; } var ct = cv.getContext('2d'); // 2D(平面)コンテキストを得る if (!ct) { return; } ct.fillStyle = '#ffcccc'; ct.fillRect(0, 0, cv.width,
はじめに この記事はSkyWay Advent Calendar 2018の21日目(大遅刻)の記事です。 20日目はShirataHikaruさんの「SkyWayとVue.jsでリアルタイムに共同編集可能なマークダウンエディタっぽいもの」でした。 WebRTCの"W"の字もわからない まず「WebRTC」という言葉を知っているかどうかも怪しい状態からのスタートです。 全くどうしたらいいかわからなかったので、SkyWayのアドベントカレンダーを書いている方達の記事を読みながら使い方を学ぼうと思いました。 まずはアドベントカレンダー8日目の、「【爆速！】5分でビデオチャットを構築する」by kolifeさんの記事を参考にWebRTCとSkyWayに触れてみます。 はい、これでWebRTCとSkyWayは完全に理解しました。 今回作るもの 完全に理解したので、早速サンプルコードなどを改造して自
書籍案内 » 新刊ピックアップ » ブラウザだから楽々スタートできる！［入門］グラフィックスプログラミング×JavaScript ―ずっと活かせる，いまどきの基礎知識 ※『［ゲーム＆モダン JavaScript文法で2倍楽しい］グラフィックスプログラミング入門 ——リアルタイムに動く画面を描く。プログラマー直伝の基本』の第1章から第4章より。 あたりまえすぎるかもしれませんが，視覚効果（Visual Effects，VFX）の持つインパクトは大きいです。コンピューターの黎明期から普及期にかけて「コンピューターグラフィックス」（Computer Graphics，CG）と言うと，ゲームや映像表現を筆頭に，限られたコンピューター資源を極限まで活かす達人の域のプログラミングテクニック。そのような環境でもコンピューターグラフィックスは多くの開発者とユーザーを魅了し続け，進化し続けてきました
ブラウザで絵を書きたいときってありませんか？ この記事では、HTMLのcanvasとJavaScriptでお絵かきアプリ【色・消しゴム追加編】に、独自にいくつか機能を加えたものを紹介します。コピペすれば導入できるようにしてあります。 完成するとこんな感じ 追加機能、改善点 文字の太さを、調節バーに加えて、直接数字でもいじれるようにしたこと。 文字の太さの選択範囲を５倍拡大したこと(1〜10 → 1〜50)。 canvasで描いた絵を画像としてダウンロードできるようにしたこと。 カラーパレットを実装用するための「colorjoe」というライブラリに必要なモノ全てを、CDNで読み込むようにしたこと。 ソースコードは以下 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" c
FFmpeg: Step-by-Step Retro Video Filter I miss working with FFmpeg, so when I came across this interesting challenge on Reddit, I could not say no. I am currently looking for a new project as an Audio/Video software engineer or project manager and it was a nice break away from interviews. Are you currently hiring or have any interesting project proposals? Get in touch with me! 🌻 So, the challenge
WebGLを極めるならJSライブラリを使わず書こう！モバイルでも動くHTML5の3次元スライドショーを作ってみた 2014年9月にリリースされたiOS 8においてWebGLが動作するようになったことで、スマートフォン環境での3D表現に可能性を感じ、興味を持った方も多いと思います。そこで今回、写真を読み込んで3D空間上に配置し、パーティクルに分解して次の画像に切り替わるスライドーショーのデモをJSライブラリ（Three.jsなど）を使わずにイチからHTML5とWebGLで作ってみました。WebGLが動作する端末ならモバイルでもなめらかに動作するので、是非試してみてください。マウスやタッチの操作でビューを回転させることができます。 デモを再生する（別ウインドウが開きます） ソースコード (JavaScript) 制作環境について 今回のデモを作成するにあたり、WebGLのAPIを直接呼び出す形
A practical introduction to the CSS Paint API with hands-on examples. CSS Paint is an API that allows developers to programatically generate and draw graphics where CSS expects an image. It is part of CSS Houdini, an umbrella term for seven new low-level APIs that expose different parts of the CSS engine and allows developers to extend CSS by hooking into the styling and layout process of a browse
はじめに こんにちは。emonoです。 こちらは、クソアプリ Advent Calendarの4の21の記事になります。 作ったもの PicTwi（ピクツイ）という、画像でつぶやき出来るWebアプリを作成しました。 入力されたテキストデータ元に、OGPを動的に作成して共有できます。 使い方 OGPで共有したいテキストを入力して、ツイートする または URLをコピー を押下します。 URLをコピーした画像をSlack等で共有すると、下記の様に動的に生成されたOGP画像が展開され、つぶやくことが出来ます。 同じ要領でツイートするから、Twitterに投稿することも可能です。 フォントも選択もできます。 絵文字もいけます。 どんな時に使うか・・・・・ですか。それは、僕にもわかりません。好きに使って下さい。 作るまでに考えたこと コンセプト検討 meetyやbosyuの様に、目的を持ったものではな
This is a compatibility list of supported features on Safari on iOS and iPadOS vs. what's available in the most used PWA browser in current market share for similar mobile devices: Google Chrome on Android. This list is based and maintained on private tests I frequently do. WebKit is getting better documenting these things, but there is still a huge gap. High-level PWA support # Ability Supported
皆さん、本日も閲覧ありがとうございます。 山本電卓と申します。 皆さんは絵を描く時に全体の見え方を確認しながら作業したいと思ったことはないでしょうか。 イラスト・漫画制作ソフトCLIP STUDIO PAINT（クリップスタジオペイント）にはそんな方の為に作業中のキャンバスを複数表示する方法があるのです！ こんな感じですね↓ 方法も簡単ですので今回はそちらを紹介したいと思います。 よろしくお願いいたします ( ｀・∀・´)ﾉ！ ▼イラスト・簡単な漫画なら【CLIP STUDIO PAINT PRO】 CLIP STUDIO PAINT PRO ▼本格的な漫画・アニメーション制作なら【CLIP STUDIO PAINT EX】 CLIP STUDIO PAINT EX 参考記事：クリスタを購入する3つの方法と手順紹介！！ CLIP STUDIO PAINT（クリスタ）で同じキャンバスを複数表
amiinA『amiinA ラストインタビュー』
amiinAオフィシャルブログ Powered by Ameba amiinAオフィシャルブログ Powered by Ameba 先日、10/17（土）に恵比寿・LIQUIDROOMにてラストライブを行い、約４年半に渡る活動に終止符を打ったamiinA。 そのラストライブが行われる少し前、miyuが加入した2016年からの4年間を、2人に振り返ってもらいました。これが、amiとmiyuの2人組ユニット”amiinA”としての最後のインタビュー。是非ご覧ください。 ーーmiyuさんが加入し、amiinAとして活動し始めたのが、今から4年前の2016年になります。今までたくさん話してきたことだと思いますが、amiinAに入ることが決まった時に、miyuさんが感じたことで覚えていることはありますか？ miyu: 中学生、だったんですよね。前はポンポン言葉が出てきて説明出来てたんですけど、今は…
Improved Process Isolation in Firefox 100 – Mozilla Hacks - the Web developer blog
Introduction Firefox uses a multi-process model for additional security and stability while browsing: Web Content (such as HTML/CSS and Javascript) is rendered in separate processes that are isolated from the rest of the operating system and managed by a privileged parent process. This way, the amount of control gained by an attacker that exploits a bug in a content process is limited. Ever since
Awesome Open Source Games | Curated list of awesome lists | Project-Awesome.org
Open source games that have the source code available on GitHub. Contents Major Companies Browser-Based Boardgame Arcade FPS RPG MMORPG Strategy Racing Sandbox Puzzle Clicker Point and Click Others Native Action Arcade Rhythm FPS MMORPG RPG Platform Puzzle/card/board Racing Programming Sandbox Strategy Mobile Games Android IOS Chat bots Just The Source Frameworks/Engines/Libraries Maps/Hacks/Plugi
three.jsのCanvasTextureで透明の境界部分にアーティファクトが生じる問題の対処方法 - Qiita
three.jsで背景が透明なcanvasからCanvasTextureを作成したときに、canavs内のオブジェクトと透明な背景の境界部分にエッジ上のアーティファクトが生じる場合の対処方法です。 具体例として以下のようなコードを見ていきます。このコードではCanvas 2Dで透明な背景に白色で四角形と文字をcanvasに描き、そのcanvasからCanvasTextureを生成して平面のメッシュに張り付けています。マテリアルのtransparentをtrueにしているので、Cavnas 2Dで透明にしている部分はthree.jsの背景色に設定している薄紫色が見えるようになっています。 const width = 640; const height = 480; const scene = new THREE.Scene(); scene.background = new THREE.Co
The Note is a gap analysis document. It identifies the next steps for enabling Wide Color Gamut (WCG) and High Dynamic Range (HDR) on the Open Web Platform. Introduction The initial commercial application of Color Science (principally colorimetry, rather than color appearance modelling) to the reproduction of color was concerned with surface colors such as painted or printed objects, lit by a sing
25+ JavaScript Project With Source Code to Build your Skills
Hello amazing people, If you are interested in becoming a web developer then JavaScript is one of the best and essential coding language you can learn, but getting familiar with JavaScript basics means using those skills to build JavaScript projects. So, in this blog post, I will share with you some HTML and Javascript projects with source code that can be used in your personalized Web Development
Firefox 113 Available With Animated AV1 Image Support (AVIS) - Phoronix
Firefox 113 Available With Animated AV1 Image Support (AVIS) Written by Michael Larabel in Mozilla on 9 May 2023 at 05:39 AM EDT. 18 Comments Mozilla is officially releasing Firefox 113 today and as usual the release binaries are already available for this monthly web browser update. Exciting many with Firefox 113 will be animated AV1 images "AVIS" now supported. Firefox has long supported AVIF as
And here’s one used as a main game mechanic, made using SVG by yours truly – a few trips-around-the-sun ago… It’s a dynamic bezier curve whose start, middle and end positions are updated every frame. So each of these previous (viable) options use drawing APIs (CSS, Canvas 2D, SVG) to render those pixels. WebGL, on the other hand, leaves all of that pixel-drawing math in your capable hands. This me
Pythonで画像Viewerを作る
初心者のための目的志向プログラミング。PythonでGUIを作って、撮影後の画像の画角調整し、タイムラプス動画を作成するプログラムの続きです。 今回はGUIをclass構造にしてみます。pythonでclassはまだ作ったことが... Viewerの作り ・画像を表示させる。 ・画像をスクロールさせる。マウスドラッグできる。 ・画像の拡大縮小ができる。マウスホイールでもできる。 ・画像にグリッド線を表示させる。 ・ヒストグラムを表示させる。 ・見ている範囲を保存できる。 これらを満たすことを目指して作りました。まぁ普通の機能ですね。ひとしきりできます。見た目はこんな感じ。少しダサいのはしょうがない。 レイアウト フレームを3つに分けてレイアウトし、上側に画像、中段にスクロール、下段にヒストグラムと拡大縮小のバーを置くことにしました。将来的には中段に画像情報、下段にはほかの画像調整パラメータ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブラウザで動くシンプルでミニマムなドット絵作成サービスを作った話
React + TypeScript に入門したので基本をまとめてみた | iret.media
PNGアニメーション（APNG） | 動くWebデザインアイディア帳
どんな背景でも自由に描ける! CSS Paint APIの使い方 - ICS MEDIA
[Chart.js] カーソル移動に合わせて、縦軸にラインを引く方法
webカメラとOpenCV.jsとブラウザでリアルタイム顔向き推定を行う
「Firefox 110」を試す - 移行対象となるブラウザを拡張、描画機能の向上も
How To Bypass CSP By Hiding JavaScript In A PNG Image
SE 2年目で読んだ技術書45冊+α - Qiita
Tkinterの使い方：ウィジェットの配置（pack・grid・place）
Canvas 2Dリファレンス - とほほのWWW入門
SkyWayでデスクトップの映像とカメラの映像をクロマキー合成して配信する - Qiita
ブラウザだから楽々スタートできる！［入門］グラフィックスプログラミング×JavaScript ―ずっと活かせる，いまどきの基礎知識：新刊ピックアップ
ブラウザでお絵かき＆保存をしよう！ - Qiita
FFmpeg: Step-by-Step Retro Video Filter - Gariany.com
WebGLを極めるならJSライブラリを使わず書こう！モバイルでも動くHTML5の3次元スライドショーを作ってみた - ICS MEDIA
Drawing Graphics with the CSS Paint API | Codrops
【Next.js / Vercel】画像でつぶやくクソアプリを作った💩
iOS PWA Compatibility－firt.dev
クリスタで同じキャンバスを複数表示する方法！-意外と知らないクリスタ機能-
High Dynamic Range and Wide Gamut Color on the Web
Crafting Stylised Mouse Trails With OGL | Codrops