Concept

I was originally playing around on p5js with Perlin nose trying to learn it, until it finally began taking shape and I thought of the opening credits of Monsters Inc., specially the scene with the doors being at the end before the title of the movie was shown. (I’ve put a link to the video, it is from minute 1:05 to around 1:10-1:15)

https://www.youtube.com/watch?v=FCfv5P8GXU4
With my inspiration clear, I looked for ways to add different colors while still being in the same color pallet, and that’s when I found this sketch of a background changing colors with Perlin noise.

The part that was of most relevance to the code was the following, as it allowed me to get the colors I wanted

let n = noise(offset)
 colorMode(HSB)

 background(n*360, 100, 100);

 offset += 0.01

 

code

As for the code, that was a completely different adventure. It was originally difficult to try and find an idea, or get my grasps on how things worked with Perlin noise, specially with getting my head around mapping.

I think that my code ended up how it did as I did not place anything to make the area the ball moved in back to the background, but I believe it made it work better.

My code ended up looking like this:

//This code was in part done while learning about Perlin noise by the Coding Train on youtube and following his tutorials//

let xOff = 0; //offset on X axis//
let yOff = 10000; // offset on Y axis//
let offset = 0; //offset for color//

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

function draw() {
  // used the mapping function in order for the Perlin noise to scale around with the canvas //
  let x = map(noise(xOff), 0, 1, 0, 400);
  let y = map(noise(yOff), 0, 1, 0, 400);

  n = noise(offset); // declared the offset in for the colors//

  // found out about HSB coloring with Perlin noise by this sketch https://editor.p5js.org/amcc/sketches/XcXWNTPB-//
  colorMode(HSB);
  // I wanted to make the strokes also change colors, maybe it could be done with the same result with noStroke//
  stroke(n * 260, 100, 100);
  //Making the offsets change a bit in order for the circle to move around the screen//
  xOff += 0.01;
  yOff += 0.01;
  //filling in with Perlin noise in order to have different but somewhat matching colors//
  fill(n * 255, 180, 180);
  ellipse(x, y, 50);

  offset += 1;
}

My only one complain is that I wish I could have figured out how to use a specific color pallet, as having more variations would have been interesting.

Art Works

I made multiple versions of the code, either by adding or removing some strands of code.

This was the first attempt and what lead to me finding my project:

The second version I made was similar, as it had lines and in a white canvas, but the ellipses were filled with colors, this is the second version of my design:

And the final version of it came a bit later, where I made the lines also change color, and made the background black in order to make the colors pop-out more:

And here is a loop version of it:

reflection/future work

Personally I am happy with my end result, however I wish I could have understood more the process of creating it instead of randomly stumbling into it.

Secondly, I would have liked it to be able to use different color pallets, however I lack the skill and knowledge to do so at the moment.

Lastly it would be interesting if I could have added a mouseX or mouseY function, but with the time constraint I did not want to.

Concept

The idea for this assignment originally was to make flashing lights in a dark background, however I couldn’t figure out how to make it work as intended. Because of that I decided to change the idea based on the sun and space, similar to this:

Based on that I decided to make a big orange ball that would flash with small motionless circles to look like stars.

Code

Creating the code was the most difficult part of making the image. In my attempt to make the first concept, I stumbled into a video of making circles (https://www.youtube.com/watch?v=XATr_jdh-44) and to() functions.

for(i=0; i<20; i++){
   let x = random(width);
   let y= random(height);
   let r = random(1,5)
   fill(255,255,255) // had to fill it white because they took the color of the sun//
   ellipse(x,y,r,r) 
}

After this I used a code similar to the one seen in class of making the triangle loose color and make it bright again. At the end my code looked like this:

function setup() {
  createCanvas(400, 400);
}
let greenValue = 255;
function draw() {  
    background(0)
  for(i=0; i<20; i++){
   let x = random(width);
   let y= random(height);
   let r = random(1,5)
   fill(255,255,255)
   ellipse(x,y,r,r) 
    
  }  
  greenValue = greenValue - 5;
    if (greenValue === 105) {
    greenValue = 255;
    }
  fill(greenValue, greenValue - 111, greenValue - 200);
  ellipse(200,200, 300,300);
  
}

Completed Art-Work

 

Reflection/Future Work

Personally, I wish the code did not take as much time as it did, as well as reduce the amount of mistakes made, as my computer crashed a few times while writing the code.

Alongside that, I would have liked the color to dim down and slowly dim up repeatedly, but could not find a way to do it.

CONCEPT

I wanted to create a self-portrait based on my current self with basic shapes and colors.

CODE

The code consists of simple shapes and lines in order to form the picture. The biggest challenge with coding was my lack of knowledge as this is my first time doing so. It took a long time to understand how the coordinates and positions work but eventually I managed to pull through.  

I created a grid to find myself on the canvas, as well as doubling it as a background by lowering the thickness of the stroke.

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

function draw() {
  background(84, 202, 108);
  
  // Grid for helping with locating myself and background //
  strokeWeight(.1) //added at the end to make seem more like a background //
  line(0, 50, 1000, 50);
  line(0, 100,1000,100);
  line(0,150,1000,150);
  line(0,200,1000,200);
  line(0,250,1000,250);
  line(0,300,1000,300);
  line(0,350,1000,350);
  line(0,400,1000,400);
  line(50,0,50,1000)
  line(100,0,100,1000)
  line(150,0,150,10000)
  line(200,0,200,1000)
  line(250,0,250,1000);
  line(300,0,300,1000);
  line(350,0,350,1000);
  line(400,0,400,1000)
  

  // Hair color and shape//
  strokeWeight(1) // make the strokes thick again //
  fill (0)
  ellipse(200, 200, 275, 350)
  ellipse(100, 300, 60, 100)
  ellipse(300, 300, 60, 100)
  ellipse(125, 325, 70, 100)
  ellipse(160, 325, 70, 100)
  ellipse(250, 325, 70, 100)
  ellipse(260, 325, 70, 100)
  
  // Face, nose, ears, mouth and neck //
  fill(225, 172, 149)
  rect(165, 325, 75, 75)
  ellipse(85, 200, 50, 100) ;
  ellipse(315, 200, 50, 100) 
  ellipse(200, 200, 250, 290)
  arc(200, 215, 30, 20, 10, PI);
  arc(200, 250, 80, 80, 0, PI);
 
  // Eyes //
  fill(255, 255, 255)
  ellipse(150, 150, 50, 75)
  ellipse(250, 150, 50, 75)
  
  // Pupils //
  fill(56, 16, 28)
  ellipse(150,150,20,30)
  ellipse(250,150,20,30)
  
 // torso, shoulders and shirt //
  fill(246, 133, 211)
  rect(45, 400, 100, 100)  
  rect(260, 400, 100, 100)
  rect(75, 375, 250, 250);
  
  //shirt lines //
  fill(0)
  line(125, 375, 200, 450)
  line(275, 375, 200, 450)
}

 

COMPLETED SELF PORTRAIT

 

REFLECTION/FUTURE WORK

This portrait shows my lack of familiarity with coding and creativity due to said lack of experience. In the future I would like to learn how to apply the concepts discussed in class better. Hopefully add some animations in the future. Maybe add text and more complex figures later haha!