Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>Quarks and atoms</title>
- <style>
- body {
- background-color: black;
- }
- #wrapper {
- width: 45%;
- height: 100%;
- float: left;
- }
- .atom, .quant{
- border: 5px solid darkgreen;
- width: 30px;
- height: 30px;
- position: absolute;
- text-align: center;
- color: white;
- line-height:1.9em;
- font-style: italic;
- text-indent: -5px;
- }
- .atom {
- border-radius: 20px;
- }
- </style>
- </head>
- <body>
- <button id="Button1" onclick = "addElement('atom')">Add electron</button>
- <button id="add_atom" onclick = "addElement('quant')">Add quant</button>
- <div id="wrapper">
- <div class="atom">
- ∈
- </div>
- <div class="quant">
- Q
- </div>
- </div>
- </body>
- <script>
- var TWO_PI = Math.PI * 2;
- var circleX = window.innerWidth/4;
- var circleY = window.innerHeight/2;
- var circleR = 150;
- var TriangleX = (window.innerWidth / 4) * 2;
- var TriangleY = (window.innerHeight / 2) + 150;
- var stepAngle = 0.025;
- var animationSpeed = 10;
- var atom = [];
- var quant = [];
- var wrapper = document.getElementById("wrapper");
- atom.push({
- element: document.querySelectorAll(".atom")[0],
- angle: 0
- });
- quant.push({
- element: document.querySelectorAll(".quant")[0],
- posX: TriangleX,
- posY: TriangleY,
- direction: "up",
- });
- (function runMotion(){
- setInterval("moveAtoms()", animationSpeed);
- setInterval("moveQuants()", animationSpeed);
- })();
- function moveAtoms() {
- for (var i = 0; i < atom.length; i++) {
- if (atom[i].angle < TWO_PI) {
- atom[i].angle += stepAngle;
- }
- else {
- atom[i].angle = 0;
- }
- var newX = circleX + Math.cos(atom[i].angle) * circleR;
- var newY = circleY + Math.sin(atom[i].angle) * circleR;
- setPos.posX(atom[i].element, newX);
- setPos.posY(atom[i].element, newY);
- }
- }
- function moveQuants() {
- for (var i = 0; i < quant.length; i++) {
- if (quant[i].direction === "up") {
- quant[i].posY -= 2;
- if (quant[i].posY <= TriangleY - 300) {
- quant[i].direction = "right";
- }
- }
- if (quant[i].direction === "right") {
- quant[i].posX += 2;
- console.log(quant[i].posX);
- if (quant[i].posX >= TriangleX + 200) {
- quant[i].direction = "down";
- }
- }
- else if (quant[i].direction === "down") {
- quant[i].posY += 2;
- if (quant[i].posY >= TriangleY) {
- quant[i].direction = "left";
- }
- }
- else if (quant[i].direction === "left") {
- quant[i].posX -= 2;
- if (quant[i].posX <= TriangleX) {
- quant[i].direction = "up";
- }
- }
- setPos.posX(quant[i].element, quant[i].posX);
- setPos.posY(quant[i].element, quant[i].posY);
- }
- }
- function addElement(type){
- var newElement = document.createElement("div");
- newElement.className = type;
- console.log();
- newElement.style.backgroundColor = randomCssColor();
- newElement.style.borderColor = randomCssColor();
- newElement.style.color = randomCssColor();
- newElement.innerText = type === 'atom' ? '∈' : 'Q';
- wrapper.appendChild(newElement);
- if (type === 'atom') {
- atom.push({
- element: newElement,
- angle: 0,
- });
- }
- else {
- quant.push({
- element: newElement,
- posX: TriangleX,
- posY: TriangleY,
- direction: "up",
- });
- }
- }
- function randomCssColor() {
- var red = parseInt(Math.random() * 255);
- var green = parseInt(Math.random() * 255);
- var blue = parseInt(Math.random() * 255);
- var colors = red + "," + green + "," + blue;
- return "rgb(" + colors + ")";
- }
- var setPos = (function () {
- function posX(obj, pos) {
- obj.style.left = pos + "px";
- }
- function posY(obj, pos) {
- obj.style.top = pos + "px";
- }
- return {
- posX: posX,
- posY: posY,
- }
- })();
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement