使用p5.js臨摹動(dòng)態(tài)圖片
本文實(shí)例為大家分享了p5.js臨摹動(dòng)態(tài)圖片的具體代碼,供大家參考,具體內(nèi)容如下
1、臨摹圖片
2、圖像運(yùn)動(dòng)規(guī)律
原圖中一共有36個(gè)等大的四分之三圓形,按照一定的規(guī)律轉(zhuǎn)動(dòng),可以等效為圓形不動(dòng),每個(gè)圓上有以其半徑為邊長的矩形在繞圓形的原點(diǎn)轉(zhuǎn)動(dòng),每四個(gè)為一組,其他部分都是在重復(fù)這四個(gè)的轉(zhuǎn)動(dòng)規(guī)律
3、完整代碼
function setup() { createCanvas(402,402); } function draw() { background(0); var dx=0; dx+=PI/180; var t=(millis()/5)*sin(dx);//返回自程序開始的毫秒數(shù) if(dx==PI) { dx=0; } for(var i=0;i<6;i++)//每行每列六個(gè)圓形 { for(var j=0;j<6;j++) { fill(255); ellipse(i*66+36, j*66+36, 60, 60);//繪制半徑30的圓形,間隔6 fill(0); translate(i*66+36, j*66+36);//矩形的移動(dòng),共四種運(yùn)動(dòng)狀態(tài) if(i%2==0&&j%2==0) { rotate(-t); //逆時(shí)針旋轉(zhuǎn) rect(0,0,30,30);//旋轉(zhuǎn)的邊長30黑色矩形 } else if(i%2==1&&j%2==0) { rotate(t);//順時(shí)針旋轉(zhuǎn) rect(-30,0,30,30); } else if(i%2==1&&j%2==1) { rotate(-t); rect(-30,-30,30,30); } else if(i%2==0&&j%2==1) { rotate(t); rect(0,-30,30,30); } resetMatrix(); } } }
4、臨摹結(jié)果
5、拓展圖像
運(yùn)動(dòng)規(guī)律:
一段螺旋型的運(yùn)動(dòng)弧線,中心顏色較深,越向外顏色越淺,形成一種線在向中心運(yùn)動(dòng)的趨勢(shì)。繪制時(shí)是由無數(shù)個(gè)沒有邊框的圓形一起按照規(guī)律運(yùn)動(dòng),形成線。
完整代碼:
function setup() { createCanvas(500, 500); noStroke(); } function draw() { background(0); for (var i =1;i <3000; i++) { drawcircle(255-0.1*i,255-0.1*i,255-0.1*i, i); i++; } } function drawcircle( r, g, b, interval){ fill(r, g, b); var x = 250; var y = 250; var t = millis() /3+ interval *0.5; var xi; var yi;i var radius = interval *15; xi = 0.01*radius * Math.cos(t * Math.PI/180); yi = 0.01*radius * Math.sin(t * Math.PI/180); x += xi; y += yi; ellipse(x, y, 20,20); }
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
20多個(gè)小事例帶你重溫ES10新特性(小結(jié))
這篇文章主要介紹了20多個(gè)小事例帶你重溫ES10新特性(小結(jié)),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09JS實(shí)現(xiàn)touch 點(diǎn)擊滑動(dòng)輪播實(shí)例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)touch 點(diǎn)擊滑動(dòng)輪播實(shí)例代碼,需要的朋友可以參考下2017-01-01layui的select聯(lián)動(dòng)實(shí)現(xiàn)代碼
今天小編就為大家分享一篇layui的select聯(lián)動(dòng)實(shí)現(xiàn)代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09javascript實(shí)現(xiàn)動(dòng)態(tài)表頭及表列的展現(xiàn)方法
這篇文章主要介紹了javascript實(shí)現(xiàn)動(dòng)態(tài)表頭及表列的展現(xiàn)方法,涉及javascript動(dòng)態(tài)操作table元素的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07JS時(shí)間轉(zhuǎn)換標(biāo)準(zhǔn)格式、時(shí)間戳轉(zhuǎn)換標(biāo)準(zhǔn)格式的示例代碼
這篇文章主要介紹了JS時(shí)間轉(zhuǎn)換標(biāo)準(zhǔn)格式、時(shí)間戳轉(zhuǎn)換標(biāo)準(zhǔn)格式的示例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05使用layui實(shí)現(xiàn)的左側(cè)菜單欄以及動(dòng)態(tài)操作tab項(xiàng)方法
今天小編就為大家分享一篇使用layui實(shí)現(xiàn)的左側(cè)菜單欄以及動(dòng)態(tài)操作tab項(xiàng)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09