UCUG1505(L01) Assignment 1

UCUG1505(L01) Assignment 1

Sample code written by Dongyijie Primo PAN.(TA)

Puzzle 1

//Dongyijie Primo PAN
function setup() {
  createCanvas(600, 600);
  background(255, 255, 255);
}

function draw() {
  strokeWeight(10); 
  fill(255, 255, 0);
  rect(10, 10, 180, 300); 

  fill(255, 0, 0);
  rect(190, 10, 400, 470);  

  fill(255, 255, 255);       
  rect(10, 310, 180, 170);

  fill(0, 0, 255);
  rect(10, 480, 180, 110);      
  fill(255, 255, 255);                           
  rect(190, 480, 290, 110 );   
  
  fill(255,255,255)
  rect(480,480,110,110)

 }

Puzzle 2

//Dongyijie Primo PAN
function setup() {
  createCanvas(320, 320);
}

function draw() {
  var a = 1;
  var c = 0;

  for (var x = 0; x < width; x = x + 40) {
    a = a * -1;
    for (var y = 0; y < height; y = y + 40) {
      a = a * -1;
      if (a < 0) {
        c = 0;
      }
      if (a > 0) {
        c = 255;
      }
      fill(c);
      rect(x, y, 80, 80);
    }
  }
}

Puzzle 3

function setup() {
  createCanvas(800, 800);
  rectMode(CENTER);
  noLoop();
}

function draw() {
  background(220);
  translate(100,100);
  for (let i = 0; i < 10; i++){
    for (let j = 0; j < 10; j++){
      push();
      translate(j * 40, i * 40);
      if (random() < .15){
         fill(0); //black
         rect(0,0,10,10);
      }else{
         fill(255); // white
         rect(0,0,30,30);
      }
      pop();
    }
  }
}

Puzzle 4

//Dongyijie Primo PAN
// 定义 Point2D 类
class Point2D {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

let xPositions = []; // 存储X坐标的1D数组
let yPositions = []; // 存储Y坐标的1D数组
let positions2D = []; // 存储2D坐标的二维数组
let points = []; // 存储Point2D对象的数组

function setup() {
  createCanvas(800, 800);
  noFill();
}

function draw() {
  background(220);
  
  // 获取当前鼠标位置
  let x = mouseX;
  let y = mouseY;
  
  // 更新1D数组
  if (xPositions.length >= 100) {
    xPositions.shift(); // 删除第一个元素
    yPositions.shift();
  }
  xPositions.push(x);
  yPositions.push(y);
  
  // 更新2D数组
  if (positions2D.length >= 100) {
    positions2D.shift();
  }
  positions2D.push([x, y]);

  // 更新Point2D对象数组
  if (points.length >= 100) {
    points.shift();
  }
  points.push(new Point2D(x, y));

  // 绘制1D数组的线条
  stroke(255, 0, 0); // 红色
  beginShape();
  for (let i = 0; i < xPositions.length; i++) {
    vertex(xPositions[i], yPositions[i]);
  }
  endShape();

  // 绘制2D数组的线条
  stroke(0, 255, 0); // 绿色
  beginShape();
  for (let i = 0; i < positions2D.length; i++) {
    vertex(positions2D[i][0], positions2D[i][1]);
  }
  endShape();

  // 绘制Point2D对象数组的线条
  stroke(0, 0, 255); // 蓝色
  beginShape();
  for (let i = 0; i < points.length; i++) {
    vertex(points[i].x, points[i].y);
  }
  endShape();
}

Puzzle 5

// 定义 Point2D 类
class Point2D {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

let xPositions = []; // 存储X坐标的1D数组
let yPositions = []; // 存储Y坐标的1D数组
let positions2D = []; // 存储2D坐标的二维数组
let points = []; // 存储Point2D对象的数组

function setup() {
  createCanvas(800, 800);
  noFill();
  textSize(16); // 设置显示坐标时的文本大小
}

function draw() {
  background(220);
  
  // 获取当前鼠标位置
  let x = mouseX;
  let y = mouseY;
  
  // 更新1D数组
  if (xPositions.length >= 100) {
    xPositions.shift(); // 删除第一个元素
    yPositions.shift();
  }
  xPositions.push(x);
  yPositions.push(y);
  
  // 更新2D数组
  if (positions2D.length >= 100) {
    positions2D.shift();
  }
  positions2D.push([x, y]);

  // 更新Point2D对象数组
  if (points.length >= 100) {
    points.shift();
  }
  points.push(new Point2D(x, y));

  // 绘制五角星
  stroke(255, 215, 0); // 金色
  strokeWeight(2);
  for (let i = 0; i < points.length; i++) {
    drawStar(points[i].x, points[i].y, 10, 20, 5); // 绘制五角星
  }

  // 显示当前鼠标坐标
  fill(0);
  text(`X: ${x}, Y: ${y}`, 10, height - 10); // 左下角显示坐标
}

// 绘制五角星的函数
function drawStar(x, y, radius1, radius2, npoints) {
  let angle = TWO_PI / npoints;
  let halfAngle = angle / 2.0;
  
  beginShape();
  for (let a = -PI/2; a < TWO_PI; a += angle) {
    let sx = x + cos(a) * radius2;
    let sy = y + sin(a) * radius2;
    vertex(sx, sy);
    sx = x + cos(a + halfAngle) * radius1;
    sy = y + sin(a + halfAngle) * radius1;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}