xxxxxxxxxx91
// SECTION 1function setup() { // This is your setup function. // Setup creates the context of our script, so we'll do structural stuff here createCanvas(500, 500) //change the size of the canvas background(0) // bg color rectMode(CENTER) //where we draw the rectangles from fill(0, 0, 0, 0) // color of rectangle area textAlign(CENTER, CENTER) //where the text sits on the screen}// SECTION 2function draw() { // This is your draw function. // This function holds any vars/functions directly related to what's being drawn //It runs on a continuous loop with the default refresh rate of your screen unless specified otherwise with frameRate() //Below, we'll use the translate function to move the origin to the center of the screen, as is customary on the Cartesian coordinate plane. In p5.js, the origin is the top-left out-of-box, but that's confusing so we'll move it! translate(width/2, height/2) //Now, we'll make another adjustment so that the x/y scaling is the same as what we're used to as well scale(1, -1) //map our mouse movement to a point on a circle const rotation = map(mouseY, 0, height, 0, PI) //save drawing settings push() //apply mapping to shapes rotate(rotation) //make it so the size of the squares is controlled by our mouse const radius = abs(mouseX) //below is all the shapes and text // smallest rect strokeWeight(1) stroke(178, 255, 214) rect(0, 0, radius*.75, radius*.75) //fifth smallest rect strokeWeight(1) stroke(146, 151, 196) rect(0, 0, radius*1, radius*1) //fourth smallest stroke(249, 77, 135) rect(0, 0, radius*2, radius*2) //third smallest stroke(147, 104, 183) rect(0, 0, radius*2.5, radius*2.5) //second smallest stroke(170, 62, 152) rect(0, 0, radius*3, radius*3) //largest stroke(251, 164, 132) rect(0, 0, radius*3.5, radius*3.5) pop() // quote scale(1, -1) //scaling again textSize(50) strokeWeight(2.5) stroke(255) text('AD ASTRA', 0, 0)}// click the canvas for background resetfunction mouseClicked() { background(0)}