摘要:最近聽女神說想談戀愛了,嘿嘿,一定不能放過這個機會,給她來個不一樣的表白。我們只需要判斷不為就可以得到需要的字體形狀數據了。能不能再給力一點說好的粒子系統,現在只是簡單的畫了一點。還有什么好玩的上面是將粒子擺成文字。
最近聽女神說想談戀愛了,?(? ? ?) 嘿嘿,一定不能放過這個機會,給她來個不一樣的表白。
那么咱們就一起來把這個粒子系統玩出花來吧
演示地址:
https://es2049.studio/work-sh...
如何將一系列的粒子組成一句表白呢?
實現原理其實很簡單,Canvas 中有個 getImageData 的方法,可以得到一個矩形范圍所有像素點數據。那么我們就試試來獲取一個文字的形狀吧。
第一步,用 measureText 的方法來計算出文字適當的尺寸和位置。
// 創建一個跟畫布等比例的 canvas const width = 100; const height = ~~(width * this.height / this.width); // this.width , this.height 說整個畫布的尺寸 const offscreenCanvas =document.createElement("canvas"); const offscreenCanvasCtx =offscreenCanvas.getContext("2d"); offscreenCanvas.setAttribute("width", width); offscreenCanvas.setAttribute("height", height); // 在這離屏 canvas 中將我們想要的文字 textAll 繪制出來后,再計算它合適的尺寸 offscreenCanvasCtx.fillStyle = "#000"; offscreenCanvasCtx.font = "bold 10px Arial"; constmeasure=offscreenCanvasCtx.measureText(textAll); // 測量文字,用來獲取寬度 const size = 0.8; // 寬高分別達到屏幕0.8時的size const fSize=Math.min(height * size * 10 / lineHeight, width * size * 10 / measure.width); // 10像素字體行高 lineHeight=7 magic offscreenCanvasCtx.font = `bold ${fSize}px Arial`; // 根據計算后的字體大小,在將文字擺放到適合的位置,文字的坐標起始位置在左下方 const measureResize =offscreenCanvasCtx.measureText(textAll); // 文字起始位置在左下方 let left = (width - measureResize.width) / 2; const bottom=(height + fSize / 10 * lineHeight) / 2; offscreenCanvasCtx.fillText(textAll, left, bottom);
咱們可以 appendChild 到 body 里看眼
同學們注意,我要開始變形了 [推眼鏡] 。
getImageData 獲取的像素數據是一個 Uint8ClampedArray (值是 0 - 255 的數組),4 個數一組分別對應一個像素點的 R G B A 值。我們只需要判斷 i * 4 + 3 不為 0 就可以得到需要的字體形狀數據了。
// texts 所有的單詞分別獲取 data ,上文的 textAll 是 texts 加一起 Object.values(texts).forEach(item => { offscreenCanvasCtx.clearRect(0, 0, width, height); offscreenCanvasCtx.fillText(item.text, left, bottom); left += offscreenCanvasCtx.measureText(item.text).width; const data = offscreenCanvasCtx.getImageData(0, 0, width, height); const points = []; // 判斷第 i * 4 + 3 位是否為0,獲得相對的 x,y 坐標(使用時需乘畫布的實際長寬, y 坐標也需要取反向) for (let i = 0, max = data.width * data.height; i < max; i++) { if (data.data[i * 4 + 3]) { points.push({ x: (i % data.width) / data.width, y: (i / data.width) / data.height }); } } // 保存到一個對象,用于后面的繪制 geometry.push({ color: item.hsla, points }); })
制定場景,繪制圖形
文字圖形的獲取方式以及搞定了,那么咱們就可以把內容整體輸出了。咱們定義一個簡單的腳本格式。
// hsla 格式方便以后做色彩變化的擴展 const color1 = {h:197,s:"100%",l:"50%",a:"80%"}; const color2 = {h:197,s:"100%",l:"50%",a:"80%"}; // lifeTime 禎數 const Actions = [ {lifeTime:60,text:[{text:3,hsla:color1}]}, {lifeTime:60,text:[{text:2,hsla:color1}]}, {lifeTime:60,text:[{text:1,hsla:color1}], {lifeTime:120,text:[ {text:"I",hsla:color1}, {text:"??",hsla:color2}, {text:"Y",hsla:color1}, {text:"O",hsla:color1}, {text:"U",hsla:color1} ]}, ];
根據預設的腳本解析出每個場景的圖形,加一個 tick 判斷是否到了 lifeTime 切換到下一個圖形重新繪制圖形。
function draw() { this.tick++; if (this.tick >= this.actions[this.actionIndex].lifeTime) { this.nextAction(); } this.clear(); this.renderParticles(); // 繪制點 this.raf = requestAnimationFrame(this.draw); } function nextAction() { ....//切換場景 balabala.. this.setParticle(); // 隨機將點設置到之前得到的 action.geometry.points 上 }
這樣咱們基本的功能已經完成了。
能不能再給力一點
說好的粒子系統,現在只是 context.arc 簡單的畫了一點。那咱們就來加個粒子系統吧。
class PARTICLE { // x,y,z 為當前的坐標,vx,vy,vz 則是3個方向的速度 constructor(center) { this.center = center; this.x = 0; this.y = 0; this.z = 0; this.vx = 0; this.vy = 0; this.vz = 0; } // 設置這些粒子需要運動到的終點(下一個位置) setAxis(axis) { this.nextX = axis.x; this.nextY = axis.y; this.nextZ = axis.z; this.color = axis.color; } step() { // 彈力模型 距離目標越遠速度越快 this.vx += (this.nextX - this.x) * SPRING; this.vy += (this.nextY - this.y) * SPRING; this.vz += (this.nextZ - this.z) * SPRING; // 摩擦系數 讓粒子可以趨向穩定 this.vx *= FRICTION; this.vy *= FRICTION; this.vz *= FRICTION; this.x += this.vx; this.y += this.vy; this.z += this.vz; } getAxis2D() { this.step(); // 3D 坐標下的 2D 偏移,暫且只考慮位置,不考慮大小變化 const scale = FOCUS_POSITION / (FOCUS_POSITION + this.z); return { x: this.center.x + (this.x * scale), y: this.center.y - (this.y * scale), }; } }
大功告成!
既然是 3D 的粒子,其實這上面還有不是文章可做,同學們可以發揮想象力來點更酷炫的。
還有什么好玩的
上面是將粒子擺成文字。那咱們當然也可以直接寫公式擺出個造型。
// Actions 中用 func 代替 texts { lifeTime: 100, func: (radius) => { const i = Math.random() * 1200; let x = (i - 1200 / 2) / 300; let y = Math.sqrt(Math.abs(x)) - Math.sqrt(Math.cos(x)) * Math.cos(30 * x); return { x: x * radius / 2, y: y * radius / 2, z: ~~(Math.random() * 30), color: color3 }; } }
再把剛才文字轉換形狀的方法用一下
{ lifeTime: Infinity, func: (width, height) => { if(!points.length){ const img = document.getElementById("tulip"); constoffscreenCanvas = document.createElement("canvas"); constoffscreenCanvasCtx = offscreenCanvas.getContext("2d"); const imgWidth = 200; const imgHeight = 200; offscreenCanvas.setAttribute("width", imgWidth); offscreenCanvas.setAttribute("height", imgHeight); offscreenCanvasCtx.drawImage( img, 0, 0, imgWidth, imgHeight); let imgData=offscreenCanvasCtx.getImageData( 0, 0, imgWidth, imgHeight); for ( let i = 0, max = imgData.width * imgData.height; i < max; i++) { if (imgData.data[i * 4 + 3]) { points.push({ x: (i % imgData.width) / imgData.width, y: (i / imgData.width) / imgData.height }); } } } const p= points[~~(Math.random() * points.length)] const radius = Math.min(width * 0.8, height * 0.8); return { x: p.x * radius - radius / 2, y: (1 - p.y) * radius - radius / 2, z: ~~(Math.random() * 30), color: color3 }; } }
完美
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/99899.html
摘要:雙十一光棍節又要來臨了,每年這個時候都是本人最苦悶的時刻。能不能再給力一點說好的粒子系統,現在只是簡單的畫了一點。 showImg(https://segmentfault.com/img/remote/1460000016908379?w=1100&h=564); ? 雙十一光棍節又要來臨了,每年這個時候都是本人最苦悶的時刻。日漸消瘦的錢包,愈發干涸的雙手,雖然變強了,頭卻變涼...
摘要:在兩點間的關系用夾角和距離很容易表示時,極坐標系便顯得尤為有用而在平面直角坐標系中,這樣的關系就只能使用三角函數來表示。對于很多類型的曲線,極坐標方程是最簡單的表達形式,甚至對于某些曲線來說,只有極坐標方程能夠表示。 歡迎大家前往騰訊云+社區,獲取更多騰訊海量技術實踐干貨哦~ 本文由郭詩雅發表于云+社區專欄 在數學中,極坐標系(英語:Polar coordinate system)是...
摘要:今天是年月號,一年一度的情人節又來了,今天對于很多年輕人來說是個特別的日子。該程序員在聯誼會上認識了某藝術系女生,同鄉的雙方互有好感。 今天是2018年8月17號,一年一度的情人節又來了,今天對于很多年輕人來說是個特別的日子。但是作為屌絲界的一枚程序員,往往給人的印象是宅,不愛說話,智商不好,也不討好哄女孩子歡心。但是,為什么我身邊的程序員各個都是高智商,高顏值的小碼農呢?或許,他們用...
摘要:源碼很簡單鍵盤按,然后輸入表白網頁生成器打開網站,填入要表白的內容生成好的網頁百度傳情其實百度很早就有個傳情功能,直接百度輸入表白即可。 又到520,一個狂虐單身狗的日子,看看知乎的熱門話題:showImg(https://segmentfault.com/img/remote/1460000019264481); 這里給大家提供幾個虐狗的新姿勢。 69 表白從 69 開始,給對方發個...
摘要:完整的資料源碼都打包等你來取哈免費滴直接視頻效果展示如下紀念冊哪些浪漫至極的表白程序截圖展示如下界面漫天花瓣飛舞。 ?導語 大家好,我是木木子!?? 今日的表白案例上線啦~有沒有期待?安排安排!源碼基地見免費源碼哈! 貼心的木子君也給你們好多愛心花瓣、以及表白的小程序!在主頁的左側哦! 這款...
閱讀 2082·2021-11-02 14:48
閱讀 2760·2019-08-30 14:19
閱讀 2929·2019-08-30 13:19
閱讀 1297·2019-08-29 16:17
閱讀 3230·2019-08-26 14:05
閱讀 2987·2019-08-26 13:58
閱讀 3075·2019-08-23 18:10
閱讀 1105·2019-08-23 18:04