1. 程式人生 > >p5.js可以做什麼 之 創意動態繪圖板

p5.js可以做什麼 之 創意動態繪圖板

p5.js可以用來做什麼呢?

在此給出我的課程作業,可是絞盡腦汁地挖掘p5.js的功能了~

這是一個創意動態繪圖板。

有三種創意畫筆,分別是點,三角,線。

你可以隨意的進行創作,畫出來的東西可是會動的哦!

自帶截圖儲存功能——請點選左下角的S圖示。

還有神奇的時間控制畫筆——請點選左下角的時鐘圖示。

另外的功能等著你發掘!!


原始碼奉上(轉載請註明出處):

http://alpha.editor.p5js.org/WestRiverLin/sketches/SJnD_deBW

相關推薦

p5.js可以什麼 創意動態繪圖板

p5.js可以用來做什麼呢?在此給出我的課程作業,可是絞盡腦汁地挖掘p5.js的功能了~這是一個創意動態繪圖板。有三種創意畫筆,分別是點,三角,線。你可以隨意的進行創作,畫出來的東西可是會動的哦!自帶截圖儲存功能——請點選左下角的S圖示。還有神奇的時間控制畫筆——請點選左下角

P5.js:改進創意動態繪板

在互動媒體課上接觸到p5.js這個東西后,我就一直在質疑它的實用性,p5.js用來畫圖並不是那麼的好用,但其和unity差不多的性質為動態繪圖提供了條件(p5.js使用setup()函式初始化,每秒呼叫draw()函式進行繪圖,unity使用start()初始化,每秒呼叫update()函式

[js高手路]html5 canvas動畫教程 - 自己動手一個類似windows的畫圖軟件

箭頭 erb 寬度 pow(x type row center shape htm 這個繪圖工具,我還沒有做完,不過已經實現了總架構,以及常見的簡易圖形繪制功能: 1,可以繪制直線,圓,矩形,正多邊形【已完成】 2,填充顏色和描邊顏色的選擇【已完成】 3,描邊和填充功

js把圖片的富有動態感,並對以後需要用著的屬性進行封裝

進行 display div lin 圖片 doc 移除 win next 首先我們先要導入幾張圖片(我已導入完畢): ; 好,我們先寫一個 <div ></div>, 定義一個 class="contair", 在這<div>

p5.js創作動態圖畫

本文主要談一下個人的一幅碼繪作品的創作過程和對碼繪與手繪優缺點的一些簡單的思考。 #創作工具 1、p5.js 2、photoshop #最終效果圖 飄落的雪花是這幅圖的動態元素 #創作過程 ##第一步,在photoshop裡畫出背景圖,即樹幹,因為樹幹用p5.js實在是無法畫出,好在p5提供

vivi橙的搬磚旅(一) 使用P5.js畫一幅圖

手繪vs碼繪 使用P5.js畫一幅圖 程式設計師的世界可不僅僅只有一串串的程式碼,有時候程式碼也可以繪製出一幅幅美麗的作品。這篇文章就用來記錄我的第一篇碼繪作品。 準備工作 相信大多數程式設計師像我一樣,在動手寫程式碼碼繪之前不知道該畫些什麼。於是我在一些網站上找了一些素材。

常用js框架vue.js(深入四:元件2,slot內容分發,編譯作用域,動態切換元件)

元件這內容太多了,被迫分成2部分。上節最後講了props進行父子元件通訊,這裡接著來。 父子元件通訊 1.1 Vue元件是樹形結構,必然要涉及到怎麼查詢父節點,根節點,子節點。子元件可以用 this.$parent 訪問它的父元件。根例項的後代可以用 t

JS跨域呼叫JSONP--動態Script標籤方式實現跨域

動態Script標籤的方式往往是用來訪問不在同一個域的伺服器內部的資料的。例如, 當前我的域名:d1.wwwcomy.com我需要訪問的資料:百度翻譯"chair"的結果由於百度翻譯和我的域名不在一個域名下,所以這個資料通過常規方式是沒辦法獲取的,是被瀏覽器的安全機制所禁止

Vue.js學習生命周期

ted eight http 初始 機會 編譯 log console eat 每個 Vue 實例在被創建之前都要經過一系列的初始化過程。例如,實例需要配置數據觀測(data observer)、編譯模版、掛載實例到 DOM ,然後在數據變化時更新 DOM 。在這個過程中

vue.js實現數據動態響應(Vue.set的應用)

屬性 點擊 屬性。 沒有 log utf-8 創建 http for 在vue裏面,我們操作最多的就是各種數據,在jquery裏面,我們習慣通過下標定向找到數據,然後重新賦值 比如var a[0]=111;(希望上家公司原諒菜鳥的我寫了不少這樣的代碼??) 下面上代碼

JS教程實現加載圖片時百分比進度

scrip 計算 show || microsoft resp fire open func 思路:思路其實很簡單,ajax執行時,會生成一個event對象,其中會包含要加載的文件的大小和當前已經加載完成部分的大小,通過這兩個值即可計算出百分比 事件介紹onprogress

js補充作用域

定義 生成 http -1 cti 例如 概念 演示 沒有 任何程序設計語言都有作用域的概念 簡單的說,作用域就是變量與函數的可訪問範圍,即作用域控制著變量與函數的可見性和生命周期。 在JavaScript中,變量的作用域有全局作用域和局部作用域兩種。 1. 全局作用

通過js控制層的動態隱藏

name 通過 fse head isp blog height 隱藏 function <style type="text/css"> #dv1{ width:1000px; height:1

今天學習js了些總結,分享給大家

要求 js文件 優先 encode mas src 全局變量 nan span 一、1.javascript的作用   是基於對象和事件驅動的語言,應用於客戶端 基於對象:提供好了很多對象,可以直接拿過來使用,不需要創建 事件驅動: html做網站靜態效果,jav

js基礎---parseInt()

pre spa 分解 解析 int 設置 ont bsp 返回 定義和用法 parseInt()可解析一個字符串,並返回一個整數 語法 parseInt(string, radix) 參數 描述 string 必需。要被解析的字符串。 radix

UglifyJS-- 對你的js了什麽

else 處理 fail class clas 逗號語句 執行函數 驗證 後來 也不是閑著沒事去看壓縮代碼,但今天調試自己代碼的時候發現有點意思。因為是自己寫的,雖然壓縮了,格式化之後還是很好辨認。當然作為min的首要準則不是可讀性,而是精簡。那麽它會盡量的縮短代碼,盡量的

[js高手路]var, let, const詳解

兩種 控制 ghost 花括號 pre 內部 span lec 同名 1 function show( flag ){ 2 console.log( a ); 3 if( flag ){ 4

js特效上下翻頁相冊效果

ref 相冊 xmlns otto perf wrapper 統一性 space auto //HTML部分: p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #289c97 } p

【前端】vue.js實現按鈕的動態綁定

case ctype html 們的 ast pre cal 防止 得到 vue.js實現按鈕的動態綁定 實現效果: 實現代碼以及註釋: <!DOCTYPE html> <html> <head> <title>按鈕

玩轉JS系列代碼加載篇

關系 mage 如何 安裝 lan 單單 ejs lec 重要 從前我們這樣寫js <script type="text/javascript"> function a(){  console.log(‘a init‘);}function b(){