Move the mouse around to move the really big circle. It is quite literally a big circle made out of little circles. If it's too laggy, try using this: www.https://forkphorus.github.io/#374974272
This project was originally made using p5.js, but I just remade it in Scratch. This idea came from the official p5.js website, so yeah, thanks to them. If you're reading this, here is the p5.js code for this project: //Project Name: Atom p5.js /*If your IDE supports linting see the .jshintrc document in the project root folder for linting options*/ // Note: Ctrl+Alt+L Starts the Live Server and Ctrl+Alt+Q quits the // live server // Another note: Ctrl+Alt+P opens the p5.js toolbar let maxDist; let sizeSlider; function setup() { // write setup code here createCanvas(windowWidth, windowHeight); maxDist = dist(0, 0, width, height); sizeSlider = createSlider(22, 200, 200); sizeSlider.position(15, 15); frameRate(60); } function draw() { // write drawing code here background(255); // console.log(size); noStroke(); for (let i = 0; i < width + 50; i += 20) { for (let j = 0; j < height + 50; j += 20) { // calculates the distance between the mouse and each dot let size = dist(mouseX, mouseY, i, j); /* Explanation: Let's say the distance between one dot and your mouse is 595, which is almost half the screen and the maximum distance is 1280. If you divide your distance and the maximum distance you can have, you get a very low number, but if you multiply this by a high number like 66, you get a big number, meaning that the hole is smaller because there are more dots with big sizes/ Now, let's change the distance to 55, which means that the mouse is very close to the dot. If you divide 55 by the maximum distance, you get a very, very low size. Even if you multiply it by 66, it will be a very low size, meaning that the circle is bigger. Why? It's because most of the dots on the screen are small, mmeaning that it will show more of the background. To summarize, this algorithm changes the size depending on how far your mouse is from the dots. The bigger the number you multiply with, the smaller the big circle is because the sizes for most of the dots are too big, so the circle is smaller. */ // Size Debug size = (size / maxDist) * sizeSlider.value(); size = (size / maxDist) * sizeSlider.value(); // size = (maxDist * size) / sizeSlider.value(); // Color of ellipses fill(0); // draws ellipses ellipse(i, j, size, size); // stroke(255,0,0); // line(mouseX, mouseY, i, j); // console.log(size); // console.log(maxDist); // console.log(size / maxDist); } } }
