project 3: dynamic drawing

I really wanted to make something that incorporated color changes without using a lot of colors. So I messed around with blend modes and created this!

isis-dynamic
// isis berymon section D

var x;
var y;
var bluex;
var bluey;
var greenx;
var greeny;
var d;

function setup() {
    createCanvas(500,500);
    background(0);
    d = 100;
    bluex = width/2;
    bluey = height/2;
    greenx = width/2;
    greeny = height/2;
}

function draw() {
    blendMode(BLEND); //makes bg opaque
    background(0);
    blendMode(SCREEN); //brightens overlapping colors
    fill(255,0,0);
    circle(width/2, height/2, d);
    fill(0,255,0);
    circle(greenx, greeny, d);
    fill(0,0,255);
    circle(bluex, bluey, d);
    //diameter scales with how far mouse is from center
    d = width/2-dist(width/2, height/2, mouseX, mouseY);
    //blue circle moves opposite the mouse
    bluex = width/2 + (width/2-mouseX);
    bluey = height/2 + (height/2-mouseY);
    //green circle moves with the mouse
    greenx = width/2 + (mouseX-width/2);
    greeny = height/2 + (mouseY-height/2);
}

Leave a Reply