使用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è)圓上有以其半徑為邊長(zhǎng)的矩形在繞圓形的原點(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);//返回自程序開(kāi)始的毫秒數(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)的邊長(zhǎng)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í)是由無(wú)數(shù)個(gè)沒(méi)有邊框的圓形一起按照規(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);
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了js中數(shù)組常用方法總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
javascript實(shí)現(xiàn)小型區(qū)塊鏈功能
這篇文章主要介紹了javascript實(shí)現(xiàn)小型區(qū)塊鏈功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
js動(dòng)態(tài)設(shè)置關(guān)鍵偵@keyframes的方法技巧
這篇文章主要給大家介紹了關(guān)于js動(dòng)態(tài)設(shè)置關(guān)鍵偵@keyframes的方法技巧,@keyframes規(guī)則通過(guò)在動(dòng)畫(huà)序列中定義關(guān)鍵幀(或waypoints)的樣式來(lái)控制CSS動(dòng)畫(huà)序列中的中間步驟,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
JS實(shí)現(xiàn)一個(gè)簡(jiǎn)單的日歷
本文主要介紹了用js實(shí)現(xiàn)一個(gè)日歷的示例代碼并解析其實(shí)現(xiàn)原理，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
JavaScript具有類似Lambda表達(dá)式編程能力的代碼(改進(jìn)版)
在之前的一篇博文中我介紹了一種方法可以讓JavaScript具有一種近似于Lambda表達(dá)式的編程能力——但是它有一些缺點(diǎn)，其中妨礙它的使用的最主要的一條就是多了一層括號(hào)，讓代碼變得難以閱讀。2010-09-09
javascript設(shè)計(jì)模式 – 享元模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 享元模式,結(jié)合實(shí)例形式分析了javascript享元模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
jser必看的破解javascript各種加密的反向思維方法
才發(fā)現(xiàn)的破解javascript各種加密的反向思維方法,大家有好的方法都跟帖啊最近發(fā)現(xiàn)了一個(gè)代碼，加密了5層左右，我將破解到最后一步，而且不用javascript解密程序2007-04-04
4種JavaScript實(shí)現(xiàn)簡(jiǎn)單tab選項(xiàng)卡切換的方法
這篇文章主要介紹了4種JavaScript實(shí)現(xiàn)簡(jiǎn)單tab選項(xiàng)卡切換的方法，感興趣的小伙伴們可以參考一下2016-01-01
Javascript this 的一些學(xué)習(xí)總結(jié)
相信有C++、C#或Java等編程經(jīng)驗(yàn)的各位，對(duì)于this關(guān)鍵字再熟悉不過(guò)了。由于Javascript是一種面向?qū)ο蟮木幊陶Z(yǔ)言，它和C++、C#或Java一樣都包含this關(guān)鍵字，接下來(lái)我們將向大家介紹Javascript中的this關(guān)鍵字2012-08-08
JavaScript?ES6中class定義類實(shí)例方法
ES6提供了更接近面向?qū)ο?注意:javascript本質(zhì)上是基于對(duì)象的語(yǔ)言)語(yǔ)言的寫(xiě)法,引入了Class(類)這個(gè)概念,作為對(duì)象的模板,下面這篇文章主要給大家介紹了關(guān)于JavaScript?ES6中class定義類的相關(guān)資料,需要的朋友可以參考下2022-07-07