Document

Click on the workshop text below then Press any key!

Click on the workshop text below then Press any key!

Click on the workshop text below then Press any key!

Kusama Sketch

Click on the image to change the colour

O

let triangleHeight1 = 0;
let triangleHeight2 = 0;
let triangleHeight3 = 0;
let triangleHeight4 = 0;

let circleSize = 40;
let triangleColor;

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(0);
  frameRate(15);
  triangleColor = color(random(255), random(255), random(255));
}

function draw() {
  fill(triangleColor);
  noStroke();

  triangleHeight1 += 1; 
  triangleHeight2 += 2;
  triangleHeight3 += 1.5;
  triangleHeight4 += 2.5;

  if (triangleHeight1 > height / 4) triangleHeight1 = height / 4;
  if (triangleHeight2 > height / 3) triangleHeight2 = height / 3;
  if (triangleHeight3 > height / 2) triangleHeight3 = height / 2;
  if (triangleHeight4 > height) triangleHeight4 = height;

  triangle(10, height, 100, height - triangleHeight3, 200, height);
  triangle(300, height, 400, height - triangleHeight1, 450, height);
  triangle(450, height, 500, height - triangleHeight3, 650, height);
  triangle(600, height, 700, height - triangleHeight2, 750, height);
  triangle(750, height, 900, height - triangleHeight4, 1050, height);
  triangle(1050, height, 1120, height - triangleHeight3, 1200, height);
  triangle(1350, height, 1450, height - triangleHeight3, 1700, height);

  triangle(0, 0, 150, 0 + triangleHeight2, 200, 0);
  triangle(200, 0, 270, 0 + triangleHeight4, 420, 0);
  triangle(450, 0, 500, 0 + triangleHeight2, 600, 0);
  triangle(550, 0, 700, 0 + triangleHeight3, 860, 0);
  triangle(950, 0, 1050, 0 + triangleHeight2, 1100, 0);
  triangle(1150, 0, 1200, 0 + triangleHeight3, 1300, 0);
  triangle(1250, 0, 1300, 0 + triangleHeight4, 1500, 0);
  triangle(1550, 0, 1600, 0 + triangleHeight1, 1500, 0);

  fill(0);
  noStroke();
  for (let i = 0; i < 60; i++) {
    let xPos = random(width);
    let yPos = random(height);
    ellipse(xPos, yPos, circleSize);
  }
}

function mousePressed() {
  triangleColor = color(random(255), random(255), random(255));
}
      

Self portrait

Click on the ball to find out what happens

O

let circleSize;

function setup() {
  createCanvas(windowWidth, windowHeight);
  frameRate(5);
  background(189, 189, 189);
}

function draw() {
  circleSize = random(100, 300);
  let r = random(255);
  let g = random(255);
  let b = random(255);
  fill(r, g, b, 30);

  circle(200, height/2 +100, circleSize);
  let smallerHairSize = random(200, 50);
  circle(200, 400, smallerHairSize);
  let xsmallerHairSize = random(150, 50);
  circle(200, 270, xsmallerHairSize);
  let fringesmallerHairSize = random(100, 50);
  circle(250, 180, fringesmallerHairSize);
  circle(310, 130, fringesmallerHairSize);
  circle(390, 120, fringesmallerHairSize);
  circle(470, 125, fringesmallerHairSize);
  circle(540, 175, fringesmallerHairSize);

  circle(600, height/2 +100, circleSize);
  circle(600, 400, smallerHairSize);
  circle(600, 270, xsmallerHairSize);

  fill(11, 67, 33); 
  noStroke();
  rect(270, 650, 250, 800, 15);

  fill(212, 224, 189); 
  noStroke();
  ellipse(400, 400, 400, 500);

  fill(68, 255, 187);
  stroke(68, 255, 187); 
  strokeWeight(8);
  triangle(400, 350, 370, 450, 430, 450);
  fill(8, 25, 187);
  triangle(400, 335, 380, 445, 420, 445);

  fill(203, 181, 254); 
  stroke(231, 221, 255);
  strokeWeight(5);
  circle(320, 300, 65);
  fill(r, g, b); 
  strokeWeight(0);
  circle(320, 300, 35);

  fill(203, 181, 254);
  stroke(231, 221, 255); 
  strokeWeight(5);
  circle(480, 300, 65);
  fill(r, g, b);
  strokeWeight(0);
  circle(480, 300, 35);

  fill(101, 67, 33);  
  rect(270, 250, 100, 10);
  rect(430, 250, 100, 10);

  fill(101, 67, 33); 
  stroke(255, 204, 0); 
  strokeWeight(5);
  rect(310, 500, 190, 87, 15);

  if (mouseIsPressed) {
    fill(255); 
    noStroke();
    rect(320, 510, 20, 30); 
    rect(350, 510, 20, 30);
    rect(380, 510, 20, 30);
    rect(410, 510, 20, 30);
    rect(440, 510, 20, 30);
    rect(470, 510, 20, 30);
    rect(320, 545, 20, 30); 
    rect(350, 545, 20, 30);
    rect(380, 545, 20, 30);
    rect(410, 545, 20, 30);
    rect(440, 545, 20, 30);
    rect(470, 545, 20, 30);
  }
}
      

Don't forget to click the balls. Don't forget to click the balls. Don't forget to click the balls. Don't forget to click the balls.