Assignment 3 In-Progress Sketch

For my project I am aiming to make something weird & fun to play around with. As of now I have an eye positioned to follow the cursor & a pattern hidden under the background that due to the opacity is revealed when you move the cursor. I have played with the color palette quite a bit to see how different colors will interact with my eye and what I want that to look like.

I would like to position more & a variety of eyes that will also be interactive. Some expanding/ contracting, changing color when keys are clicked, or rotating when clicked with the mouse in order to leave it up to the user to have a variety of ways to interact with the page. As well as settle on a pleasing color palette. I am also trying to figure out how I can layer an image on the background beneath the purple shade so that as the user moves the eye, it reveals something to them underneath rather than just revealing the pattern like it does now.

interactive link: https://editor.p5js.org/adellewebster/full/YkCu9SzLp

editor link: https://editor.p5js.org/adellewebster/sketches/YkCu9SzLp

CODE:

let x=0;

let easing=0.05;

let img1;

// let img2;

// let img3;

// let img4;

function preload(){

img1= loadImage("images/eye1.png");

//img2= loadImage("images/eye2.png");

//img3= loadImage("images/eye3.png");

//img4= loadImage("images/eye4.png");

}

function setup() {

createCanvas(1280, 720);

strokeWeight(0);

}

function draw() {

background(111,31,250,70);

for (let y=0; y<= height; y+=40)

{

for (let x=0; x <= width; x+=40)

{

fill(111,31,250,70);

ellipse (x,y,40,40);

}

let targetX=mouseX;

x+=(targetX-x)*easing;

if(mouseIsPressed);

image(img1,mouseX,mouseY);

}}