Projekti 1: Jäiset viivat

Aluksi viivat ovat valkoisia, joten mennään CSS:ään ja annetaan kankaalle tumma tausta:

canvas {
background: linear-gradient(45deg, #0d1011 0% 20%, #163486);
}

Viivan konstruktori

Palaamme takaisin canvas.js . Luodaan uusi Line-luokka:

class Line {
constructor(x, y, offset) {
this.x = x;
this.y = y;
this.offset = offset;
this.radians = 0;
this.velocity = 0.01;
}

Kunkin viivan x ja y sijainnin määrittämisen lisäksi meillä on muutama muukin ominaisuus, joiden avulla voimme tehdä visuaalisesta ilmeestämme mielenkiintoisemman:

• Ominaisuuden offset avulla voimme renderöityä viivat eri etäisyyksillä toisiinsa nähden.
• Esimerkissämme käytämme myös ympyräliikettä. Voimme käyttää radians-ominaisuutta liikkeen kulman määrittämiseen ja velocity-ominaisuutta liikkeen nopeuden määrittämiseen.

Viivan piirtomenetelmä

Seuraavaksi haluamme piirtää viivat. Jokaisen viivan alareunassa on pieni ympyrä, jonka voimme määritellä arc-funktiolla, ja sitten viiva ampuu näytön yläreunaan:

class Line {
constructor(x, y, offset) {
this.x = x;
this.y = y;
this.offset = offset;
this.radians = 0;
this.velocity = 0.01;
} draw = () => {
c.strokeStyle = 'rgba(255, 255, 255, 0.5)';
c.fillStyle = 'rgba(255, 255, 255, 0.3)'; c.beginPath();
c.arc(this.x, this.y, 1, 0, Math.PI * 2, false);
c.fill();
c.moveTo(this.x, this.y);
c.lineTo(this.x + 300, this.y - 1000);
c.stroke();
c.closePath(); this.update();
} update = () => {
// this is where we control movement and interactivity
}
}

Testaamaan, että se toimii, voit luoda esimerkkiviivan:

const line = new Line(250, 800, 0);
line.draw();

Sadan viivan luominen

Mutta haluamme, että viivat täyttävät näytön, joten tarvitsemme tavan, jolla voimme luoda sadan viivan ryhmän. Tässä on yksinkertainen versio:

const lineArray = ;for (let i = 0; i < 100; i++) { const start = { x: -250, y: 800 };
const unit = 25; lineArray.push(
new Line(
start.x + unit * i,
start.y + i * -3,
0.1 + (1 * i)
)
);
};

Katsellaksemme näitä rivejä, meidän on käynnistettävä niiden draw-metodit. Koska animoimme ne pian, paras paikka tehdä se on animate-funktiossa:

function animate() {
requestAnimationFrame(animate);
c.clearRect(0, 0, window.innerWidth, window.innerHeight);
lineArray.forEach(line => {
line.draw();
});
};animate();

Meillä on nyt 100 riviä! Voimme kuitenkin tehdä alkuasennostamme mielenkiintoisemman: alla olevassa koodissa random-muuttuja auttaa luomaan hienovaraista vaihtelua, joka antaa kokonaisvaikutelmalle luonnollisemman ilmeen. (Käytän myös Math.sin(i)-muuttujaa lisätäkseni hieman aaltoilua aloitusasentoihin. Tämä ei ole välttämätöntä, mutta se on hieno yksityiskohta.)

const lineArray = ;for (let i = 0; i < 100; i++) { const start = { x: -250, y: 800 };
const random = Math.random() - 0.5;
const unit = 25; lineArray.push(
new Line(
start.x + ((unit + random) * i),
start.y + (i + random) * -3 + Math.sin(i) * unit,
0.1 + (1 * i)
)
);
};

Leikittele numeroiden kanssa, kunnes saat haluamasi aloituskuvion!

Animaatio

Tästä eteenpäin on hyvin yksinkertaista lisätä haluamamme animaatio. Palaa takaisin Line-luokkaamme ja lisää sitten update-metodiin seuraava:

this.radians += this.velocity;
this.y = this.y + Math.cos(this.radians + this.offset);

Jokaista animaatiokehystä kohden this.radians kasvaa this.velocity . Tämän jälkeen käytämme this.radians:tä luodaksemme ympyränmuotoisen liikkeen Math.cos:n kautta .

Jos et ole aiemmin törmännyt Math.sin:iin tai Math.cos:iin (tai trigonometriasi on hieman ruosteessa!), sen ei pitäisi estää sinua seuraamasta mukana. Tiedä vain, että Math.cos:n avulla voimme luoda edestakaista liikettä, joka on identtinen alla olevan kuvaajan violetin viivan kanssa:

Viimeiseksi lisäämällä this.offset , viivat alkavat tehdä silmukoita eri kulmissa.

Mielestäni tämä on aika hieno efekti. Mutta viimeistelyksi lisätään vielä interaktiivisuutta. Kun käyttäjä vie hiiren viivojen päälle, laitetaan ne vaihtamaan väriä.

Vuorovaikutteisuus

Yksinkertaisin tapa nähdä, onko käyttäjän hiiri jonkun viivan päällä, on käyttää canvasin sisäänrakennettua isPointInPath-metodia.

Mutta ilman muita hienosäätöjä tästä ei tule olemaan paljon hyötyä. Viivat ovat vain yhden pikselin levyisiä, joten mahdollisuus saada aikaan muutoksia on liian pieni ollakseen kiinnostava!

Hyvä ratkaisu tähän ongelmaan on luoda näkymättömät viivat jokaisen viivamme taakse. Näkymättömien viivojen tulisi olla leveämpiä, ja voimme käyttää niitä laukaisemaan isPointInPath.

isPointInPath

Luotaan draw-metodimme sisälle funktio nimeltä drawLinePath . Sen pitäisi ottaa width näkymättömiä viivojamme varten ja color (joksi näkyvät viivamme muuttuvat, kun näkymättömät viivat ovat kosketuksissa):

const drawLinePath = (width = 0, color) => {
c.beginPath();
c.moveTo(this.x - (width / 2), this.y + (width / 2));
c.lineTo(this.x - (width / 2) + 300, this.y - (width / 2) - 1000);
c.lineTo(this.x + (width / 2) + 300, this.y - (width / 2) - 1000);
c.lineTo(this.x + (width / 2), this.y - (width / 2));
c.closePath();
if (c.isPointInPath(mouse.x, mouse.y) && color) {
c.strokeStyle = color;
};
};

(Huomaa, että yllä oleva nuolifunktioiden käyttö sitoo implisiittisesti oikean kontekstin this:lle ).

Voitamme sen jälkeen helposti lisätä näkymättömien viivojen eri leveyksiä laukaistaksemme erilaiset värimuutokset. Seuraavan koodin pitäisi tehdä selväksi, mistä on kyse:

drawLinePath(150, 'red');
drawLinePath(50, 'yellow');

Mutta jos haluat hienovaraisemman efektin, kokeile:

drawLinePath(150, '#baf2ef');
drawLinePath(50, '#dcf3ff');

Ja se on valmis!

Täydellisen JavaScripttikoodin saat tutustumalla tähän gistiin.