Arcs
How do I make an arcs?
What is a arcs? How do you make a arcs? This script and codes were developed by Ben Matthews on 10 September 2022, Saturday.
Arcs - Script Codes HTML Codes
<!DOCTYPE html>
<html class="https://github.com/processing/p5.js/releases/download/0.5.6/p5.min.js">
<head> <meta charset="UTF-8"> <title>Arcs</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='https://github.com/processing/p5.js/releases/download/0.5.6/p5.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Arcs - Script Codes CSS Codes
* { margin:0; padding:0; }
html, body { width:100%; height:100%; }
canvas { display:block; }
Arcs - Script Codes JS Codes
window.addEventListener('resize', resize, false);
var numArcs = 50;
var pHeight, pAngle, pSpeed, pOpacity;
var pHue;
var arcs = [];
function Param(min, range){ this.min = min; this.range = range;
}
Param.prototype.next = function(){ return random()*this.range + this.min;
}
function Point(x, y){ this.x = x; this.y = y;
}
function ArcPiece(){ this.constructAngle = pAngle.next(); this.angle = random()*360; this.radius = random()*height/2; this.speed = pSpeed.next(); this.height = pHeight.next(); this.opacity = pOpacity.next(); this.hue = pHue.next(); this.points = []; fillPoints(this);
}
ArcPiece.prototype.render = function(){ this.angle = (this.angle+this.speed)%360; fill(this.hue, 100, 100, this.opacity); noStroke(); translate(width/2, height/2); rotate(this.angle); beginShape(); this.points.forEach(function(i){ vertex(i.x, i.y); }); endShape(CLOSE); resetMatrix();
}
function fillPoints(arcPiece){ for (var i = 0; i <= 20; i++){ var a = (i/20)*arcPiece.constructAngle; var x = cos(a)*arcPiece.radius; var y = sin(a)*arcPiece.radius; arcPiece.points.push(new Point(x, y)); } for (var i = 20; i >= 0; i--){ var a = (i/20)*arcPiece.constructAngle; var x = cos(a)*(arcPiece.radius + arcPiece.height); var y = sin(a)*(arcPiece.radius + arcPiece.height); arcPiece.points.push(new Point(x, y)); }
}
function setup(){ createCanvas(); colorMode(HSB, 360, 100, 100, 100); angleMode(DEGREES) resize(); pHeight = new Param(5, 30); pAngle = new Param(30, 50); pSpeed = new Param(-1.5, 3); pOpacity = new Param(30, 30); pHue = new Param(200, 40); createArcs();
}
function createArcs(){ for (var i = 0; i < numArcs; i++){ arcs.push(new ArcPiece()); }
}
function draw(){ background(0); arcs.forEach(function(i){ i.render(); });
}
function resize(){ resizeCanvas(window.innerWidth, window.innerHeight);
}
Developer | Ben Matthews |
Username | tsuhre |
Uploaded | September 10, 2022 |
Rating | 3 |
Size | 2,291 Kb |
Views | 40,480 |
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!
Name | Size |
Fractal Fun | 3,965 Kb |
Swirly Doodles | 0 Kb |
Spirograph | 2,894 Kb |
Constellations | 2,961 Kb |
Number Theory Pattern Explorer | 3,935 Kb |
Flame Animation Test 2 | 2,937 Kb |
Tree Generator V2 | 5,891 Kb |
Zelda BOTW Sheikah Language | 4,039 Kb |
Diffusion Limited Aggregation | 3,361 Kb |
Ribbons | 2,140 Kb |
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!
Name | Username | Size |
Blog | Rottingroom | 1,430 Kb |
Vue.js Starter | Andymerskin | 1,268 Kb |
Tiling Subdivision | Francext | 3,937 Kb |
Greyscale image with filter in CSS3 | NickyCDK | 1,562 Kb |
Pomodoro Clock | Osycon | 3,705 Kb |
Electric worm | Jeffibacache | 2,377 Kb |
HEXAGON | Aurumlux | 1,684 Kb |
Michelle, submit your photography to Unsplash. | Zaneriley | 3,368 Kb |
Responsive Pricing Table | Jeremycaris | 2,690 Kb |
Css3 slide | Nakome | 3,190 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!