Sea Creature

Developer
Gabi
Size
3,380 Kb
Views
40,480
  1. Sea Creature Previews
  2. Sea Creature HTML Codes
  3. Sea Creature CSS Codes
  4. Sea Creature JS Codes

How do I make an sea creature?

What is a sea creature? How do you make a sea creature? This script and codes were developed by Gabi on 22 August 2022, Monday.

Sea Creature Previews
IQ Test

Sea Creature - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sea Creature </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="c"></canvas> <script src='js/vlqxyo.js'></script> <script src="js/index.js"></script>
</body>
</html>

Sea Creature - Script Codes CSS Codes

body { margin: 0; padding: 0; overflow: hidden; min-height: 100vw; background: -webkit-radial-gradient( 50vW 0vh circle 50vw, #2aa4d5, #030633); background: -moz-radial-gradient(50vW 0vh, circle 50vw, #2aa4d5, #030633); background: -ms-radial-gradient(50vW 0vh, circle 50vw, #2aa4d5, #030633); background: -o-radial-gradient(50vW 0vh, circle 50vw, #2aa4d5, #030633); background: radial-gradient( 50vw circle at 50vW 0vh, #2aa4d5, #030633); background-size: 100%; background-repeat: no-repeat;
}

Sea Creature - Script Codes JS Codes

var c = document.getElementById("c");
var ctx = c.getContext("2d");
var R = 200, R1 = 150, A = 0, a = 0, phi = 0;
var cw = c.width = window.innerWidth, cx = cw / 2;
var ch = c.height = window.innerHeight, cy = ch / 2;
var rad = (Math.PI / 180);
var speed = .02;
var stopped = true;
var kappa = 0.5522847498;
var K = 0, Kflag = true, j = 0;
var frames = 0;
ctx.shadowBlur = 1;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = +2;
ctx.shadowColor = "hsla(210, 90%,50%,.5)";
var fill = "black";
var white;
function newWave(K, phi) { R = 20, R1 = 15, frec = 0, cy = ch / 2; cx = cw / 2; for (var i = 0; i < 71; i++) { // 71 segments R += 5 * Math.sin(i * 5 * rad); // certain segments become wider frec += 5; //<------------------------- cy -= K * Math.sin((frec * rad) + phi); cx -= 3 * Math.sin((frames / 5) * rad); white = Grd(cx, cy, R) fill = (i % 2 == 0) ? white : "black"; ellipse(cx, cy, R, R1, a, fill); }
}
function Draw() { frames++; ctx.clearRect(0, 0, cw, ch); phi += speed; newWave(4, phi) requestId = window.requestAnimationFrame(Draw);
}
function Grd(x, y, r) { grd = ctx.createRadialGradient(x, y - .5 * r, 0, x, y - .5 * r, r); grd.addColorStop(0, 'hsla(35,90%,60%,1)'); grd.addColorStop(1, 'hsla(35,90%,10%,.9)'); return grd;
}
function start() { requestId = window.requestAnimationFrame(Draw); stopped = false;
}
function stopAnim() { if (requestId) { window.cancelAnimationFrame(requestId); } stopped = true;
}
window.addEventListener("load", start(), false);
c.addEventListener("click", function() { (stopped == true) ? start(): stopAnim();
}, false);
function ellipse(cx, cy, w, h, a, fill) { var ox = w * kappa; // desplasamiento horizontal (offset) var oy = h * kappa; // desplazamiento vertical (offset) var rw = Math.sqrt(oy * oy + w * w); var rh = Math.sqrt(ox * ox + h * h); var aw = Math.atan(oy / w); var ah = Math.atan(ox / h); var x0 = cx + w * Math.cos(a); var y0 = cy + w * Math.sin(a); var x1 = cx + h * Math.cos(Math.PI / 2 + a); var y1 = cy + h * Math.sin(Math.PI / 2 + a); var x2 = cx + w * Math.cos(Math.PI + a); var y2 = cy + w * Math.sin(Math.PI + a); var x3 = cx + h * Math.cos((3 * Math.PI / 2) + a); var y3 = cy + h * Math.sin((3 * Math.PI / 2) + a); var px1 = cx + rw * Math.cos(aw + a); var py1 = cy + rw * Math.sin(aw + a); var px2 = cx + rh * Math.cos((Math.PI / 2 - ah) + a); var py2 = cy + rh * Math.sin((Math.PI / 2 - ah) + a); var px3 = cx + rh * Math.cos((Math.PI / 2 + ah) + a); var py3 = cy + rh * Math.sin((Math.PI / 2 + ah) + a); var px4 = cx + rw * Math.cos((Math.PI - aw) + a); var py4 = cy + rw * Math.sin((Math.PI - aw) + a); var px5 = cx + rw * Math.cos((Math.PI + aw) + a); var py5 = cy + rw * Math.sin((Math.PI + aw) + a); var px6 = cx + rh * Math.cos((3 * Math.PI / 2 - ah) + a); var py6 = cy + rh * Math.sin((3 * Math.PI / 2 - ah) + a); var px7 = cx + rh * Math.cos((3 * Math.PI / 2 + ah) + a); var py7 = cy + rh * Math.sin((3 * Math.PI / 2 + ah) + a); var px8 = cx + rw * Math.cos((-aw) + a); var py8 = cy + rw * Math.sin((-aw) + a); ctx.save(); ctx.fillStyle = fill; ctx.beginPath(); ctx.moveTo(x0, y0) ctx.bezierCurveTo(px1, py1, px2, py2, x1, y1); ctx.bezierCurveTo(px3, py3, px4, py4, x2, y2); ctx.bezierCurveTo(px5, py5, px6, py6, x3, y3); ctx.bezierCurveTo(px7, py7, px8, py8, x0, y0); ctx.fill(); ctx.restore();
}
Sea Creature - Script Codes
Sea Creature - Script Codes
Home Page Home
Developer Gabi
Username enxaneta
Uploaded August 22, 2022
Rating 4.5
Size 3,380 Kb
Views 40,480
Do you need developer help for Sea Creature?

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!

Gabi (enxaneta) Script Codes
Name
Animated SVG Turbulence Filter
Circle-Circle Intersection
Flexbox playground
Sakura
Wave
Conical Helix
Intersecting Lines
Circle decay
Cube
Squiggly lines
Create amazing love letters 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!