The Learning Process

saveGif("name.gif", seconds);

• translate(x,y);

//sketch.js
let walker;

function setup() {
    createCanvas(400, 400);
    walker = new Walker(200, 200);
    background(0);
}

function draw() {
    walker.update();
    walker.show();
}

//walker.js
class Walker{
    constructor(x,y){
        this.pos = createVector(x,y);
    }

    update(){
        this.pos.x = this.pos.x + random(-1,1);
        this.pos.y = this.pos.y +random(1,1);
    }

    show(){
        stroke(255,100);
        strokeWeight(2);
        point(this.pos.x,this.pos.y);
    }
}

let walker;

function setup() {
    createCanvas(400, 400);
    walker = new Walker(200, 200);

}

function draw() {
    background('blue');
    walker.update();
    walker.show();
}

class Walker{
    constructor(x,y){
        this.pos = createVector(x,y);
        this.vel = createVector(1,-1);
    }

    update(){
        this.pos.x = this.pos.x + this.vel.x;
        this.pos.y = this.pos.y + this.vel.y;
    }

    show(){
        stroke(255);
        strokeWeight(2);
        fill(255,100);
        ellipse(this.pos.x,this.pos.y,32);
    }
}

function setup(){
createCanvas(400,400);
background('blue');
}

function draw(){
translate(width/2,height/2);

v=p5.Vector.random2D();
v.mult(random(50,100));

strokeWeight(4);
stroke(255,50);
line(0,0,v.x,v.y);
}

function setup(){
createCanvas(400,400);
background('blue');

}

function draw(){
let pos = createVector(200,200);
let mouse = createVector(mouseX,mouseY);

let v = p5.Vector.sub(mouse,pos);

translate(width/2,height/2);
strokeWeight(4);
stroke(255,50);
line(0,0,v.x,v.y);
}

iShot_2025-02-04_20.33.43.mp4

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

function draw(){
// background('blue');

let pos = createVector(200,200);
let mouse = createVector(mouseX,mouseY);

let v = p5.Vector.sub(mouse,pos);

let m = v.mag();
background(m);

translate(width/2,height/2);
strokeWeight(4);
stroke(255);
line(0,0,v.x,v.y);
}

iShot_2025-02-04_20.38.49_1.mp4

let mover;

function setup(){
createCanvas(400,400);
mover = new Mover(200,200);
}

function draw(){
background(0);
mover.update();
mover.show();
}

class Mover{
    constructor(x,y){
        this.pos = createVector(x,y);
        this.vel = p5.Vector.random2D();
        this.vel.mult(random(3));
    }

    update(){
        let mouse = createVector(mouseX, mouseY);
        this.acc = p5.Vector.sub(mouse,this.pos);
        this.acc.setMag(1);

        this.vel.add(this.acc);
        this.vel.limit(5);

        this.pos.add(this.vel);
    }

    show(){
        stroke(255);
        strokeWeight(2);
        fill(255,100);
        ellipse(this.pos.x,this.pos.y,32);
    }
}

iShot_2025-02-04_21.41.48.mp4

Assignment

Initial Idea: Firework patterns randomly appear on the interface, with varying sizes and random colors. Clicking the mouse triggers a new firework.

After writing some code, I found that I liked three visual effects. The background color is chosen from a predefined array of colors, with one randomly selected each time. As for the other visual effects:

1. Lines are drawn outward from the mouse position as the center.

2. Firework patterns randomly appear on the screen, with varying sizes.

3. Firework patterns randomly appear on the screen, all with the same size, but the size changes upon each refresh.

let colors = ["#00B6FF", "#0036FF", "#13DDFF", "#79C7FF", "#0A8BE2", "#00A3FF", "#1A35E3", "#013BD7","#F9FFF2"];
let a; 
let b;

function setup() {
    createCanvas(windowWidth, windowHeight);
    let c = color(random(colors));
    c.setAlpha(40);
    background(c); 
}

function draw() {
    let x = random(0,150);
    let y = random(0,200); //x and y control the vector’s length
    let h = random(70,80); //h is alpha
    drawLines(mouseX,mouseY,x,y,h);
}

function drawLines(a,b,x,y,h) {
    push();
    translate(a, b);
    v = p5.Vector.random2D();
    v.mult(random(x, y));  

    strokeWeight(4);
    let c = color(random(colors));
    c.setAlpha(random(0, h));
    stroke(c);
    line(0, 0, v.x, v.y);
    pop();
}

https://editor.p5js.org/ChloeYan0825/sketches/0jQKMUzI_

iShot_2025-02-05_14.11.30.mp4

let colors = ["#00B6FF", "#0036FF", "#13DDFF", "#79C7FF", "#0A8BE2", "#00A3FF", "#1A35E3", "#013BD7","#F9FFF2"];
let a;
let b;
let positions = [];
let count = 20;

function setup() {
    createCanvas(windowWidth, windowHeight);
    let c = color(random(colors));
    c.setAlpha(40);
    background(c);
    for(let i= 0;i<count;i++){
        positions.push([random(0,width),random(0,height)]);
    }
}

function draw() {

    for(let i = 0;i<count;i++){
    let x = random(0,150);
    let y = random(0,200);
    let h = random(70,80);
    positions[i].push(x,y,h)
    }

    for(const [a,b,x,y,h] of positions){
        drawLines(a,b,x,y,h);
    }
}

function drawLines(a,b,x,y,h) {
    push();
    translate(a, b);
    v = p5.Vector.random2D();
    v.mult(random(x, y));

    strokeWeight(4);
    let c = color(random(colors));
    c.setAlpha(random(0, h));
    stroke(c);
    line(0, 0, v.x, v.y);
    pop();
}

https://editor.p5js.org/ChloeYan/sketches/Whm0_KunR

iShot_2025-02-05_14.54.18.mp4

let colors = ["#00B6FF", "#0036FF", "#13DDFF", "#79C7FF", "#0A8BE2", "#00A3FF", "#1A35E3", "#013BD7","#F9FFF2"];
let a;
let b;
let positions = [];
let count = 20;

function setup() {
    createCanvas(windowWidth, windowHeight);
    let c = color(random(colors));
    c.setAlpha(40);
    background(c);
    for(let i= 0;i<count;i++){
        positions.push([random(0,width),random(0,height)]);
    }
}

function draw() {
    let x = random(0,150);
    let y = random(0,200);
    let h = random(70,80);
    for(let i = 0;i<count;i++){
         positions[i].push(x,y,h)
        }

    for(const [a,b,x,y,h] of positions){
        drawLines(a,b,x,y,h);
    }
}

function drawLines(a,b,x,y,h) {
    push();
    translate(a, b);
    v = p5.Vector.random2D();
    v.mult(random(x, y));

    strokeWeight(4);
    let c = color(random(colors));
    c.setAlpha(random(0, h));
    stroke(c);
    line(0, 0, v.x, v.y);
    pop();
}

https://editor.p5js.org/ChloeYan/sketches/Cu698FWKW

iShot_2025-02-05_14.57.12.mp4