3f:null 40:["$","title",null,{"children":"Assignment #1: The Art of the Grid | Chan Chi Chung 55306483 | Observable"}] 46:T4fd,md`\`\`\`javascript let row = 14, col = 14; let counts = []; let x = 55 ,y= 55; let size = 25; let paddingX = 45, paddingY = 45; let r,g,b; let start=1; function setup() { createCanvas(800, 800); rectMode(CENTER); noStroke(); background(152,163,170); for(let i = 0; i < row; i++){ for(let j = 0; j Warmup assignment\n

The base ver.

sketch.js

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"md`\\`\\`\\`javascript\n\nlet row = 14, col = 14;\nlet counts = [];\nlet x = 55 ,y= 55;\nlet size = 40;\nlet paddingX = 45, paddingY = 45;\nlet r,g,b;\n\nfunction setup() {\n createCanvas(800, 800);\n rectMode(CENTER);\n noStroke();\n background(152,163,170);\n \n for(let i = 0; i < row; i++){\n for(let j = 0; j component.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"md`\\`\\`\\`javascript\n\nclass Cell{\n \n constructor(xPosition, yPosition, size ){\n this.x = xPosition;\n this.y = yPosition;\n this.size = size;\n this.col = [color,color,color,70];\n }\n\n randomMove(){\n this.y+= random(-3,3);\n }\n \n color(r,g,b){\n this.col[0] = r;\n this.col[1] = g;\n this.col[2] = b;\n }\n\n \n render(){\n fill(this.col[0],this.col[1],this.col[2]);\n rect(this.x, this.y, this.size);\n }\n \n}\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"md`

4 : Activate

Mouse right click = ture on/off the artwork motion.

\nI keep random y position, rectangle and gradient color elements and creative some elements for my artwork.\n

\nAlso, I add random size, ellipse, stroke and random color elements in my art work.\n

\nFinaly, this create thinking is come form traffic light.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"md`

sketch.js

component.js

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"md`\\`\\`\\`javascript\n\n class Cell{\n \n constructor(xPosition, yPosition, size ){\n this.x = xPosition;\n this.y = yPosition;\n this.size = size;\n this.col = [color,color,color,70];\n }\n\n randomMove(){\n this.y+= random(-0.5,0.5);\n }\n \n randomSize(){\n this.size += random(-0.3,0.3);\n }\n\n randomColor(r,g,b){\n this.col[0] = r;\n this.col[1] = g;\n this.col[2] = b;\n }\n \n colorStroke(r,g,b){\n this.col[0] = r;\n this.col[1] = g;\n this.col[2] = b;\n }\n \n render(){\n noStroke();\n fill(this.col[0],this.col[1],this.col[2]);\n rect(this.x, this.y, this.size);\n }\n \n renderCenter(){\n noStroke();\n fill(this.col[0],this.col[1],this.col[2]);\n ellipse(this.x, this.y, this.size/2);\n }\n \n renderEllipseStroke(){\n stroke(this.col[0],this.col[1],this.col[2]);\n noFill();\n ellipse(this.x,this.y,this.size*1.6+ 0.03*mouseY);\n ellipse(this.x,this.y,this.size*1.8+0.03*mouseY);\n }\n}\n\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"