From 44db9a0973ecc93b633bd8443d856b7f65fa5a23 Mon Sep 17 00:00:00 2001 From: dillontouchard Date: Tue, 28 Nov 2023 10:14:50 -0800 Subject: [PATCH] Two Circles Moving --- Color Wheel/main.js | 68 +++++++++++++++++++++++++++++---------------- 1 file changed, 44 insertions(+), 24 deletions(-) diff --git a/Color Wheel/main.js b/Color Wheel/main.js index b7521ac..68b6670 100644 --- a/Color Wheel/main.js +++ b/Color Wheel/main.js @@ -1,31 +1,51 @@ +let rad = 60; // Width of the shape +let xpos, ypos; // Starting position of shape + +let xspeed = 2.8; // Speed of the shape +let yspeed = 2.2; // Speed of the shape + +let xdirection = 1; // Left or Right +let ydirection = 1; // Top to Bottom + function setup() { - createCanvas(1000, 1000) ; - colorMode(HSB); - angleMode(DEGREES); + createCanvas(1000, 600); + noStroke(); + frameRate(30); + ellipseMode(RADIUS); + // Set the starting position of the shape + xpos = width / 2; + ypos = height / 2; } + function draw() { - background (220) - noStroke(); - - //loop steps through 36 times drawing - //a circle with a separate hue each time - - for (let i = 0;i<36;i++){ - - //determines position of circles - x = 200 + 100*cos(i*10); - y = 200 + 100*sin(i*10); - - //i * 10 allows to cover the entire hue range - //the first circle has a hue of 0*10 = 0 - // last circle has has a hue of 35*10 = 350 - // hue of 0 and 360 are identical - - fill(i*10,100,100); - circle(x,y,50); - } + colorMode(HSB); + background(0, 20, 100); + + // Update the position of the shape + xpos = xpos + xspeed * xdirection; + ypos = ypos + yspeed * ydirection; + + // Test to see if the shape exceeds the boundaries of the screen + // If it does, reverse its direction by multiplying by -1 + if (xpos > width - rad || xpos < rad) { + xdirection *= -1; + } + if (ypos > height - rad || ypos < rad) { + ydirection *= -1; + } + + // Draw the shape + for (i = 0; i < 2; i++) { fill(255, 204, 100); - square(600, 100, 60); + ellipse(xpos, ypos, rad, rad); + if (ellipse(xpos,ypos,rad,rad) != undefined) { + ellipse(xpos+100,ypos+100,rad,rad) + } + } +} + +function getRandomNumber(min, max) { + return Math.floor(Math.random() * (max - min + 1)) + min; }