​

function toggle(k) {

    if (k.keyCode == "32") {

        $("#key").toggleClass('hidden');

    }

}

​

​

p5.disableFriendlyErrors = true

​

let particles = []; // an array to add multiple particles for stars

​

//var canvas1; //to place convas behind html

​

let osc, playing, freq, amp; //four mouse or touch sound

​

let ar = 0; //rotating arcs

​

​

​

//for straight shooting stars

let vibrations = [];

let a = 0;

​

//audios-

var bgloop; //background loop

var pwk; //percussions //wrist kick

var psd; //string dunk

var pcr; //cracka

var pch; //chaek

var b1; //bass

var b2;

var bs;

var m1; //mids

var m2;

var ms;

var h1; //highs

var h2;

var hs;

var d1; //dono

var d2;

​

//starsss

let beginX = 40.0; // Initial x-coordinate

let beginY = 40.0; // Initial y-coordinate

let endX = 500.0; // Final x-coordinate

let endY = 200.0; // Final y-coordinate

let distX; // X-axis distance to move

let distY; // Y-axis distance to move

let exponent = 3; // Determines the curve

let x = 0.0; // Current x-coordinate

let y = 0.0; // Current y-coordinate

let step = 0.021; // Size of each step along the path

let pct = 0.0; // Percentage traveled (0.0 to 1.0)

​

​

​

function windowResized() {

    resizeCanvas(windowWidth, windowHeight);

}

​

function preload() {

    //audios

    bgloop = loadSound("audio/citygirlintro.mp3");

    pwk = loadSound("audio/wk.mp3");

    psd = loadSound("audio/sd.mp3");

    pcr = loadSound("audio/cr.mp3");

    pch = loadSound("audio/ch.mp3");

    b1 = loadSound("audio/b1.mp3");

    b2 = loadSound("audio/b2.mp3");

    bs = loadSound("audio/bs.mp3");

    m1 = loadSound("audio/m1.mp3");

    m2 = loadSound("audio/m2.mp3");

    ms = loadSound("audio/ms.mp3");

    h1 = loadSound("audio/h1.mp3");

    h2 = loadSound("audio/h2.mp3");

    hs = loadSound("audio/hs.mp3");

    d1 = loadSound("audio/d1.mp3");

    d2 = loadSound("audio/d2.mp3");

​

    //moon

​

}

​

function setup() {

​

    canvas = createCanvas(windowWidth, windowHeight); //initite

    canvas.position(0, 0);

    canvas.style('z-index', '-1');

    //oscillator

    canvas.touchMoved(playOscillator);

    canvas.mousePressed(playOscillator);

    //canvas.mouseClicked(playOscillator);

    //canvas.touchStarted(playOscillator);

    osc = new p5.Oscillator('sine');

    angleMode(DEGREES);

​

​

​

    //

    bgloop.loop(); //loop bgmusic

    //stars

    for (let i = 0; i < 2 * width / 10; i++) {

        particles.push(new Particle());

    }

    noStroke();

    distX = endX - beginX;

    distY = endY - beginY;

​

​

    //shooting star

    for (let i = 0; i < 2; i++) {

        vibrations.push(new SParticle(random(width), random(height)));

    }

    noCursor();

​

}

​

function draw() {

​

    //background

    var color1 = color(9, 27, 56); //gradient upper color

    var color2 = color(30, 66, 125); //gradient lower color

    setGradient(0, 0, windowWidth, windowHeight, color1, color2, "Y");

​

    //bgstars

    for (let i = 0; i < 60; i++) {

        particles[i].createParticle();

        particles[i].moveParticle();

        particles[i].joinParticles(particles.slice(i));

​

    }

    //curved stars

    push();

    fill(0, 10);

    rect(0, 0, width, height);

    pct += step;

    if (pct < 1.0) {

        x = beginX + pct * distX;

        y = beginY + pow(pct, exponent) * distY;

    }

    fill(random(200, 255));

    ellipse(x, y, random(1, 3), random(1, 3));

    pop()

​

    //sound oscillator

    push()

    freq = constrain(map(mouseX, 0, width, 100, 500), 100, 500);

    amp = constrain(map(mouseY, height, 0, 0, 1), 0, 1);

​

    //text('tap to play', 20, 20);

    //text('freq: ' + freq, 20, 40);

    //text('amp: ' + amp, 20, 60);

​

    if (playing) {

        // smooth the transitions by 0.1 seconds

        osc.freq(freq, 0.1);

        osc.amp(amp, 0.1);

    }

    pop()

​

    push()

    strokeWeight(0.5);

    stroke(255);

    line(pmouseX, pmouseY, mouseX, mouseY);;

    //ellipse(pmouseX, pmouseY, 1, 1);

    //return false;

    pop();

​

    push();

    for (let i = 0; i < vibrations.length; i++) {

        vibrations[i].show();

        vibrations[i].update();

    }

    pop();

​

    push();

    noStroke();

    fill(255, 255, 255, 255);

    translate(width * 0.2, height * 0.5);

    rotate(frameCount / 20.0);

    nstar(0, 0, 0.5, 5, 4);

    pop();

​

    push();

    noStroke();

    fill(255, 255, 255, 255);

    rotate(frameCount / 10.0);

    nstar(random(width), random(height), 0.5, 2, 4);

    pop();

​

    fill(random(200, 255));

    ellipse(x, y, random(1, 3), random(1, 3));

​

​

}

​

​

​

function keyPressed() {

​

    //drumkit first:

    if (keyCode == '81') { //q

        pwk.play();

​

    }

    if (keyCode == '87') { //w

        pcr.play();

​

    }

    if (keyCode == '79') { //o

        psd.play();

​

    }

    if (keyCode == '80') { //p

        pch.play();

    }

​

    //now the melody riffs:

    //a

    if (keyCode == '65') {

        m1.play();

        fill(92, 255, 209);

        rect(0, 0, width, height);

        vibrations.push(new AParticle(random(width / 3, 2 * width / 3), random(height / 3, 2 * height / 3)));

​

    }

​

​

    //s

    if (keyCode == '83') {

        h1.play();

        fill(255, 255, 255);

        rect(0, 0, width, height);

        vibrations.push(new SSParticle(width / 2, height / 2));

    }

    //d

    if (keyCode == '68') {

        b1.play();

        fill(219, 255, 245);

        rect(0, 0, width, height);

        vibrations.push(new DParticle(random(0, width), random(0, height)));

        vibrations.push(new DParticle(random(0, width), random(0, height)));

        vibrations.push(new DParticle(random(0, width), random(0, height)));

​

​

    }

    //f

    if (keyCode == '70') {

        m2.play();

        fill(252, 168, 255, 200);

        rect(0, 0, width, height);

        fill(255, 244, 36);

        ellipse(50, 50, 5, 5);

        pct = 0.0;

        beginX = random(width / 4, 3 * width / 4);

        beginY = random(80, 160);

        endX = width / 2;

        endY = height + 10;

        distX = endX - beginX;

        distY = endY - beginY;

​

​

    }

    //g

    if (keyCode == '71') {

        h2.play();

​

​

        push();

        fill(90, 252, 3, 255);

        rect(0, 0, width, height);

        stroke(255);

        line(0, 0, width, height);

        line(0, 0, width, height);

        line(0, 0, width, height);

        ellipse(random(100, (width - 100)), random(100, (height - 100)));

        pop();

​

​

​

​

    }

    //h

    if (keyCode == '72') {

        b2.play();

​

        push();

        translate(width / 2, height / 2);

        fill(235, 52, 67, 255);

        ellipse(0, 0, 100, 100);

        pop()

        push();

        fill(255, 238, 0, 255);

        ellipse(random(0, width), random(0, height), 50, 50);

        fill(84, 99, 214);

        ellipse(random(0, width), random(0, height), 20, 20);

        fill(230, 69, 208);

        ellipse(random(0, width), random(0, height), 60, 60);

        fill(201, 255, 179);

        ellipse(random(0, width), random(0, height), 70, 70);

​

        pop();

​

    }

    //j

    if (keyCode == '74') {

        ms.play();

        fill(255, 249, 69, 255);

        rect(0, 0, width, height);

        push();

        vibrations.push(new SParticle(random(0, 50), random(0, 50)));

        vibrations.push(new SParticle(random(0, 50), random(0, 50)));

        vibrations.push(new SParticle(random(0, 50), random(0, 50)));

        vibrations.push(new SParticle(random(0, 50), random(0, 50)));

        pop();

    }

    //k

    if (keyCode == '75') {

        hs.play();

        fill(138, 255, 245, 255);

        rect(0, 0, width, height);

        vibrations.push(new LParticle(random(width - 100, width), random(0, 150)));

    }

    //l

    if (keyCode == '76') {

        bs.play();

        fill(255, 89, 230, 255);

        rect(0, 0, width, height);

        vibrations.push(new BParticle(random(width / 2, width), random((height / 2), height)));

​

    }

    //return false;

}

​

function playOscillator() {

    // starting an oscillator on a user gesture will enable audio

    // in browsers that have a strict autoplay policy.

    // See also: userStartAudio();

    osc.start();

    playing = true;

}

​

function mouseReleased() {

    // ramp amplitude to 0 over 0.5 seconds

    osc.amp(0, 0.5);

    playing = false;

}

​

​

​

//gradient

function setGradient(x, y, w, h, c1, c2, axis) {

    noFill();

    if (axis == "Y") { // Top to bottom gradient

        for (let i = y; i <= y + h; i++) {

            var inter = map(i, y, y + h, 0, 1);

            var c = lerpColor(c1, c2, inter);

            stroke(c);

            line(x, i, x + w, i);

        }

    } else if (axis == "X") { // Left to right gradient

        for (let j = x; j <= x + w; j++) {

            var inter2 = map(j, x, x + w, 0, 1);

            var d = lerpColor(c1, c2, inter2);

            stroke(d);

            line(j, y, j, y + h);

        }

    }

}

//objects

function nstar(x, y, radius1, radius2, npoints) {

    let angle = TWO_PI / npoints;

    let halfAngle = angle / 2.0;

    beginShape();

    for (let a = 0; a < TWO_PI; a += angle) {

        let sx = x + cos(a) * radius2;

        let sy = y + sin(a) * radius2;

        vertex(sx, sy);

        sx = x + cos(a + halfAngle) * radius1;

        sy = y + sin(a + halfAngle) * radius1;

        vertex(sx, sy);

    }

    endShape(CLOSE);

}

class Particle { // bg stars

    // setting the co-ordinates, radius and the

    // speed of a particle in both the co-ordinates axes.

    constructor() {

        this.x = random(0, windowWidth);

        this.y = random(0, windowHeight);

        this.r = random(0, 2.5);

        this.xSpeed = random(-0.1, 0.5);

        this.ySpeed = random(-0.1, 0.5);

    }

​

    // creation of a particle.

    createParticle() {

        noStroke();

        fill('rgba(200,169,169,random(0,1)');

        circle(this.x, this.y, this.r);

    }

​

    // setting the particle in motion.

    moveParticle() {

        if (this.x < 0 || this.x > width)

            this.xSpeed *= -1;

        if (this.y < 0 || this.y > height)

            this.ySpeed *= -1;

        this.x += this.xSpeed;

        this.y += this.ySpeed;

    }

​

    // this function creates the connections(lines)

    // between particles which are less than a certain distance apart

    joinParticles(particles) {

        particles.forEach(element => {

            let dis = dist(this.x, this.y, element.x, element.y);

            if (dis < 85) {

                stroke('rgba(255,255,255,0)');

                line(this.x, this.y, element.x, element.y);

            }

        });

    }

}

​

​

class SSParticle {

​

    constructor(x, y) {

        this.x = x;

        this.y = y;

        this.history = [];

    }

​

    update() {

        this.x = this.x + (4);

        this.y = this.y + (1000);

​

        let v = createVector(this.x, this.y);

​

        this.history.push(v);

        //console.log(this.history.length);

​

        if (this.history.length > 5) {

            this.history.splice(0, 1);

        }

    }

​

    show() {

        stroke(255, 245, 110, 50);

        beginShape();

        for (let i = 0; i < this.history.length; i++) {

            let pos = this.history[i];

            noFill();

            vertex(pos.x, pos.y);

            endShape();

        }

​

        stroke(255, 255, 242);

        strokeWeight(0.2);

        noFill(255, 255, 242);

        ellipse(this.x, this.y, width, width);

        ellipse(this.x, this.y, width - 10, width - 10);

        ellipse(this.x, this.y, width - 20, width - 20);

        ellipse(this.x, this.y, width - 30, width - 30);

        ellipse(this.x, this.y, width - 40, width - 40);

        ellipse(this.x, this.y, width - 50, width - 50);

        ellipse(this.x, this.y, width - 60, width - 60);

        ellipse(this.x, this.y, width - 70, width - 70);

    }

}

​

​

class SParticle {

​

    constructor(x, y) {

        this.x = x;

        this.y = y;

        this.history = [];

    }

​

    update() {

        this.x = this.x + (4);

        this.y = this.y + (1);

​

        let v = createVector(this.x, this.y);

​

        this.history.push(v);

        //console.log(this.history.length);

​

        if (this.history.length > 5) {

            this.history.splice(0, 1);

        }

    }

​

    show() {

        stroke(255, 245, 110, 50);

        beginShape();

        for (let i = 0; i < this.history.length; i++) {

            let pos = this.history[i];

            noFill();

            vertex(pos.x, pos.y);

            endShape();

        }

​

        noStroke();

        fill(255, 245, 110);

        ellipse(this.x, this.y, 2, 2);

    }

}

class BParticle {

​

    constructor(x, y) {

        this.x = x;

        this.y = y;

        this.history = [];

    }

​

    update() {

        this.x = this.x + (-4);

        this.y = this.y + (-5);

​

        let v = createVector(this.x, this.y);

​

        this.history.push(v);

        //console.log(this.history.length);

​

        if (this.history.length > 20) {

            this.history.splice(0, 1);

        }

    }

​

    show() {

        strokeWeight(0.5);

        stroke(255, 153, 253, 100);

        beginShape();

        for (let i = 0; i < this.history.length; i++) {

            let pos = this.history[i];

            noFill();

            vertex(pos.x, pos.y);

            endShape();

        }

​

        noStroke();

        fill(255, 153, 253, 100);

        ellipse(this.x, this.y, 1, 1);

    }

}

class LParticle {

​

    constructor(x, y) {

        this.x = x;

        this.y = y;

        this.history = [];

    }

​

    update() {

        this.x = this.x + (-4);

        this.y = this.y + (2);

​

        let v = createVector(this.x, this.y);

​

        this.history.push(v);

        //console.log(this.history.length);

​

        if (this.history.length > 40) {

            this.history.splice(0, 1);

        }

    }

​

    show() {

        stroke(148, 255, 253, 240);

        beginShape();

        for (let i = 0; i < this.history.length; i++) {

            let pos = this.history[i];

            noFill();

            vertex(pos.x, pos.y);

            endShape();

        }

​

        noStroke();

        fill(148, 255, 253, 240);

        ellipse(this.x, this.y, 1, 1);

    }

}

​

class AParticle {

​

    constructor(x, y) {

        this.x = x;

        this.y = y;

        this.history = [];

    }

​

    update() {

        this.x = this.x + random(-50, 100);

        this.y = this.y + random(-50, 100);

​

        let v = createVector(this.x, this.y);

​

        this.history.push(v);

        //console.log(this.history.length);

​

        if (this.history.length > 6) {

            this.history.splice(0, 1);

        }

    }

​

    show() {

        stroke(92, 255, 209);

        strokeWeight(0.5);

        beginShape();

        for (let i = 0; i < this.history.length; i++) {

            let pos = this.history[i];

            noFill();

            vertex(pos.x, pos.y);

            endShape();

        }

​

        noStroke();

        fill(92, 255, 209);

        ellipse(this.x, this.y, 2, 2);

    }

}

​

class DParticle {

​

    constructor(x, y) {

        this.x = x;

        this.y = y;

        this.history = [];

    }

​

    update() {

        this.x = this.x + random(-80, 100);

        this.y = this.y + random(-80, 100);

​

        let v = createVector(this.x, this.y);

​

        this.history.push(v);

        //console.log(this.history.length);

​

        if (this.history.length > 6) {

            this.history.splice(0, 1);

        }

    }

​

    show() {

        stroke(239, 255, 255);

        strokeWeight(0.03);

        beginShape();

        for (let i = 0; i < this.history.length; i++) {

            let pos = this.history[i];

            noFill();

            vertex(pos.x, pos.y);

            endShape();

        }

​

        noStroke();

        fill(219, 255, 245);

        ellipse(this.x, this.y, 1, 1);

    }

}

​

​

​

class roundtrial {

​

    show() {

        push();

        translate(width / 2, height / 2);

        noFill();

        stroke(255);

        strokeWeight(0.2);

        rotate(ar);

        for (let i = width - 60; i < width - 30; i = i + 5) {

            arc(0, 0, i, i, i / 100, i / 2);

        }

        ar = ar + 0.001;

        pop();

    }

}