Maand: augustus 2022

var x = 20;
var y = 0; 
var speedx = 4; 
var speedy = -3  
var posx = 8; 

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

function draw() {
  background(220);
  
  move();
  limits_bounce();
  shape(20);

}

function move(){
  x = x+speedx;
  y = y+speedy;
}


function limits_bounce() {
  if ( (x>width) || (x<0) ){
    speedx = speedx *-1;
  }
  
  if ( (y>height) || (y<0) ){
    speedy = speedy *-1;
  } 
}

function shape() {
    ellipse (x,y,20,20);
      ellipse (x/2,y,20,20);

}

Ik heb deze les gewerkt aan het leren van bewegen en animatie in p5js. Zelf merk ik dat ik nu al een beetje last heb met het begrijpen van hoe het in elkaar zit, dus ik hoop dat ik de opkomende lessen wel het beter kan begrijpen voordat het te lastig voor mij wordt. Zelf heb ik gewoon een beetje gespeeld met de bewegingen zoals waar de cirkels heengingen en hoe snel het ging.

// state
let circleX = 100;
let circleY = 0;
let xSpeed = 1;
let ySpeed = 1;

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

function draw() {
  // clear out old frames
  background(32);

  // draw current frame based on state
  circle(circleX, circleY, 50);

  // modify state
  circleX = circleX + xSpeed;
  circleY = circleY + ySpeed;

  //bounce off left and right
  if(circleX < 0 || circleX > width) {
    xSpeed = xSpeed * -2;
  }

  // bounce off top and bottom
  if(circleY < 0 || circleY > height) {
    ySpeed = ySpeed * -1,6;
  }
}