This content originally appeared on DEV Community and was authored by Culterra
Creating a simple piece of Culterra art like a digital rendition of the framed art of Dolomites Italy with code can be a fun project. Here’s how to get started using HTML, CSS, and JavaScript.
Step 1: Set Up HTML Canvas
Start with a basic HTML file. Add a <canvas> element to draw on, and give it an ID.
<!DOCTYPE html>
<html>
<head>
<title>Framed Art - Dolomites</title>
</head>
<body>
<canvas id="dolomitesCanvas" width="800" height="600"></canvas>
<script src="script.js"></script>
</body>
</html>
Step 2: Draw the Sky and Mountains with JavaScript
In your script.js file, create the background for the sky and add mountain shapes:
const canvas = document.getElementById('dolomitesCanvas');
const ctx = canvas.getContext('2d');
// Sky background
ctx.fillStyle = '#87CEEB';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Mountains
ctx.fillStyle = '#8B4513';
ctx.beginPath();
ctx.moveTo(200, 600);
ctx.lineTo(400, 300);
ctx.lineTo(600, 600);
ctx.fill();
Step 3: Add Details
To give depth, use gradients for lighting and more shapes for trees or a lake. Experiment by adding different colors, shapes, and gradients. This creates a digital impression similar to a framed scene of the Dolomites, bringing natural scenes to life through code!
This content originally appeared on DEV Community and was authored by Culterra
Culterra | Sciencx (2024-10-31T11:18:07+00:00) Framed Art of Dolomites Italy by Culterra. Retrieved from https://www.scien.cx/2024/10/31/framed-art-of-dolomites-italy-by-culterra/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.