Computational Media

Week 2 - Animation and Variables

EVERYTHING SOUNDS LOGICAL IN MY HEAD

This week was challenging. I guess I’m having a hard time figuring out how to write down what’s inside my head. Even though is feels/sounds logical in my head, the code won’t work as how I imagined it would be. During our 1:1 session with Sam, everything was alright. At least I got to understand the syntax for variables and their placement clearly. For the example on the right, we used background under the setup function to see the movement of our circle. Even a small change in the code can lead to something totally different.

Questions:

1- For Worksheet Q4, I managed to the circles to the corners and to up-down-right-left. But when I modifies the canvas size, it looked like an explosion.

function setup() {
createCanvas(400, 400);
x = width / 2;
y = height / 2;

function draw() {
background(220);
x += w2h;
y += w2h;

//moving to bottom right corner
ellipse(x, y, 10);

I used the same logic with Q2-3, but for this challenge it didn’t work.

2- I wanted to experiment with mouseX and mouseY. (https://editor.p5js.org/zelifergin/sketches/OzHihefhG)
When mouse was pressed, I wanted to see a red circle with blue stroke. But I also saw that red-blue circle when my mouse wasn’t pressed. How did this happen? I feel like this is mostly related to conditionals because my circle changes color when x>=200 even when the mouse it pressed.

let x;
function setup() {
createCanvas(400, 400);
x = width / 2}

function draw() {
background (230)

if (mouseIsPressed) {
fill('red');
stroke('blue');
strokeWeight(mouseX / 50);
ellipse(mouseX, mouseY, 20, 20); }

else {
fill(255); stroke(0); }

if (mouseX < 200){
ellipse(200, 200, mouseX, mouseY); }
if (mouseX >= 200){
fill('green');
strokeWeight( mouseX / 10);
ellipse(200, 200, mouseX, mouseY);     }  }

---

Computational Media

PraeseSuspendía

Praese
Suspendía