ebac-interactive-systems

README.md

Some sample code used for a creative coding workshop held at EBAC-SP on Sep 22, 2022.

final.js

let createPosX = 300;
let createPosY = 300;

let createTargetX = 300;
let createTargetY = 300;

let time_ = 0;

function setup() {
    createCanvas(600, 600);
    background(25);
}

function mousePressed() {
    createTargetX = mouseX;
    createTargetY = mouseY;
}

function draw() {
    background('rgba(25, 25, 25, 0.01)');

    time_ += deltaTime;

    mouseXFactor_ = mouseX / width
    mouseYFactor_ = mouseY / width

    sinFactor_ = Math.sin(time_ * 0.001)
    cosFactor_ = Math.cos(time_ * 0.01 + sinFactor_ * 9)

    diffX = createTargetX - createPosX
    diffY = createTargetY - createPosY
    createPosX = createPosX + (diffX * 0.01)
    createPosY = createPosY + (diffY * 0.01)

    stroke_ = 'rgba(255, 255, 255, ' + cosFactor_ + ')';
    radiusX_ = sinFactor_ * 400;
    radiusY_ = cosFactor_ * 400;

    strokeWeight(1);
    stroke(stroke_);
    noFill();

    ellipse(createPosX, createPosY, radiusX_, radiusY_);
}

final_final.js

let createPosX = 300;
let createPosY = 300;

let createTargetX = 300;
let createTargetY = 300;

let time_ = 0;

function setup() {
    createCanvas(600, 600, WEBGL);
    background(25);
}

function mousePressed() {
    createTargetX = mouseX;
    createTargetY = mouseY;
}

function draw() {
    background('rgba(25, 25, 25, 0.01)');

    time_ += deltaTime;

    mouseXFactor_ = mouseX / width
    mouseYFactor_ = mouseY / width

    sinFactor_ = Math.sin(time_ * 0.001)
    // cosFactor_ = Math.cos(time_ * 0.001)
    cosFactor_ = Math.cos(time_ * 0.01 + sinFactor_ * 9)

    diffX = createTargetX - createPosX
    diffY = createTargetY - createPosY
    createPosX = createPosX + (diffX * 0.01)
    createPosY = createPosY + (diffY * 0.01)

    stroke_ = 'rgba(255, 255, 255, ' + cosFactor_ + ')';
    radiusX_ = sinFactor_ * 400;
    radiusY_ = cosFactor_ * 400;

    strokeWeight(1);
    stroke(stroke_);
    noFill();

    push();
    rotateZ(frameCount * 0.01);
    rotateX(frameCount * 0.01);
    rotateY(frameCount * 0.01);
    torus(radiusX_ * -0.5, radiusY_ * -0.5);
    pop();

    ellipse(0, 0, radiusX_, radiusY_);

}

projection.js

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

const objW_ = 600;
const objPerspectiveH_ = 100;

function draw() {
  background('rgba(0, 0, 0, 0.01)');

  noFill();
  stroke(255);
  strokeWeight(2);
  
  // Ellipse
  const ellipseCenterX = width / 2
  const ellipseCenterY = height - 200
  const ellipseWidth = objW_
  const ellipseHeight = objPerspectiveH_
  
  ellipse(
    ellipseCenterX,
    ellipseCenterY,
    ellipseWidth,
    ellipseHeight
  );
  
  line(
    ellipseCenterX - (ellipseWidth * 0.5),
    ellipseCenterY,
    ellipseCenterX + (ellipseWidth * 0.5),
    ellipseCenterY
  );
  
  // Piramid
  const piramidHeight =  240
  
  point(
    (width / 2) + Math.sin(frameCount * 0.05) * (ellipseWidth * 0.5),
    (height / 2) + Math.cos(frameCount * 0.05) * (ellipseHeight * 0.5)
  );
  
  ellipseLine(
    width / 2,
    height / 2,
    ellipseWidth,
    ellipseHeight,
    Math.PI * 0.25
  )
  
  ellipseLine(
    width / 2,
    height / 2,
    ellipseWidth,
    ellipseHeight,
    Math.PI * -0.25
  )
  
  ellipseLine(
    width / 2,
    height / 2,
    ellipseWidth,
    ellipseHeight,
    Math.PI * 0.5
  )
}

function ellipseLine(x, y, w, h, pos) {
  line(
    x + Math.sin(pos) * w * 0.5,
    y + Math.cos(pos) * h * 0.5,
    x - Math.sin(pos) * w * 0.5,
    y - Math.cos(pos) * h * 0.5
  );
}