UNUSUAL SWITCH

Concept:

For this project, I decided to create a simple on-and-off switch using aluminum foil, inspired by the idea of a chair pillow switch. Imagine a seat cushion that lights up when you sit on it, that’s the effect I wanted to recreate! I set up two layers of aluminum foil each connected to a different wire with a thin separator (tissue) in between, which makes it act like a “pressure switch.” When you sit down, the pressure causes the foil layers to touch, completing the circuit and turning on an LED. Although it looks like a regular chair pillow, it’s actually just layers of aluminum foil working as a switch.

I based my code on what we learned in class, using the code examples from the PowerPoint as a reference. The code is straightforward: it checks if the foil layers are touching (circuit closed) and turns the LED on or off based on that.

The Code Im most proud of is probably the loop function even though its simple:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const int switchPin = 2; // Pin connected to the aluminum foil switch
const int ledPin = 13; // Pin connected to breadboard led
// Setup function runs once when the program starts
void setup() {
pinMode(switchPin, INPUT); // Set the switch pin as an input
pinMode(ledPin, OUTPUT); // Set the LED pin as an output
}
// Main loop function runs repeatedly
void loop() {
int switchState = digitalRead(switchPin); // Read the state of the switch (HIGH or LOW)
if (switchState ==HIGH) { // If the switch is OPEN - the foils are touching
digitalWrite(ledPin, HIGH); // Turn on the LED
} else { // If the switch is closed - the foils are not touching)
digitalWrite(ledPin, LOW); // Turn off the LED
}
}
const int switchPin = 2; // Pin connected to the aluminum foil switch const int ledPin = 13; // Pin connected to breadboard led // Setup function runs once when the program starts void setup() { pinMode(switchPin, INPUT); // Set the switch pin as an input pinMode(ledPin, OUTPUT); // Set the LED pin as an output } // Main loop function runs repeatedly void loop() { int switchState = digitalRead(switchPin); // Read the state of the switch (HIGH or LOW) if (switchState ==HIGH) { // If the switch is OPEN - the foils are touching digitalWrite(ledPin, HIGH); // Turn on the LED } else { // If the switch is closed - the foils are not touching) digitalWrite(ledPin, LOW); // Turn off the LED } }
const int switchPin = 2;     // Pin connected to the aluminum foil switch
const int ledPin = 13;       // Pin connected to breadboard led

// Setup function runs once when the program starts
void setup() {
  pinMode(switchPin, INPUT);   // Set the switch pin as an input
  pinMode(ledPin, OUTPUT);     // Set the LED pin as an output
}

// Main loop function runs repeatedly
void loop() {
  int switchState = digitalRead(switchPin);   // Read the state of the switch (HIGH or LOW)
  
  if (switchState ==HIGH) {      // If the switch is OPEN - the foils are touching
    digitalWrite(ledPin, HIGH);   // Turn on the LED
  } else {                        // If the switch is closed - the foils are not touching)
    digitalWrite(ledPin, LOW);    // Turn off the LED
  }
}

Reflection:

For improvements, I’d like to experiment with adding a parallel circuit so multiple LEDs light up at the same time or even make them blink, using what we covered in class. I really wanted to use a sensor for the switch but kept it simple this time with just aluminum foil, definitely something to try next time.

Set Up:

https://github.com/nouraalhosani/Intro-to-IM/blob/d62862d42bf6ee36d8aa94884c7f4c3ee04de1c8/1switch.ino

WEEK 8 – Reading Response

Thinking about Don Norman’s and Margaret Hamilton’s reading, I realize they both focused on designing with people’s real needs and future challenges in mind. Norman’s belief that attractive designs make things easier to use connects with how Hamilton built error-proof software for the Apollo mission, even when others didn’t see the need. It’s similar to how modern smartphones such as Apple aren’t just functional; they’re designed to be enjoyable and comfortable for people to use, which builds trust and loyalty to this certain company.

Furthermore, Hamilton’s focus on catching potential errors reminds me of safety checks in airplanes today, where every possible issue is planned ahead because lives are on the line. Her extra coding to avoid mistakes saved missions—just like self-driving cars are programmed now to avoid crashes. Both she and Norman understood that good design means planning for things that might go wrong, not just what we expect to happen.

Their stories also show why having different perspectives matters. Hamilton was one of the few women in tech at the time, breaking stereotypes, and now we know that having diverse teams helps products connect with more people. Whether we’re building an app, writing software, or designing a gadget, Norman and Hamilton’s work reminds me to think ahead and consider how our choices might affect people in ways we can’t yet imagine.

MIDTERM

CONCEPT:
For my midterm project, I decided to combine my two favorite things together, SpongeBob and my childhood game Geometry Dash (which was my first inspiration for the game).
I decided to be more creative and create my own version of geometry dash using Spongebob as my main theme. Furthermore, instead of jumping over obstacles, you have to jump over SpongeBob characters.
The main goal of the game is to score as many points as possible by avoiding colliding with an obstacle; it’s pretty simple. I also added a twist to it; there’s a feature where you can fuel up the power bar by gaining more points, which leads to a rocket mode effect where you can collect double points but instead of jumping, you’re flying. For the characters, I decided just to use png images online, which I will attach to the website at the bottom; however, to incorporate shapes and colour, I decided to use shapes and gradients to create the theme of the background, including the burgers and jellyfish. I also used a Spongebob font for the text to add more to the aesthetic. To organize my codes, because at some point it got messy, I decided to create multiple files, for functions and classes, which made it a lot easier as I knew where everything was and it was most helpful in debugging anything if there was an error.

HIGHLIGHT:
The code I’m most proud of is probably the jellyfish part of the game because it handles more than one thing like spawning, moving, and removing jellyfish, while also checking for player collisions. It also has conditional behavior since the jellyfish can only cause the game to end when the player is in rocket mode. I had to redo the code multiple times as there were a lot of errors in the beginning and I had to update multiple loops. Additionally, it depends on variables like `isRocketMode` and `gameOver` from other parts of the game, which makes it more complicated to manage since it must stay in sync with the overall game.
here is the code:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function updateJellyfishObstacles() {
// Spawn new jellyfish obstacles at intervals
if (frameCount % jellyfishInterval === 0 && jellyfishObstacles.length < maxJellyfish) {
let jellyfishY = random(70, height - 80);
let jellyfish = new Jellyfish();
jellyfish.y = jellyfishY;
jellyfishObstacles.push(jellyfish);
}
// Update jellyfish obstacles and handle rocket mode collisions
for (let i = jellyfishObstacles.length - 1; i >= 0; i--) {
jellyfishObstacles[i].move();
jellyfishObstacles[i].show();
// Remove off-screen jellyfish
if (jellyfishObstacles[i].offScreen()) {
jellyfishObstacles.splice(i, 1);
continue; // Move to the next jellyfish
}
// Only trigger game over if the player hits a jellyfish while in rocket mode
if (jellyfishObstacles[i].hits(player)) {
if (isRocketMode) {
deathSound.play();
gameOver = true;
}
}
}
}
function updateJellyfishObstacles() { // Spawn new jellyfish obstacles at intervals if (frameCount % jellyfishInterval === 0 && jellyfishObstacles.length < maxJellyfish) { let jellyfishY = random(70, height - 80); let jellyfish = new Jellyfish(); jellyfish.y = jellyfishY; jellyfishObstacles.push(jellyfish); } // Update jellyfish obstacles and handle rocket mode collisions for (let i = jellyfishObstacles.length - 1; i >= 0; i--) { jellyfishObstacles[i].move(); jellyfishObstacles[i].show(); // Remove off-screen jellyfish if (jellyfishObstacles[i].offScreen()) { jellyfishObstacles.splice(i, 1); continue; // Move to the next jellyfish } // Only trigger game over if the player hits a jellyfish while in rocket mode if (jellyfishObstacles[i].hits(player)) { if (isRocketMode) { deathSound.play(); gameOver = true; } } } }
function updateJellyfishObstacles() {
  // Spawn new jellyfish obstacles at intervals
  if (frameCount % jellyfishInterval === 0 && jellyfishObstacles.length < maxJellyfish) {
    let jellyfishY = random(70, height - 80);
    let jellyfish = new Jellyfish();
    jellyfish.y = jellyfishY;
    jellyfishObstacles.push(jellyfish);
  }
   // Update jellyfish obstacles and handle rocket mode collisions
  for (let i = jellyfishObstacles.length - 1; i >= 0; i--) {
    jellyfishObstacles[i].move();
    jellyfishObstacles[i].show();
    
    // Remove off-screen jellyfish
    if (jellyfishObstacles[i].offScreen()) {
      jellyfishObstacles.splice(i, 1);
      continue; // Move to the next jellyfish
    }
    
    // Only trigger game over if the player hits a jellyfish while in rocket mode
    if (jellyfishObstacles[i].hits(player)) {
      if (isRocketMode) {
        deathSound.play();
        gameOver = true;
      }
      
    }
  }
}

 

IMPROVEMENTS:
In the future, I would probably like to add more elements to the game as it gets repetitive. Also, if I had more time I would fix this upside-down section of the game, as I feel like it looks odd in some sort of way, since the obstacles are upside down but not the player. Moreover, I would also improve the way the obstacles are shown in the game, as I fear they aren’t visually clear or hurt the eyes when you look at it too long, and it is because its moving fast, however, if its too slow, the game would be easier.

Here is the game:

 

REFRENCES:
https://www.jsdelivr.com/package/gh/bmoren/p5.collide2D. (my collide reaction HTML)
https://www.fontspace.com/category/spongebob (font)
https://www.pngegg.com/en/search?q=spongebob (all my images)

Reading Response 5:

Computer vision and human vision differ in interesting ways. While human vision is natural and intuitive, allowing us to recognize patterns and emotions effortlessly, computers need specific algorithms to make sense of images. For instance, what we instantly understand as motion or objects, computers detect through methods like frame differencing or background subtraction. I honestly find it intresting how rigid and task-specific computer vision is compared to our flexibility. Furthermore, to help computers “see” what we want, it uses techniques like brightness thresholding or background subtraction, and sometimes adjusts the physical environment by using better lighting or reflective markers.
Moreover, in interactive art, computer vision creates exciting new opportunities but also brings up ethical questions. For instance, Videoplace used computer vision to create playful, full-body interactions, while Standards and Double Standards used it to explore themes of authority and surveillance. However, a question that popped into my mind is that, when you consider the ability of these systems to track movements and gestures, do you feel like the line between creative interaction and surveillance can sometimes blur? This reminded me of the movie M3GAN, where AI uses computer vision to care for a child, but the surveillance becomes invasive. What if we might see something similar with interactive art or technology, where the systems that are meant to engage us could start to feel more like surveillance. Hence, it’s an interesting balance between enhancing the experience but also respecting privacy.

MIDTERM PROGRESS

CONCEPT:

I couldn’t decide between a game or an artwork for my midterm project. However, I was playing on my phone, and there’s this one game that I still play to this day “Geometry Dash”. My siblings and I grew up around this game and we still love it to this day, and as the game design is basically shapes, I thought it would be the perfect game to try and re-create.

The main idea or goal is to control a character that moves through several/ repeating obstacles. The difficulty increases over time as the player’s score rises, with obstacles speeding up and appearing more frequently. There’s also a feature where the game randomly switches to an upside-down mode, adding unpredictability and complexity to keep the player more engaged.

Design:

So far, I haven’t really worked on the design but the layout of my game. I want to have a similar concept to the actual game, where the background is gradient, and changes colour that aligns to the beat of the background music and the obstacles. As for the obstacles, for now, I left them as simple shapes, rectangles, and spikes just to test everything out and see how it flows in the game. For the use of sound, I found online the original music used in Geometry Dash and implemented it in my game as well as adding a sound effect when the player dies. However, I still need to fix the background music so that when the player dies the song stops until he starts playing again, since I used the loop function it’s just playing over and over non-stop.

This is the inspiration for my design and how i would like it to turn out in the end.

User Interaction:

My user interactions are basically the player’s input in the game. The player must press the spacebar to jump. If the spacebar is held down, the player continues jumping until the key is released. As for my instructions and text, I’ve applied it in the beginning, so the game begins when the player presses the spacebar at the start screen. After a game is over, pressing “1” will restart the game. Moreover, I still need to work on the visual design of the Start page, as of now, I just left it as text. I’ve also added a score count which is displayed at the top of the screen, which increases by one as the player successfully passes an obstacle. In the game, the obstacles appear from the right side of the screen, and the player must jump to avoid them. Then the game randomly switches to an upside-down mode at higher scores, adding an extra challenge, but I still think I need to make it more complex and play around with the obstacles, as I fear the game might be too simple and boring the way it is now.

The Most Difficult Part of the Project:

The hardest part of making this game has been figuring out how to make the difficulty increase smoothly as I want the game to stay engaging throughout. I want the game to get harder as you play, but I also need to make sure it doesn’t become too hard too soon, to the point it just gets frustrating.

Collision Detection (When the Player Hits an Obstacle):

The other tricky part is making sure the game knows when the player hits an obstacle, especially the spikes.  For the spike obstacles, the spikes are drawn as triangles, but I treated them as if they were inside an invisible rectangle (called a bounding box) that surrounds the spike. This makes it easier for the game to detect if the player hits the spike. Even though the spike is a triangle, the game checks if the player touches the rectangle around the spike. I used the collideRectRect() function in p5.js. This function checks if two rectangles touch each other. Even though the spike is a triangle, the game uses a rectangle around it for simpler collision detection. If the player’s rectangle overlaps with the spike’s rectangle, the game registers a hit. The same goes for the rectangle obstacles.

How I Made It Less Risky:

To make sure the game doesn’t get too hard too fast, I tested how quickly the obstacles speed up and how often they appear. By setting limits on both, I made sure that the game gradually gets harder, but not too difficult right away.

 

Code so far:

 

 

SOLAR SYSTEM

Concept:

For this assignment, I honestly had no clue what to create, at first, I wanted to create generative text data; however, I couldn’t think of a sketch, so I decided to do visualization data instead. My concept was straightforward as I was still trying to understand the codes, so I decided to do a simple solar system, but the data wasn’t accurate it was just for the sketch and the placements in p5. I first started with a blank black background with the planets orbiting, which was too basic, so I decided to use the Lerp function, which I got my inspiration from Jheel’s assignment last week, to change the color to blue gradually. Furthermore, I added shooting stars and normal starts, to make it look more appealing.

Highlight:

The highlight of my code is the animation of the planets and setting the planets, as it was the hardest to figure out. However, the PowerPoint and previous in-class work helped a lot, and without them, I would still be trying to make it work.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// Draw and animate planets orbiting the sun
for (let i = 0; i < planets.length; i++) {
let planet = planets[i];
// planet position based on orbit
angles[i] += planet.speed;
let x = sun.x + cos(angles[i]) * planet.distance;
let y = sun.y + sin(angles[i]) * planet.distance;
// Draw the orbit path
stroke(255, 255, 255, 50);
noFill();
ellipse(sun.x, sun.y, planet.distance * 2);
// Draw the planet
noStroke();
fill(planet.color);
ellipse(x, y, planet.diameter);
// Display planet name
fill(255);
textSize(12);
text(planet.name, x + planet.diameter / 2 + 5, y);
}
// Draw and animate planets orbiting the sun for (let i = 0; i < planets.length; i++) { let planet = planets[i]; // planet position based on orbit angles[i] += planet.speed; let x = sun.x + cos(angles[i]) * planet.distance; let y = sun.y + sin(angles[i]) * planet.distance; // Draw the orbit path stroke(255, 255, 255, 50); noFill(); ellipse(sun.x, sun.y, planet.distance * 2); // Draw the planet noStroke(); fill(planet.color); ellipse(x, y, planet.diameter); // Display planet name fill(255); textSize(12); text(planet.name, x + planet.diameter / 2 + 5, y); }
// Draw and animate planets orbiting the sun
 for (let i = 0; i < planets.length; i++) {
   let planet = planets[i];

   // planet position based on orbit
   angles[i] += planet.speed;
   let x = sun.x + cos(angles[i]) * planet.distance;
   let y = sun.y + sin(angles[i]) * planet.distance;

   // Draw the orbit path
   stroke(255, 255, 255, 50);
   noFill();
   ellipse(sun.x, sun.y, planet.distance * 2);

   // Draw the planet
   noStroke();
   fill(planet.color);
   ellipse(x, y, planet.diameter);

   // Display planet name
   fill(255);
   textSize(12);
   text(planet.name, x + planet.diameter / 2 + 5, y);
 }

Reflection:

For improvements , as you can see the planet, are going out of the canavs, i tried fixing it by making the orbit smaller, but then everything look tight, so i left it as it is. Also I believe some user interaction would’ve been a great addition, as of now there isn’t any interaction, I should’ve maybe allowed the users to control the orbiting of the planets using the mouse, or maybe the shooting stars.

My design:

Reading Response 4

In Norman’s text, he argues for having a human-centered design, focusing on creating products that are simple and straightforward to use by aligning the design with what users need and can do. In context to that, one thing that drove me crazy (probably because I was really hungry) is how confusing digital appliances can be—like the air fryer I tried to use in the dorm. I expected it to be super easy, but instead, both me and Amna my sister, had to spend ages trying to figure out the functions because the instructions were just vague images and the digital display wasn’t clear. For someone who doesn’t cook often, it was frustrating to the point where I had to search TikTok to find out how to use it, and still it took ages to figure out as I had to find a similar Air fryer. To fix this, I think appliances like this should have built-in, interactive tutorials. Imagine turning on the air fryer for the first time and having it guide you step-by-step on the screen, showing you exactly how to use it. That way, you wouldn’t have to guess or waste time searching for help online.

In terms of applying Norman’s principles to interactive media, his ideas about affordances and signifiers would be super helpful. For example, in apps or websites, using clear icons or buttons that naturally show what they do would make everything easier to navigate. Also, feedback is key, like when you press a button, having a small animation or sound that lets you know the app is working on your request. It’s those little things that make the user experience smoother. Plus, having a simple design that allows users to quickly figure out how everything works without needing a tutorial, would make interactive media way more intuitive, kind of like how appliances should work right out of the box without you needing to look up instructions.

ASSIGNMENT 3

Concept:

For this assignment my main inspiration came from my niece, actually, during family lunch, she was playing around with a kaleidoscope, and i remembered how as a kid, I was so intrigued by them. I searched up inspirations and patterns online and i definitely wanted to try and create a design similar to a kaleidoscope. So i created jittery, dot shape that turns into this, flowy dot when you click on the mouse, just as how the shapes change when you rotate a kaleidoscope.

Reflection:

Honestly the code wasn’t as complex and was made up of mostly arrays, OOPS what we did in class mostly, and maybe next time i should try and be more complex with it and try new codes not taken in class, but I’m still very proud of the outcome. However, I did try sin and cos to create the waviness and jitter movements with the shape , which i got inspired from Amna’s previous code last week, and I’d say that’s the code I’m most proud of as it was something new to me that took some time to get right, but after reading about it on the P5 website, I figured it out, turns out it was just coordinates and using the function random to create those flowy movements, and this is the code that allows for the dots to then turn into wavy dots so it can then look like those squares when u click/toggle on the mouse, hence if I remove it the dots would just flow up and down or side to side instead of creating the square trail.

here is code im most proud of:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// Function to move the dot
move() {
// Create two different movement patterns based on `flowDirection`
if (flowDirection === 0) {
this.x += random(-2, 2); // Random jitter in the x direction
this.y += random(-2, 2); // Random jitter in the y direction
} else {
this.x += sin(this.y * 0.05) * 2; // Wavy movement based on the y-coordinate
this.y += cos(this.x * 0.05) * 2; // Wavy movement based on the x-coordinate
}
// Function to move the dot move() { // Create two different movement patterns based on `flowDirection` if (flowDirection === 0) { this.x += random(-2, 2); // Random jitter in the x direction this.y += random(-2, 2); // Random jitter in the y direction } else { this.x += sin(this.y * 0.05) * 2; // Wavy movement based on the y-coordinate this.y += cos(this.x * 0.05) * 2; // Wavy movement based on the x-coordinate }
// Function to move the dot
move() {
  // Create two different movement patterns based on `flowDirection`
  if (flowDirection === 0) {
    this.x += random(-2, 2); // Random jitter in the x direction
    this.y += random(-2, 2); // Random jitter in the y direction
  } else {
    this.x += sin(this.y * 0.05) * 2; // Wavy movement based on the y-coordinate
    this.y += cos(this.x * 0.05) * 2; // Wavy movement based on the x-coordinate
  }

here is my sketch:

Reading Response Week 3

A strongly interactive system, as described in The Art of Interactive Design, goes beyond just reacting to user input; it creates an ongoing back-and-forth between the user and the system. Crawford talks about the system as “listening, thinking, and speaking,” meaning it responds in meaningful ways to what the user does. In my p5.js sketches, I want to improve user interaction by giving more immediate feedback and making the system react in a way that feels more real or personalized if that makes sense. For example, much like how in Minecraft your actions (building or destroying) immediately affects the world around you, like destroying the wrong block could lead to a flood, same with my designs, I want to make my sketches change and evolve with user input. Furthermore, instead of having a single click trigger a known/set action, I want the system to adapt and change based on the actions similar to how Spotify creates personalized playlists based on previous songs you’ve listened to. So basically, the previous user inputs influence the sketch’s future outcomes. I can also add depth by layering interactions, like having multiple variables such as colors, shapes, or movement change in response to user input, which I am implementing right now to my sketches and giving it a go, as I do believe it gives a more appealing look to the system. I also just found out, that you can add sound effects on P5, which I hope we get to learn that, during the semester, as I’m sure everyone can agree sound enhances any type of design. Hence, by incorporating these elements into my sketches and designs, I aim to create more interactive and engaging sketches that feel alive and responsive, aligning with Crawford’s vision of true interactivity.

Assignment 2- Art Design

CONCEPT:
For this assignment, my inspiration mostly came from Bill Kolomyjec’s art piece ‘Random Squares’.
‘Random Squares’ Bill

However, I wanted to add a bit of a twist and make it more chaotic or trippy in some sort of way. I’ve gotten the idea of the changing shapes depending on the area of the canvas from class and interpreted it into my design, which thankfully pulled the piece together. In addition, the crazy random colours definitely added to the effect of it being trippy at least I hope so. Moreover, it still felt a bit bland, and after watching Casey Reas’s video, I knew I needed to add something to make the piece seem more alive or organic, as he says. In doing so, I discovered a growing and shrinking factor, which, after some trial and error, I realized it was just a variable that I needed to create and then just adjust the shape size accordingly, and it turned out not so hard after all. This would probably be what I’m most proud of in the whole code.
Code that I’m most proud of:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
/ Variable for size change
let sizeChange = 0;
// Variable for the shapes (growing or shrinking)
let growing = true;
function setup() {
createCanvas(400, 400);
frameRate(5);
}
function draw() {
background("black");
// sizeChange variable to create growing/shrinking effect
if (growing) {
sizeChange += 1;
// If the size gets too large, start shrinking
if (sizeChange > 20) {
growing = false;
}
} else {
sizeChange -= 1;
// If the size gets too small, start growing again
if (sizeChange < 0) {
growing = true;
}
}
/ Variable for size change let sizeChange = 0; // Variable for the shapes (growing or shrinking) let growing = true; function setup() { createCanvas(400, 400); frameRate(5); } function draw() { background("black"); // sizeChange variable to create growing/shrinking effect if (growing) { sizeChange += 1; // If the size gets too large, start shrinking if (sizeChange > 20) { growing = false; } } else { sizeChange -= 1; // If the size gets too small, start growing again if (sizeChange < 0) { growing = true; } }
/ Variable for size change
let sizeChange = 0;
// Variable for the shapes (growing or shrinking)
let growing = true;

function setup() {
  createCanvas(400, 400);
  frameRate(5);
}

function draw() {
  background("black");

  // sizeChange variable to create growing/shrinking effect
  if (growing) {
    sizeChange += 1;
    // If the size gets too large, start shrinking
    if (sizeChange > 20) {
      growing = false;
    }
  } else {
    sizeChange -= 1;
    // If the size gets too small, start growing again
    if (sizeChange < 0) {
      growing = true;
    }
  }

 

Reflection/Improvment:
Next time, I would love to have the shapes rotate, which is something I tried doing but unfortunately failed, I did watch videos on youtube but i still didn’t understand it so i decided to scratch that until i fully understand how it works. So hopefully next time!

 

My design:

 

My code:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// Variable for size change
let sizeChange = 0;
// Variable for the shapes (growing or shrinking)
let growing = true;
function setup() {
createCanvas(400, 400);
frameRate(5);
}
function draw() {
background("black");
// sizeChange variable to create growing/shrinking effect
if (growing) {
sizeChange += 1;
// If the size gets too large, start shrinking
if (sizeChange > 20) {
growing = false;
}
} else {
sizeChange -= 1;
// If the size gets too small, start growing again
if (sizeChange < 0) {
growing = true;
}
}
for (let x = 0; x <= width; x += 40) {
for (let y = 0; y <= height; y += 40) {
// Outer stroke for the shapes
strokeWeight(3);
stroke("black");
// Right half of the canvas - enlarging and shrinking squares
if (mouseX > width / 2) {
for (let size = 30 + sizeChange; size > 0; size -= 10) {
fill(random(255), random(255), random(255), 150);
// nested squares
rect(x + (30 - size) / 2, y + (30 - size) / 2, size, size);
}
} else {
// Left half of the canvas - enlarging and shrinking circles
for (let size = 30 + sizeChange; size > 0; size -= 10) {
fill(random(255), random(255), random(255), 150);
// nested circles
ellipse(x + 20, y + 20, size, size);
}
}
}
}
}
// Variable for size change let sizeChange = 0; // Variable for the shapes (growing or shrinking) let growing = true; function setup() { createCanvas(400, 400); frameRate(5); } function draw() { background("black"); // sizeChange variable to create growing/shrinking effect if (growing) { sizeChange += 1; // If the size gets too large, start shrinking if (sizeChange > 20) { growing = false; } } else { sizeChange -= 1; // If the size gets too small, start growing again if (sizeChange < 0) { growing = true; } } for (let x = 0; x <= width; x += 40) { for (let y = 0; y <= height; y += 40) { // Outer stroke for the shapes strokeWeight(3); stroke("black"); // Right half of the canvas - enlarging and shrinking squares if (mouseX > width / 2) { for (let size = 30 + sizeChange; size > 0; size -= 10) { fill(random(255), random(255), random(255), 150); // nested squares rect(x + (30 - size) / 2, y + (30 - size) / 2, size, size); } } else { // Left half of the canvas - enlarging and shrinking circles for (let size = 30 + sizeChange; size > 0; size -= 10) { fill(random(255), random(255), random(255), 150); // nested circles ellipse(x + 20, y + 20, size, size); } } } } }
// Variable for size change
let sizeChange = 0;
// Variable for the shapes (growing or shrinking)
let growing = true;

function setup() {
  createCanvas(400, 400);
  frameRate(5);
}

function draw() {
  background("black");

  // sizeChange variable to create growing/shrinking effect
  if (growing) {
    sizeChange += 1;
    // If the size gets too large, start shrinking
    if (sizeChange > 20) {
      growing = false;
    }
  } else {
    sizeChange -= 1;
    // If the size gets too small, start growing again
    if (sizeChange < 0) {
      growing = true;
    }
  }

  for (let x = 0; x <= width; x += 40) {
    for (let y = 0; y <= height; y += 40) {
      // Outer stroke for the shapes
      strokeWeight(3);
      stroke("black");
      // Right half of the canvas - enlarging and shrinking squares
      if (mouseX > width / 2) {
        for (let size = 30 + sizeChange; size > 0; size -= 10) {
          fill(random(255), random(255), random(255), 150);
          // nested squares
          rect(x + (30 - size) / 2, y + (30 - size) / 2, size, size);
        }
      } else {
        // Left half of the canvas - enlarging and shrinking circles
        for (let size = 30 + sizeChange; size > 0; size -= 10) {
          fill(random(255), random(255), random(255), 150);
          // nested circles
          ellipse(x + 20, y + 20, size, size);
        }
      }
    }
  }
}