Sanika – Page 2 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Project-06: Abstract Clock

For the Abstract Clock project, I used a grid of 24 circles to denote the hour and the red circle as the second hand

https://editor.p5js.org/ssahasra/full/YVNbtFtzJ

[the p5.js embed code was not rendering so I uploaded a video of the p5.js preview]

var theta = 0; // angle of rotation (starting)
var r = 150; // radius
var blink = 10;
function setup() {
createCanvas(500, 500);
frameRate(1);
}
function draw() {
background(20);
strokeWeight(0);
push();
translate(250, 250);
fill(255);
stroke(0);
circle(0, 0, 2*r);
var x = r * cos(radians(theta));
var y = r * sin(radians(theta));
fill(255, 0, 0);
ellipse (x,y, 40,40);
pop();
theta += 1;
// compute unit circle x and y values rounded to 3 places
var unit_x = round(map(x, -r, r, -1.0, 1.0)<em>1000)/1000; var unit_y = round(map(y, -r, r, -1.0, 1.0)</em>1000)/1000;
translate(200, 220);
for (let x = 0; x &lt;= width-400; x += 20) {
for (let y = 0; y &lt;= height-430; y += 20) {
//if t = 60;
noStroke();
fill(0, 0,255);
ellipse(x, y, 15, 15);
}
}
//blinking to show the hour of the day
blink = blink + 10;
// every 10th time, the condition is true
if (blink % 40 === 0){
// fill with 50
noStroke();
fill(0,0,255);
ellipse(0,0,15,15);
} else {
// all the otehr times, fill with 255
stroke(0,0,255);
strokeWeight(2);
fill(255);
ellipse(0,0,15,15);
}
}
fill(255);
stroke(0);
circle(0, 0, 2*r);
var x = r * cos(radians(theta));
var y = r * sin(radians(theta));
fill(255, 0, 0);
ellipse (x,y, 40,40);
pop();
theta += 1;
// compute unit circle x and y values rounded to 3 places
var unit_x = round(map(x, -r, r, -1.0, 1.0)<em>1000)/1000; var unit_y = round(map(y, -r, r, -1.0, 1.0)</em>1000)/1000;
translate(200, 220);
for (let x = 0; x &lt;= width-400; x += 20) {
for (let y = 0; y &lt;= height-430; y += 20) {
//if t = 60;
noStroke();
fill(0, 0,255);
ellipse(x, y, 15, 15);
}
}
//blinking to show the hour of the day
blink = blink + 10;
// every 10th time, the condition is true
if (blink % 40 === 0){
// fill with 50
noStroke();
fill(0,0,255);
ellipse(0,0,15,15);
} else {
// all the otehr times, fill with 255
stroke(0,0,255);
strokeWeight(2);
fill(255);
ellipse(0,0,15,15);
}
}

var theta = 0; // angle of rotation (starting)

var r = 150; // radius

var blink = 10;

function setup() {

createCanvas(500, 500);

frameRate(1);

}

function draw() {

background(20);

strokeWeight(0);

push();

translate(250, 250);

fill(255);

stroke(0);

circle(0, 0, 2*r);

var x = r * cos(radians(theta));

var y = r * sin(radians(theta));

fill(255, 0, 0);

ellipse (x,y, 40,40);

pop();

theta += 1;

// compute unit circle x and y values rounded to 3 places

var unit_x = round(map(x, -r, r, -1.0, 1.0)<em>1000)/1000; var unit_y = round(map(y, -r, r, -1.0, 1.0)</em>1000)/1000;

translate(200, 220);

for (let x = 0; x <= width-400; x += 20) {

for (let y = 0; y <= height-430; y += 20) {

//if t = 60;

noStroke();

fill(0, 0,255);

ellipse(x, y, 15, 15);

}

//blinking to show the hour of the day

blink = blink + 10;

// every 10th time, the condition is true

if (blink % 40 === 0){

// fill with 50

noStroke();

fill(0,0,255);

ellipse(0,0,15,15);

} else {

// all the otehr times, fill with 255

stroke(0,0,255);

strokeWeight(2);

fill(255);

ellipse(0,0,15,15);

}

fill(255);

stroke(0);

circle(0, 0, 2*r);

var x = r * cos(radians(theta));

var y = r * sin(radians(theta));

fill(255, 0, 0);

ellipse (x,y, 40,40);

pop();

theta += 1;

// compute unit circle x and y values rounded to 3 places

var unit_x = round(map(x, -r, r, -1.0, 1.0)<em>1000)/1000; var unit_y = round(map(y, -r, r, -1.0, 1.0)</em>1000)/1000;

translate(200, 220);

for (let x = 0; x <= width-400; x += 20) {

for (let y = 0; y <= height-430; y += 20) {

//if t = 60;

noStroke();

fill(0, 0,255);

ellipse(x, y, 15, 15);

}

//blinking to show the hour of the day

blink = blink + 10;

// every 10th time, the condition is true

if (blink % 40 === 0){

// fill with 50

noStroke();

fill(0,0,255);

ellipse(0,0,15,15);

} else {

// all the otehr times, fill with 255

stroke(0,0,255);

strokeWeight(2);

fill(255);

ellipse(0,0,15,15);

}

https://editor.p5js.org/ssahasra/sketches/YVNbtFtzJ

LO-06: Paintings with Randomness

https://dhruvkaran.com/recreating-paintings-with-generative-art/https://dhruvkaran.com/recreating-paintings-with-generative-art/

Taking inspiration from the work of Jackson Pollock, I was interested in finding interesting ways in which artists have applied randomness in generative art, specifically using concepts like the random walk.I stumbled upon a website called Unography Mag where several famous paintings are recreated using randomness principles.

Based on this, artist Dhruv Karan recreated Vincent Van Gogh’s self-portrait is an appropriate example of using randomness in generative art. What I particularly enjoy about this work is that it gradually reveals the full picture, so someone watching it can spend time trying to guess what the picture is and therefore be engaged in the artwork. Applying Brownian motion and Perlin noise, Dhruv Karan used the tracing of the line across the canvas like a digital paintbrush.

It seems like while defining how the random walk of the line will happen, the algorithm uses a certain mapping of color to paint the picture, so a line on it’s a path in a way “deposits” color on the canvas to reveal a part of the painting. He also describes how pixels can be assigned rgb values for this artwork. It reminds me of how pointillism was used in painting, where the smallest unit is a point or pixel.

Looking Outwards 05

Looking Outwards 05: 3D Computer Graphics

https://threejs.org/examples/#webgl_animation_keyframes

For this project, I want to discuss a Javascript library called three.js and projects that use this library to create short animatics, motion experiments and virtual worlds. Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL. This project by Glenn Fox, is a model of a unit of buildings, shops and culture in Tokyo. Fox’s body of work that shows caricature of the build environment. 3D computer graphics have particular file types like .obj that can be created with code. Algorithms are used to create generic shapes that make up the building blocks of the rendered image. A lot of Fox’s work is used in Game Design environments.

Floral Wallpaper

sketch-wallpaper-sanika Download

For my wallpaper assignment, I created a floral wallpaper pattern, using geometric shapes.

https://editor.p5js.org/ssahasra/sketches/9Td-E7s4z

function setup() {
// Create the canvas
createCanvas(1200, 1200);
background(244,235,217);
}
function draw() {
background(244,235,217);
for (var y = 50; y < height; y += 200) {
for (var x = (y/2)-y; x < width; x += 180) {
flower(x+(width/10),y);
}}}
function flower(x,y) {
push();
translate(x,y);
noStroke();
fill(201,157,163);
ellipse(0,0,20,20);
for (let i = 0; i < 20; i ++) {
fill(72,61,63,70);
rect(0, 30, 70, 30);
fill(201,157,163);
ellipse(70, 70, 10, 10);
fill(72,61,63,70);
ellipse(15, 15, 10, 10);
rotate(PI/5);
}
pop();

href=”https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/10/sketch-wallpaper-sanika.js”>sketch-wallpaper-sanika Download