Magic circle1
How do I make an magic circle1?
What is a magic circle1? How do you make a magic circle1? This script and codes were developed by Takashi on 20 October 2022, Thursday.
Magic circle1 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>magic circle1</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Magic circle1 - Script Codes CSS Codes
html,body{ margin: 0; overflow: hidden; }
Magic circle1 - Script Codes JS Codes
"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var windowW = window.innerWidth;
var windowH = window.innerHeight;
var centerW = windowW / 2;
var centerH = windowH / 2;
var circle = undefined;
var circles = [];
var shortSide = undefined;
function setup() { noLoop(); shortSide = min(windowW, windowH); createCanvas(windowW, windowH); background(255); for (var i = 0; i < 3; i++) { circle = new MagicCircle(floor(random(50, 100)), centerW, centerH, random(shortSide / 2 * 0.75, shortSide / 2 * 0.85), color(0, 0, 0, 255)); circles.push(circle); }
}
function draw() { background(255); noFill(); circles.forEach(function (circle) { circle.display(); });
}
var Particle = function () { function Particle(x, y, w, h, r) { _classCallCheck(this, Particle); this.pos = createVector(x, y); this.w = w; this.h = h; this.r = r; } Particle.prototype.display = function display() { noFill(); noStroke(); fill(0); ellipse(this.pos.x, this.pos.y, this.r, this.r); }; return Particle;
}();
var MagicCircle = function () { function MagicCircle(len, x, y, r, c) { _classCallCheck(this, MagicCircle); this.pArr = []; this.pos = createVector(x, y); this.tempPos = createVector(x, y); this.r = r; this.len = len; this.tx = random(500); this.ty = random(500); this.tPos = random(500); this.txSpeed = random() / 30; this.tySpeed = random() / 30; this.rotation = 0; this.rotateSpeed1 = random(0.1, 1); this.rotateSpeed2 = random(0.1, 1); this.color = c; this.fPoints = random(0, 6); this.fPos = random(0, 40); for (var i = 0; i < len; i++) { var p = new Particle(x, y, 2, 10, 6); this.pArr.push(p); } this.update(); } MagicCircle.prototype.update = function update() { this.tx += this.txSpeed; this.ty += this.tySpeed; this.rotation = this.rotation % 360; this.rotation += this.rotateSpeed1; // points position in circle for (var i = 0; i < this.len; i++) { var rad = radians(360 / this.len * i); var x = cos(rad) * (this.r + noise(this.tx + i) * this.fPoints); var y = sin(rad) * (this.r + noise(this.ty + i) * this.fPoints); this.pArr[i].pos.x = x; this.pArr[i].pos.y = y; } // circle position this.tPos += this.rotateSpeed2; this.pos.x = cos(radians(this.tPos)) * this.fPos * noise(this.tx / 10) + this.tempPos.x; this.pos.y = sin(radians(this.tPos)) * this.fPos * noise(this.ty / 10) + this.tempPos.y; }; MagicCircle.prototype.display = function display() { push(); translate(this.pos.x, this.pos.y); rotate(radians(this.rotation)); stroke(this.color); strokeWeight(2); noFill(); beginShape(); curveVertex(this.pArr[this.len - 1].pos.x, this.pArr[this.len - 1].pos.y); for (var i = 0; i < this.len; i++) { curveVertex(this.pArr[i].pos.x, this.pArr[i].pos.y); } curveVertex(this.pArr[0].pos.x, this.pArr[0].pos.y); curveVertex(this.pArr[1].pos.x, this.pArr[1].pos.y); endShape(); // for (let i = 0; i< this.len; i++) { // this.pArr[i].display(); // } pop(); }; return MagicCircle;
}();
Developer | Takashi |
Username | tksiiii |
Uploaded | October 20, 2022 |
Rating | 3 |
Size | 3,558 Kb |
Views | 6,072 |
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 |
Magic circle2 | 3,551 Kb |
Noise curve 2D | 3,551 Kb |
Magic circle3 | 3,584 Kb |
Magic circle6 | 3,665 Kb |
Mosaic Pixel Effect | 358,869 Kb |
Magic circle5 | 3,614 Kb |
Sierpinski | 3,208 Kb |
Glittering particle | 2,058 Kb |
Polar Rose Generator | 5,055 Kb |
Floating circle particle | 2,698 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 |
Rrremark.com Overlay Highlighter | Derickruiz | 4,438 Kb |
Google Fonts Sass Mixin | HugoGiraudel | 4,237 Kb |
Basic HTML5 Structure | YuvarajTana | 1,289 Kb |
Test | Dviate | 2,668 Kb |
Static Image to Video Block | Grayghostvisuals | 4,864 Kb |
Parallax with only CSS | Thulioph | 2,297 Kb |
Animated Donut Chart | Jplhomer | 3,808 Kb |
Personal Logo Animation | Lloydwheeler | 3,795 Kb |
CSS Patterns | Alyda | 3,953 Kb |
Blog Concept 2 | JGallardo | 2,994 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!