Falleg kóða er gleði að skrifa, en erfitt er að deila gleðiinni með öðrum forriturum, svo ekki sé minnst á forritara. Í frítíma mínum í daglegu starfi og fjölskyldu sinni hef ég verið að leika sér með hugmyndinni um forritunarljóð með því að nota strigaþáttinn til að teikna í vafranum. Það eru margvíslegar hugtök þarna úti til að lýsa sjónrænum tilraunum á tölvunni, svo sem dev list, kóða skissu, kynningu og gagnvirkum listum, en að lokum settist ég á forritunarmál til að lýsa þessu ferli. Hugmyndin að baki ljóð er fáður hluti af prosa sem er auðvelt að deila, nákvæm og fagurfræðileg. Það er ekki hálfgerður hugmynd í skissubók, en samhljóða stykki kynnt fyrir áhorfandann fyrir ánægju sína. Ljóð er ekki verkfæri, en er til þess að vekja tilfinningar.
Fyrir eigin ánægju mína hefur ég lesið bækur um stærðfræði, útreikninga, eðlisfræði og líffræði. Ég hef lært mjög fljótt að þegar ég þyrfti að hugsa um það borar fólk nokkuð fljótt. Sjónrænt get ég tekið nokkrar af þessum hugmyndum sem mér finnst heillandi, og fljótt gefa fólki tilfinningu um furða, jafnvel þótt þeir skilji ekki kenninguna á bak við kóðann og hugtökin sem knýja það. Þú þarft ekki að takast á við hvaða harða heimspeki eða stærðfræði til að skrifa forritunarmynd, bara löngun til að sjá eitthvað lifandi og anda á skjánum.
Kóðinn og dæmi sem ég hef sett saman hér að neðan mun sparka upp skilning á því hvernig á að draga úr þessu fljótlegu og mjög ánægjulegu ferli. Ef þú vilt fylgja með kóðanum sem þú getur sækja skrárnar hér.
Helstu bragð þegar í raun er að búa til ljóð er að halda því í ljós og einfalt. Ekki eyða þremur mánuðum til að byggja upp einn mjög flottan kynningu. Búðu til í stað 10 ljóð sem þróa hugmynd. Skrifaðu tilrauna kóða sem er spennandi og ekki vera hrædd við að mistakast.
Fyrir fljótlegt yfirlit er striga í grundvallaratriðum 2d punktamyndar myndþáttur sem býr í DOM sem hægt er að draga á. Teikning er hægt að gera með því að nota annaðhvort 2d samhengi eða WebGL samhengi. Samhengið er JavaScript hluturinn sem þú notar til að fá aðgang að teikningartólunum. JavaScript viðburðir sem eru í boði fyrir striga eru mjög barebones, ólíkt þeim sem eru í boði fyrir SVG. Allir atburðir sem eru kallaðir eru fyrir þáttinn í heild, ekki neitt dregið á striga, rétt eins og venjulegt myndarþáttur. Hér er undirstöðu striga dæmi:
var canvas = document.getElementById('example-canvas');var context = canvas.getContext('2d');//Draw a blue rectanglecontext.fillStyle = '#91C0FF';context.fillRect(100, // x100, // y400, // width200 // height);//Draw some textcontext.fillStyle = '#333';context.font = "18px Helvetica, Arial";context.textAlign = 'center';context.fillText("The wonderful world of canvas", // text300, // x200 // y);Það er frekar einfalt að byrja. Það eina sem gæti verið svolítið ruglingslegt er að samhengið þarf að stilla með stillingum eins og fillStyle, lineWidth, leturgerð og strokeStyle áður en raunverulegt teikna símtal er notað. Það er auðvelt að gleyma að uppfæra eða endurstilla þessar stillingar og fá óviljandi niðurstöður.
Fyrsta dæmið hljóp aðeins einu sinni og dró kyrrmynd á striga. Það er allt í lagi, en þegar það gerist í alvöru, er það þegar það er uppfært í 60 rammar á sekúndu. Nútíma vafrar hafa innbyggða aðgerðarbeiðninaAnimationFrame sem samstillir sérsniðna teikna kóða til að draga hringrásina í vafranum. Þetta hjálpar hvað varðar skilvirkni og sléttari. Markmið visualization ætti að vera kóða sem hums með 60 rammar á sekúndu.
(A athugasemd um stuðning: Það eru nokkur einföld polyfills í boði ef þú þarft að styðja eldri vafra.)
var canvas = document.getElementById('example-canvas');var context = canvas.getContext('2d');var counter = 0;var rectWidth = 40;var rectHeight = 40;var xMovement;//Place rectangle in the middle of the screenvar y = ( canvas.height / 2 ) - ( rectHeight / 2 );context.fillStyle = '#91C0FF';function draw() {//There are smarter ways to increment time, but this is for demonstration purposescounter++;//Cool math below. More explanation in the text following the code.xMovement = Math.sin(counter / 25) * canvas.width * 0.4 + canvas.width / 2 - rectWidth / 2;//Clear the previous drawing resultscontext.clearRect(0, 0, canvas.width, canvas.height);//Actually draw on the canvascontext.fillRect(xMovement,y,rectWidth,rectHeight);//Request once a new animation frame is available to call this function againrequestAnimationFrame( draw );}draw();Það er gott að það sé svolítið meira innri uppbygging við kóðann, en það gerir í raun ekkert sem er miklu meira áhugavert. Það er þar sem lykkja kemur inn. Í vettvangseiningunni munum við búa til nýja DotManager mótmæla. Það er vel að safna þessari virkni í sérstökum hlut, því það er auðveldara og hreinni að átta sig á því eins og fleiri og flóknari verður bætt við uppgerðina.
var DotManager = function( numberOfDots, scene ) {this.dots = [];this.numberOfDots = numberOfDots;this.scene = scene;for(var i=0; i < numberOfDots; i++) {this.dots.push( new Dot(Math.random() * this.canvas.width,Math.random() * this.canvas.height,this.scene));}};DotManager.prototype = {update : function( dt ) {for(var i=0; i < this.numberOfDots; i++) {this.dots[i].update( dt );}}};Nú á vettvangi, frekar en að búa til og uppfæra punkt , búa við og uppfæra DotManager . Við munum búa til 5000 punkta til að byrja.
function Scene() {...this.dotManager = new DotManager(5000, this);...};Scene.prototype = {...update : function( dt ) {this.dotManager.update( dt );}...};Fyrir hvert nýtt punktar búin til, taktu upphafsstöðu sína og stilltu litbrigðina þar sem það er meðfram breidd striga. Utils.hslToFillStyle aðgerðin er lítill hjálparaðgerð sem ég bætti við til að breyta sumum inntaksbreytur í rétta sniðið fillStyle strenginn. Nú þegar eru hlutirnir spennandi. Stimpurnar munu að lokum sameinast saman og missa regnbogaáhrif sín eftir að þeir hafa tíma til að dreifa. Aftur er þetta dæmi um akstursmyndir með smá stærðfræði eða breytilegum inntakum. Mér finnst gaman að gera liti með HSL litmyndinni með kynlausri list frekar en RGB vegna notkunar. RGB er svolítið abstrakt.
Það hefur ekki verið nein raunveruleg notandi samskipti upp að þessum tímapunkti.
var Mouse = function( scene ) {this.scene = scene;this.position = new THREE.Vector2(-10000, -10000);$(window).mousemove( this.onMouseMove.bind(this) );};Mouse.prototype = {onMouseMove : function(e) {if(typeof(e.pageX) == "number") {this.position.x = e.pageX;this.position.y = e.pageY;} else {this.position.x = -100000;this.position.y = -100000;}}};Þessi einfalda hlutur encapsulates rökfræði músaruppfærslna frá afganginum af vettvangi. Það uppfærir aðeins stöðuveituna á músarfærslu. Afgangurinn af hlutunum getur síðan sýnt úr stöðuvef músarinnar ef þær eru sendar tilvísun í hlutinn. Ein ástæða sem ég er að hunsa hér er ef breidd striga er ekki einn við einn með pixla víddum DOM þ.e. svöruðu stærð striga eða hærri pixla þéttleika (retina) striga eða ef striga er ekki staðsett á efst til vinstri. Hnit músarinnar verður að breyta í samræmi við það.
var Scene = function() {...this.mouse = new Mouse( this );...};Eina sem eftir var fyrir músina var að búa til músarhlutinn innan svæðisins. Nú þegar við höfum mús, skulum við draga punktana við það.
function Dot( x, y, scene ) {...this.attractSpeed = 1000 * Math.random() + 500;this.attractDistance = (150 * Math.random()) + 180;...}Ég bætti nokkrum stigagildum við punktinn þannig að hver og einn hegðar sér svolítið öðruvísi í uppgerðinni til að gefa það smá raunsæi. Leika með þessum gildum til að fá aðra tilfinningu. Nú á að laða mús aðferð. Það er svolítið lengi með athugasemdunum.
attractMouse : function() {//Again, create some private variables for this methodvar vectorToMouse = new THREE.Vector2(),vectorToMove = new THREE.Vector2();//This is the actual public methodreturn function(dt) {var distanceToMouse, distanceToMove;//Get a vector that represents the x and y distance from the dot to the mouse//Check out the three.js documentation for more information on how these vectors workvectorToMouse.copy( this.scene.mouse.position ).sub( this.position );//Get the distance to the mouse from the vectordistanceToMouse = vectorToMouse.length();//Use the individual scalar values for the dot to adjust the distance movedmoveLength = dt * (this.attractDistance - distanceToMouse) / this.attractSpeed;//Only move the dot if it's being attractedif( moveLength > 0 ) {//Resize the vector to the mouse to the desired move lengthvectorToMove.copy( vectorToMouse ).divideScalar( distanceToMouse ).multiplyScalar( moveLength );//Go ahead and add it to the current position now, rather than in the draw callthis.position.add(vectorToMove);}};}()Þessi aðferð gæti verið svolítið ruglingslegt ef þú ert ekki upp til dagsetningar á stærðfræðigröfunni þinni. Vigrar geta verið mjög sjónarlegar og geta hjálpað ef þú dregur út einhverjar skrúfur út á pappírsbrúnum pappír. Í venjulegri ensku er þessi aðgerð að ná fjarlægðinni milli músarinnar og punktarins. Það er þá að færa punktinn svolítið nær punktinum miðað við hversu nær það er þegar punkturinn er og hversu lengi er liðinn. Það gerir þetta með því að reikna út fjarlægðina til að hreyfa (eðlilegt skalalarnúmer) og margfalda það síðan með eðlilegum vektor (vektor með lengd 1) punktsins sem vísar til músarinnar. Allt í lagi, þessi síðasta setning var ekki endilega látin ensku en það er byrjunin.