Merry Christmas.

Developer
Dave DeHaan
Size
3,030 Kb
Views
4,048
  1. Merry Christmas. Previews
  2. Merry Christmas. HTML Codes
  3. Merry Christmas. CSS Codes
  4. Merry Christmas. JS Codes

How do I make an merry christmas.?

Thinking about adding random sparkling Christmas lights next.. What is a merry christmas.? How do you make a merry christmas.? This script and codes were developed by Dave DeHaan on 04 January 2023, Wednesday.

Merry Christmas. Previews
IQ Test

Merry Christmas. - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Merry Christmas.</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <center> <canvas id="canvas" height="600" width="400"> </canvas>
<center> <script>
function drawTree() {
// Decorate the tree!
var ornaments = [ { x: 210, y: 280, color: '255,255,0' }, { x: 200, y: 350, color: '255,255,0' }, { x: 150, y: 370, color: '255,255,0' }, { x: 240, y: 380, color: '200,0,0' }, { x: 217, y: 194, color: '200,0,0' }, { x: 160, y: 270, color: '200,0,0' }, { x: 210, y: 410, color: '0,0,255' }, { x: 186, y: 214, color: '0,0,255' }, { x: 230, y: 310, color: '0,0,255' }, { x: 170, y: 330, color: '0,0,255' },
];
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// Create the sky
var skyGradient=ctx.createLinearGradient(0,100,0,600);
skyGradient.addColorStop(0,'#00BFFF');
skyGradient.addColorStop(1,'#C1F0F6');
ctx.fillStyle = skyGradient;
ctx.fillRect(0,0,canvas.width,canvas.height);
// Create the grass
var grassGradient=ctx.createLinearGradient(0,500,0,600);
grassGradient.addColorStop(0,'#859C27');
grassGradient.addColorStop(1,'#54632C ');
ctx.fillStyle = grassGradient;
ctx.fillRect(0,500,canvas.width,100);
// Create the trunk
var baseGradient=ctx.createLinearGradient(175,0,225,0);
baseGradient.addColorStop(0,'#7a5230');
baseGradient.addColorStop(.35,"#504023");
baseGradient.addColorStop(.65,"#504023");
baseGradient.addColorStop(1,'#7a5230');
ctx.fillStyle = baseGradient;
ctx.fillRect(175,300,50,200);
// Create the branches
var treeGradient=ctx.createLinearGradient(175,0,225,0);
treeGradient.addColorStop(0,'#526F35');
treeGradient.addColorStop(.5,"#586949 ");
treeGradient.addColorStop(1,'#526F35');
ctx.fillStyle = treeGradient; treeLevels = [];
for (i=0; i<12; i++) { treeLevels.push({'level': i, 'width': 300 - (i*25)});
}
for (key in treeLevels) { level = treeLevels[key]; startPoint = 455 - level.level * 25; ctx.beginPath(); ctx.moveTo((canvas.width/2 - level.width/2),startPoint); ctx.quadraticCurveTo(200-level.width/5,startPoint-50,200,startPoint-100); ctx.quadraticCurveTo(200+level.width/5,startPoint-50,(canvas.width/2 + level.width/2),startPoint); ctx.quadraticCurveTo(200,startPoint-50,(canvas.width/2 - level.width/2),startPoint); ctx.fill();
}
var grd = [];
// Add the ornaments
for (key in ornaments) { ornament = ornaments[key]; grd[key] = ctx.createRadialGradient(ornament.x,ornament.y,1,ornament.x,ornament.y,5); grd[key].addColorStop(0,"rgba("+ornament.color+", 1)"); grd[key].addColorStop(.75,"rgba("+ornament.color+", .1)"); ctx.beginPath(); ctx.fillStyle = grd[key]; ctx.arc(ornament.x,ornament.y,5,0,2*Math.PI); ctx.fill();
}
}
</script>
<script type="text/processing" data-processing-target="canvas">
ArrayList<Particle> snow;
int snowLength = 300;
class Particle { float x, y, speed, size; Particle() { x = random(width + 1); y = random(height + 1); speed = random(1.0, 5.0); size = random(2.0, 10.0); } void update() { if (y + speed >= height) { x = random(width + 1); y = 0; } else y += speed; fill(255); ellipse(x, y, size, size); }
}
void setup() { size(400, 600); noStroke(); smooth(); snow = new ArrayList<Particle>(); createParticles();
}
void draw() { drawTree(); for (Particle s : snow) s.update(); drawLandscape();
}
void createParticles() { for (int i = 0; i < snowLength; i++) snow.add(new Particle());
}
void drawLandscape() { rect(0, height-10, width, 10);
}
</script> <script src='https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Merry Christmas. - Script Codes CSS Codes

*, *:before, *:after { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body { background: #CCC; margin: 0px; padding: 0px;
}
canvas { width: 100%; max-width: 400px; padding: 2em; padding: 0; display: block; margin: 0 auto; outline: none;
}

Merry Christmas. - Script Codes JS Codes

(function() {
}).call(this);
Merry Christmas. - Script Codes
Merry Christmas. - Script Codes
Home Page Home
Developer Dave DeHaan
Username davedehaan
Uploaded January 04, 2023
Rating 3
Size 3,030 Kb
Views 4,048
Do you need developer help for Merry Christmas.?

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!

Dave DeHaan (davedehaan) Script Codes
Name
Multi-color Text using globalCompositeOperation
Global Composite Operation Test
Javascript stopwatch
Dynamic Hero Image
Christmas Countdown
Auto-generating complementary colors
Winter
Asteroids
Fun with Lines
More Fun with Lines
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!