A Pen by Mark Santiago

Developer
Mark Santiago
Size
5,878 Kb
Views
8,096
  1. A Pen by Mark Santiago Previews
  2. A Pen by Mark Santiago HTML Codes
  3. A Pen by Mark Santiago CSS Codes
  4. A Pen by Mark Santiago JS Codes

How do I make an a pen by mark santiago?

What is a a pen by mark santiago? How do you make a a pen by mark santiago? This script and codes were developed by Mark Santiago on 02 November 2022, Wednesday.

A Pen by Mark Santiago Previews
IQ Test

A Pen by Mark Santiago - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Mark Santiago</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container"> <canvas id="bgCanvas"></canvas> <canvas id="canvas"></canvas> <canvas id="fireworks"></canvas> <h1>I'm a happy canvas testing space <span class="btn1"> Stars</span> || <span class="btn2"> Snow</span> || <span class="btn3"> hellfire</span> </h1>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Mark Santiago - Script Codes CSS Codes

body, html
{ padding:0; margin:0; width:100%; height:100%; background:black;
}
h1{ color:white; position: absolute; top:0;
}
span{ color:red;
}
.particle
{ background:white; position:absolute; border-radius:20px;
}
#canvas
{ display:none; z-index:0;
}
#container
{ position:relative;
}

A Pen by Mark Santiago - Script Codes JS Codes

$('h1').on('click', '.btn1', function (){ alert('hit Star button'); $('canvas').css('display','none'); $('#bgCanvas').css('display', 'block'); shootingStars();
});
$('h1').on('click', '.btn2', function (){ alert('hit Snow button'); $('canvas').css('display','none'); $('#canvas').css('display', 'block'); makeItSnow();
});
$('h1').on('click', '.btn3', function (){ alert('hit Fireworks button'); $('canvas').css('display','none'); $('#fireworks').css('display', 'block'); fireWorks();
});
(function() { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; window.requestAnimationFrame = requestAnimationFrame;	})();	// Terrain stuff. function shootingStars(){	var	background = document.getElementById("bgCanvas"),	bgCtx = background.getContext("2d"),	width = window.innerWidth,	height = document.body.offsetHeight; (height < 400)?height = 400:height;	background.width = width; background.height = height;	// Some random points	var points = [],	displacement = 140,	power = Math.pow(2,Math.ceil(Math.log(width)/(Math.log(2))));	// set the start height and end height for the terrain	points[0] = (height - (Math.random()*height/2))-displacement;	points[power] = (height - (Math.random()*height/2))-displacement;	// create the rest of the points	for(var i = 1; i<power; i*=2){	for(var j = (power/i)/2; j <power; j+=power/i){	points[j] = ((points[j - (power/i)/2] + points[j + (power/i)/2]) / 2) + Math.floor(Math.random()*-displacement+displacement );	}	displacement *= 0.6;	}	// Second canvas used for the stars	bgCtx.fillStyle = '#05004c';	bgCtx.fillRect(0,0,width,height);	// stars	function Star(options){	this.size = Math.random()*2;	this.speed = Math.random()*.1;	this.x = options.x;	this.y = options.y;	}	Star.prototype.reset = function(){	this.size = Math.random()*2;	this.speed = Math.random()*.1;	this.x = width;	this.y = Math.random()*height;	}	Star.prototype.update = function(){	this.x-=this.speed;	if(this.x<0){ this.reset();	}else{ bgCtx.fillRect(this.x,this.y,this.size,this.size);	}	}	function ShootingStar(){	this.reset();	}	ShootingStar.prototype.reset = function(){	this.x = Math.random()*width;	this.y = 0;	this.len = (Math.random()*80)+10;	this.speed = (Math.random()*10)+6;	this.size = (Math.random()*1)+0.1; // this is used so the shooting stars arent constant	this.waitTime = new Date().getTime() + (Math.random()*3000)+500;	this.active = false;	}	ShootingStar.prototype.update = function(){	if(this.active){	this.x-=this.speed;	this.y+=this.speed;	if(this.x<0 || this.y >= height){ this.reset();	}else{	bgCtx.lineWidth = this.size;	bgCtx.beginPath();	bgCtx.moveTo(this.x,this.y);	bgCtx.lineTo(this.x+this.len, this.y-this.len);	bgCtx.stroke();	}	}else{	if(this.waitTime < new Date().getTime()){	this.active = true;	}	}	}	var entities = [];	// init the stars	for(var i=0; i < height; i++){	entities.push(new Star({x:Math.random()*width, y:Math.random()*height}));	}	// Add 2 shooting stars that just cycle.	entities.push(new ShootingStar());	entities.push(new ShootingStar());	//animate background	function animate(){	bgCtx.fillStyle = '#05004c';	bgCtx.fillRect(0,0,width,height);	bgCtx.fillStyle = '#ffffff';	bgCtx.strokeStyle = '#ffffff';	var entLen = entities.length;	while(entLen--){	entities[entLen].update();	}	requestAnimationFrame(animate);	}	animate();
};
function makeItSnow(){ //a point in 3d space function Particle (opts){ $.extend(this, { x:0, y:0, z:0 }, opts ); } //get particle coordinates in 3d space from screen coordinates Particle.prototype.fromscreen = function(p, focalpoint){ if(p.z !== this.z || !this.scalar){ this.scalar = -focalpoint.z / (-focalpoint.z + p.z); } this.x = -Math.round((-focalpoint.x + p.x) * this.scalar); this.y = -Math.round((-focalpoint.y + p.y) * this.scalar); this.z = p.z; this.s = this.scalar; }; //get screen coordinates from 3d space coordinates Particle.prototype.toscreen = function(focalpoint){ if(!this.scalar){ this.scalar = -focalpoint.z / (-focalpoint.z + this.z); } return { x: Math.round(focalpoint.x - (this.x/this.scalar)), y: Math.round(focalpoint.y - (this.y/this.scalar)), z: this.z, s: this.scalar }; }; function Screen ($el, opts){ var s = this; s.$el = $el; s.canvas = s.$el.is('canvas'); s.opts = $.extend(s, { minopacity: 0.4, color: '#fff', focalpoint: { x:s.$el[0].width/2, y:s.$el[0].height/2, z:-100 } },opts); this.init_context(); } Screen.prototype.init_context = function(){ if(this.canvas){ this.context = $(this.$el)[0].getContext("2d"); this.context.fillStyle = this.opts.color; } }; Screen.prototype.clear = function(){ if(this.canvas){ this.context.clearRect ( 0 , 0 , this.$el[0].width, this.$el[0].height ); } }; Screen.prototype.add = function(p){ var c = p.toscreen(this.opts.focalpoint); var boundaryhit = false; if(c.x < 0){ boundaryhit = true; c.x = this.$el[0].width - 4; } else if (c.x > this.$el[0].width){ boundaryhit = true; c.x = 4; } if(c.y < 0){ boundaryhit = true; c.y = this.$el[0].height - 4; } else if (c.y > this.$el[0].height){ boundaryhit = true; c.y = 4; } if(c.z < 0){ boundaryhit = true; c.z = this.opts.depth - 4; } else if (c.z > this.opts.depth){ boundaryhit = true; c.z = 4; } if(boundaryhit){ p.fromscreen(c, this.opts.focalpoint); c = p.toscreen(this.opts.focalpoint); } if(this.canvas){ this.context.globalAlpha = this.opts.minopacity + ((1-this.opts.minopacity) * (c.z/this.depth)); this.context.beginPath(); this.context.arc(c.x, c.y, 2 + 1 * (c.z/this.depth), 0, Math.PI * 2, false); this.context.closePath(); this.context.fill(); } else { this.$el.append(p.$el.css({ left:c.x, top:c.y, backtround: this.opts.color, opacity: this.opts.minopacity + ((1-this.opts.minopacity) * (c.z/this.depth)) })); } }; Screen.prototype.draw = function(particles){ var s = this; s.clear(); for(var i =0;i<particles.length;i++){ s.add(particles[i]); }; }; function Precipitate ($el, opts){ var s = this; s.$el = $el; s.opts = $.extend(true, { speed:40, depth:1000, count:500 }, opts ); s.particles = []; s.screen = new Screen(s.$el, s.opts); for(var i =0; i<s.opts.count;i++){ var p = new Particle({ $el: s.screen.canvas?null:$('<div class="particle"></div>') }); p.fromscreen({ x: Math.round(Math.random() * s.$el[0].width), y: Math.round(Math.random() * s.$el[0].height), //particles should be more likely to be far away z: Math.round(Math.pow(Math.random(),4) * s.screen.depth) }, s.screen.opts.focalpoint); s.particles.push(p); } setInterval(function(){ for(var i =0; i<s.opts.count;i++){ var p = s.particles[i]; p.y -= 1;p.x -= 1; p.z += 0.1; } s.screen.draw(s.particles); },s.opts.speed); } var w = $(window), canvas = $('#canvas'); canvas[0].width = w.width(); canvas[0].height = w.height(); var p = new Precipitate(canvas); w.resize(function(){ canvas[0].width = w.width(); canvas[0].height = w.height(); p.screen.init_context(); });
};
function fireWorks(){ // VARIABLEZ // play with them var c = document.querySelector('#fireworks'), ctx = c.getContext('2d'), width = c.width = window.innerWidth, height = c.height = window.innerHeight, n_stars = 100, //num of stars stars = [], //array to store generated stars twinkleFactor = .2, //how much stars 'twinkle' maxStarRadius = 2, fw1, fw2, //firework objects minStrength = 2, //lowest firework power maxStrength = 5, //highest firework power minTrails = 20, maxTrails = 100, particleRadius = 1.5, trailLength = 10, //particle trail length delay = .5, // number of LIFEs between explosions LIFE = 120, //life time of firework g = 5e-2, //strength of gravity D = 1e-3, //strength of drag (air resistance) colours = [ "255,51,51,", "255,153,51,", "255,255,102,", "255,51,153,", "51,153,255,", "102,255,102,", "74,195,204,", "255,169,0," ]; // Particle Class var Particle = function(x,y,vx,vy,ax,ay,colour) { this.x = x; this.y = y; this.vx = vx*(Math.random()*0.8+0.2); this.vy = vy*Math.random(); this.ax = ax; this.ay = ay; this.life = LIFE *Math.random(); //only here for opacity in .draw() method this.path = []; this.colour = colour; this.r = particleRadius; this.update = function() { this.life--; // add point to path but if full, remove a point first if (this.path.length >= trailLength) this.path.shift(); this.path.push([this.x,this.y]) // update speed n position n stuff this.vy += this.ay; this.vx += this.ax; this.x += this.vx; this.y += this.vy; } this.draw = function() { var opacity = ~~(this.life*100/LIFE) /100; // tail ctx.fillStyle = 'rgba('+this.colour+(opacity*0.4)+')'; if (this.life > LIFE*0.85) ctx.fillStyle = '#fff'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(this.x-this.r, this.y); var i = this.path.length -1; ctx.lineTo(this.path[0][0], this.path[0][1]); ctx.lineTo(this.x+this.r, this.y); ctx.closePath(); ctx.fill(); // main dot ctx.fillStyle = 'rgba('+this.colour+opacity+')'; if (this.life > LIFE*0.95) ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(~~this.x,~~this.y,this.r,0,Math.PI*2); ctx.fill(); ctx.closePath(); } } //Rocket class var Rocket = function(x, y) { this.x = width/2; this.y = height; this.x1 = x; this.y1 = y; var ydist = this.y-this.y1; var xdist = this.x-this.x1; this.angle = Math.atan(ydist/xdist); this.x > this.x1 ? this.angle += Math.PI : 0; var v0 = 10; this.vx = v0*Math.cos(this.angle); this.vy = v0*Math.sin(this.angle); this.length = 10; this.has_arrived = function() { return x = this.y<=this.y1?!0:!1; } this.update = function() { this.x += this.vx; this.y += this.vy; this.endx = this.x + this.length*Math.cos(this.angle); this.endy = this.y + this.length*Math.sin(this.angle); } this.draw = function() { ctx.strokeStyle = '#fff'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(this.x, this.y); ctx.lineTo(this.endx, this.endy); ctx.closePath(); ctx.stroke(); } } // Firework class var Firework = function() { this.x = width*(Math.random()*0.8 + 0.1); // from 0.1-0.9 widths this.y = height*(Math.random()*0.6 + 0.1); // from 0.4-0.9 heights this.strength = Math.random()*(maxStrength-minStrength) +minStrength; this.colour = colours[~~(Math.random()*colours.length)]; this.life = 0; this.rocket = new Rocket(this.x,this.y); this.particles = (function(x,y,strength,colour){ var p = []; var n = ~~(Math.random()*(maxTrails-minTrails)) +minTrails; var ay = g; for(var i = n;i--;){ var ax = D; var angle = i*Math.PI*2/n; if (angle < Math.PI) ax *= -1; var vx = strength*Math.sin(angle); var vy = strength*Math.cos(angle); p.push(new Particle(x,y,vx,vy,ax,ay,colour)); } return p; })(this.x,this.y,this.strength,this.colour); this.launch = function() { if (this.rocket.has_arrived()) return false; this.rocket.update(); this.rocket.draw(); return true; } this.update = function() { if (this.life < 0) return; //allows life to be delayed if (this.launch()) return; this.life++; for(var i = this.particles.length;i--;){ this.particles[i].update(); this.particles[i].draw(); //wasn't bothered to make an extra draw function for firework class } } }; var Star = function() { this.x = Math.random()*width; this.y = Math.random()*height; this.r = Math.random()*maxStarRadius; this.b = ~~(Math.random()*100) /100; this.draw = function() { this.b += twinkleFactor*(Math.random()-.5); ctx.fillStyle = 'rgba(255,255,255,'+this.b+')'; ctx.beginPath(); ctx.arc(~~this.x,~~this.y,this.r,0,Math.PI*2); ctx.fill(); ctx.closePath(); } } function createStars() { for(var i = n_stars;i--;) { stars.push(new Star); } } function main() { ctx.fillStyle = '#111'; ctx.fillRect(0,0,width,height); for(var i = n_stars;i--;) { stars[i].draw(); } fw1.update(); fw2.update(); if (fw1.life == LIFE*delay) fw2 = new Firework; if (fw2.life == LIFE*delay) fw1 = new Firework; window.requestAnimationFrame(main); } function init() { fw1 = new Firework; fw2 = new Firework; fw2.life = -LIFE*delay; createStars(); main(); } init();
};
A Pen by Mark Santiago - Script Codes
A Pen by Mark Santiago - Script Codes
Home Page Home
Developer Mark Santiago
Username msantiago1256
Uploaded November 02, 2022
Rating 3
Size 5,878 Kb
Views 8,096
Do you need developer help for A Pen by Mark Santiago?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mark Santiago (msantiago1256) Script Codes
Name
CSS Nav ideas to show team
Interactive Business Card
Cute Wolverine CSS
Showing the class some basics
Work in progress...
Working out an idea for a site design...
Playing with pseudo and animate
Adult Learning, quick intro to JS math...
Dribbble 2 CSS relaxer
Playing with user.me user generator
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!