p5.js sketch

20220305_grey_dots_colored_dot

// grey dots colored dot p5.js

let canvasedge = 600;
// how much to increment each for loop by
let inc = 30;

let ra_x = 0;
let ra_y = 0;

let lastX=0;
let lastY=0;

let lastredX=0;
let lastredY=0;

function setup() {
  createCanvas(canvasedge, canvasedge);
}


function draw() {
  background(0);
  
  // dominant fill color (grey)
  let c = color(110, 110, 110);
  
  
  if ((frameCount % 1000) == 0) {
    ra_x = random(canvasedge);
    ra_x = int(ra_x / inc) * inc
    
    ra_y = random(canvasedge);
    ra_y = int(ra_y / inc) * inc
  }
  
  let red = 0;
  for(x = 0; x <= mouseX; x += inc){
  	for(y = 0; y <= mouseY; y += inc){
      
        // if coords match random red, and mouse has moved,
        // then fill red
        if ((x == ra_x && y == ra_y) && (mouseX != lastX || mouseY != lastY)) {
          fill(color(120,10,10));
          ellipse(x, y, 20, 20);
          lastredX = x;
          lastredY = y;
        // otherwise mouse hasn't moved and refill the last
        // known red dot
        } else if (x == lastredX && y == lastredY) {
          fill(color(120,10,10));
          ellipse(lastredX, lastredY, 20, 20);
        // fill grey box
        } else {
          fill(c);
    	  ellipse(x, y, 20, 20);
        }
    }
  }
  
  lastX = mouseX;
  lastY = mouseY;
}

20220313_mama_rotate

let w = 600;
let h = 600;

var r;		//radius
var angle 
var step  //distance between steps in radians

let hwasa;
function preload() {
  hwasa = loadImage("https://media2.bollywoodhungama.in/wp-content/uploads/2021/09/MAMAMOO-Hwasa-to-reportedly-make-her-solo-comeback-in-2021-2.jpg");
}

function setup() {
  createCanvas(w, h);
  
  //initialize variables
  r     = 165;
  angle = 0;
  offset = 0;
  step  = TWO_PI/360; //in radians equivalent of 360/6 in degrees
  
  frameRate(25);
}

function draw() {
  clear();
  noFill();
  
  // big circle
  circle(w/2, h/2, .95 * w);
  
  //move 0,0 to the center of the screen
  translate(width/2, height/2);
  
  // draw smaller circles
  for (let i = 0; i < 4; i++) {    
    //convert polar coordinates to cartesian coordinates
    var x = r * sin(angle + (TWO_PI/4)*i);
    var y = r * cos(angle + (TWO_PI/4)*i);
    imageMode(CENTER);
    image(hwasa, x, y, w/2.5, h/3);

    //draw ellipse at every x,y point
    ellipse(x, y, w/2.75);
  }
  
  // increase angle by step size to make
  // rotation movement
  angle = angle + step;
  
  fill(0);
  textSize(abs(sin(frameCount/50)*32) + 10);
  textAlign(CENTER, CENTER);
  text('❤️❤️❤️❤️', 0, 0);
  
}