xxxxxxxxxx354
/* Assignment: 3 [Introduction to Interactive Media] Name: Samyam Lamichhane Date: Sept 18, 2022*/// Canvas Sizelet canvas_h = 1000;let canvas_w = 1000;// Outer Shell Class related Variableslet outer_shell_list = []; // List to store outer rectangleslet NUMBER_OF_OUTER_SHELL = 44;let ANGLE = 5; // Angle of rotation of rectangle around a fixed point// List to store inner concentric circleslet circle_list = [];// Particle Class related variableslet particle_list = []; // List to store rotating red particleslet particle_dispersed_list = []; // List to store dispersed particles on canvaslet NUMBER_OF_PARTICLES = 20; let PARTICLE_SPEED = 10;// ------------------------------------------- Setup Function ---------------------------------------------function setup() { createCanvas(canvas_w, canvas_h); frameRate(5); // OUTER SHELL (rotating rectangles) creation and storage in the list for (let i = 0; i < NUMBER_OF_OUTER_SHELL; i++) { // Use of noise to create a random x position of each rectangle -- Map is used to project value from given range to a new range let random_x = map( noise(canvas_w / 2 - 50, canvas_w / 2 + 50), 0, 100, 190, 200 ); // Use of noise to create a random y position of each rectangle -- Map is used to project value from given range to a new range let random_y = map( noise(canvas_h / 2 - 50, canvas_h / 2 + 50), 0, 100, 300, 400 ); // New Object Instantiation and pushing them to the list (using appropriate parameters) // Parameters are: (x_position, y_position, length, width) outer_shell_list.push(new OuterShell(random_x, random_y, 100, 5)); } // CIRCLES creation and storage in the list let possible_radii_list = [600, random(250, 390), random(400, 450), 200]; // Possible radii of circles // Looping through the list to create new circles and pushing them to the list for (let i = 0; i < possible_radii_list.length; i++) circle_list.push( new Circle(canvas_w / 2, canvas_h / 2, possible_radii_list[i]) ); // [Red] PARTICLES creation and storage in the list for (let i = 0; i < NUMBER_OF_PARTICLES; i++) { // Random x and y coordinates of each particle let x_pos = random(250, 450); let y_pos = random(canvas_h - 450, canvas_h + 450); // Particles creation and pushing them into their list particle_list.push(new Particle(350, 50, PARTICLE_SPEED)); }}// ------------------------------------- Draw Function ---------------------------------------------function draw() { background(0); // [White] PARTICLES creation and storage in the list for (let i = 0; i < NUMBER_OF_PARTICLES; i++) { // Random x and y coordinates of each particle let x_pos_random = random(5, canvas_w - 5); let y_pos_random = random(5, canvas_h - 5); // Particles creation and pushing them into a different list particle_dispersed_list.push( new Particle(x_pos_random, y_pos_random, PARTICLE_SPEED) ); } // Displayling concentric circles [Looping through the list] for (let circle of circle_list) { circle.display(); } // Displaying RED Particles [Looping through the list] for (let particle of particle_list) { particle.display(); } // Displaying WHITE Particles [Looping through the list] for (let particle of particle_dispersed_list) { particle.disperse(); } // Displaying Outer Shells [Looping through the list] for (let eachShell of outer_shell_list) { eachShell.display(); } // Creating Pattern object and Displaying the pattern using display() method let pattern = new Pattern(canvas_w / 2, canvas_h / 2); pattern.display(); // If mouse is pressed, colorful beams are drawn using the given function. if (mouseIsPressed) draw_beams();} // ------------------------------------- OuterShell Class ---------------------------------------------class OuterShell { // Parameters are x-coordinate, y-coordinate, length and width of a rectangle constructor(x, y, length_, width_) { this.x = x; this.y = y; this.length_ = length_; this.width_ = width_; this.roundness = 50; // Parameter to control the roundness of edges of rectangles } // Method 1 display() { // Random RGB values let random_r_val = random(100, 150); let random_g_val = random(100, 150); let random_b_val = random(100, 150); // Translation and Rotation push(); translate(canvas_w / 2, canvas_h / 2); // Move the origin to the middle of canvas rotate(ANGLE); // Angle of rotation fill(random_r_val, random_g_val, random_b_val); // Fill the shape noStroke(); rect(this.x, this.y, this.length_, this.width_, this.roundness); // Draw rectangles pop(); // Reset the canvas using push() and pop() ANGLE += 3; // Increase the value of angle after each rotation }}// ------------------------------------------ Circle Class ---------------------------------------------class Circle { // Parameters are x-coordinate, y-coordinate and the radius of a circle constructor(x, y, radius) { this.x = x; this.y = y; this.radius = radius; } // Method 1 display() { stroke("white"); // For the inner circle, keep its fill-color the same and increase its strokeWeight if (this.radius == 200) { fill(60, 60, 60); strokeWeight(5); } // For the middle circles, use black as fill-color and strokeWeight of 10 else if (this.radius <= 450 && this.radius >= 400) { stroke("black"); strokeWeight(10); } // For other circles, use randomized RGB values and strokeWeight of 0.5 else { strokeWeight(0.5); fill(random(100, 150), random(100, 150), random(100, 150)); } // Draw the circle using class attributes circle(this.x, this.y, this.radius); }}// ------------------------------------------ Particle Class ---------------------------------------------class Particle { // Paramters are x-coordinate, y-coordinate and speed of each particle constructor(x, y, speed) { this.x = x; this.y = y; this.speed = speed; } // Method 1 -- Displaying red rotating particles display() { // Translation and Rotation push(); translate(canvas_w / 2, canvas_h / 2); // Move the origin to the middle of canvas rotate(PARTICLE_SPEED); // Angle of rotation stroke("red"); ellipse(this.x, this.y, random(0, 0.5), random(0, 0.5)); // // Draw elllipses pop(); // Reset the canvas using push() and pop() PARTICLE_SPEED += 5; // Increase the rotating speed after each rotation } // Method 2 - Displaying dispersed particles (white) disperse() { // Use white stroke and draw ellipse (using random radii) stroke("white"); ellipse(this.x, this.y, random(0, 0.5), random(0, 0.5)); // Update x and y values simultaneously this.x += this.speed; this.y += this.speed; }}// -------------------------------------------- Pattern Class ---------------------------------------------class Pattern { // Parameters are x and y coordinates constructor(x, y) { this.x = x; this.y = y; this.count = 60; // Attribute which determine nunmber of lines drawn } // METHOD 1 display() { let radius = 80; // Radius whichin which lines creation is confined // Use of push() and pop() to reset the canvas after transformation push(); translate(canvas_w / 2, canvas_h / 2); // Move the origin to the middle of canvas // Loop execution determined by this.count attribute for (let i = 0; i < this.count; i++) { let ANGLE1 = random(0, 2 * PI); // Angle value that determines x and y coordinate of Point 1 let point_1_x = sin(ANGLE1) * radius; // x-cordinate of Point 1 let point_1_y = cos(ANGLE1) * radius; // y-cordinate of Point 1 let ANGLE2 = random(0, 2 * PI); // Angle value that determines x and y coordinate of Point 1 let point_2_x = sin(ANGLE2) * radius; // x-cordinate of Point 2 let point_2_y = cos(ANGLE2) * radius; // y-cordinate of Point 2 strokeWeight(0.4); stroke(234, 148, 14); // Drawing line from point 1 to point 2 line(point_1_x, point_1_y, point_2_x, point_2_y); } pop(); }}// ------------------------------------- Draw-Beam Function ---------------------------------------------function draw_beams() { let number_of_beams = int(random(3, 8)); // Number of beams determined using random() // Possible color let color_1 = color(173, 15, 15); // Red RGB value let color_2 = color(5, 161, 200); // Light Blue RGB value let color_3 = color(60, 182, 130); // Light Green RGB value strokeWeight(7); // For loop to create a certain number of lines for (let i = 0; i < number_of_beams; i++) { let random_color_picker = int(random(0, 3)); // Variable that determines which color to pick // If conditional to pick colors if (random_color_picker == 0) stroke(color_1); else if (random_color_picker == 1) stroke(color_2); else stroke(color_3); // Drawing lines from the center of the core to a random particle line( canvas_w / 2, canvas_h / 2, random(0, canvas_w - 50), random(0, canvas_h - 50) ); }}