Image evolution
The goal is to get an image represented as a collection of overlapping polygons of various colors and transparencies. We start from random 50 polygons that are invisible. In each optimization step we randomly modify one parameter (like color components or polygon vertices) and check whether such new variant looks more like the original image. If it is, we keep it, and continue to mutate this one i
ブラウザã§ãŠçµµæãプãƒã‚°ãƒ©ãƒŸãƒ³ã‚°ï¼ Processing.js ç™»å ´ï¼ - IT戦記
ã¯ã˜ã‚㫠今日〠jQuery ã®ä½œè€…ã¨ã—ã¦æœ‰å㪠John Resig ã•ã‚“㌠Processing.js ã¨ã„ㆠJavaScript ã®ãƒ©ã‚¤ãƒ–ラリを公開ã—ã¾ã—ãŸã€‚ John Resig - Processing.js ã“ã®ãƒ©ã‚¤ãƒ–ラリを使ã†ã¨ã€æ¯”較的簡å˜ã«ä»¥ä¸‹ã®ã‚ˆã†ãªã‚°ãƒ©ãƒ•ã‚£ãƒƒã‚¯ã‚¹ã‚„アニメーションを書ãã“ã¨ãŒã§ãるよã†ã«ãªã‚Šã¾ã™ã€‚ ã¨ã„ã†ã‚ã‘ã§ã€å…¬é–‹ã•ã‚ŒãŸã°ã‹ã‚Šã®ã“ã®ãƒ©ã‚¤ãƒ–ラリを簡å˜ãªä½¿ã„æ–¹ã‹ã‚‰è©³ã—ã„使ã„æ–¹ã¾ã§ã¨ã“ã¨ã‚“掘り下ã’ã¦ã¿ãŸã„ã¨æ€ã„ã¾ã™ã€‚ Processing.js æ¦‚è¦ ã¾ãšã€ Processing.js ã¨ã¯ä½•ã‹ã¨ã„ã†è©±ã‚’ã—ã¾ã™ã€‚ Processing.js ã¨ã¯ã€ãƒ–ラウザ㧠Processing ã¨ã„ã†ãƒ—ãƒã‚°ãƒ©ãƒŸãƒ³ã‚°è¨€èªžã‚’実行ã™ã‚‹ JavaScript ã®ãƒ©ã‚¤ãƒ–ラリã§ã™ã€‚ ã§ã¯ã€ Processing ã¨ã¯ã©ã®ã‚ˆã†ãªãƒ—ãƒã‚°ãƒ©ãƒŸãƒ³ã‚°è¨€èªžãªã®ã§ã—ょã†ã‹ã€‚ Processing
JavaScriptを使ã£ã¦æç”»ã™ã‚‹Canvasã¨ã¯ï¼Ÿ
Canvasã¨ã¯ã€JavaScriptを使ã£ã¦å‹•çš„ã«å›³ã‚’æããŸã‚ã«ç–定ã•ã‚ŒãŸä»•æ§˜ã§ã™ã€‚ã“ã‚Œã¾ã§ã€å‹•çš„ã«å›³ã‚’表示ã•ã›ã‚‹æ–¹æ³•ã¨ã—ã¦ã¯ã€FlashãŒä»£è¡¨çš„ãªé¸æŠžè‚¢ã§ã—ãŸã€‚ã—ã‹ã—ã€Canvasを使ã†ã“ã¨ã§ã€ãƒ†ã‚ストエディタã•ãˆã‚ã‚Œã°ã€èª°ã§ã‚‚ç„¡æ–™ã§å‹•çš„ã«å›³ã‚’æãアプリケーションを作るã“ã¨ãŒã§ãるよã†ã«ãªã‚‹ã®ã§ã™ã€‚ 手å‰ã¿ãã§æ縮ã§ã™ãŒã€å›³1ã¯ç†è€…ãŒCanvasを使ã£ã¦ä½œã£ãŸæ£’グラフをæãJavaScriptライブラリã®ã‚ャプãƒãƒ£ç”»åƒã§ã™ã€‚Canvasを使ã†ã“ã¨ã§ã€ç°¡å˜ãªå›³ã ã‘ã§ã¯ãªãã€ã‹ãªã‚Šå‡ã£ãŸãƒ‡ã‚¶ã‚¤ãƒ³ã‚‚扱ã†ã“ã¨ãŒã§ãã‚‹ã“ã¨ãŒãŠã‚ã‹ã‚Šã„ãŸã ã‘ã‚‹ã¨æ€ã„ã¾ã™ã€‚ ã—ã‹ã—ã€Canvasã¯æ±ºã—ã¦Flashã®ä»£æ›¿æŠ€è¡“ã§ã¯ã‚ã‚Šã¾ã›ã‚“。ã¾ãšã¯ã€Canvasã®ç‰¹å¾´ã‚’ç°¡å˜ã«ã¾ã¨ã‚ã¦ã¿ã¾ã—ょã†ã€‚Canvasã®ç‰¹å¾´ã¨ã—ã¦ã¯ã€ã€ŒJavaScriptを使ã£ã¦æç”»ã™ã‚‹ã€ã€Œæ–‡å—ã¯æã‘ãªã„ã€ã€Œã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³æ©Ÿèƒ½ãŒãªã„ã€ã®3ã¤ãŒã‚ã‚Š
canvasリファレンス
<body> <h1>canvasリファレンス</h1>
20è¡Œã®Javascript+canvasã§ã“ã“ã¾ã§ã§ãã‚‹ | 秋元@サイボウズラボ・プãƒã‚°ãƒ©ãƒžãƒ¼ãƒ»ãƒ–ãƒã‚°
# Internet Explorerä¸å¯ OZONE Asylumã¨ã„ã†ãƒ•ã‚©ãƒ¼ãƒ©ãƒ ã§å‡ºã•ã‚ŒãŸä»Šæœˆã®ãŠé¡Œã€Œ20è¡Œã®Javascriptã§ã§ãã‚‹ã ã‘多ãã®ã‚¨ãƒ•ã‚§ã‚¯ãƒˆã‚’åŒã˜ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ã«å‡ºã™ã€ã«å¯¾ã—ã¦å‡ºã¦ããŸã™ã”ã„ç”ãŒã“れ。 ソースを見るã¨ã€ãŸã—ã‹ã«æœ‰åŠ¹ãªè¡Œã¯20è¡Œã—ã‹ãªã„。 Opera9.5ã¨Firefox3(ã©ã£ã¡ã‚‚ã¾ã ベータ)ã§ä½œè€…ã®æ„図ã©ãŠã‚Šå‹•ãã¨ã®ã“ã¨ã€‚Firefox2ã‚„Opera9ã§ã‚‚å‹•ã自体ã¯è¦‹ãˆã‚‹ãŒã€Firefox2ã§ã¯å…‰ã‚‹åŠ¹æžœãŒè¦‹ãˆãªã‹ã£ãŸã‚Šã€‚ via del.icio.us/popular ã“ã®è¨˜äº‹ã¯ç§»è»¢å‰ã®å¤ã„URLã§å…¬é–‹ã•ã‚ŒãŸæ™‚ã®ã‚‚ã®ã§ã™ãƒ–ックマークãŒæ–°æ—§ã§åˆ†æ•£ã—ã¦ã„ã‚‹å ´åˆãŒã‚ã‚Šã¾ã™ã€‚移転å‰ã¯ç¾åœ¨ã¨ã¯æ–‡ä½“ãŒé•ã„「ã§ã‚ã‚‹ã€èª¿ã§ã™ã€‚(å‚考)記事ã®å†…容ãŒå¤ãã¦å½¹ã«ç«‹ãŸãªããªã£ã¦ã„ã‚‹ã€ã¨ã„ã†å ´åˆã«ã¯ã‚³ãƒ¡ãƒ³ãƒˆã‚„ツイッターã§ã”指摘ã„ãŸã ã‘ã‚Œã°å¹¸ã„ã§ã™ã€‚最新ã®çŠ¶æ³ã‚’調ã¹ã¦æ–°ã—ã„記事を書
Saving canvas data to image file
This is a small library that lets you easily save a WHATWG canvas element as an imagefile. Files needed: canvas2image.js, base64.js Draw on the canvas with the pretty boxes below using the mouse, then click the "Convert" buttons to convert it to a downloadable image - or the "Save" buttons to download the image file directly. Using the WHATWG canvas element, you can create all sorts of cool gr
Canvas tutorial - MDC
ã“ã®ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«ã¯ã€ <canvas> è¦ç´ を使用ã—ã¦äºŒæ¬¡å…ƒã®ã‚°ãƒ©ãƒ•ã‚£ãƒƒã‚¯ã‚’æç”»ã™ã‚‹æ–¹æ³•ã‚’ã€åŸºæœ¬ã‹ã‚‰èª¬æ˜Žã—ã¾ã™ã€‚ã“ã“ã§ã®ä¾‹ã¯ã€ã‚ャンãƒã‚¹ã§ä½•ãŒã§ãã‚‹ã‹ã‚’明確ã«ç¤ºã™ã‚‚ã®ã§ã‚ã‚Šã€ç‹¬è‡ªã®ã‚³ãƒ³ãƒ†ãƒ³ãƒ„を作æˆã™ã‚‹ãŸã‚ã®ã‚³ãƒ¼ãƒ‰ã‚¹ãƒ‹ãƒšãƒƒãƒˆã‚‚æä¾›ã—ã¦ã„ã¾ã™ã€‚ <canvas> 㯠HTML ã®è¦ç´ ã§ã‚ã‚Šã€ã‚¹ã‚¯ãƒªãƒ—ト（ãµã¤ã†ã¯ JavaScript）を使ã£ã¦ã‚°ãƒ©ãƒ•ã‚£ãƒƒã‚¯ã‚’æãã“ã¨ãŒã§ãã¾ã™ã€‚ã“ã‚Œã¯ä¾‹ãˆã°ã€ã‚°ãƒ©ãƒ•ã‚’æã„ãŸã‚Šã€å†™çœŸã‚’åˆæˆã—ãŸã‚Šã€ç°¡å˜ãªã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã‚’作æˆã—ãŸã‚Šã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚ <canvas> 㯠Apple ㌠macOS Dashboard ã®ãŸã‚ã« WebKit ã«åˆã‚ã¦å°Žå…¥ã—ãŸå¾Œã€ãƒ–ラウザーã«å®Ÿè£…ã•ã‚Œã¾ã—ãŸã€‚ç¾åœ¨ã¯ã€ã‚らゆる主è¦ãƒ–ラウザーãŒå¯¾å¿œã—ã¦ã„ã¾ã™ã€‚ <canvas> を使ã†ã®ã¯ãã‚Œã»ã©é›£ã—ãã¯ã‚ã‚Šã¾ã›ã‚“ãŒã€ HTML 㨠JavaScript ã®åŸºæœ¬çš„ãªç†è§£ãŒå¿…è¦ã§ã™ã€‚一部ã®
ブラウザ上ã§ãŠçµµã‹ã
ç·šã®è‰²: ç·šã®å¤ªã•: 背景色: 背景色ã®å¤‰æ›´ã¯ã‚„ã‚Šç›´ã—ã§ãã¾ã›ã‚“。 ã™ã¹ã¦å‰Šé™¤ã™ã‚‹ã¨å…ƒã«æˆ»ã™ / ã‚„ã‚Šç›´ã™ã“ã¨ãŒã§ããªããªã‚Šã¾ã™ã€‚ VML ãƒãƒƒã‚¯ã‚¨ãƒ³ãƒ‰ã§ã¯æç”»ä¸ã«ç·šãŒæºã‚Œã‚‹ã“ã¨ãŒã‚ã‚Šã¾ã™ã€‚ VML ãƒãƒƒã‚¯ã‚¨ãƒ³ãƒ‰ã§ã¯ç·šãŒå°‘ã—太ã‚ã«ãªã‚Šã¾ã™ã€‚ Opera 8 (SVG Tiny ãƒãƒƒã‚¯ã‚¨ãƒ³ãƒ‰) ã§ã¯ JavaScript コンソールã«å¤§é‡ã®è¦å‘ŠãŒå‡ºã¾ã™ã€‚ CSS Positioning ãƒãƒƒã‚¯ã‚¨ãƒ³ãƒ‰ã§ã¯ç‚¹ãŒå††ã§ã¯ãªãæ£æ–¹å½¢ã«ãªã‚Šã¾ã™ã€‚ CSS Positioning ãƒãƒƒã‚¯ã‚¨ãƒ³ãƒ‰ã®ä½œæˆã«ã‚ãŸã£ã¦ã¯ã€ç·šåˆ†æç”»ã®ã‚¢ãƒ«ã‚´ãƒªã‚ºãƒ (Fussy's HOMEPAGE) ã‚’å‚考ã«ã•ã›ã¦ã„ãŸã ãã¾ã—ãŸã€‚ DrawingCanvas.js DrawingCanvas.js (0.02) 㨠DynamicCanvas.js ã‹ã‚‰æ§‹æˆã•ã‚Œã¾ã™ã€‚ DrawingCanvas ã¯åŸºæœ¬çš„ãªæ画を担当ã—ã¾ã™ã€‚ Dyn
Paint : Microsoft Paint Online
Microsoft Paint is also known as MS Paint. It is a basic graphics drawing program that has been an indispensable part of all versions of the Microsoft Windows operating system. MSP provides easy ways for creating different types of graphics with different tools. The tools include brushes, shape generators, pens, and erasers. Many users of Windows might also be unaware of its presence, considering
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
by edvakf in hatena
{{#tags}}- {{label}}
{{/tags}}